/* Public marketing/sales page (templates/quests/landing.html). Deliberately
   its own visual language, distinct from the in-game "cyber HUD" theme in
   quest_start.css/quest_map.css — a light, pastel-blue, editorial-modern
   feel (amber/terracotta accent cards popping against a cool page bg,
   soft shadows, Rubik) rather than dark neon-grid/scanline/terminal
   styling. The hero section is the one deliberate exception: it's a real
   nighttime photo, so it keeps a dark scrim + light text regardless of
   the page's own light theme — the same thing most light-themed sites do
   with a photographic hero. Also loaded by the other sales-site pages
   (quest_detail.html, sales_map.html) for the shared nav/footer/cards. */

/* The hero's "בואו נצא להרפתקה" button links to #adventures further down
   this same page — an in-page anchor jumps there instantly by default,
   which reads as a jarring cut rather than "scrolling down to it". Same
   for the quest page's "★ 4.8 · 12 reviews" link to #reviews. This file
   is only loaded on the public sales-site pages, never the in-game ones,
   so scoping to plain `html` here doesn't leak into gameplay.
   Scoped to prefers-reduced-motion:no-preference, same convention as the
   reveal-on-scroll animations in landing.js. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.landing {
  /* Both --bg and --bg-elevated hold full `background` values (gradients,
     not just colors) rather than plain hex — every rule below reads them
     through the `background:` shorthand (never `background-color:`), so
     redefining these two swaps the entire page's palette without
     touching each individual rule. */
  --bg: radial-gradient(1200px 600px at 14% -8%, rgba(150, 190, 235, .22), transparent 60%),
        radial-gradient(900px 520px at 102% 12%, rgba(120, 165, 220, .15), transparent 55%),
        radial-gradient(800px 460px at 8% 82%, rgba(170, 155, 220, .09), transparent 60%),
        #f2f6fb;
  --bg-solid: #f2f6fb;
  /* A pastel peach — blue's complement — rather than near-white, so cards
     read as a deliberate color pairing against the page's pastel blue
     instead of just "off-white on blue." */
  --bg-elevated: linear-gradient(165deg, #fff3e6 0%, #ffe0bd 100%);
  --text-primary: #1c2430;
  --text-secondary: #56616f;
  --text-muted: #8590a0;
  --border: rgba(30, 55, 95, .12);
  --shadow: rgba(25, 45, 80, .13);
  --shadow-strong: rgba(25, 45, 80, .20);
  /* Buttons/badges use the light amber->coral gradient with dark text on
     top of it — always high-contrast regardless of page theme. Amber
     *text* on the light page background needs a darker variant instead
     (see --accent-strong) or it reads as barely-there. */
  --accent-strong: #c2570f;

  /* Cancels .page's own 1rem/3rem padding (app.css) so the sales site runs
     edge to edge — same convention as quest_start.css/quest_map.css.
     Without it the dark gameplay body background showed as a frame around
     every sales page. */
  margin: -1rem -1rem -3rem;
  background: var(--bg);
  color: var(--text-primary);
  /* clip, not hidden: overflow:hidden makes .landing a scroll container,
     which silently breaks every position:sticky inside it (the nav, the
     quest page's booking card) — they'd stick to .landing, which never
     scrolls. clip still trims any horizontal overflow without that side
     effect; hidden stays as the fallback for browsers without clip. */
  overflow: hidden;
  overflow: clip;
  font-family: "Rubik", sans-serif;
}
.landing h1, .landing h2, .landing h3 { font-family: "Rubik", sans-serif; }

