/**
 * template-destinations.css  v1.0
 * Tarawell Travels — "Island Destinations" — Jet Black / 24K Gold / Platinum
 * Silver, matched to main.css v6.0.
 *
 * ⚠ Every value below is one of main.css's own custom properties
 *   (var(--color-gold), var(--font-display), var(--spacing-6), etc.).
 *   Nothing here re-declares or duplicates a colour, font or spacing
 *   value — that is main.css's job. This file only arranges main.css's
 *   tokens into this component's layout.
 *
 * REPLACES the previous Bootstrap-carousel template-destinations.css
 * (4-per-slide random rotation, category-badge overlay IIFE). This
 * rebuild deliberately mirrors template-featured-packages.css's grid,
 * rotation and header treatment structurally identically, per
 * instruction that Destinations match Featured Packages' behaviour —
 * only the column semantics differ (see template-destinations.html and
 * js/template-destinations.js).
 *
 * ═══ HTML STRUCTURE (see template-destinations.html) ═══
 *   section#destinations.dst
 *     .dst__inner
 *       .dst__head            → eyebrow / title / lead + progress counter
 *       .dst__stage           → prev arrow | .dst__grid | next arrow
 *         #destinations-grid.dst__grid   ← JS renders 6 cards here:
 *           .dst-card.dst-card--hero          (column 1, full height —
 *                                               rotates through all 47
 *                                               real destinations)
 *           .dst-card.dst-card--cat  × 2      (column 2, stacked halves —
 *                                               rotates through the real
 *                                               destination categories,
 *                                               independently of col 3)
 *           .dst-card.dst-card--sm   × 3      (column 3, stacked thirds —
 *                                               next destinations in
 *                                               sequence, independent of
 *                                               col 2's category)
 *       .dst__mobile-nav       → same two arrows, shown only under 760px
 *       .dst__foot             → "Explore All Destinations" → attr-master.html
 *
 * Grid is the same literal structure as Featured Packages: one large
 * card in column 1, two cards in column 2, three cards in column 3 — six
 * cards, three columns. Gap is 0; a 1px hairline (background showing
 * through a 1px grid gap) is the only seam, not a visual "space" between
 * cards.
 *
 * Every destination card (hero + column 3) is a real <a> to
 * attr-details.html?id={id} and NAVIGATES on click — unlike Featured
 * Packages' small cards, which promote-to-hero instead of navigating.
 * Column 2's category tiles are informational only (no filtered listing
 * page exists yet to link them to).
 *
 * Rotation/autoplay/arrow behaviour all live in
 * js/template-destinations.js — this file is presentation only.
 */

/* ═══════════════════════════════════════════════════════
   SECTION SHELL
════════════════════════════════════════════════════════ */
#destinations.dst {
  position: relative;
  background: var(--bg-secondary);
  padding: var(--spacing-20) 0 var(--spacing-16);
  overflow: hidden;
}
/* Quiet texture only — no glow, no gradient, no motion */
#destinations.dst::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .45;
  background-image: radial-gradient(circle at 1px 1px, rgba(var(--color-gold-rgb), .07) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--color-navy-abyss) 16%, var(--color-navy-abyss) 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, var(--color-navy-abyss) 16%, var(--color-navy-abyss) 78%, transparent);
}
#destinations .dst__inner {
  position: relative; z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, var(--spacing-10));
}

