/**
 * template-featured-packages.css  v14.0
 * Finwin Travels — "Signature Collection" — 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 v13.1: that file was the pre-rebrand "Ivory / White Theme"
 * draft (see its own header comment) — it was never restyled when the
 * rest of the site moved to the Jet Black / Gold / Platinum system, so
 * it was rendering with dark text on a near-black background. This
 * rebuild also drops v13.1's glow/orb/shimmer decoration entirely:
 * main.css documents itself as a flat-fill, thin-border system with no
 * gradients or glows, and the sitewide v11 header/footer rebuild
 * already established that restraint — this file now matches it.
 *
 * ═══ HTML STRUCTURE (see template-featured-packages.html) ═══
 *   section#featuredPackages.fp
 *     .fp__inner
 *       .fp__head            → eyebrow / title / lead + progress counter
 *       .fp__stage           → prev arrow | .fp__grid | next arrow
 *         #featured-packages-grid.fp__grid   ← JS renders 6 cards here:
 *           .fp-card.fp-card--hero            (column 1, full height)
 *           .fp-card.fp-card--med  × 2        (column 2, stacked halves)
 *           .fp-card.fp-card--sm   × 3        (column 3, stacked thirds)
 *       .fp__mobile-nav       → same two arrows, shown only under 760px
 *       .fp__foot             → "Explore All Journeys" → package-master.html
 *
 * Grid is the literal structure the design calls for: 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.
 *
 * Rotation/promote-to-hero/autoplay/arrow behaviour all live in
 * js/template-featured-packages.js — this file is presentation only.
 */

/* ═══════════════════════════════════════════════════════
   SECTION SHELL
════════════════════════════════════════════════════════ */
#featuredPackages.fp {
  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 */
#featuredPackages.fp::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, #000 16%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
}
#featuredPackages .fp__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
════════════════════════════════════════════════════════ */
#featuredPackages .fp__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));
}
#featuredPackages .fp__heading { max-width: 46rem; margin: 0 auto; }
#featuredPackages .fp__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);
}
#featuredPackages .fp__eyebrow::before,
#featuredPackages .fp__eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--border-gold); }
#featuredPackages .fp__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);
}
#featuredPackages .fp__title em { font-style: normal; color: var(--text-gold); }
#featuredPackages .fp__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: 42rem; margin: 0 auto;
}
/* Small italic note under the lead, same treatment as the equivalent
   line in template-about-srilanka.html ("Watch each card cycle
   through..."), telling the visitor what the grid below actually does. */
#featuredPackages .fp__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;
}

#featuredPackages .fp__controls { display: flex; align-items: center; justify-content: center; }
#featuredPackages .fp__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;
}
#featuredPackages .fp__progress b { color: var(--color-gold-light); font-weight: var(--font-weight-semibold); }
#featuredPackages .fp__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);
}
#featuredPackages .fp__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
════════════════════════════════════════════════════════ */
#featuredPackages .fp__stage { display: flex; align-items: stretch; gap: clamp(.75rem, 2vw, var(--spacing-6)); }

#featuredPackages .fp__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);
}
#featuredPackages .fp__arrow svg { width: 17px; height: 17px; }
#featuredPackages .fp__arrow:hover { background: var(--color-gold-bg-hover); border-color: var(--color-gold); transform: translateY(-1px); }
#featuredPackages .fp__arrow:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
#featuredPackages .fp__arrow:active { transform: translateY(0) scale(.95); }

/* ═══════════════════════════════════════════════════════
   GRID — literal 1 (hero) + 2 (medium) + 3 (small) = 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.
════════════════════════════════════════════════════════ */
#featuredPackages .fp__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. Default direction is left
   (autoplay, "next", and promoting a card to hero all read as moving
   forward through the collection); the prev arrow reverses it — old
   content exits toward where you came from, new content enters from
   the opposite side — via the .fp__grid--dir-prev modifier JS toggles
   before each transition. Eased with main.css's own "premium" curve. */