/* ---------- Nav ---------- */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-inline: 1.5rem;
  background: rgba(242, 246, 251, .82);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.landing-nav-inner {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  flex-wrap: wrap;
}
.landing-logo {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.landing-nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  transition: color .15s ease;
}
.landing-nav-links a:hover { color: var(--text-primary); }
.landing-nav-cta {
  padding: .55rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb75e, #ff7e5f);
  color: #211305;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 126, 95, .35); }

/* On phones the nav takes two rows — pinned, it would cover a real chunk
   of the screen, so it scrolls away normally there instead. Placed after
   the base nav rules so it overrides them. */
@media (max-width: 760px) {
  .landing-nav { position: relative; padding-inline: 1rem; }
  /* Logo + highlighted button share the first row; the text links get a
     row of their own that scrolls sideways instead of wrapping to 3. */
  .landing-nav-links {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.2rem;
    padding-block-end: .2rem;
    scrollbar-width: none;
  }
  .landing-nav-links::-webkit-scrollbar { display: none; }
  .landing-nav-links a { white-space: nowrap; }
  .landing-nav-inner { padding-block: .85rem; row-gap: .7rem; }
}

/* ---------- Hero (deliberately still dark — see file header) ----------
   The background rotates through seven Israeli city day photos (each
   its own .landing-hero-bg-layer, positioned in the template via
   {% static %} since these are inline styles in HTML, not this CSS file)
   instead of one static image — a pure-CSS crossfade carousel via a
   shared @keyframes with a staggered animation-delay per layer, no JS
   needed. Each layer drifts upward + slowly zooms out the entire time
   it's on screen (the scale/translateY keyframes keep changing all the
   way from 0% to 46%, not just during the fade-in) so the image always
   feels like it's gently moving, never freezing once the fade-in ends.
   The animation is linear (not eased) and the intermediate keyframe
   values are spaced for a constant rate of change — with per-segment
   easing, velocity drops to ~0 at every keyframe boundary, which reads
   as a visible pause right when the fade-in finishes; a steady, unbroken
   rate avoids that stutter entirely. The fade-in/fade-out windows below
   deliberately overlap (each layer stays visible for ~9.7s of the 21s
   cycle, well past the next layer's 3s-later start) so two layers are
   always genuinely cross-dissolving into each other instead of one going
   fully transparent before the next appears. animation-delay is always
   duration/layer-count (21s / 7 = 3s here) so the stagger tiles evenly —
   change either number and update the other to match. */
.landing-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem;
  overflow: hidden;
  background: #08080b;
}
.landing-hero-bg { position: absolute; inset: 0; z-index: 0; }
.landing-hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  animation: landing-hero-cycle 21s linear infinite;
}
.landing-hero-bg-layer:nth-child(1) { animation-delay: 0s; }
.landing-hero-bg-layer:nth-child(2) { animation-delay: 3s; }
.landing-hero-bg-layer:nth-child(3) { animation-delay: 6s; }
.landing-hero-bg-layer:nth-child(4) { animation-delay: 9s; }
.landing-hero-bg-layer:nth-child(5) { animation-delay: 12s; }
.landing-hero-bg-layer:nth-child(6) { animation-delay: 15s; }
.landing-hero-bg-layer:nth-child(7) { animation-delay: 18s; }
@keyframes landing-hero-cycle {
  0% { opacity: 0; transform: scale(1.08) translateY(3.5%); }
  10% { opacity: 1; transform: scale(1.063) translateY(2.74%); }
  32% { opacity: 1; transform: scale(1.024) translateY(1.07%); }
  46% { opacity: 0; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-bg-layer { animation: none; opacity: 0; transform: none; }
  .landing-hero-bg-layer:first-child { opacity: 1; }
}
.landing-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 8, 11, .28) 0%, rgba(8, 8, 11, .48) 55%, rgba(8, 8, 11, .8) 100%);
}
.landing-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

.landing-eyebrow {
  font-size: .95rem;
  font-weight: 600;
  color: #ffb75e;
  margin: 0 0 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.landing-headline {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 2rem;
  max-width: 18ch;
  color: #f9f6f1;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .55);
}
.landing-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.landing-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb75e, #ff7e5f);
  color: #211305;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(255, 126, 95, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 126, 95, .35); }

/* ---------- Shared section chrome ---------- */
.landing-section {
  position: relative;
  padding: 4.5rem 1.5rem;
  max-width: 1320px;
  margin-inline: auto;
}
.landing-section-heading {
  text-align: center;
  margin: 0 0 .6rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--text-primary);
}
.landing-section-tagline {
  text-align: center;
  color: var(--text-secondary);
  margin: 0 0 3.25rem;
  font-size: 1.02rem;
}