/* ═══════════════════════════════════════════════════════
   HEADER ROW — eyebrow / title / lead centered as a block,
   progress counter centered beneath (same treatment as
   Featured Packages' finalized centered header)
════════════════════════════════════════════════════════ */
#destinations .dst__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-4);
  margin-bottom: clamp(1.75rem, 3.5vw, var(--spacing-10));
}
#destinations .dst__heading { max-width: 46rem; margin: 0 auto; }
#destinations .dst__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-3);
  font-family: var(--font-label);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-gold);
  margin: 0 0 var(--spacing-3);
}
#destinations .dst__eyebrow::before,
#destinations .dst__eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--border-gold); }
#destinations .dst__title {
  font-family: var(--font-display); font-weight: var(--font-weight-normal);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
  line-height: var(--leading-tight); letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-3);
}
#destinations .dst__title em { font-style: normal; color: var(--text-gold); }
#destinations .dst__lead {
  font-family: var(--font-elegant); font-style: italic;
  font-size: clamp(var(--text-md), 1.3vw, var(--text-lg));
  color: var(--text-secondary); line-height: var(--leading-relaxed);
  max-width: 46rem; margin: 0 auto;
}
/* Small italic note under the lead, same treatment as Featured Packages'
   and template-about-srilanka.html's equivalent line. */
#destinations .dst__note {
  font-family: var(--font-elegant); font-style: italic;
  font-size: var(--text-sm); color: var(--text-muted);
  max-width: 38rem; margin: var(--spacing-2) auto 0;
}

#destinations .dst__controls { display: flex; align-items: center; justify-content: center; }
#destinations .dst__progress {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--ls-wide); color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: center;
}
#destinations .dst__progress b { color: var(--color-gold-light); font-weight: var(--font-weight-semibold); }
#destinations .dst__progress-rail {
  width: 74px; height: 2px; background: var(--border-primary);
  margin: var(--spacing-1-5) auto 0; position: relative; overflow: hidden; border-radius: var(--radius-full);
}
#destinations .dst__progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--color-gold); border-radius: var(--radius-full);
  transition: width .5s cubic-bezier(.65,0,.35,1), left .5s cubic-bezier(.65,0,.35,1);
}

/* ═══════════════════════════════════════════════════════
   STAGE — flanking prev/next handles either side of the grid
════════════════════════════════════════════════════════ */
#destinations .dst__stage { display: flex; align-items: stretch; gap: clamp(.75rem, 2vw, var(--spacing-6)); }

#destinations .dst__arrow {
  flex: none; align-self: center;
  width: 52px; height: 52px; border-radius: var(--radius-full);
  border: 1px solid var(--border-gold);
  background: transparent; color: var(--color-gold-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: var(--transition-base);
}
#destinations .dst__arrow svg { width: 17px; height: 17px; }
#destinations .dst__arrow:hover { background: var(--color-gold-bg-hover); border-color: var(--color-gold); transform: translateY(-1px); }
#destinations .dst__arrow:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
#destinations .dst__arrow:active { transform: translateY(0) scale(.95); }