#featuredPackages .fp__grid .fp-card { transition: var(--transition-premium); }
#featuredPackages .fp__grid.is-rotating .fp-card { opacity: 0; transform: translateX(-26px) scale(.97); }
#featuredPackages .fp__grid.is-rotating.fp__grid--dir-prev .fp-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. */
#featuredPackages .fp__grid:not(.is-rotating) .fp-card { animation: fp-card-slide-left .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards; }
#featuredPackages .fp__grid:not(.is-rotating).fp__grid--dir-prev .fp-card { animation-name: fp-card-slide-right; }
#featuredPackages .fp__grid:not(.is-rotating) .fp-card--hero { animation-delay: 0ms; }
#featuredPackages .fp__grid:not(.is-rotating) .fp-card--slot-2 { animation-delay: 40ms; }
#featuredPackages .fp__grid:not(.is-rotating) .fp-card--slot-3 { animation-delay: 80ms; }
#featuredPackages .fp__grid:not(.is-rotating) .fp-card--slot-4 { animation-delay: 120ms; }
#featuredPackages .fp__grid:not(.is-rotating) .fp-card--slot-5 { animation-delay: 160ms; }
#featuredPackages .fp__grid:not(.is-rotating) .fp-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 fp-card-slide-left { from { opacity: 0; transform: translateX(26px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes fp-card-slide-right { from { opacity: 0; transform: translateX(-26px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }

#featuredPackages .fp__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);
}
#featuredPackages .fp__spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border-primary); border-top-color: var(--color-gold);
  animation: fp-spin .8s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

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

#featuredPackages .fp-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--spacing-3) var(--spacing-4); }
#featuredPackages .fp-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); }
#featuredPackages .fp-card__days { 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); }

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

/* Top-of-card category caption — medium/small cards only (the hero
   already carries a full chip row). Gives every card a header before
   you ever hover it; the lift + lighten below is the "premium" part. */
#featuredPackages .fp-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);
}
#featuredPackages .fp-card:not(.fp-card--hero):hover .fp-card__kicker { color: var(--color-gold); border-bottom-color: var(--color-gold); }

/* Non-hero cards are buttons that promote a package to the hero slot —
   a gentle lift + brighter title on hover signals that affordance. */
#featuredPackages .fp-card:not(.fp-card--hero) { transition: var(--transition-elegant); }
#featuredPackages .fp-card:not(.fp-card--hero):hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); z-index: 4; }
#featuredPackages .fp-card:not(.fp-card--hero) .fp-card__name { transition: color .25s ease; }
#featuredPackages .fp-card:not(.fp-card--hero):hover .fp-card__name { color: var(--color-gold-light); }

/* ── Hero card (column 1, full height — "display all info") ── */
#featuredPackages .fp-card--hero { grid-column: 1; grid-row: 1 / -1; cursor: default; }
#featuredPackages .fp-card--hero .fp-card__body { padding: clamp(1.3rem, 2.3vw, var(--spacing-8)); }
#featuredPackages .fp-card--hero .fp-card__cat-row { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
#featuredPackages .fp-card--hero .fp-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;
}
#featuredPackages .fp-card--hero .fp-card__name {
  font-family: var(--font-display); font-weight: var(--font-weight-normal);
  font-size: clamp(var(--text-2xl), 2.3vw, var(--text-4xl));
  line-height: var(--leading-tight); margin-bottom: var(--spacing-2);
}
#featuredPackages .fp-card--hero .fp-card__subtitle {
  font-family: var(--font-elegant); font-style: italic; font-size: var(--text-md);
  color: var(--color-gold-pale); margin-bottom: var(--spacing-3);
}
#featuredPackages .fp-card--hero .fp-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-4);
}
#featuredPackages .fp-card--hero .fp-card__meta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-6); margin-bottom: var(--spacing-5); }
#featuredPackages .fp-card--hero .fp-card__meta { display: flex; flex-direction: column; gap: .15rem; }
#featuredPackages .fp-card--hero .fp-card__meta-label { font-family: var(--font-label); font-size: 0.58rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
#featuredPackages .fp-card--hero .fp-card__meta-value { font-size: var(--text-sm); color: var(--text-primary); }
#featuredPackages .fp-card--hero .fp-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);
}
#featuredPackages .fp-card--hero .fp-card__cta svg { width: 12px; height: 12px; transition: transform .2s ease; }
#featuredPackages .fp-card--hero .fp-card__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold-lg); }
#featuredPackages .fp-card--hero .fp-card__cta:hover svg { transform: translateX(3px); }
#featuredPackages .fp-card--hero .fp-card__mono { font-size: 11rem; }