/* ---------- How it works ---------- */
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.landing-feature-card {
  padding: 1.75rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px var(--shadow);
  transition: transform .2s ease;
}
.landing-feature-card:hover { transform: translateY(-4px); }
.landing-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 183, 94, .22), rgba(255, 126, 95, .22));
  font-size: 1.5rem;
  margin-block-end: 1rem;
}
.landing-feature-card h3 { margin: 0 0 .5rem; font-size: 1.08rem; color: var(--text-primary); font-weight: 700; }
.landing-feature-card p { margin: 0; color: var(--text-secondary); font-size: .93rem; line-height: 1.65; }

/* ---------- Featured adventures ---------- */
.landing-adventures-grid {
  display: grid;
  /* A fixed max (not 1fr) so cards stay a consistent, compact size instead
     of stretching to fill the row when there are only a few of them —
     this grid is meant to hold many quests over time, and a handful of
     cards blown up to fill a wide desktop row was both ugly and made
     each cover image look stretched/cropped oddly. auto-fill (not
     auto-fit) + justify-content:center keeps the row centered instead of
     hugging one side when it doesn't fill completely. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
  justify-content: center;
  gap: 1.5rem;
}
.landing-adventure-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  /* Deliberately its own cool near-white (not --bg-elevated's warm peach,
     shared with the feature cards above) — the peach read as a jarring
     orange wash specifically here, against the cover photo + badges each
     card already carries. A blue family echoing the page's own --bg
     gradient keeps the card clearly lifted off the page (via lightness,
     not a competing hue) while still tying back into the site's actual
     blue identity. */
  background: linear-gradient(165deg, #ffffff 0%, #f2f7fd 100%);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  /* The whole card is a single <a> to the quest-detail page now — the
     "פרטים נוספים" pill inside it is purely visual, not its own link (an
     <a> can't nest another <a>), so it just needs to not look like a
     default browser link. */
  color: inherit;
  text-decoration: none;
}
.landing-adventure-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px var(--shadow-strong);
  border-color: rgba(58, 110, 180, .35);
}
/* The card's cover: the 1.91:1 shape the admin recommends for a quest's
   main image (it doubles as the link-preview image), and the image shown
   whole inside it, never cropped. One in that shape fills the slot
   exactly; any other shape keeps its proportions with plain space around. */
.landing-adventure-media {
  aspect-ratio: 1.91 / 1;
  /* Without these, a taller image's own height overrides aspect-ratio
     and stretches this card's slot taller than its neighbors'. */
  min-height: 0;
  overflow: hidden;
  background-color: #eaf1fa;
  background-image: linear-gradient(135deg, rgba(120, 165, 220, .38), rgba(90, 130, 195, .24));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.landing-adventure-media.has-image { background: #f6f8fb; }
.landing-adventure-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.landing-adventure-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.landing-adventure-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.landing-adventure-badge {
  font-size: .7rem;
  font-weight: 700;
  color: #215a96;
  background: rgba(74, 140, 210, .16);
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}
.landing-adventure-body h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary); font-weight: 700; }
.landing-adventure-desc { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.5; flex: 1; }
.landing-adventure-stats {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-muted);
}
.landing-adventure-stats span { white-space: nowrap; }
/* Cards in the same row line up part by part (image, badges, title,
   one-liner, stats, button): each card spans six rows of the surrounding
   grid and shares them (subgrid), so e.g. every one-liner starts at the
   same height even when one card has more badges or a two-line title.
   Browsers without subgrid keep the plain stacked layout above. */
@supports (grid-template-rows: subgrid) {
  .landing-adventure-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .landing-adventure-body { display: contents; }
  .landing-adventure-body > * { margin-inline: 1.2rem; }
  .landing-adventure-badges { padding-block-start: 1.1rem; align-content: start; }
  .landing-adventure-body h3 { margin: .5rem 1.2rem 0; }
  .landing-adventure-desc { margin-block-start: .5rem; }
  .landing-adventure-stats { margin-block-start: .5rem; align-content: start; }
  .landing-adventure-cta { margin-block: .9rem 1.3rem; align-self: end; }
}
.landing-adventure-cta {
  display: inline-block;
  margin-block-start: .4rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b9bf0, #3d78d8);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  transition: transform .15s ease;
}
/* Purely visual now (the whole card is the real link) — reacts to the
   card's own hover instead of having independent hover behavior. */