/* ═══════════════════════════════════════════════════════
   GRID — literal 1 (hero) + 2 (category) + 3 (destination) = 6 cards
   Zero gap between cards: the 1px "gap" is filled by the grid's own
   background colour, rendering as a hairline seam, not a space.
════════════════════════════════════════════════════════ */
#destinations .dst__grid {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: repeat(6, 108px);
  gap: 1px;
  background: var(--border-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Directional slide: every card moves and fades together on each
   rotation, all in the same direction, so the whole set genuinely
   slides rather than just fading in place — identical mechanic to
   Featured Packages. Default direction is left (autoplay and "next"
   read as moving forward through the island); the prev arrow reverses
   it via the .dst__grid--dir-prev modifier JS toggles before each
   transition. Eased with main.css's own "premium" curve. */
#destinations .dst__grid .dst-card { transition: var(--transition-premium); }
#destinations .dst__grid.is-rotating .dst-card { opacity: 0; transform: translateX(-26px) scale(.97); }
#destinations .dst__grid.is-rotating.dst__grid--dir-prev .dst-card { transform: translateX(26px) scale(.97); }
/* Same easing curve as --transition-premium, spelled out because CSS
   animation-timing-function can't consume a var() that already bundles
   duration + property, only a bare easing function. */
#destinations .dst__grid:not(.is-rotating) .dst-card { animation: dst-card-slide-left .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
#destinations .dst__grid:not(.is-rotating).dst__grid--dir-prev .dst-card { animation-name: dst-card-slide-right; }
#destinations .dst__grid:not(.is-rotating) .dst-card--hero { animation-delay: 0ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-2 { animation-delay: 40ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-3 { animation-delay: 80ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-4 { animation-delay: 120ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-5 { animation-delay: 160ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-6 { animation-delay: 200ms; }
/* "Slide left": new content enters FROM the right and settles at 0 —
   the eye reads that as the whole row travelling leftward. */
@keyframes dst-card-slide-left { from { opacity: 0; transform: translateX(26px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes dst-card-slide-right { from { opacity: 0; transform: translateX(-26px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }

#destinations .dst__loading {
  grid-column: 1 / -1; grid-row: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3);
  background: var(--color-navy-card); color: var(--text-muted);
  font-family: var(--font-primary); font-size: var(--text-sm); letter-spacing: var(--ls-wide);
}
#destinations .dst__spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-primary); border-top-color: var(--color-gold);
  animation: dst-spin .8s linear infinite;
}
@keyframes dst-spin { to { transform: rotate(360deg); } }

#destinations .dst-card {
  position: relative; display: block; width: 100%; height: 100%; padding: 0;
  background: var(--color-navy-card); overflow: hidden;
  border: 0; margin: 0; text-align: left; color: inherit;
  font-family: inherit; text-decoration: none;
}
#destinations .dst-card__art { position: absolute; inset: 0; background: var(--art-bg, var(--color-navy-mid)); }
#destinations .dst-card__art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s ease-out;
}
#destinations .dst-card:hover .dst-card__art img { transform: scale(1.05); }
#destinations .dst-card__mono {
  position: absolute; right: -.1em; bottom: -.22em;
  font-family: var(--font-display); font-size: 6.5rem; line-height: 1;
  color: rgba(var(--color-white-rgb),.05); pointer-events: none; user-select: none;
}
#destinations .dst-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--color-navy-rgb),0) 32%, rgba(var(--color-navy-rgb),.88) 100%); }

#destinations .dst-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--spacing-3) var(--spacing-4); }
#destinations .dst-card__name { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--text-md); color: var(--text-primary); line-height: var(--leading-snug); }
#destinations .dst-card__sub { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-gold-light); margin-top: var(--spacing-1); }

#destinations .dst-card::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid transparent; transition: border-color .2s ease; }
#destinations a.dst-card:hover::after { border-color: var(--border-gold); }
#destinations .dst-card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }

/* Top-of-card caption — every non-hero card carries one (category name
   on destination cards, "Category" label on category tiles), so every
   card has a header before you ever hover it. */
#destinations .dst-card__kicker {
  position: absolute; top: var(--spacing-2); left: var(--spacing-3); z-index: 2;
  font-family: var(--font-label); font-size: 0.58rem; font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-gold-light);
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--border-gold);
  transition: var(--transition-elegant);
}
#destinations a.dst-card:not(.dst-card--hero):hover .dst-card__kicker { color: var(--color-gold); border-bottom-color: var(--color-gold); }

/* Destination cards (hero + column 3) are real links to
   attr-details.html?id=… — a gentle lift + brighter title on hover
   signals that they navigate. Category tiles (column 2) are
   presentational only and get no hover affordance. */
#destinations a.dst-card { cursor: pointer; }
#destinations a.dst-card:not(.dst-card--hero) { transition: var(--transition-elegant); }
#destinations a.dst-card:not(.dst-card--hero):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); z-index: 4; }
#destinations a.dst-card:not(.dst-card--hero) .dst-card__name { transition: color .25s ease; }
#destinations a.dst-card:not(.dst-card--hero):hover .dst-card__name { color: var(--color-gold-light); }