/* ── Medium cards (column 2 — two, stacked halves) ── */
#featuredPackages .fp-card--med { grid-column: 2; }
#featuredPackages .fp-card--med.fp-card--slot-2 { grid-row: 1 / 4; }
#featuredPackages .fp-card--med.fp-card--slot-3 { grid-row: 4 / -1; }
#featuredPackages .fp-card--med .fp-card__name { font-size: var(--text-lg); }
#featuredPackages .fp-card--med .fp-card__mono { font-size: 5.5rem; }

/* ── Small cards (column 3 — three, stacked thirds) ── */
#featuredPackages .fp-card--sm { grid-column: 3; }
#featuredPackages .fp-card--sm.fp-card--slot-4 { grid-row: 1 / 3; }
#featuredPackages .fp-card--sm.fp-card--slot-5 { grid-row: 3 / 5; }
#featuredPackages .fp-card--sm.fp-card--slot-6 { grid-row: 5 / -1; }
#featuredPackages .fp-card--sm .fp-card__body { padding: var(--spacing-2) var(--spacing-3); }
#featuredPackages .fp-card--sm .fp-card__name { font-size: var(--text-sm); }
#featuredPackages .fp-card--sm .fp-card__mono { font-size: 3.6rem; }

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

/* ═══════════════════════════════════════════════════════
   FOOT — "Explore All Journeys" CTA
════════════════════════════════════════════════════════ */
#featuredPackages .fp__foot { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, var(--spacing-10)); }
#featuredPackages .fp__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);
}
#featuredPackages .fp__all svg { width: 13px; height: 13px; color: var(--color-gold); transition: transform .2s ease; }
#featuredPackages .fp__all:hover { border-color: var(--color-gold); color: var(--color-gold-light); background: var(--color-gold-bg); }
#featuredPackages .fp__all:hover svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  #featuredPackages .fp__grid { grid-template-rows: repeat(6, 92px); }
  #featuredPackages .fp__arrow { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  #featuredPackages .fp__stage { flex-direction: column; }
  #featuredPackages .fp__stage > .fp__arrow { display: none; }
  #featuredPackages .fp__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  #featuredPackages .fp-card--med { grid-column: 1; grid-row: auto !important; min-height: 8.5rem; }
  #featuredPackages .fp-card--sm { grid-column: 1; grid-row: auto !important; min-height: 6rem; }
  #featuredPackages .fp__mobile-nav { display: flex; }

  /* Hero's text is normally absolute-positioned over a tall image area
     (fine at 648px on desktop); on mobile there isn't room for the full
     title/subtitle/lead/meta stack inside a short image card without
     clipping, so it switches to a static image-on-top, text-below
     layout that grows with its content instead. */
  #featuredPackages .fp-card--hero {
    grid-column: 1; grid-row: auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  #featuredPackages .fp-card--hero .fp-card__art { position: relative; height: 15rem; flex: none; }
  #featuredPackages .fp-card--hero .fp-card__scrim,
  #featuredPackages .fp-card--hero .fp-card__mono { display: none; }
  #featuredPackages .fp-card--hero .fp-card__body { position: static; padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  #featuredPackages .fp-card__art img,
  #featuredPackages .fp__grid,
  #featuredPackages .fp__progress-fill,
  #featuredPackages .fp__arrow,
  #featuredPackages .fp__spinner { transition: none; animation: none; }
}