/**
 * template-destinations.css  v2.0
 * Samora Ceylon — "Island Destinations" — Emerald Daylight, emerald and
 * metallic gold, matched to template-why-book-with-us.css v11.0.
 *
 * Every value is a main.css custom property; nothing here redeclares a
 * colour, font or spacing token. Markup comes from
 * js/template-destinations.js (unchanged):
 *   .dst-card--hero       column 1: photo on top, emerald panel below
 *   .dst-card--cat  x 2   column 2: category cards, full photo
 *   .dst-card--sm   x 3   column 3: destination cards, full photo
 * Rotation and autoplay live in the JS.
 */

/* ═══════════════════════════════════════════════════════
   #destinationsTION SHELL
════════════════════════════════════════════════════════ */
#destinations.dst {
  position: relative;
  background: var(--bg-primary);
  padding: var(--spacing-24) 0 var(--spacing-20);
  overflow: hidden;
}
#destinations.dst::before {
  content: ''; position: absolute; top: -10%; left: -8%; width: 44rem; height: 44rem;
  background: radial-gradient(circle, var(--color-gold-glow-sm), transparent 70%);
  pointer-events: none; opacity: .5; z-index: 0;
}
#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
════════════════════════════════════════════════════════ */
#destinations .dst__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-10);
}
#destinations .dst__heading { max-width: 46rem; margin: 0 auto; }
#destinations .dst__eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  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(--color-gold);
  margin: 0 0 var(--spacing-4);
}
#destinations .dst__eyebrow::before,
#destinations .dst__eyebrow::after { content: ''; width: 22px; height: 1px; background: var(--border-gold); }
#destinations .dst__title {
  font-family: var(--font-display); font-weight: var(--font-weight-normal);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: var(--leading-tight);
  color: var(--text-white);
  margin: 0 0 var(--spacing-5);
  text-wrap: balance;
}
#destinations .dst__title em { font-style: italic; font-family: var(--font-elegant); color: var(--color-gold-light); font-weight: var(--font-weight-medium); }
#destinations .dst__lead {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  color: var(--text-secondary); line-height: var(--leading-relaxed);
  max-width: 44rem; margin: 0 auto;
}
#destinations .dst__note {
  font-family: var(--font-elegant); font-style: italic;
  font-size: var(--text-base); color: var(--text-muted);
  max-width: 40rem; margin: var(--spacing-3) auto 0;
}

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

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

#destinations .dst__arrow {
  flex: none; align-self: center;
  width: 46px; height: 46px; border-radius: var(--radius-full);
  border: 1px solid rgba(var(--er-gold-bright-rgb), .6);
  background: var(--gradient-emerald-rich); color: var(--er-gold-bright);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 4px 12px rgba(var(--er-scrim-rgb), .2);
  transition: transform 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
#destinations .dst__arrow svg { width: 17px; height: 17px; }
#destinations .dst__arrow:hover { background: var(--gradient-gold-metal); color: var(--er-emerald-night); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--er-gold-bright-rgb), .4); }
#destinations .dst__arrow:focus-visible { outline: 2px solid var(--er-gold-antique); outline-offset: 3px; }
#destinations .dst__arrow:active { transform: scale(.95); }