.landing-adventure-card:hover .landing-adventure-cta { transform: translateY(-1px); }
.landing-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 2.5rem;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f2f7fd 100%);
  border: 1px solid var(--border);
}

/* ---------- Homepage sections (templates/quests/landing.html) ---------- */
.landing-subheadline {
  margin: -1rem 0 2rem;
  max-width: 46ch;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.65;
  color: rgba(249, 246, 241, .92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.landing-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 999px;
  border: 1.5px solid rgba(249, 246, 241, .75);
  background: rgba(8, 8, 11, .25);
  color: #f9f6f1;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.landing-btn-ghost:hover { background: rgba(8, 8, 11, .45); }
.landing-hero-points {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.4rem;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(249, 246, 241, .9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.landing-section-tight { padding-block-end: 2rem; }

/* Social proof strip right under the hero */
.landing-proof {
  max-width: 1180px;
  margin-inline: auto;
  padding: 3rem 1.25rem 0;
}
.landing-proof-heading { text-align: center; margin: 0 0 1.5rem; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
/* Reviews band: one row of fixed-width cards drifting to the right forever
   (landing.js sizes the loop and sets --marquee-shift / --marquee-duration).
   The edges fade out; it pauses under the pointer or keyboard focus. With
   reduced motion it doesn't move and is just a sideways-scrollable row. */
.landing-proof-marquee {
  overflow: hidden;
  padding-block: .5rem 1.25rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.landing-proof-track { display: flex; gap: 1rem; width: max-content; }
.landing-proof-marquee.is-running .landing-proof-track {
  animation: landing-proof-drift var(--marquee-duration, 40s) linear infinite;
}
.landing-proof-marquee.is-running:hover .landing-proof-track,
.landing-proof-marquee.is-running:focus-within .landing-proof-track {
  animation-play-state: paused;
}
@keyframes landing-proof-drift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-shift, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-proof-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.landing-proof-review { flex: 0 0 300px; }
.landing-proof-review blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.65em * 4);
}
.landing-proof .qd-review figcaption a { color: var(--accent-strong); text-decoration: none; }
.landing-proof .qd-review figcaption a:hover { text-decoration: underline; }

/* Browse by occasion */
.landing-occasions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.landing-occasion {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.4rem 1.3rem;
  border-radius: 20px;
  background: linear-gradient(165deg, #ffffff 0%, #f2f7fd 100%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.landing-occasion:hover { transform: translateY(-4px); box-shadow: 0 16px 32px var(--shadow-strong); border-color: rgba(58, 110, 180, .35); }
.landing-occasion-icon { font-size: 2rem; margin-block-end: .35rem; }
.landing-occasion strong { font-size: 1.05rem; color: var(--text-primary); }
.landing-occasion span:last-child { font-size: .88rem; color: var(--text-secondary); line-height: 1.5; }

/* Adventure filters (static/js/landing.js) */
.landing-filters { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: -1.5rem 0 2.25rem; }
.landing-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.landing-chip {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.landing-chip:hover { color: var(--text-primary); border-color: rgba(58, 110, 180, .35); }
.landing-chip.is-active { background: linear-gradient(90deg, #5b9bf0, #3d78d8); border-color: transparent; color: #fff; }
.landing-adventure-card[hidden] { display: none; }
.landing-filter-empty { margin-block-start: 1rem; }

/* How it works — numbered steps */
.landing-steps {
  list-style: none;
  counter-reset: landing-step;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.landing-steps li {
  counter-increment: landing-step;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.6rem;
  border-radius: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px var(--shadow);
}
.landing-steps li::before {
  content: counter(landing-step);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: .5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #5b9bf0, #3d78d8);
}
.landing-steps strong { font-size: 1.1rem; color: var(--text-primary); }
.landing-steps span { font-size: .93rem; color: var(--text-secondary); line-height: 1.6; }

/* Gift + corporate bands */
.landing-band {
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px var(--shadow);
}
.landing-band-cool { background: linear-gradient(165deg, #eef5ff 0%, #d9e8fb 100%); }
.landing-band-text { max-width: 640px; }
.landing-band-eyebrow { margin: 0 0 .5rem; font-weight: 700; color: var(--accent-strong); }
.landing-band h2 { margin: 0 0 .9rem; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; color: var(--text-primary); }
.landing-band-text > p:not(.landing-band-eyebrow) { margin: 0 0 1.6rem; color: var(--text-secondary); line-height: 1.75; font-size: 1.02rem; }
.landing-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.landing-btn-link { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.landing-btn-link:hover { text-decoration: underline; }

.landing-faq-section .qd-faq { max-width: 820px; margin-inline: auto; }
.landing-home .qd-final-cta { margin-block-end: 4rem; }
@media (max-width: 959px) {
  .landing-home { padding-block-end: 5rem; }
}
@media (min-width: 960px) {
  .landing-sticky-bar { display: none !important; }
}

/* ---------- Reveal-on-scroll (static/js/landing.js) ----------
   Each .reveal element starts hidden/offset; landing.js adds
   .reveal-visible (with a small per-item stagger within its
   .reveal-group) via IntersectionObserver as it scrolls into view. Falls
   back to showing everything immediately with no IntersectionObserver
   support or when the visitor has requested reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-visible { opacity: 1; transform: translateY(0); }

/* ---------- Quest detail page (templates/quests/quest_detail.html) ----------
   Layout: gallery + title block on top, then a two-column grid — content
   on the reading-start side, a sticky booking card beside it (RTL puts the
   first grid column on the right, so "main aside" reads main-then-card).
   Below 960px everything stacks with the booking card first (it comes
   first in the DOM for exactly that), and a fixed bottom bar
   (static/js/quest_detail.js) takes over once the card scrolls away. */
.qd-container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block-start: 1.5rem;
}
.qd-back {
  display: inline-block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: .9rem;
  margin-block-end: 1.25rem;
}
.qd-back:hover { color: var(--text-primary); }

/* Gallery — one wide image by default; with extra photos, a main image
   plus up to 2 (or, with 4+ extras, 4) thumbnails on desktop, and a
   swipeable scroll-snap strip of every photo on mobile. Photos come in any
   shape, so none is ever cropped or padded: each is scaled to fit whole
   inside its slot and centered there, with the page background showing
   around it. Corners and shadow sit on the photo itself, not the slot. */
.qd-gallery {
  display: grid;
  gap: .6rem;
}
.qd-gallery-item {
  position: relative;
  display: flex;
  margin: 0;
  min-height: 0;
  min-width: 0;
}
.qd-gallery-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.qd-gallery-open img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 26px var(--shadow);
}
.qd-gallery-open:focus-visible { outline: 3px solid #5b9bf0; outline-offset: 2px; border-radius: 16px; }
/* On the image itself, not its figure: an aspect-ratio box with a
   max-height shrinks its own width to keep the ratio, leaving a gap. */
.qd-gallery:not(.qd-gallery-multi) .qd-gallery-item > * { aspect-ratio: 1.91 / 1; max-height: 520px; }
.qd-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 240px;
  font-size: 4rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(120, 165, 220, .38), rgba(90, 130, 195, .24));
}
@media (min-width: 761px) {
  .qd-gallery-multi {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 2.2 / 1;
  }
  .qd-gallery-multi .qd-gallery-item:first-child { grid-row: span 2; }
  .qd-gallery-multi .qd-gallery-item:nth-child(2):last-child { grid-row: span 2; }
  .qd-gallery-full { grid-template-columns: 2fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .qd-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .5rem;
    scrollbar-width: none;
  }
  .qd-gallery::-webkit-scrollbar { display: none; }
  .qd-gallery .qd-gallery-item {
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
    max-height: none;
    scroll-snap-align: start;
  }
  /* A peek of the next photo signals there's more to swipe to. */
  .qd-gallery-multi .qd-gallery-item { flex-basis: 88%; }
}

/* Full-screen photo viewer (quest_detail.js) */
.qd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 3.75rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 3.75rem);
  background: rgba(8, 10, 16, .94);
}
.qd-lightbox[hidden] { display: none; }
.qd-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  user-select: none;
}
.qd-lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.qd-lightbox-btn:hover { background: rgba(255, 255, 255, .26); }
.qd-lightbox-btn[hidden] { display: none; }
.qd-lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qd-lightbox-close { top: calc(env(safe-area-inset-top, 0px) + .9rem); inset-inline-end: 1rem; }
/* RTL: "previous" sits on the right (reading start), "next" on the left. */
.qd-lightbox-prev { inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); }
.qd-lightbox-next { inset-inline-end: 1rem; top: 50%; transform: translateY(-50%); }
.qd-lightbox-count {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
}
@media (max-width: 760px) {
  /* Swipe does the job on phones; the arrows would only cover the photo. */
  .qd-lightbox-prev, .qd-lightbox-next { display: none; }
}

/* Title block */
.qd-head { padding-block: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.qd-title {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
}
.qd-tagline {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
}
.qd-rating-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  color: var(--text-primary);
  text-decoration: none;
  font-size: .95rem;
}
.qd-rating-link span:last-child { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.qd-stars { color: #f5a623; font-size: 1.1em; }
.landing-adventure-badge-new { color: #211305; background: linear-gradient(90deg, #ffb75e, #ff7e5f); }

/* Two-column body */
.qd-layout { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 960px) {
  .qd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "main aside";
    gap: 3.5rem;
    align-items: start;
  }
  .qd-main { grid-area: main; }
  .qd-aside {
    grid-area: aside;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 6rem);
  }
}

/* Booking card */
.qd-book-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.6rem;
  border-radius: 22px;
  background: linear-gradient(165deg, #ffffff 0%, #f6f9fd 100%);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px var(--shadow-strong);
}
.qd-book-btn { width: 100%; box-sizing: border-box; font-size: 1.08rem; }
.qd-trust {
  list-style: none;
  margin: 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.qd-secondary-link {
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
}
.qd-secondary-link:hover { text-decoration: underline; }

/* Content sections */
.qd-section { margin-block-end: 3rem; }
.qd-h2 { margin: 0 0 1.1rem; font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 800; color: var(--text-primary); }

.qd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}
.qd-fact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .5rem;
  row-gap: .2rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--border);
}
/* The emoji sits on the label's line, vertically centered with it, and
   the value goes underneath, lined up with the label text. */
.qd-fact-icon { grid-row: 1; grid-column: 1; align-self: center; font-size: 1.15rem; line-height: 1; }
.qd-fact-label { grid-row: 1; grid-column: 2; align-self: center; font-size: .76rem; color: var(--text-muted); font-weight: 600; }
.qd-fact-value { grid-row: 2; grid-column: 2; font-size: .95rem; color: var(--text-primary); font-weight: 700; line-height: 1.35; }

/* Extra photos under the story: whole, natural shapes, one shared height,
   wrapping onto more rows as needed. */
.qd-photo-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.5rem; }
.qd-photo { margin: 0; }
.qd-photo .qd-gallery-open { display: block; width: auto; height: auto; }
.qd-photo .qd-gallery-open img { height: 200px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .qd-photo .qd-gallery-open img { height: 150px; }
}
.qd-story { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.85; }
.qd-story p { margin: 0 0 1em; }
.qd-story p:last-child { margin-block-end: 0; }

.qd-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.qd-highlights li {
  position: relative;
  padding-inline-start: 2rem;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.6;
}
.qd-highlights li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: .1rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #211305;
  background: linear-gradient(135deg, #ffb75e, #ff7e5f);
}

.qd-steps {
  list-style: none;
  counter-reset: qd-step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.qd-steps li {
  counter-increment: qd-step;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.2rem 1.2rem 1.3rem;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.qd-steps li::before {
  content: counter(qd-step);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: .35rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #5b9bf0, #3d78d8);
}
.qd-steps strong { font-size: 1rem; color: var(--text-primary); }
.qd-steps span { font-size: .9rem; color: var(--text-secondary); line-height: 1.55; }

.qd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.qd-chips li {
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(74, 140, 210, .12);
  color: #215a96;
  font-size: .9rem;
  font-weight: 600;
}

.qd-rating-summary { margin: -.4rem 0 1.2rem; color: var(--text-secondary); }
.qd-rating-summary strong { color: var(--text-primary); }
.qd-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.qd-review {
  margin: 0;
  padding: 1.25rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.qd-review-stars { color: #f5a623; letter-spacing: .1em; }
.qd-review blockquote { margin: 0; color: var(--text-primary); line-height: 1.65; font-size: .95rem; flex: 1; }
.qd-review figcaption { color: var(--text-muted); font-size: .85rem; font-weight: 600; }

/* More than 4 reviews: the rest open in a popup (quest_detail.js). */
.qd-reviews-all-btn {
  display: block;
  margin: 1.25rem auto 0;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--accent-strong);
  background: #fff;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.qd-reviews-all-btn:hover { background: rgba(194, 87, 15, .06); }
.qd-reviews-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: 85vh;
  padding: 0;
  border: none;
  border-radius: 22px;
  background: var(--bg-solid);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  color: var(--text-primary);
  overflow: hidden;
}
.qd-reviews-dialog[open] { display: flex; flex-direction: column; }
.qd-reviews-dialog::backdrop { background: rgba(8, 8, 11, .55); }
.qd-reviews-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem .75rem;
  border-bottom: 1px solid var(--border);
}
.qd-reviews-dialog-head .qd-h2 { margin: 0 0 .25rem; }
.qd-reviews-dialog-head .qd-rating-summary { margin: 0; }
.qd-reviews-dialog-close {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.qd-reviews-dialog-list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.1rem 1.5rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The page behind doesn't scroll while the popup is open. */
html.qd-dialog-open { overflow: hidden; }
/* Phone: the popup fills the screen, like a sheet. */
@media (max-width: 600px) {
  .qd-reviews-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .qd-reviews-dialog-head { padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem .75rem; }
  .qd-reviews-dialog-list { padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}

.qd-faq { display: flex; flex-direction: column; gap: .6rem; }
.qd-faq-item {
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--border);
}
.qd-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}
.qd-faq-item summary::-webkit-details-marker { display: none; }
.qd-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent-strong);
  transition: transform .2s ease;
}
.qd-faq-item[open] summary::after { transform: rotate(45deg); }
.qd-faq-answer { padding: 0 1.2rem 1rem; color: var(--text-secondary); line-height: 1.75; }
.qd-faq-answer p { margin: 0 0 .7em; }
.qd-faq-answer p:last-child { margin-block-end: 0; }

/* Repeated call to action */
.qd-final-cta {
  width: min(1180px, calc(100% - 2.5rem));
  box-sizing: border-box;
  margin: 1rem auto 0;
  padding: 3rem 1.5rem;
  border-radius: 26px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px var(--shadow);
}
.qd-final-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; color: var(--text-primary); }
.qd-final-cta p { margin: 0 0 1.5rem; color: var(--text-secondary); }

.qd-more { padding-block: 4rem 3rem; }
.qd-more-heading { text-align: center; margin-block-end: 2rem; }

/* Mobile bottom bar */
.qd-sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.qd-sticky-bar[hidden] { display: none; }
.qd-sticky-price { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: .9rem; }
.qd-sticky-price strong { color: var(--text-primary); font-size: 1.2rem; }
.qd-sticky-bar .landing-btn-primary { padding: .75rem 1.6rem; flex-shrink: 0; }
@media (max-width: 959px) {
  .quest-page { padding-block-end: 5rem; }
}
@media (min-width: 960px) {
  .qd-sticky-bar { display: none !important; }
}

/* ---------- Footer ---------- */
.landing-footer {
  text-align: center;
  padding: 3rem 1.25rem 3.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .87rem;
}
.landing-footer p { margin: 0 0 .5rem; }
.landing-footer a { color: var(--accent-strong); text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }
.landing-footer-credit { font-size: .74rem; opacity: .7; }
.landing-footer-contact, .landing-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .6rem; }
.landing-footer-legal { margin: 0 0 .5rem; font-weight: 600; }

/* Terms / privacy / accessibility pages (legal_page.html) */
.legal-page { max-width: 780px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
.legal-page .landing-section-heading { margin-bottom: .4rem; }
.legal-page-updated { margin: 0 0 2rem; color: var(--text-muted); font-size: .88rem; text-align: center; }
.legal-page-body { color: var(--text-primary); line-height: 1.75; font-size: 1rem; }
.legal-page-body h2 { margin: 2rem 0 .6rem; font-size: 1.2rem; }
.legal-page-body ul { padding-inline-start: 1.3rem; margin: 0 0 1rem; }
.legal-page-body li { margin-bottom: .35rem; }
.legal-page-body a { color: var(--accent-strong); }