/* static/landing_2/css/deal-tile.css
   THE SWAPPABLE DEAL-TILE MODULE - all styles for the per-route tiles on the deal category pages,
   scoped under .tile and paired with templates/landing_2/deal_tile.html + js/deal-tile.js.
   Swapping in a new tile design should only touch those three files.
   Unlocked tiles follow html_testing/html_new_tiles/v10.html: destination chip top-left and price
   bottom-left over the photo, all deal tags in the info row underneath. Locked tiles keep that
   shape and swap the photo for generated artwork.
   Colour scheme follows html_testing/html_new_tiles/v11.html: light theme = v4 (blue tile, gold
   actions, glassy-white tags), dark theme = v6 (dark navy tile with gold + blue accents).
   Relies only on the shared variables in landing.css (--panel, --border, --radius, ...) and on the
   .grid column layout of the page it sits in. */

.tile{
  break-inside:avoid; display:inline-block; width:100%; margin:0 0 16px;
  position:relative; background:var(--theme-blue); border:1px solid rgba(0,0,0,.18);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.18); border-color:rgba(255,255,255,.55); }

/* ===== Media (photo carousel) + gradients ===== */
.tile .media{ position:relative; aspect-ratio:4/2; background:#000; overflow:hidden; }
.tile .media img,
.tile .media .tile__art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Fallback when a destination has no photos (deal-tile.js adds .media--empty) */
.tile .media--empty{
  background:
    radial-gradient(220px 90px at 80% 0%, rgba(0,166,237,.35), transparent 60%),
    linear-gradient(135deg, #eaf9ff 0%, #d6f2fb 50%, #c3ecf8 100%);
}
.tile .grad-top   { position:absolute; left:0; right:0; top:0;    height:38%; background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0)); pointer-events:none; }
.tile .grad-bottom{ position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(0deg,  rgba(0,0,0,.65), rgba(0,0,0,0)); pointer-events:none; }

