/* ==========================================================================
   XPLOROO · Ending Soon module
   ending-soon.css — Section head + the additive pieces on top of the
   Trending Packages card component (real-date urgency badge tiers, trip-
   date row, new destination gradients). Cards themselves are built by
   js/ending-soon.js from Trending Packages' real `data-trip-date`
   attributes — see that file for the selection/sorting logic.
   --------------------------------------------------------------------------
   IMPORTANT: this file never redeclares `.tp-card`, `.tp-carousel`,
   `.tp-track`, `.tp-arrow` or `.tp-slide` — those are reused byte-for-byte
   from styles/trending-packages.css, which is not modified. Everything
   below is either a new class (safe to add) or a new modifier for an
   existing component (e.g. the `--tier-*` badge colors, new destination
   gradient variants) that Trending Packages' markup never references, so
   its rendered output is unaffected.
   Load AFTER trending-packages.css.
   ========================================================================== */

.ending-soon {
  /* `.tp-track` (reused from trending-packages.css) resolves its
     `grid-auto-columns` with `var(--tp-gap)`, which is only ever declared
     inside `.trending-packages`. Re-declaring the same value here lets the
     reused component work correctly inside `.ending-soon`'s subtree too,
     without touching trending-packages.css. */
  --tp-gap: 1.5rem;
  position: relative;
  padding-block: var(--home-section-gap); /* homepage inter-section gap, see hero.css */
}

.ending-soon__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Section head (mirrors Trending Packages' head layout with its own class
   names, since the two sections must remain visually independent)
   ------------------------------------------------------------------------- */
.ending-soon__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.ending-soon__eyebrow {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  /* Urgency-tinted eyebrow to differentiate from Trending's neutral one */
  color: var(--coral-400);
  transition: color 300ms ease;
}
/* Light theme: the pastel coral reads fine on black but fails contrast on a
   white card/canvas — swap to the darker step of the same hue. */
:root[data-theme="light"] .ending-soon__eyebrow { color: var(--coral-600); }

.ending-soon__title {
  font-size: var(--fs-3xl);
  margin: 0;
}

.ending-soon__subtitle {
  margin-top: var(--space-2);
  max-width: 46ch;
  color: var(--color-text-muted);
}