/* ═══════════════════════════════════════════════════════
   GRID — 1 (hero) + 2 (medium) + 3 (small) = 6 separate cards
════════════════════════════════════════════════════════ */
#destinations .dst__grid {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: 2.1fr 1.25fr 1fr;
  grid-template-rows: repeat(6, 1fr);
  gap: var(--spacing-3-5, 14px);
  height: 660px;
}
/* Rotation: every card slides and fades together, in the arrow's direction */
#destinations .dst__grid .dst-card { transition: opacity 480ms ease, transform 480ms cubic-bezier(.16,1,.3,1), box-shadow 500ms cubic-bezier(.16,1,.3,1); }
#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); }
#destinations .dst__grid:not(.is-rotating) .dst-card { animation: dst-card-slide-left .7s cubic-bezier(.16,1,.3,1) 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: 70ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-3 { animation-delay: 140ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-4 { animation-delay: 210ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-5 { animation-delay: 280ms; }
#destinations .dst__grid:not(.is-rotating) .dst-card--slot-6 { animation-delay: 350ms; }
@keyframes dst-card-slide-left { from { opacity: 0; transform: translateX(30px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes dst-card-slide-right { from { opacity: 0; transform: translateX(-30px) 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(--gradient-emerald-rich); color: rgba(255, 255, 255, .85);
  border-radius: var(--radius-lg);
  font-family: var(--font-primary); font-size: var(--text-sm); letter-spacing: var(--ls-wide);
}
#destinations .dst__loading a { color: var(--er-gold-bright); }
#destinations .dst__spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--er-gold-bright);
  animation: dst-spin .8s linear infinite;
}
@keyframes dst-spin { to { transform: rotate(360deg); } }

/* ── Every card: rounded, gold edge, deep emerald frame ── */
#destinations .dst-card {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  background: var(--er-emerald-deep); overflow: hidden;
  border: 1px solid rgba(var(--er-gold-bright-rgb), .45);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(var(--er-scrim-rgb), .22);
  cursor: pointer; text-align: left; color: inherit; font-family: inherit; text-decoration: none;
}
#destinations .dst-card__art { position: absolute; inset: 0; background: var(--er-emerald-deep); overflow: hidden; }
#destinations .dst-card__art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
#destinations .dst-card:hover .dst-card__art img { transform: scale(1.06); }
#destinations .dst-card__mono { display: none; }

/* Side cards: full photo, emerald fade at the bottom */
#destinations .dst-card__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--er-scrim-rgb), .96) 0%, rgba(var(--er-scrim-rgb), .85) 28%, rgba(var(--er-emerald-rgb), .45) 50%, rgba(var(--er-emerald-rgb), 0) 70%);
}
/* gold line along the bottom edge, stretches on hover */
#destinations .dst-card:not(.dst-card--hero)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4;
  background: var(--gradient-gold-metal); transform: scaleX(.25); transform-origin: left;
  transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
#destinations .dst-card:not(.dst-card--hero):hover::after { transform: scaleX(1); }
#destinations .dst-card:not(.dst-card--hero):hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(var(--er-scrim-rgb), .3); z-index: 4; }
#destinations .dst-card:focus-visible { outline: 2px solid var(--er-gold-bright); outline-offset: 3px; }

#destinations .dst-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--spacing-3-5, 14px) var(--spacing-4) 15px; }
#destinations .dst-card__name {
  font-family: var(--font-display); font-weight: var(--font-weight-semibold);
  font-size: 1.25rem; line-height: 1.15; margin: 0;
  background: var(--gradient-gold-metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
#destinations .dst-card__sub {
  font-family: var(--font-label); font-size: 9.5px; font-weight: var(--font-weight-semibold);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--er-gold-soft); margin-top: 5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Category caption: small metallic gold pill, top left */
#destinations .dst-card__kicker {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-family: var(--font-label); font-size: 9px; font-weight: var(--font-weight-semibold);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--er-emerald-night);
  background: var(--gradient-gold-metal);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(var(--er-scrim-rgb), .3);
  max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Hero card: photo on top, emerald panel below ── */
#destinations .dst-card--hero {
  grid-column: 1; grid-row: 1 / -1; cursor: default;
  display: flex; flex-direction: column;
}
#destinations .dst-card--hero .dst-card__art { position: relative; inset: auto; flex: 0 0 46%; }
#destinations .dst-card--hero .dst-card__art::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gradient-gold-metal); z-index: 3; }
#destinations .dst-card--hero .dst-card__art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(0deg, rgba(var(--er-scrim-rgb), .6), transparent); pointer-events: none; z-index: 2; }
#destinations .dst-card--hero .dst-card__art img { animation: dst-hero-drift 9s linear forwards; }
@keyframes dst-hero-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
#destinations .dst-card--hero .dst-card__scrim { display: none; }
#destinations .dst-card--hero .dst-card__body {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--spacing-5) var(--spacing-7, 28px) var(--spacing-5);
  background: var(--gradient-emerald-rich);
}
#destinations .dst-card--hero .dst-card__body::before { content: ''; position: absolute; top: -40%; right: -20%; width: 70%; height: 140%; background: radial-gradient(circle, rgba(var(--er-gold-bright-rgb), .14), transparent 65%); pointer-events: none; }
#destinations .dst-card--hero .dst-card__body > * { position: relative; }
#destinations .dst-card--hero .dst-card__chip-row { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-2-5, 10px); }
#destinations .dst-card--hero .dst-card__chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-label); font-size: 10px; font-weight: var(--font-weight-semibold);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--er-gold-soft);
}
#destinations .dst-card--hero .dst-card__chip::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--gradient-gold-metal); box-shadow: 0 0 6px rgba(var(--er-gold-bright-rgb), .6); }
#destinations .dst-card--hero .dst-card__name {
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  line-height: 1.1; margin-bottom: var(--spacing-2); padding-bottom: 2px;
  filter: none; text-wrap: balance;
}
#destinations .dst-card--hero .dst-card__lead {
  font-family: var(--font-primary); font-size: .92rem; line-height: 1.65;
  color: rgba(255, 255, 255, .9); max-width: 58ch; margin: 0 0 var(--spacing-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#destinations .dst-card--hero .dst-card__meta-row {
  display: flex; flex-wrap: wrap; gap: var(--spacing-6);
  margin: auto 0 var(--spacing-4); padding-top: var(--spacing-3);
  border-top: 1px solid rgba(var(--er-gold-bright-rgb), .22);
}
#destinations .dst-card--hero .dst-card__meta { display: flex; flex-direction: column; gap: .2rem; }
#destinations .dst-card--hero .dst-card__meta-label { font-family: var(--font-label); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
#destinations .dst-card--hero .dst-card__meta-value { font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--er-gold-soft); }
#destinations .dst-card--hero .dst-card__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: 11px 24px; border-radius: var(--radius-full);
  background: var(--gradient-gold-metal); color: var(--er-emerald-night);
  font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(var(--er-scrim-rgb), .35);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