/* ── Hero card (column 1, full height — currently-featured destination) ──
   Image-on-top / text-on-solid-background-below, NOT text overlaid on
   the image. An earlier overlay version (image behind, gradient scrim,
   text absolutely positioned on top) failed contrast badly on brighter
   real photos (sky, water, open grassland) — the scrim only darkens the
   bottom of the card, and a real full-length destination description
   pushed the chip/title up into the un-scrimmed bright region, reading
   as barely-visible ghost text over the photo. Splitting the card into
   a fixed-height image panel and a solid var(--color-navy-card) text
   panel below guarantees full contrast for every one of the 47 real
   destination photos, regardless of how bright or how busy that photo
   is — found and fixed live, from a screenshot of the real deployed
   page (Udawalawe National Park's daytime safari photo). */
#destinations .dst-card--hero {
  grid-column: 1; grid-row: 1 / -1;
  display: flex; flex-direction: column;
}
#destinations .dst-card--hero .dst-card__art {
  position: relative; flex: none;
  height: clamp(9.5rem, 20vw, 14rem);
}
/* No contrast job left to do — text no longer sits on the image — so
   this is just a soft vignette blending the photo into the panel below. */
#destinations .dst-card--hero .dst-card__scrim {
  background: linear-gradient(180deg, rgba(var(--color-navy-rgb),0) 70%, rgba(var(--color-navy-rgb),.35) 100%);
}
#destinations .dst-card--hero .dst-card__mono { display: none; }
/* Slow continuous zoom on the featured photo — a subtle cinematic
   "premium" motion, always running (not just on hover), so the hero
   never sits static while it's the one in the spotlight. Respects
   prefers-reduced-motion via the existing blanket rule further down. */
#destinations .dst-card--hero .dst-card__art img {
  animation: dst-hero-kenburns 16s ease-in-out infinite alternate;
}
@keyframes dst-hero-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
#destinations .dst-card--hero .dst-card__body {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--color-navy-card);
  padding: clamp(1.1rem, 2vw, var(--spacing-6));
}
#destinations .dst-card--hero .dst-card__chip-row { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-2); }
#destinations .dst-card--hero .dst-card__chip {
  font-family: var(--font-label); font-size: 0.6rem; font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-gold-light); border: 1px solid var(--border-gold); border-radius: var(--radius-full);
  padding: .3rem .65rem;
}
#destinations .dst-card--hero .dst-card__name {
  font-family: var(--font-display); font-weight: var(--font-weight-normal);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  line-height: var(--leading-tight); margin-bottom: var(--spacing-2);
}
/* Highlight badges — the destination's own real "things to see", not
   invented copy — fill out the card with more of what's actually in
   sri-lanka-tour-attraction.json instead of leaving empty space below
   a short description. */
#destinations .dst-card--hero .dst-card__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-1-5); margin-bottom: var(--spacing-3); }
#destinations .dst-card--hero .dst-card__tag {
  font-family: var(--font-primary); font-size: 0.68rem; font-weight: var(--font-weight-medium);
  color: var(--text-secondary); background: var(--color-navy-mid);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  padding: .25rem .55rem; line-height: 1.2;
}
#destinations .dst-card--hero .dst-card__lead {
  font-family: var(--font-primary); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--text-secondary); max-width: 30rem; margin: 0 0 var(--spacing-3);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
#destinations .dst-card--hero .dst-card__meta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-6); margin-bottom: var(--spacing-4); }
#destinations .dst-card--hero .dst-card__meta { display: flex; flex-direction: column; gap: .15rem; }
#destinations .dst-card--hero .dst-card__meta-label { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
#destinations .dst-card--hero .dst-card__meta-value { font-size: var(--text-sm); color: var(--text-primary); }
#destinations .dst-card--hero .dst-card__cta {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius-full);
  background: var(--color-gold); color: var(--color-navy-abyss);
  font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--shadow-gold);
  transition: var(--transition-base);
}
#destinations .dst-card--hero .dst-card__cta svg { width: 12px; height: 12px; transition: transform .2s ease; }
#destinations .dst-card--hero:hover .dst-card__cta { transform: translateY(-2px); box-shadow: var(--shadow-gold-lg); }
#destinations .dst-card--hero:hover .dst-card__cta svg { transform: translateX(3px); }