.ending-soon__viewall {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.75rem;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out);
}
.ending-soon__viewall:hover {
  border-color: var(--coral-500);
  background: rgba(251, 90, 90, 0.12);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  /* Mobile: only the heading remains — eyebrow, subtitle and the "View all
     deals" button are hidden, and the heading is centered with its own
     premium top/bottom spacing standing in for the removed head layout. */
  .ending-soon__head {
    justify-content: center;
    margin-bottom: var(--space-8);
  }
  .ending-soon__heading { text-align: center; }
  .ending-soon__eyebrow,
  .ending-soon__subtitle,
  .ending-soon__viewall {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Wordmark position — the media now shows only the clean gradient
   background and the destination name (no decorative overlay graphic).
   ------------------------------------------------------------------------- */
.tp-card__media .tp-card__wordmark {
  position: relative;
  z-index: 1;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.5rem);
  margin-top: auto;
  margin-bottom: 0.9rem;
  align-self: center;
}
.tp-card__media { flex-direction: column; align-items: center; justify-content: flex-end; }

/* -------------------------------------------------------------------------
   Square (1:1) image container replacing the gradient artwork, scoped to
   `.ending-soon` only — Trending Packages' own square-image rules (added in
   trending-packages.css) are separate and untouched. The wordmark, wishlist
   button, and everything in `.tp-card__body` below are unaffected.
   ------------------------------------------------------------------------- */
.ending-soon .tp-card__media {
  aspect-ratio: 1 / 1;
  background: var(--color-surface-inset);
}
.ending-soon .tp-card__media::after {
  display: none;
}
.ending-soon .tp-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* New destination gradients (Bali & Maldives are intentionally omitted here —
   those two reuse the exact variants already defined in trending-packages.css) */
.tp-card__media--mumbai      { --tp-c1: #c98a3a; --tp-c2: #1a1006; }
.tp-card__media--goa         { --tp-c1: #1aa3a0; --tp-c2: #08201d; }
.tp-card__media--dubai       { --tp-c1: #d9a441; --tp-c2: #1b1006; }
.tp-card__media--kashmir     { --tp-c1: #5b7fa6; --tp-c2: #0c1420; }
.tp-card__media--manali      { --tp-c1: #3f6b52; --tp-c2: #0a140f; }
.tp-card__media--ladakh      { --tp-c1: #a85c3e; --tp-c2: #170d08; }
.tp-card__media--thailand    { --tp-c1: #159a82; --tp-c2: #04140f; }
.tp-card__media--paris       { --tp-c1: #5a5f9e; --tp-c2: #120f1c; }
.tp-card__media--switzerland { --tp-c1: #5f8fc7; --tp-c2: #0b1622; }
.tp-card__media--singapore   { --tp-c1: #3d7a9e; --tp-c2: #0a1620; }

/* -------------------------------------------------------------------------
   Urgency badge — real-date-driven tiers only (js/ending-soon.js computes
   the tier from each card's actual `data-trip-date`; nothing here is a
   fake countdown, fake seat count or discount). Deliberately no pulsing/
   flashing animation on any tier, per the "premium, not spammy" brief —
   urgency reads through color/border/glow alone. Escalation, calmest to
   most urgent: green (bookings open) → magenta/purple (limited time) →
   stronger pink/cherry (only X days left) → red (departing in X days /
   tomorrow) → strongest red glow (departing today).

   Pill sizing: `width: fit-content` + `white-space: nowrap` so a long
   label like "LIMITED TIME TO BOOK" always renders on one line and the
   pill hugs its own text instead of being stretched/wrapped by its flex
   parent; `max-width: 100%` is the safety net that lets it shrink-wrap
   inside a narrow mobile card instead of overflowing the card edge.
   ------------------------------------------------------------------------- */
.tp-card__badge--tier-open,
.tp-card__badge--tier-limited,
.tp-card__badge--tier-soon,
.tp-card__badge--tier-urgent,
.tp-card__badge--tier-today {
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-card__badge--tier-open {
  color: #6ee7a8;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.4);
}
:root[data-theme="light"] .tp-card__badge--tier-open {
  color: #047857;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.3);
}

.tp-card__badge--tier-limited {
  color: #f0abfc;
  background: rgba(192, 38, 212, 0.16);
  border-color: rgba(192, 38, 212, 0.42);
}
:root[data-theme="light"] .tp-card__badge--tier-limited {
  color: #86198f;
  background: rgba(192, 38, 212, 0.1);
  border-color: rgba(192, 38, 212, 0.32);
}

.tp-card__badge--tier-soon {
  color: #fda4af;
  background: rgba(225, 29, 72, 0.16);
  border-color: rgba(225, 29, 72, 0.42);
}
:root[data-theme="light"] .tp-card__badge--tier-soon {
  color: #9f1239;
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.32);
}

.tp-card__badge--tier-urgent {
  color: #ffb199;
  background: rgba(251, 90, 90, 0.16);
  border-color: rgba(251, 90, 90, 0.5);
  box-shadow: 0 0 16px rgba(251, 90, 90, 0.25);
}
:root[data-theme="light"] .tp-card__badge--tier-urgent {
  color: var(--coral-600);
  background: rgba(226, 59, 59, 0.12);
  border-color: rgba(226, 59, 59, 0.4);
  box-shadow: 0 0 14px rgba(226, 59, 59, 0.18);
}

.tp-card__badge--tier-today {
  color: #ffd1c2;
  background: rgba(220, 38, 38, 0.22);
  border-color: rgba(248, 113, 113, 0.65);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.35);
}
:root[data-theme="light"] .tp-card__badge--tier-today {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.5);
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.22);
}

@media (max-width: 480px) {
  /* A touch tighter so "LIMITED TIME TO BOOK" comfortably fits one line
     inside a ~300px-wide card without needing to shrink the card itself. */
  .tp-card__badge--tier-open,
  .tp-card__badge--tier-limited,
  .tp-card__badge--tier-soon,
  .tp-card__badge--tier-urgent,
  .tp-card__badge--tier-today {
    font-size: 0.65rem;
    padding-inline: 0.55rem;
    letter-spacing: var(--ls-wide);
  }
}

/* -------------------------------------------------------------------------
   Real trip-date row — new element inside the reused `.tp-card__body`,
   shown above the urgency badge so the actual departure date is always
   visible without opening the package.
   ------------------------------------------------------------------------- */
.tp-card__date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Location pin (📍) and calendar (📅) — real emoji glyphs, not SVG icons.
   Sizing/spacing only; deliberately no `color` property here, since
   setting one on an emoji-containing element can make some browsers fall
   back to a monochrome glyph — these must keep their native red-pin /
   calendar appearance in both themes.
   ------------------------------------------------------------------------- */
.tp-card__pin-emoji,
.tp-card__date-emoji {
  flex: none;
  font-size: 0.9em;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Body rebalance — these cards no longer carry a description line under the
   badge, so the reused `.tp-card__body` (trending-packages.css) is given a
   bit more breathing room here (scoped to `.ending-soon` only) to spread the
   badge/meta/countdown group instead of leaving one dense cluster with a
   large gap above the footer. Footer still anchors to the bottom via its
   own `margin-top: auto`, unaffected by this.
   ------------------------------------------------------------------------- */
.ending-soon .tp-card__body {
  gap: 0.95rem;
  padding-top: 1.5rem;
}
.ending-soon .tp-card__badge {
  margin-bottom: 0.15rem;
}