#destinations .dst-card--hero .dst-card__cta svg { width: 12px; height: 12px; transition: transform .2s ease; }
#destinations .dst-card--hero .dst-card__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--er-gold-bright-rgb), .4); }
#destinations .dst-card--hero .dst-card__cta:hover svg { transform: translateX(3px); }
#destinations .dst-card--hero:hover .dst-card__art img { transform: none; }

/* ── Column 2: two cards, column 3: three cards ── */
#destinations .dst-card--cat { grid-column: 2; }
#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--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__name { font-size: 1.12rem; }

/* ═══════════════════════════════════════════════════════
   MOBILE NAV + FOOT
════════════════════════════════════════════════════════ */
#destinations .dst__mobile-nav { display: none; justify-content: center; gap: var(--spacing-4); margin-top: var(--spacing-5); }

#destinations .dst__foot { display: flex; justify-content: center; margin-top: var(--spacing-10); }
#destinations .dst__all {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius-full);
  border: 1px solid var(--border-gold);
  font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--text-sm);
  color: var(--color-gold-light); text-decoration: none;
  transition: var(--transition-base);
}
#destinations .dst__all svg { width: 13px; height: 13px; transition: transform .2s ease; }
#destinations .dst__all:hover { background: var(--color-gold-bg); }
#destinations .dst__all:hover svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1200px) { #destinations .dst__grid { height: 600px; } }
@media (max-width: 992px) {
  #destinations .dst__stage > .dst__arrow { display: none; }
  #destinations .dst__mobile-nav { display: flex; }
  #destinations .dst__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  #destinations .dst-card--hero { grid-column: 1 / -1; grid-row: auto; }
  #destinations .dst-card--hero .dst-card__art { flex: none; aspect-ratio: 16 / 10; }
  #destinations .dst-card--cat, #destinations .dst-card--sm { grid-column: auto; grid-row: auto !important; aspect-ratio: 4 / 3.4; height: auto; }
  #destinations .dst-card--sm.dst-card--slot-6 { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
}
@media (max-width: 576px) {
  #destinations.dst { padding: var(--spacing-16) 0; }
  #destinations .dst-card--hero .dst-card__body { padding: var(--spacing-4); }
  #destinations .dst-card--hero .dst-card__meta-row { gap: var(--spacing-4); }
  #destinations .dst-card__body { padding: 10px 12px 12px; }
  #destinations .dst-card__name, #destinations .dst-card--sm .dst-card__name { font-size: 1.05rem; }
  #destinations .dst-card__kicker { font-size: 8px; padding: 3px 8px; }
}

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

/* Destinations extras */
#destinations .dst-card--hero .dst-card__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
#destinations .dst-card--hero .dst-card__tag {
  font-family: var(--font-primary); font-size: .76rem; font-weight: var(--font-weight-semibold);
  color: var(--er-gold-soft); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(var(--er-gold-bright-rgb), .4); border-radius: var(--radius-full);
  padding: 4px 11px;
}
#destinations .dst-card--hero { cursor: pointer; }
#destinations .dst-card--hero .dst-card__lead { -webkit-line-clamp: 2; }
#destinations .dst-card--cat { cursor: default; }
#destinations .dst-card--cat .dst-card__name { font-size: 1.35rem; }