/* ── Column 2 — category tiles (two, stacked halves, independent rotation) ── */
#destinations .dst-card--cat { grid-column: 2; cursor: default; }
#destinations .dst-card--cat.dst-card--slot-2 { grid-row: 1 / 4; }
#destinations .dst-card--cat.dst-card--slot-3 { grid-row: 4 / -1; }
#destinations .dst-card--cat .dst-card__name { font-family: var(--font-display); font-weight: var(--font-weight-normal); font-size: var(--text-xl); }
#destinations .dst-card--cat .dst-card__mono { font-size: 5.5rem; }
#destinations .dst-card--cat .dst-card__body { padding: var(--spacing-3) var(--spacing-4); }
#destinations .dst-card--cat .dst-card__sub { color: var(--color-gold-pale); opacity: .85; margin-top: var(--spacing-1); }
#destinations .dst-card--cat::after { display: none; }

/* ── Column 3 — destination cards (three, stacked thirds, sequential, link to detail) ── */
#destinations .dst-card--sm { grid-column: 3; }
#destinations .dst-card--sm.dst-card--slot-4 { grid-row: 1 / 3; }
#destinations .dst-card--sm.dst-card--slot-5 { grid-row: 3 / 5; }
#destinations .dst-card--sm.dst-card--slot-6 { grid-row: 5 / -1; }
#destinations .dst-card--sm .dst-card__body { padding: var(--spacing-2) var(--spacing-3); }
#destinations .dst-card--sm .dst-card__name { font-size: var(--text-sm); }
#destinations .dst-card--sm .dst-card__mono { font-size: 3.6rem; }

/* ═══════════════════════════════════════════════════════
   MOBILE NAV — hidden on desktop; .dst__stage collapses to a
   single column below 760px, so the flanking arrows move here
════════════════════════════════════════════════════════ */
#destinations .dst__mobile-nav { display: none; justify-content: center; gap: var(--spacing-4); margin-top: var(--spacing-4); }

/* ═══════════════════════════════════════════════════════
   FOOT — "Explore All Destinations" CTA
════════════════════════════════════════════════════════ */
#destinations .dst__foot { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, var(--spacing-10)); }
#destinations .dst__all {
  display: inline-flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-8); border-radius: var(--radius-full);
  border: 1px solid var(--border-primary);
  font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--text-sm);
  letter-spacing: var(--ls-normal); color: var(--text-primary); text-decoration: none;
  transition: var(--transition-base);
}
#destinations .dst__all svg { width: 13px; height: 13px; color: var(--color-gold); transition: transform .2s ease; }
#destinations .dst__all:hover { border-color: var(--color-gold); color: var(--color-gold-light); background: var(--color-gold-bg); }
#destinations .dst__all:hover svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  #destinations .dst__grid { grid-template-rows: repeat(6, 92px); }
  #destinations .dst__arrow { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  #destinations .dst__stage { flex-direction: column; }
  #destinations .dst__stage > .dst__arrow { display: none; }
  #destinations .dst__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  #destinations .dst-card--cat { grid-column: 1; grid-row: auto !important; min-height: 8.5rem; }
  #destinations .dst-card--sm { grid-column: 1; grid-row: auto !important; min-height: 6rem; }
  #destinations .dst__mobile-nav { display: flex; }

  /* Hero is already image-top/text-bottom by default (see above); on
     mobile the grid cell is auto-height rather than a fixed 648px
     track, so the text panel can simply grow with its content instead
     of needing the overflow:hidden safety net desktop relies on. */
  #destinations .dst-card--hero { grid-column: 1; grid-row: auto; min-height: 0; }
  #destinations .dst-card--hero .dst-card__art { height: 14rem; }
  #destinations .dst-card--hero .dst-card__body { overflow: visible; }
  #destinations .dst-card--hero .dst-card__lead { -webkit-line-clamp: unset; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  #destinations .dst-card__art img,
  #destinations .dst__grid,
  #destinations .dst__progress-fill,
  #destinations .dst__arrow,
  #destinations .dst__spinner { transition: none; animation: none; }
}