/* 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.
   Current design is based on 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.
   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{ 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:10px; }
.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:5px 11px; font-size:12px; 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:#1c1e22; white-space:nowrap;
}

/* ===== Locked tile (members-only placeholder on the free pages) ===== */
.tile--locked{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(0,166,237,.04);
  border:1px dashed var(--border);
  box-shadow:none;
  min-height:180px;
}
.tile--locked:hover{ border-color:var(--brand); }
.tile .tile__lockbody{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--muted); padding:10px 0;
}
.tile .tile__unlock{
  font-size:13px; font-weight:700; color:#fff; background:var(--brand);
  border-radius:999px; padding:7px 18px;
}

/* ===== 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:#0e1b2b; 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:#1c1e22; }
: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); }
:root[data-theme="dark"] .tile--locked{ background:rgba(255,255,255,.03); }