/* ===== Top-left destination chip (over the photo, so always dark translucent) ===== */
.tile .title-chip--tl{
  position:absolute; left:8px; top:8px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  font-weight:900; font-size:16px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* ===== Bottom-left price (over the photo, so always dark translucent) ===== */
.tile .cornerprice--bl{
  position:absolute; left:8px; bottom:8px; z-index:4;
  display:inline-flex; align-items:baseline; gap:8px;
  padding:6px 12px; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25);
  font-weight:1000; font-size:20px; white-space:nowrap; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
}
.tile .cornerprice__normal{ font-size:12px; color:#ffdede; }
.tile .cornerprice__normal s{ color:#ff8c8c; text-decoration-color:#ff8c8c; }

/* ===== Compact carousel arrows (bottom-right) + dots ===== */
.tile .carousel__nav{
  position:absolute; right:8px; bottom:8px; z-index:4;
  display:flex; gap:10px; align-items:center;
  padding:4px 6px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.22); border-radius:10px;
  backdrop-filter:blur(2px);
}
.tile .carousel__nav[hidden]{ display:none; }
.tile .carousel__btn{
  appearance:none; border:none; background:transparent; color:#fff; font-size:24px; line-height:1;
  padding:2px 4px; cursor:pointer; font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.tile .carousel__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.tile .carousel__dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:6px; display:flex; gap:6px; z-index:3; }
.tile .carousel__dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); }
.tile .carousel__dot.is-active{ background:#fff; }

/* ===== Bottom info row: all tags (left, wrapping) + CTA (right) ===== */
.tile .tile__body{ padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tile .tile__tags{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
/* Light theme = v4 "inverted": the tile itself is brand blue, so the tags are glassy
   white chips and the discount pops in gold. Dark theme = v6 restyles these below. */
.tile .badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px; font-size:11px; line-height:1;
  border-radius:999px; border:1px solid rgba(255,255,255,.32); white-space:nowrap;
  font-weight:600; letter-spacing:.01em;
  background:rgba(255,255,255,.6); color:black;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.tile .badge--deal{ background:var(--theme-yellow); border-color:rgba(0,0,0,.15); color:#3a2f00; }
.tile .badge--tag{ background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.32); color:black; }
/* Gold CTA on the blue tile (dark theme flips it back to brand blue below) */
.tile .tile__go{
  flex:0 0 auto;
  padding:8px 12px; font-weight:900; font-size:13px; border-radius:10px;
  background:var(--theme-yellow); color:var(--theme-yellow-ink); white-space:nowrap;
  /* No transition: the hover lift must react instantly - any easing reads as lag on small buttons */
}
/* Lift on hover so it reads as a button (softer shadow than the search submit) */
.tile .tile__go:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(7,59,76,.18), 0 2px 6px rgba(7,59,76,.12);
}

/* ===== Locked tile =====
   The same tile as an unlocked deal, minus the destination name and its photo. The photo slot takes
   a landscape from the sprite the page renders once (see deal_tile.html).
   Sprites hide by size, not display:none - a display:none subtree does not reliably publish the
   gradients its symbols reference, which leaves every sky unpainted. */
.tile__sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.tile .tile__lockglyph,
.tile .tile__golock{ flex:0 0 auto; }
/* A locked CTA is distinguishable from "See dates" at a glance without reading it */
.tile .tile__go--basic,
.tile .tile__go--premium{ display:inline-flex; align-items:center; gap:6px; }
/* "Destination hidden" is longer than a city name, so it sits a size down from a real chip */
.tile .title-chip--redacted{ font-size:13px; }
/* Corner tag naming the tier that unlocks the deal. It sits over the artwork, so it needs the same
   stacking as the other overlay chips plus a hairline edge to lift it off a busy sky. */
.tile .tile__locktag{
  position:absolute; top:8px; right:8px; z-index:4;
  font-size:12px; font-weight:700; color:#fff;
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:4px 12px;
}
.tile .tile__locktag--basic{ background:var(--brand); }
.tile .tile__locktag--premium{ background:var(--premium-light); }
/* The CTA keeps its slot but takes the colour of the tier that unlocks it. Basic is brand blue, but
   the light-theme tile IS brand blue, so there it inverts to a white pill rather than disappear. */
.tile .tile__go--basic{ background:#fff; color:var(--brand); }
.tile .tile__go--premium{ background:var(--premium-gradient); color:#fff; }

/* ===== Gate tiles =====
   The two CTA tiles that break up the runs of locked deals (markup in deal_tile.html, positioned by
   deal-page.js). They take the grid's default align-items:stretch, so a gate is exactly as tall as
   the deal tiles sharing its row.
   Unlike every other tile these keep ONE appearance in light and dark, so each variant's paint sits
   in custom properties that the dark-theme block at the foot of this file re-applies in one rule. */
.tile--gate{
  display:flex; align-items:center; color:#fff;
  --gate-border:rgba(0,0,0,.18);          /* base .tile's border, kept in dark too */
  background:var(--gate-bg); border-color:var(--gate-border);
}
.tile--gate-basic{ --gate-bg:var(--theme-night-blue); --gate-border:#20304a; }
.tile--gate-premium{ --gate-bg:var(--premium-gradient); }
/* Same glint as the membership Premium tile - keyframes are in landing.css, loaded by every deal page */
.tile--gate-premium::after{
  content:""; position:absolute; top:-50%; left:-60%; width:35%; height:200%;
  transform:rotate(25deg);
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
  animation:regal-glint 4.5s ease-in-out infinite; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .tile--gate-premium::after{ animation:none; } }

.tile__gatebody{
  position:relative; z-index:1;            /* above the glint */
  display:flex; flex-direction:column; gap:5px; padding:15px; width:100%;
}
.tile__gatetitle{ margin:0; font-size:17px; font-weight:800; line-height:1.2; }
.tile__gatetext{ margin:0 0 5px; font-size:13px; line-height:1.4; color:rgba(255,255,255,.85); }
.tile__gateprice{ font-size:12px; color:rgba(255,255,255,.85); margin-bottom:5px; }
.tile__gateprice b{ font-size:19px; font-weight:800; margin-right:5px; }
/* Full width, and no transition - matching .tile__go above */
.tile__gatecta{
  display:block; width:100%; text-align:center;
  padding:11px 14px; border-radius:12px; font-size:14px; font-weight:800;
}
.tile__gatecta--basic{ background:var(--theme-blue); color:#fff; }
.tile__gatecta--premium{ background:#fff; color:var(--premium-dark); }
.tile__gatecta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.18);
}
.tile__gatenote{ font-size:11.5px; color:rgba(255,255,255,.7); text-align:center; margin-top:2px; }

/* ===== Dark theme = v6 "dark premium": a dark navy tile so gold (discount + price ring)
   and blue (CTA) both read as clean accents. ===== */
:root[data-theme="dark"] .tile{ background:var(--theme-night-blue); border-color:#20304a; }
:root[data-theme="dark"] .tile:hover{ box-shadow:0 14px 36px rgba(0,0,0,.45); border-color:#2a3a56; }
:root[data-theme="dark"] .tile .media--empty{
  background:
    radial-gradient(220px 90px at 80% 0%, rgba(79,140,255,.28), transparent 60%),
    linear-gradient(135deg, #10131c 0%, #0e1117 50%, #0c1016 100%);
}
:root[data-theme="dark"] .tile .badge{
  background:#16324d; border-color:rgba(255,255,255,.14); color:#dbe8f5;
}
:root[data-theme="dark"] .tile .badge--deal{ background:var(--theme-yellow); border-color:rgba(0,0,0,.15); color:var(--theme-yellow-ink); }
:root[data-theme="dark"] .tile .badge--tag{ background:#16324d; border-color:rgba(255,255,255,.14); color:#dbe8f5; }
:root[data-theme="dark"] .tile .tile__go{ background:var(--theme-blue); color:#fff; }
:root[data-theme="dark"] .tile .cornerprice--bl{ border-color:rgba(255,215,0,.55); }
/* The gates are the one tile that looks identical in both themes, so they take their own paint
   back off the .tile rule above - same specificity, but later, so this wins */
:root[data-theme="dark"] .tile--gate{ background:var(--gate-bg); border-color:var(--gate-border); }