/* =========================================================================
   Sanctuary Virtual Guide — Guided Visit Page
   =========================================================================
   Premium styling for the guided tour intro page.
   Uses --nv-* tokens from navigation.css.
   ========================================================================= */


/* ═══════════════════════════ TOKENS ═══════════════════════════════════════ */

:root {
  --guide-card:          #FDFBF7;
  --guide-card-border:   rgba(184, 134, 11, 0.10);
  --guide-card-hover:    rgba(184, 134, 11, 0.18);
  --guide-shadow-sm:     0 1px 4px rgba(44, 36, 24, 0.05);
  --guide-shadow-md:     0 8px 28px rgba(44, 36, 24, 0.08);
  --guide-shadow-lg:     0 16px 48px rgba(44, 36, 24, 0.12);
  --guide-shadow-xl:     0 24px 64px rgba(44, 36, 24, 0.16);
  --guide-glass:         rgba(250, 247, 242, 0.80);
  /* Hero gradient: keeps the warm-parchment character but with
     higher value (closer to white) and lower chroma than before so
     the page doesn't read as a flat yellow wash. The mid-tone stays
     warm so the gradient still feels like aged paper, but the
     highlights breathe clean ivory.                                 */
  --guide-hero-bg:       linear-gradient(145deg, #FCF9F2 0%, #F4EFE3 42%, #F7F2E7 72%, #FDFAF4 100%);
  --guide-accent-glow:   rgba(184, 134, 11, 0.08);
  /* Hero overlays — split out so light mode can use a near-neutral
     warm-grey ink while dark mode keeps its rich gold glow. In light
     mode the previous gold rgba values stacked on top of the cream
     gradient produced a uniformly yellow wash; neutralising them
     here is what makes the hero read as clean ivory.                */
  --guide-hero-pattern-h: rgba(80, 70, 55, 0.045);  /* horizontal grid */
  --guide-hero-pattern-v: rgba(80, 70, 55, 0.030);  /* vertical grid   */
  --guide-hero-glow-primary: radial-gradient(circle,
        rgba(184, 134, 11, 0.05) 0%, transparent 70%);
  --guide-hero-glow-secondary: radial-gradient(circle,
        rgba(184, 134, 11, 0.025) 0%, transparent 70%);
  --guide-divider:       linear-gradient(to right, transparent, var(--nv-border) 20%, var(--nv-border) 80%, transparent);
}

html.theme-dark,
body.dark-mode {
  --guide-card:          #161616;
  --guide-card-border:   rgba(212, 175, 55, 0.10);
  --guide-card-hover:    rgba(212, 175, 55, 0.20);
  --guide-shadow-sm:     0 0 0 1px rgba(212, 175, 55, 0.05), 0 1px 3px rgba(0,0,0,0.4);
  --guide-shadow-md:     0 0 0 1px rgba(212, 175, 55, 0.06), 0 8px 28px rgba(0,0,0,0.5);
  --guide-shadow-lg:     0 0 0 1px rgba(212, 175, 55, 0.06), 0 16px 48px rgba(0,0,0,0.6);
  --guide-shadow-xl:     0 0 0 1px rgba(212, 175, 55, 0.06), 0 24px 64px rgba(0,0,0,0.7);
  --guide-glass:         rgba(18, 18, 18, 0.82);
  --guide-hero-bg:       linear-gradient(145deg, #0D0D0D 0%, #141210 40%, #100E0A 70%, #0A0A0A 100%);
  --guide-accent-glow:   rgba(212, 175, 55, 0.06);
  /* Dark-mode hero overlays — restore the original gold rgba values
     so the hero still glows the way it always did on the dark theme.
     Light-mode neutralisation does not bleed here.                   */
  --guide-hero-pattern-h: rgba(212, 175, 55, 0.035);
  --guide-hero-pattern-v: rgba(212, 175, 55, 0.025);
  --guide-hero-glow-primary: radial-gradient(circle,
        rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  --guide-hero-glow-secondary: radial-gradient(circle,
        rgba(212, 175, 55, 0.04) 0%, transparent 70%);
}


/* ═══════════════════════════ LAYOUT ══════════════════════════════════════ */

.guide-layout {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}


/* ═══════════════════════════ SHARED: SECTION HEADERS ════════════════════ */

.guide-section-header {
  padding: 36px 20px 20px;
  text-align: center;
}

.guide-section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nv-accent);
  margin: 0;
  white-space: nowrap;
  justify-content: center;
}

.guide-section-title::before,
.guide-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--guide-divider);
}

.guide-section-subtitle {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
  color: var(--nv-muted-fg);
  line-height: 1.6;
  margin: 12px 0 0;
  letter-spacing: 0.01em;
}


/* ═══════════════════════════ HERO ════════════════════════════════════════ */

.guide-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--guide-card-border);
  border-radius: 0 0 18px 18px;
  box-shadow: var(--guide-shadow-lg);
}

/* Gradient section divider — replaces hard border */
.guide-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--guide-divider);
}

.guide-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--guide-hero-bg);
  z-index: 0;
}

/* Etched grid pattern. The grid lines used to be gold-tinted, which
   stacked on the cream gradient produced a yellow wash. The colours
   are now driven by `--guide-hero-pattern-{h,v}` so light mode can
   neutralise them (warm grey ink) while dark mode keeps its gold. */
.guide-hero-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 47px, var(--guide-hero-pattern-h) 47px, var(--guide-hero-pattern-h) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, var(--guide-hero-pattern-v) 47px, var(--guide-hero-pattern-v) 48px);
  opacity: 0.6;
}

/* Accent glow layers removed — the two radial-gradient blobs that
   tinted the hero behind the title have been disabled per design.
   The DOM nodes are kept to preserve markup compatibility; they
   simply render nothing now.                                       */
.guide-hero-glow,
.guide-hero-glow--secondary {
  display: none;
}

.guide-hero-body {
  position: relative;
  z-index: 1;
  padding: 30px 60px 28px 22px;
  /* Right padding clears the votive candle in the top-right;
     left padding is back to normal now that the marker thread
     has been removed.                                          */
}

/* ── Art-deco corner brackets — tiny, restrained, no hover growth. */
.guide-hero-corner {
  position: absolute;
  width: 12px; 
  height: 12px;
  border: 1px solid var(--nv-accent);
  opacity: 0.35;
  pointer-events: none;
  z-index: 2;
}
.guide-hero-corner--tl { top: 10px;    left: 10px;    border-right: 0; border-bottom: 0; }
.guide-hero-corner--tr { top: 10px;    right: 10px;   border-left: 0;  border-bottom: 0; }
.guide-hero-corner--bl { bottom: 10px; left: 10px;    border-right: 0; border-top: 0; }
.guide-hero-corner--br { bottom: 10px; right: 10px;   border-left: 0;  border-top: 0; }

/* ── Meta — four icon chips.
   Each chip carries a small inline-SVG icon, the numeric value
   (bold sans-mono), and a small uppercase mono label. The row's
   visual life comes from three layered effects, none of them
   shouty:
     1. A subtle continuous icon pulse, staggered chip-by-chip
        so the row feels like a slow breathing heartbeat.
     2. A hairline gold shimmer that sweeps across each chip
        once on hover (.66 s) — the chip feels "lit up" by the
        cursor.
     3. The chip lifts 1 px + the gold border solidifies on
        hover for tactile interactivity.
   On mobile the chips wrap to 2 rows of 2.                      */
.guide-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 22px;
}

.guide-hero-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(184, 134, 11, 0.22);
  background: rgba(184, 134, 11, 0.04);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--nv-muted-fg);
  overflow: hidden;
  transition:
    border-color 240ms ease,
    background   240ms ease,
    transform    240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   240ms ease;
}

/* Hairline shimmer overlay — invisible until hover, then sweeps
   left-to-right once.                                             */
.guide-hero-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 220, 130, 0.22) 50%,
    transparent 100%
  );
  transition: left 660ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.guide-hero-chip:hover {
  border-color: rgba(184, 134, 11, 0.7);
  background: rgba(184, 134, 11, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.18);
}
.guide-hero-chip:hover::before { left: 120%; }

.guide-hero-chip__icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nv-accent);
  flex-shrink: 0;
  /* Slow ambient pulse — staggered per chip below.              */
  animation: heroChipPulse 3.6s ease-in-out infinite;
}
.guide-hero-chip__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.guide-hero-chip:nth-child(1) .guide-hero-chip__icon { animation-delay: 0s; }
.guide-hero-chip:nth-child(2) .guide-hero-chip__icon { animation-delay: 0.9s; }
.guide-hero-chip:nth-child(3) .guide-hero-chip__icon { animation-delay: 1.8s; }
.guide-hero-chip:nth-child(4) .guide-hero-chip__icon { animation-delay: 2.7s; }

@keyframes heroChipPulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.88); }
}

.guide-hero-chip__val {
  color: var(--nv-fg);
  font-weight: 700;
}

.guide-hero-chip__lbl {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--nv-muted-fg);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .guide-hero-chip__icon { animation: none; }
  .guide-hero-chip::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   VOTIVE CANDLE — the hero's only piece of decoration.
   Pure CSS: layered box-shadows for the flame's halo, animated
   skew for the sway, opacity flicker for the blink, and a slow
   pulse on the outer halo for the "breathing" feel of an actual
   flame.

   All children (.candle, .flame, .top, .wax, etc.) are scoped under
   `.guide-hero-candle` so the bare class names don't leak.

   Wrapper sits absolute in the top-right of the hero panel; size
   is tuned so the flame's warm wash licks the right edge and tints
   the title beneath without overpowering it.
   ══════════════════════════════════════════════════════════════════ */
.guide-hero-candle {
  position: absolute;
  /* Lowered so the flame's tip clears the upper corner bracket
     and the candle reads as standing on a surface inside the
     panel rather than poking out of the top edge.              */
  top: 38px;
  right: 22px;
  width: 30px;
  height: 118px;
  z-index: 3;
  pointer-events: none;
  /* DARK-MODE-ONLY decoration. Hidden by default; the dark-mode
     scope just below flips this to `flex`.

     Why: the candle is symbolic — "a light in the dark." That
     metaphor only holds in the obsidian theme. In light mode
     there is no darkness for the light to push against, so the
     candle would read as ornament instead of meaning. Leaving
     the corner empty in light mode lets the dark-mode candle
     carry real weight on the nights it does appear.            */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* Faint blink — flame is alive, never flashes aggressively */
  animation: candleBlink 3s ease-in-out infinite;
}
html.theme-dark .guide-hero-candle,
body.dark-mode  .guide-hero-candle { display: flex; }

.guide-hero-candle .candle {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* ── Flame container — pivots from the wick base ───────────── */
.guide-hero-candle .flame {
  width: 16px;
  height: 42px;
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: -8px;
  transform-origin: 50% 100%;
  animation: candleSway 3.4s ease-in-out infinite;
  /* Promote to a compositor layer on iOS Safari so the sway
     keeps running under Low Power Mode throttling.            */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Inner halo — soft warm bloom that paints the surrounding panel */
.guide-hero-candle .shadows {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow:
    0 0 16px 10px rgba(255, 200, 80, 0.32),
    0 0 40px 16px rgba(255, 120, 20, 0.22),
    0 0 80px 20px rgba(255, 90,  0,  0.14);
  animation: candleGlow 2.6s ease-in-out infinite;
}

/* Visible flame — white core with concentric tinted halos */
.guide-hero-candle .top {
  width: 16px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fffce7;
  border-radius: 50% 50% 30% 30% / 65% 65% 35% 35%;
  box-shadow:
    /* Concentric halos: white core → gold → orange peak */
    0  0   0   2px  #fffce7,
    0 -6px 0   2px  #fffce7,
    0 -10px 1px 3px #ffd54a,
    0 -16px 4px 3px #ff9224,
    0 -22px 6px 3px #ff6a00,
    /* Outer wash that tints the page corner */
    0  0  36px  6px  rgba(255, 106, 0, 0.55),
    0  0  90px 14px  rgba(255, 90,  0, 0.22),
    /* Inner lower highlight */
    0 -3px  2px 3px  #fffce7;
  animation: candleFlameUp 3.4s ease-in-out infinite;
}

/* Cool blue/dark base at the foot of the flame */
.guide-hero-candle .bottom {
  position: absolute;
  bottom: 1px;
  left: 6px;
  width: 4px;
  height: 4px;
  background: #2c2b39;
  border-radius: 50%;
  box-shadow:
    0  0   3px 3px #2c2b39,
    0 -3px 4px 3px rgba(255, 106, 0, 0.55),
    0  1px 2px 3px #30537d,
    0 -1px 2px 4px rgba(118, 218, 255, 0.5);
}

/* ── Wick ──────────────────────────────────────────────────── */
.guide-hero-candle .wick {
  width: 2px;
  height: 7px;
  background: #1a0e0e;
  border-radius: 1px;
  margin: 38px 0 -4px;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
}

/* ── Wax pedestal — warm gold wax, cool dark at the bottom ── */
.guide-hero-candle .wax {
  width: 100%;
  height: 64px;
  position: relative;
  background:
    linear-gradient(
      180deg,
      #ffb755 0%,
      #ff9224 18%,
      #c7771d 55%,
      #5a4624 100%
    );
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow:
    /* Top rim — bright yellow highlight (just-poured wax) */
    inset 0  4px  4px -1px rgba(255, 244, 130, 0.7),
    /* Inner upper warm-red wash */
    inset 0  6px 26px -2px rgba(255, 60, 0, 0.42),
    /* Bottom shadow for depth */
    inset 0 -8px 12px -2px rgba(0, 0, 0, 0.55),
    /* Faint outer edge highlight */
    0 0 1px 0 rgba(255, 200, 80, 0.65),
    /* Warm ground glow under the candle */
    0 14px 22px 4px rgba(255, 100, 0, 0.18);
}

/* Faint hand-poured drip mark on the left side of the wax */
.guide-hero-candle .wax::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 3px;
  height: 22px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  filter: blur(0.7px);
}
/* Soft shimmer streak on the right side */
.guide-hero-candle .wax::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 8px;
  width: 2px;
  height: 14px;
  background: rgba(255, 240, 180, 0.4);
  border-radius: 50%;
  filter: blur(0.5px);
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes candleSway {
  0%, 100% { transform: skewX(2deg)  skewY(2deg);  }
  25%      { transform: skewX(-1deg) skewY(-1deg); }
  50%      { transform: skewX(-2deg) skewY(1deg);  }
  75%      { transform: skewX(1deg)  skewY(-1deg); }
}
@keyframes candleFlameUp {
  50% {
    box-shadow:
      0  0   0   2px  #fffce7,
      0 -8px 0   3px  #fffce7,
      0 -14px 1px 3px #ffd54a,
      0 -22px 4px 3px #ff9224,
      0 -30px 6px 4px #ff6a00,
      0  0  40px  8px  rgba(255, 106, 0, 0.65),
      0  0 100px 16px  rgba(255, 90,  0, 0.26),
      0 -4px  2px 3px  #fffce7;
  }
}
@keyframes candleGlow {
  0%, 100% {
    box-shadow:
      0 0 16px 10px rgba(255, 200, 80, 0.32),
      0 0 40px 16px rgba(255, 120, 20, 0.22),
      0 0 80px 20px rgba(255, 90,  0,  0.14);
  }
  50% {
    box-shadow:
      0 0 22px 12px rgba(255, 200, 80, 0.40),
      0 0 50px 18px rgba(255, 120, 20, 0.28),
      0 0 96px 24px rgba(255, 90,  0,  0.18);
  }
}
@keyframes candleBlink {
  0%, 100% { opacity: 1;    }
  43%      { opacity: 0.97; }
  46%      { opacity: 1;    }
  64%      { opacity: 0.94; }
  67%      { opacity: 1;    }
}

/* ── Italic Playfair invocation — voice line under the title. */
.guide-hero-invocation {
  display: block;
  margin: 12px 0 2px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--nv-accent);
  opacity: 0.86;
  letter-spacing: 0.005em;
  max-width: 32ch;
}

/* NOTE: reduce-motion override removed. The candle's animations are
   intentionally small (≤ 2 deg sway, opacity ≥ 0.94, no spatial
   translation) and well within the WCAG threshold for motion. The
   previous `animation: none` rule was being triggered by iOS Low
   Power Mode + system Reduce Motion, freezing the candle into a
   visibly broken-looking static element. Keeping the gentle motion
   on every device is the more correct choice for this hero.       */

.guide-hero-left {
  max-width: 560px;
}

.guide-hero-right {
  display: none;
}



/* ═══════════════════════════ BADGE ══════════════════════════════════════ */

.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.guide-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nv-accent);
  animation: guide-pulse 2.5s ease-in-out infinite;
}

@keyframes guide-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.4); }
  50%      { opacity: 0.5; transform: scale(0.7); box-shadow: 0 0 0 6px rgba(184, 134, 11, 0); }
}

.guide-badge-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nv-accent);
  padding: 5px 16px;
  border: 1px solid rgba(184, 134, 11, 0.18);
  border-radius: var(--nv-radius-pill);
  background: rgba(184, 134, 11, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ═══════════════════════════ HERO TYPOGRAPHY ════════════════════════════ */

.guide-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  /* Compact: phones get ~1.65rem, scales gently up to 2.4rem on
     desktop. Much smaller than the earlier 2.4-3.6rem range that
     was overwhelming the layout.                                 */
  font-size: clamp(1.65rem, 5.2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--nv-fg);
}

.guide-hero h1 em {
  font-style: italic;
  color: var(--nv-accent);
}

.guide-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}

.guide-rule::before,
.guide-rule::after {
  content: '';
  height: 1px;
  background: var(--nv-accent);
  opacity: 0.5;
}

.guide-rule::before { width: 28px; }
.guide-rule::after  { width: 14px; opacity: 0.25; }

.guide-rule-diamond {
  width: 5px;
  height: 5px;
  background: var(--nv-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.7;
}

.guide-desc {
  font-size: 0.82rem;
  color: var(--nv-muted-fg);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 460px;
}


/* ═══════════════════════════ META ═══════════════════════════════════════ */

.guide-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 28px;
}

/* Solid pill chrome so the meta-items stay legible against the warm
   ivory hero gradient. The previous styling used a 4%-opacity gold
   wash that dissolved into the cream background — readable in dark
   mode but a near-invisible ghost in light mode. Switching to the
   theme-aware `--guide-card` token (off-white in light, near-black
   in dark) gives the pills a real surface to sit on, and using
   `--nv-border` for the outline keeps the warm tone without losing
   the edge. Subtle shadow defines them as discrete chips.          */
.guide-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--nv-muted-fg);
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--nv-radius-pill);
  background: var(--guide-card);
  border: 1px solid var(--nv-border);
  box-shadow: var(--guide-shadow-sm);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
}

.guide-meta-item:hover {
  background: var(--nv-bg);
  border-color: var(--nv-accent);
  box-shadow:
    var(--guide-shadow-sm),
    0 0 0 3px var(--nv-accent-muted);
  transform: translateY(-1px);
}

.guide-meta-item .material-symbols-outlined {
  font-size: 14px;
  color: var(--nv-accent);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.guide-meta-item strong {
  color: var(--nv-fg);
  font-weight: 700;
}


/* ═══════════════════════════ BUTTONS ════════════════════════════════════ */

.guide-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.guide-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--nv-radius);
  background: var(--nv-accent);
  color: var(--nv-accent-on);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 42px;
  box-shadow:
    0 2px 8px rgba(184, 134, 11, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

/* Animated sweep shine */
.guide-btn-shine {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

.guide-btn-primary:hover .guide-btn-shine {
  animation: guide-btn-sweep 0.8s ease forwards;
}

@keyframes guide-btn-sweep {
  to { left: 125%; }
}

.guide-btn-primary:hover {
  background: var(--nv-accent-soft);
  box-shadow:
    0 6px 20px rgba(184, 134, 11, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.guide-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(184, 134, 11, 0.2);
  transition-duration: 80ms;
}

.guide-btn-primary .material-symbols-outlined { font-size: 18px; }

.guide-btn-lg {
  padding: 15px 40px;
  font-size: 0.92rem;
  min-height: 52px;
}

.guide-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--nv-radius);
  background: var(--guide-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--nv-fg);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.04em;
  border: 1px solid var(--nv-border);
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 42px;
}

.guide-btn-secondary:hover {
  border-color: var(--nv-accent);
  color: var(--nv-accent);
  box-shadow: var(--guide-shadow-sm);
  transform: translateY(-1px);
}

.guide-btn-secondary .material-symbols-outlined { font-size: 18px; }


/* ═══════════════════════════ ROUTE PREVIEW CARD ════════════════════════ */

.guide-route-card {
  background: var(--guide-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--guide-card-border);
  border-radius: 18px;
  box-shadow: var(--guide-shadow-xl);
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Subtle inner top glow */
.guide-route-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184, 134, 11, 0.20), transparent);
  z-index: 1;
}

.guide-route-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--nv-border);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.56rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nv-muted-fg);
}



.guide-route-header .material-symbols-outlined {
  font-size: 14px;
  color: var(--nv-accent);
}

.guide-route-visual {
  padding: 14px 20px;
}

.guide-route-node {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 8px 0;
  transition: all 220ms ease;
}

.guide-route-node:hover {
  padding-left: 4px;
}

.guide-route-node:hover .guide-route-dot {
  transform: scale(1.18);
  box-shadow: 0 0 0 5px var(--guide-accent-glow);
}

.guide-route-node::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 32px;
  bottom: -10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--nv-accent), var(--nv-border));
  opacity: 0.35;
}

.guide-route-node:last-child::before { display: none; }

.guide-route-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.06);
  border: 1.5px solid var(--nv-accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Host for the optional thumbnail <img> — see .guide-route-dot-thumb
     in the per-POI thumbnail block (sibling of .guide-stop-icon).   */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-route-dot .material-symbols-outlined {
  font-size: 10px;
  color: var(--nv-accent);
}

.guide-route-node-name {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--nv-fg);
  flex: 1;
}

.guide-route-node-dur {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.56rem;
  color: var(--nv-muted-fg);
  letter-spacing: 0.04em;
}

.guide-route-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--nv-border);
  background: var(--guide-accent-glow);
}

.guide-route-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.guide-route-divider {
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, transparent, var(--nv-border), transparent);
  flex-shrink: 0;
}

.guide-route-stat-val {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--nv-fg);
}

.guide-route-stat-lbl {
  font-size: 0.52rem;
  color: var(--nv-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ═══════════════════════════ MOBILE/TABLET TABS ══════════════════════════
   A pill-style segmented control that splits the guide into three focused
   panels (About / Tour Route / Before You Go) on screens below 1024px.

   Visual idiom:
     • Frosted-glass pill container that sits sticky just below the nav.
     • An animated gold pill slides between the three segments — driven by
       `data-active="0|1|2"` on the container so the indicator can be
       positioned with pure CSS (no per-tab JS-set transform).
     • Active label flips to `--nv-accent-on` (the contrast colour the
       theme already uses for "text on gold").
   The bar uses the existing `--nv-*` design tokens, so the same CSS reads
   correctly in both light and dark themes — no theme-specific overrides
   needed at this level.

   The same pill-tab UI is now used on desktop too — only one panel
   is visible at a time across every screen size. Desktop tweaks the
   max-width, sticky offset (top nav is sticky on desktop only), and
   the tab padding/font so the bar feels appropriate at wider sizes. */

.guide-tabs {
  /* Sticky-on-scroll. Mobile has no top nav, so the bar sticks to
     the viewport top with a 10 px breathing gap. Desktop overrides
     the offset below to clear the sticky top nav (--nv-top-h).      */
  display: flex;
  position: sticky;
  top: 10px;
  z-index: 20;
  align-items: center;
  gap: 0;
  margin: 24px auto 4px;
  padding: 6px;
  max-width: 560px;
  width: calc(100% - 32px);
  background: color-mix(in srgb, var(--nv-surface) 92%, transparent);
  border: 1px solid var(--nv-border);
  border-radius: 999px;
  box-shadow:
    0 10px 30px rgba(20, 16, 10, 0.10),
    0 2px 6px  rgba(20, 16, 10, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
}

.guide-tab {
  /* Three equal flex segments. The label/icon sit above the gold
     indicator (z:1) which itself sits behind (z:0).                   */
  flex: 1 1 0;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  color: var(--nv-fg-muted, var(--nv-fg));
  font: 600 0.82rem/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    color  220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.guide-tab:hover {
  color: var(--nv-fg);
}
.guide-tab:active {
  transform: scale(0.97);
}
.guide-tab:focus-visible {
  outline: 2px solid var(--nv-accent);
  outline-offset: 3px;
}

.guide-tab.is-active {
  /* On the gold indicator the contrast colour stays readable in both
     light and dark themes — --nv-accent-on is the design token already
     used for the primary CTA's text.                                  */
  color: var(--nv-accent-on, #1a120a);
}

.guide-tab-icon {
  font-size: 18px;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
}

.guide-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Sliding gold pill — sits BEHIND the labels (z:0 vs label z:1).
   Width = 1/3 of the container minus the 6 px padding on each side.
   `data-active="N"` slides it by N * 100 % so it lands neatly behind
   segment N.                                                         */
.guide-tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 3);
  background: linear-gradient(135deg,
    var(--nv-accent) 0%,
    color-mix(in srgb, var(--nv-accent) 78%, #ffffff) 100%);
  border-radius: 999px;
  box-shadow:
    0 4px 12px var(--nv-accent-glow, rgba(201, 162, 39, 0.35)),
    0 1px 0 rgba(255, 255, 255, 0.20) inset;
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 0;
}

.guide-tabs[data-active="0"] .guide-tab-indicator { transform: translateX(0); }
.guide-tabs[data-active="1"] .guide-tab-indicator { transform: translateX(100%); }
.guide-tabs[data-active="2"] .guide-tab-indicator { transform: translateX(200%); }

/* Panel visibility: only the active panel renders, on every screen
   size. The fade+lift animation runs once per switch so the
   transition between tabs feels deliberate instead of an abrupt
   swap. */
.guide-tab-panel {
  display: none;
}
.guide-tab-panel.is-active {
  display: block;
  animation: guideTabPanelIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* `hidden` attribute should defer to .is-active. Without this, a panel
   starts with display:none from HTML's [hidden] semantics and the
   .is-active toggle wouldn't reveal it.                               */
.guide-tab-panel[hidden].is-active {
  display: block;
}

@keyframes guideTabPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The very first section inside a panel often carries its own top
   padding from the original markup; collapse the gap so panels feel
   consistent regardless of which one is active.                       */
.guide-tab-panel > section:first-child {
  padding-top: 4px;
}

/* ─── Desktop tweaks ───
   At ≥ 1024 px the page has a sticky top nav at `--nv-top-h`, so
   shift the sticky offset to clear it. The bar also gets a bit
   more breathing room (wider max-width, larger tab padding +
   typography) for the wider viewport. */
@media (min-width: 1024px) {
  .guide-tabs {
    top: calc(var(--nv-top-h, 64px) + 14px);
    margin: 36px auto 18px;
    max-width: 680px;
    padding: 7px;
  }
  .guide-tab {
    padding: 12px 16px;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    gap: 8px;
  }
  .guide-tab-icon {
    font-size: 20px;
  }
  .guide-tab-indicator {
    top: 7px;
    bottom: 7px;
    left: 7px;
    width: calc((100% - 14px) / 3);
  }
  .guide-tab-panel.is-active {
    /* Slightly slower, gentler reveal on desktop — there's more
       content height for the eye to track. */
    animation-duration: 380ms;
  }
}

/* Very small phones: tighter padding + smaller icon so all three labels
   fit without ellipsis truncation on screens like the iPhone SE.        */
@media (max-width: 420px) {
  .guide-tab {
    padding: 9px 4px;
    font-size: 0.74rem;
    gap: 4px;
  }
  .guide-tab-icon { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-tab-indicator,
  .guide-tab,
  .guide-tab-panel.is-active {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ═══════════════════════════ HIGHLIGHTS ════════════════════════════════ */

.guide-highlights {
  position: relative;
  padding: 0 20px 36px;
}

.guide-highlights::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--guide-divider);
}

.guide-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.guide-highlight-card {
  display: flex;
  flex-direction: column;
  background: var(--guide-card);
  border: 1px solid var(--guide-card-border);
  border-radius: 14px;
  padding: 22px 18px;
  transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--guide-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Top accent line — fades in on hover */
.guide-highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--nv-accent), transparent 80%);
  opacity: 0;
  transition: opacity 350ms ease;
}

.guide-highlight-card:hover {
  box-shadow: var(--guide-shadow-md);
  transform: translateY(-4px);
  border-color: var(--guide-card-hover);
}

.guide-highlight-card:hover::before {
  opacity: 1;
}

.guide-highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(184, 134, 11, 0.05);
  border: 1px solid rgba(184, 134, 11, 0.10);
  color: var(--nv-accent);
  margin-bottom: 16px;
  transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-highlight-card:hover .guide-highlight-icon {
  background: rgba(184, 134, 11, 0.12);
  border-color: rgba(184, 134, 11, 0.28);
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(184, 134, 11, 0.04);
}

.guide-highlight-icon .material-symbols-outlined { font-size: 20px; }

.guide-highlight-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--nv-fg);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.guide-highlight-desc {
  font-size: 0.76rem;
  color: var(--nv-muted-fg);
  line-height: 1.7;
}


/* ═══════════════════════════ QUOTE ═════════════════════════════════════ */

.guide-quote {
  position: relative;
  padding: 48px 20px;
  text-align: center;
  background: transparent;
}

.guide-quote::before,
.guide-quote::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--guide-divider);
}

.guide-quote::before { top: 0; }
.guide-quote::after  { bottom: 0; }

.guide-quote-border {
  display: none;
}

.guide-quote blockquote {
  max-width: 520px;
  margin: 0 auto;
  /* Intentionally NOT position: relative — the quote mark anchors to
     the .guide-quote section so it can sit at the top of the block,
     not relative to the centred blockquote. */
}

.guide-quote-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--nv-accent);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  /* Bright accent treatment — glow plus a soft halo so the mark reads
     as a luminous decorative anchor rather than a faded watermark. */
  text-shadow:
    0 0 24px var(--nv-accent-glow),
    0 0 12px color-mix(in srgb, var(--nv-accent) 45%, transparent);
}

.guide-quote blockquote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(0.94rem, 2.4vw, 1.16rem);
  font-style: italic;
  line-height: 1.85;
  color: var(--nv-fg);
  margin: 20px 0 22px;
}

.guide-quote footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.guide-quote-line {
  width: 20px;
  height: 1px;
  background: var(--nv-accent);
  opacity: 0.4;
  margin-bottom: 8px;
}

.guide-quote cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--nv-fg);
  letter-spacing: 0.02em;
}

.guide-quote-role {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  color: var(--nv-muted-fg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ═══════════════════════════ STOPS PANEL ═══════════════════════════════ */

.guide-stops-panel {
  position: relative;
}

.guide-stops-list {
  padding: 0 20px 28px;
  position: relative;
}

/* Vertical spine — runs between the centers of the first and last number circles.
   `top` and `bottom` are set precisely by JS (initStopsSpine) via CSS vars so the
   line starts on stop #1's circle and ends exactly on the last stop's circle,
   regardless of viewport or text length. Fallbacks provided for no-JS. */
.guide-stops-list::before {
  content: '';
  position: absolute;
  left: var(--spine-left, 50px);
  top: var(--spine-top, 38px);
  bottom: var(--spine-bottom, 38px);
  width: 1.5px;
  background: var(--nv-accent);
  opacity: 0.28;
  border-radius: 1px;
  pointer-events: none;
}

html.theme-dark .guide-stops-list::before,
body.dark-mode .guide-stops-list::before {
  opacity: 0.35;
}


/* ═══════════════════════════ STOP CARDS ════════════════════════════════ */

.guide-stop-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  margin-bottom: 6px;
  position: relative;
  cursor: default;
  border-radius: 14px;
  border: 1px solid transparent;
  will-change: transform;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color     180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow       180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform        180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-stop-card:hover {
  background: var(--guide-card);
  border-color: var(--guide-card-border);
  box-shadow: var(--guide-shadow-md);
  transform: translateX(4px);
}

.guide-stop-card:hover .guide-stop-num {
  color: var(--nv-accent-on);
  border-color: var(--nv-accent);
  background: var(--nv-accent);
  box-shadow: 0 0 0 5px var(--guide-accent-glow);
}

.guide-stop-num {
  /* Sans-serif + tabular numerals + line-height 1 — a single Playfair
     numeral inside a 28 px circle never sat optically centered because
     the serif's natural metrics (descender region, x-height shift)
     pulled the glyph low-left. Switching to a sans-serif with
     line-height:1 and tnum gives a glyph that lines up cleanly with
     the geometric centre of the circle, which is what we want for a
     numbered step indicator. */
  font-family: 'Source Sans 3', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--nv-fg-strong, var(--nv-fg));
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1.5px solid var(--nv-border);
  background: var(--nv-surface);
  flex-shrink: 0;
  z-index: 1;
  margin-top: 6px;
  transition:
    color            180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color     180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow       180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-stop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.04);
  border: 1px solid rgba(184, 134, 11, 0.10);
  color: var(--nv-accent);
  flex-shrink: 0;
  /* `position: relative` + `overflow: hidden` lets a child <img>
     (rendered when the POI has a usage_type='thumbnail') fill
     the circle without bleeding past the border-radius.        */
  position: relative;
  overflow: hidden;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color     180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform        180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-stop-card:hover .guide-stop-icon {
  background: rgba(184, 134, 11, 0.12);
  border-color: rgba(184, 134, 11, 0.28);
  transform: scale(1.06);
}

.guide-stop-icon .material-symbols-outlined { font-size: 20px; }

/* ── Per-POI thumbnail inside the three stop-icon slots ────────────────
   Rendered by guide.js's iconOrThumb() helper when the POI has a
   poi_media.usage_type = 'thumbnail' asset. The img fills the
   circular parent via object-fit; the Material Symbol stays in
   the DOM as the broken-image fallback. `has-thumb` on the parent
   hides the glyph when the photo loads; the <img>'s onerror
   handler drops `has-thumb` so the glyph reappears if the upload
   404s.                                                            */
/* The "guided intro" stop list (rendered into #guidedIntroStops by
   guide.js's renderGuidedIntroStops) reuses the same `<span class=
   "guided-intro-stop-icon">` slot but doesn't have its own base
   styling — give it the same circular shape as `.guide-stop-icon`
   so the optional thumbnail clips cleanly.                       */
.guided-intro-stop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.04);
  border: 1px solid rgba(184, 134, 11, 0.10);
  color: var(--nv-accent);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.guided-intro-stop-icon .material-symbols-outlined { font-size: 20px; }

.guide-stop-thumb,
.guide-route-dot-thumb,
.guided-intro-stop-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.guide-stop-icon.has-thumb .material-symbols-outlined,
.guide-route-dot.has-thumb .material-symbols-outlined,
.guided-intro-stop-icon.has-thumb .material-symbols-outlined { display: none; }

/* When a thumbnail is present, kill the icon-slot hover animation
   (scale + box-shadow halo). The category-glyph variant uses the
   bulge to draw attention; on an actual photo it just makes the
   image lurch. The parent card still slides on hover so the user
   still gets feedback.                                            */
.guide-stop-card:hover .guide-stop-icon.has-thumb,
.guide-route-node:hover .guide-route-dot.has-thumb {
  transform: none;
  box-shadow: none;
}

/* ════════════════════════ SKELETON / SHIMMER LOADERS ══════════════════════
   Cover every dynamic-loaded surface on /guide:
     • the stops list, route preview, and guided-intro stops (filled
       in by /api/route-stops via guide.js renderLoadingState);
     • the quote section (filled by /api/quotes);
     • the hero title + subtitle (filled by /api/content-text).

   The colour palette is theme-aware via the `--gs-tint*` variables
   below, so the same shimmer reads correctly on the warm cream
   light theme AND the deep-walnut dark theme. The gradient sweep
   (1.6 s linear infinite) is the same idiom the home-hero loader
   uses, so the loading vocabulary stays consistent site-wide.    */

:root {
  /* Light theme: deeper gold so the tint is visible on cream
     surfaces (--nv-surface ≈ #F6F2EC). */
  --gs-tint-soft: rgba(184, 134, 11, 0.06);
  --gs-tint:      rgba(184, 134, 11, 0.18);
}
html.theme-dark,
body.dark-mode {
  /* Dark theme: slightly brighter gold + higher alpha so the
     shimmer doesn't disappear into the near-black surface. */
  --gs-tint-soft: rgba(212, 175, 55, 0.08);
  --gs-tint:      rgba(212, 175, 55, 0.22);
}

@keyframes guide-skeleton-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* Reusable shimmer paint. Any element that gets `.is-skel-line`
   becomes a tinted pill with the diagonal sweep — used by the
   quote + hero text loaders below, which set `color: transparent`
   to mask the static fallback text underneath. We do NOT force
   display/width/height: the underlying (transparent) fallback text
   gives the element its natural shape, so when JS swaps in the
   real text there's zero layout shift.                            */
.is-skel-line {
  background:
    linear-gradient(110deg,
      var(--gs-tint-soft) 0%,
      var(--gs-tint)      50%,
      var(--gs-tint-soft) 100%);
  background-size: 220% 100%;
  animation: guide-skeleton-shimmer 1.6s linear infinite;
  color: transparent !important;
  border-color: transparent !important;
  border-radius: 6px;
  user-select: none;
}
.is-skel-line * { color: transparent !important; }
/* Empty elements (no fallback text) need a minimum size so the
   shimmer is still visible.                                       */
.is-skel-line:empty {
  display: inline-block;
  min-width: 8ch;
  min-height: 1em;
}

/* ── Force visibility on skeleton-containing sections ─────────────────
   Without this, .reveal sections sit at opacity:0 until the
   IntersectionObserver fires, so the skeleton itself flashes in
   late. We also force the per-card opacity reset because
   `.guide-stop-card { opacity: 0 }` (the staggered entrance from
   .reveal.is-visible) would otherwise hide skeleton cards even
   AFTER the parent section is visible. Using :has() for the
   parent override and an explicit class on the cards themselves
   so both modern and legacy browser paths work.                   */
.reveal:has(.is-skeleton),
.reveal:has(.is-skel-line),
.reveal.is-skel-host {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}

.guide-stop-card.is-skeleton,
.guide-route-node.is-skeleton,
.guided-intro-stop-card.is-skeleton {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}

/* ── Smooth skeleton → real-card swap ─────────────────────────────────
   When renderStops/renderRoutePreview/renderGuidedIntroStops detect
   a skeleton was in place, they apply `.is-instant` to the freshly-
   rendered real cards for 2 frames. This skips the 0.05–0.46s
   staggered opacity-fade so the cards appear under the shimmer's
   footprint instead of popping in from invisible. The class is
   removed after first paint so hover transitions still animate. */
.guide-stop-card.is-instant,
.guide-route-node.is-instant,
.guided-intro-stop-card.is-instant {
  opacity: 1 !important;
  transform: none !important;
  transition-property: background, border-color, box-shadow;
}

/* ── Route-stops skeleton (renderLoadingState) ───────────────────── */
.guide-stop-card.is-skeleton,
.guide-route-node.is-skeleton,
.guided-intro-stop-card.is-skeleton {
  pointer-events: none;
}
.guide-stop-card.is-skeleton:hover,
.guide-route-node.is-skeleton:hover,
.guided-intro-stop-card.is-skeleton:hover {
  transform: none;
  box-shadow: none;
}

/* Every direct child of a skeleton card becomes a tinted rectangle
   with the gold-tinged shimmer sweep. Specific widths/heights live
   below — without them the empty <span>/<div> would collapse to
   0×0 and the card would look broken.                              */
.guide-stop-card.is-skeleton > *,
.guide-route-node.is-skeleton > *,
.guided-intro-stop-card.is-skeleton > * {
  background:
    linear-gradient(110deg,
      var(--gs-tint-soft) 0%,
      var(--gs-tint)      50%,
      var(--gs-tint-soft) 100%);
  background-size: 220% 100%;
  animation: guide-skeleton-shimmer 1.6s linear infinite;
  color: transparent;
  border-color: transparent;
  border-radius: 8px;
}
/* Preserve the circular shape of icon / number circles — the
   default 8px above would turn them into squares-with-corners. */
.guide-stop-card.is-skeleton > .guide-stop-num,
.guide-stop-card.is-skeleton > .guide-stop-icon,
.guide-route-node.is-skeleton > .guide-route-dot,
.guided-intro-stop-card.is-skeleton > .guided-intro-stop-num,
.guided-intro-stop-card.is-skeleton > .guided-intro-stop-icon {
  border-radius: 50%;
}

/* Info wrappers contain their own placeholder rows — don't tint
   the wrapper itself, only its child rows. */
.guide-stop-card.is-skeleton > .guide-stop-info,
.guided-intro-stop-card.is-skeleton > .guided-intro-stop-info {
  background: none;
  animation: none;
  border-radius: 0;
}
.guide-stop-card.is-skeleton .guide-stop-info > *,
.guided-intro-stop-card.is-skeleton .guided-intro-stop-info > * {
  background:
    linear-gradient(110deg,
      var(--gs-tint-soft) 0%,
      var(--gs-tint)      50%,
      var(--gs-tint-soft) 100%);
  background-size: 220% 100%;
  animation: guide-skeleton-shimmer 1.6s linear infinite;
  border-radius: 6px;
}

/* Per-element sizes so the skeleton roughly matches a real card's
   measurements (one short line for the name, one slightly shorter
   for the description). */
.guide-stop-card.is-skeleton .guide-stop-name,
.guided-intro-stop-card.is-skeleton .guided-intro-stop-name {
  width: 60%;
  height: 14px;
  margin-bottom: 8px;
}
.guide-stop-card.is-skeleton .guide-stop-desc,
.guided-intro-stop-card.is-skeleton .guided-intro-stop-desc {
  width: 92%;
  height: 11px;
}
.guide-stop-card.is-skeleton .guide-stop-dur,
.guide-route-node.is-skeleton .guide-route-node-dur,
.guided-intro-stop-card.is-skeleton .guided-intro-stop-dur {
  width: 38px;
  height: 12px;
  display: inline-block;
}
.guide-route-node.is-skeleton .guide-route-node-name {
  width: 55%;
  height: 12px;
  display: inline-block;
}

/* ── Quote section skeleton (initQuote) ──────────────────────────────
   While /api/quotes is in flight we mark the three quote text spans
   (text, author, role) with `.is-skel-line`. They keep their static
   fallback text underneath, but the shimmering pills sit on top so
   the visitor never sees the placeholder content. JS removes the
   class in applyQuote() once the real quote text lands.

   No dimension overrides — the underlying transparent fallback
   text already sizes these elements correctly. Forcing a width or
   height would cause a layout jump when the real (potentially
   longer/shorter) text replaces it.                               */

/* ── Hero text skeleton (initContentTexts) ───────────────────────────
   Same idiom as the quote — applied to every [data-content-text]
   element by guide.js on load. Shimmer pills sit on top of the
   static fallback copy in the hero until /api/content-text
   resolves and JS swaps the real text in. Again no size overrides:
   the (transparent) fallback text gives the pill its natural
   dimensions, so the swap is layout-stable.                       */

/* Respect reduced-motion preferences — freeze the sweep, keep the
   tinted boxes so the visitor still knows it's a loading state. */
@media (prefers-reduced-motion: reduce) {
  .is-skel-line,
  .guide-stop-card.is-skeleton > *,
  .guide-stop-card.is-skeleton .guide-stop-info > *,
  .guide-route-node.is-skeleton > *,
  .guided-intro-stop-card.is-skeleton > *,
  .guided-intro-stop-card.is-skeleton .guided-intro-stop-info > * {
    animation: none;
  }
}

.guide-stop-info { flex: 1; min-width: 0; }

.guide-stop-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nv-fg);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.guide-stop-desc {
  font-size: 0.76rem;
  color: var(--nv-muted-fg);
  line-height: 1.6;
}

.guide-stop-dur {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: var(--nv-muted-fg);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: var(--nv-radius-pill);
  background: rgba(184, 134, 11, 0.04);
  border: 1px solid rgba(184, 134, 11, 0.08);
  margin-top: 8px;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color     180ms cubic-bezier(0.22, 1, 0.36, 1),
    color            180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-stop-card:hover .guide-stop-dur {
  background: rgba(184, 134, 11, 0.10);
  border-color: rgba(184, 134, 11, 0.20);
  color: var(--nv-fg);
}


/* ═══════════════════════════ TIPS ════════════════════════════════════ */

.guide-tips {
  position: relative;
  padding: 0 20px 36px;
}

.guide-tips::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--guide-divider);
}

/* ── Header-stacked layout — no cards.
   Each tip:
       [01]                                    [icon]   ← header row
       Bring headphones                                 ← sans semibold
       Audio guides work best with earphones for an…   ← sans body
       ───────────────────────────────────────          ← divider

   Single column on mobile and tablet; the header row uses flex to
   pin the number to the left and the icon to the right. No flourish,
   no seal, no chrome — just a strong title with quiet header marks.  */
.guide-tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.guide-tip {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 0;
  border-bottom: 1px solid var(--guide-divider, var(--nv-border));
}

.guide-tip:first-child { padding-top: 10px; }
.guide-tip:last-child  { border-bottom: none; padding-bottom: 12px; }

/* Header: number left, icon right, same row. */
.guide-tip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.guide-tip__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--nv-accent);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 280ms ease;
}

.guide-tip__icon {
  /* Inline SVG sized via width/height (was font-size when the icon
     was a Material Symbols font glyph). Eliminates the icon-font
     load delay — the SVG renders the same frame as the HTML.       */
  width: 24px;
  height: 24px;
  color: var(--nv-accent);
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.88;
  transition: opacity 280ms ease,
              transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The rule span exists in the markup but isn't used in this layout. */
.guide-tip__rule { display: none; }

.guide-tip__title {
  /* Same font + voice as `.guide-section-title` — IBM Plex Mono
     uppercase, wide tracking. Slightly larger than the eyebrow so
     it reads as the tip's primary heading rather than a label.    */
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--nv-fg);
}

.guide-tip__desc {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--nv-muted-fg);
  max-width: 62ch;
}

.guide-tip__desc a {
  color: var(--nv-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 200ms ease;
}

.guide-tip__desc a:hover { opacity: 0.78; }

.guide-tip:hover .guide-tip__icon { opacity: 1; transform: scale(1.08); }
.guide-tip:hover .guide-tip__num  { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .guide-tip__icon { transition: none; }
  .guide-tip:hover .guide-tip__icon { transform: none; }
  .guide-tip:hover .guide-tip__num,
  .guide-tip:hover .guide-tip__icon { transform: none; }
}


/* ═══════════════════════════ BOTTOM CTA ════════════════════════════════ */

.guide-bottom-cta {
  position: relative;
  padding: 64px 20px 72px;
  overflow: hidden;
}

.guide-bottom-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, var(--guide-accent-glow) 0%, transparent 60%);
  pointer-events: none;
}

.guide-bottom-cta-inner {
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
}

.guide-cta-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--nv-accent);
}

.guide-cta-ornament .material-symbols-outlined {
  font-size: 26px;
  opacity: 0.5;
}

.guide-cta-line {
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--nv-accent));
  opacity: 0.35;
}

.guide-cta-ornament .guide-cta-line:last-child {
  background: linear-gradient(to left, transparent, var(--nv-accent));
}

.guide-bottom-cta h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 400;
  color: var(--nv-fg);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}

.guide-bottom-cta p {
  font-size: 0.86rem;
  color: var(--nv-muted-fg);
  line-height: 1.75;
  margin: 0 0 28px;
}


/* ═══════════════════════════ DARK MODE OVERRIDES ═══════════════════════ */

html.theme-dark .guide-hero-pattern,
body.dark-mode .guide-hero-pattern {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(212, 175, 55, 0.025) 47px, rgba(212, 175, 55, 0.025) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(212, 175, 55, 0.018) 47px, rgba(212, 175, 55, 0.018) 48px);
}

html.theme-dark .guide-hero-arch,
body.dark-mode .guide-hero-arch {
  border-color: rgba(212, 175, 55, 0.08);
}

html.theme-dark .guide-hero-glow--secondary,
body.dark-mode .guide-hero-glow--secondary {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
}

html.theme-dark .guide-badge-text,
body.dark-mode .guide-badge-text {
  background: rgba(212, 175, 55, 0.06);
  border-color: rgba(212, 175, 55, 0.18);
}

html.theme-dark .guide-badge-dot,
body.dark-mode .guide-badge-dot {
  background: #D4AF37;
}

html.theme-dark .guide-meta-item,
body.dark-mode .guide-meta-item {
  background: rgba(212, 175, 55, 0.04);
  border-color: rgba(212, 175, 55, 0.08);
}

html.theme-dark .guide-meta-item:hover,
body.dark-mode .guide-meta-item:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.16);
}

html.theme-dark .guide-stop-icon,
html.theme-dark .guide-highlight-icon,
body.dark-mode .guide-stop-icon,
body.dark-mode .guide-highlight-icon {
  background: rgba(212, 175, 55, 0.06);
  border-color: rgba(212, 175, 55, 0.14);
}

html.theme-dark .guide-stop-card:hover .guide-stop-icon,
html.theme-dark .guide-highlight-card:hover .guide-highlight-icon,
body.dark-mode .guide-stop-card:hover .guide-stop-icon,
body.dark-mode .guide-highlight-card:hover .guide-highlight-icon {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.30);
}

/* Editorial tip composition — dark theme.
   The accent gold is already var(--nv-accent) which swaps via the
   theme cascade, so the numeral / icon / title need no overrides.
   The hairline rule needs slightly more presence on obsidian than
   on cream, and the title gets the warmer cream foreground.       */
html.theme-dark .guide-tip__title,
body.dark-mode .guide-tip__title { color: var(--nv-fg); }

html.theme-dark .guide-tip__rule,
body.dark-mode .guide-tip__rule { opacity: 0.42; }

html.theme-dark .guide-tip:hover .guide-tip__rule,
body.dark-mode .guide-tip:hover .guide-tip__rule { opacity: 0.85; }

html.theme-dark .guide-btn-secondary,
body.dark-mode .guide-btn-secondary {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

html.theme-dark .guide-btn-secondary:hover,
body.dark-mode .guide-btn-secondary:hover {
  background: rgba(212, 175, 55, 0.06);
  border-color: var(--nv-accent);
  color: var(--nv-accent);
}

html.theme-dark .guide-stop-num,
body.dark-mode .guide-stop-num {
  /* Old values were 0.22 / 0.08 alpha — essentially invisible against
     the dark card. Bumped to readable contrast levels so the step
     number is legible on first glance, with a faint surface fill so
     the circle reads as a real chip and not a hollow outline. */
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
}

html.theme-dark .guide-stop-card:hover .guide-stop-num,
body.dark-mode .guide-stop-card:hover .guide-stop-num {
  color: var(--nv-accent-on);
  border-color: var(--nv-accent);
  background: var(--nv-accent);
}

html.theme-dark .guide-stop-dur,
body.dark-mode .guide-stop-dur {
  background: rgba(212, 175, 55, 0.05);
  border-color: rgba(212, 175, 55, 0.10);
}

html.theme-dark .guide-stop-card:hover .guide-stop-dur,
body.dark-mode .guide-stop-card:hover .guide-stop-dur {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.22);
}

html.theme-dark .guide-route-dot,
body.dark-mode .guide-route-dot {
  background: rgba(212, 175, 55, 0.10);
}

html.theme-dark .guide-route-card::before,
body.dark-mode .guide-route-card::before {
  background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.15), transparent);
}

html.theme-dark .guide-highlight-card:hover,
body.dark-mode .guide-highlight-card:hover {
  border-color: rgba(212, 175, 55, 0.22);
}

html.theme-dark .guide-stop-card:hover,
body.dark-mode .guide-stop-card:hover {
  border-color: rgba(212, 175, 55, 0.12);
}

html.theme-dark .guide-quote,
body.dark-mode .guide-quote {
  background: transparent;
}

html.theme-dark .guide-quote-mark,
body.dark-mode .guide-quote-mark {
  /* Stronger halo in dark mode so the bright accent reads against the
     near-black background without washing out. */
  text-shadow:
    0 0 28px var(--nv-accent-glow),
    0 0 14px color-mix(in srgb, var(--nv-accent) 55%, transparent);
}

html.theme-dark .guide-btn-primary,
body.dark-mode .guide-btn-primary {
  box-shadow:
    0 2px 12px rgba(212, 175, 55, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.theme-dark .guide-btn-primary:hover,
body.dark-mode .guide-btn-primary:hover {
  box-shadow:
    0 6px 24px rgba(212, 175, 55, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html.theme-dark .guide-route-header-dot,
body.dark-mode .guide-route-header-dot {
  background: #30D158;
}


/* ═══════════════════════════ SCROLL REVEAL ═════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }

/* Staggered card entrances */
.guide-highlight-card,
.guide-stop-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease;
}

.is-visible .guide-highlight-card,
.is-visible .guide-stop-card {
  opacity: 1;
  transform: translateY(0);
}

.is-visible .guide-highlight-card:nth-child(1),
.is-visible .guide-stop-card:nth-child(1) { transition-delay: 0.05s; }
.is-visible .guide-highlight-card:nth-child(2),
.is-visible .guide-stop-card:nth-child(2) { transition-delay: 0.12s; }
.is-visible .guide-highlight-card:nth-child(3),
.is-visible .guide-stop-card:nth-child(3) { transition-delay: 0.19s; }
.is-visible .guide-highlight-card:nth-child(4),
.is-visible .guide-stop-card:nth-child(4) { transition-delay: 0.26s; }
.is-visible .guide-stop-card:nth-child(5) { transition-delay: 0.33s; }


/* ═══════════════════════════ RESPONSIVE: MOBILE (<640 px) ═══════════════
   Base styles above are mobile-first. This block tightens and smooths the
   layout for narrow phones so nothing feels cramped.
   ========================================================================= */

@media (max-width: 639px) {
  /* Hero */
  .guide-hero-body {
    padding: 36px 18px 44px;
  }

  .guide-hero-left {
    max-width: 100%;
  }

  .guide-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.14;
  }

  .guide-desc {
    font-size: 0.92rem;
    line-height: 1.75;
  }

  /* Decorative arches smaller so they don't visually crowd text */
  .guide-hero-arch {
    width: 160px;
    height: 200px;
    border-radius: 80px 80px 0 0;
    bottom: -30px;
    right: -30px;
    opacity: 0.35;
  }

  .guide-hero-arch--inner {
    width: 110px;
    height: 150px;
    right: -10px;
    bottom: -30px;
    border-radius: 55px 55px 0 0;
  }

  .guide-hero-glow {
    width: 280px;
    height: 280px;
  }

  .guide-hero-glow--secondary {
    width: 200px;
    height: 200px;
  }

  /* Badge */
  .guide-badge {
    margin-bottom: 18px;
  }

  /* Meta pills (legacy — kept for surfaces other than the hero). */
  .guide-meta { gap: 8px; margin: 20px 0 24px; }
  .guide-meta-item { font-size: 0.6rem; padding: 6px 12px; gap: 6px; }
  .guide-meta-item .material-symbols-outlined { font-size: 12px; }

  /* Hero body — leave 56 px on the right for the candle on phones */
  .guide-hero-body { padding: 24px 56px 22px 20px; }

  /* Invocation — slightly smaller on phones */
  .guide-hero-invocation   { font-size: 0.85rem; margin: 10px 0 2px; max-width: 28ch; }

  /* Meta chips — tighter padding + font on phones */
  .guide-hero-meta         { gap: 6px; margin: 14px 0 18px; }
  .guide-hero-chip         { padding: 6px 10px 6px 9px; font-size: 0.66rem; gap: 6px; }
  .guide-hero-chip__lbl    { font-size: 0.54rem; }

  /* Votive candle — slightly smaller + lowered on phones too */
  .guide-hero-candle       { width: 26px; height: 104px; top: 32px; right: 16px; }
  .guide-hero-candle .flame { width: 14px; height: 38px; margin-left: -7px; }
  .guide-hero-candle .top   { width: 14px; }
  .guide-hero-candle .wick  { margin-top: 34px; }
  .guide-hero-candle .wax   { height: 58px; }

  /* Corner brackets — slightly tighter insets */
  .guide-hero-corner       { width: 10px; height: 10px; }
  .guide-hero-corner--tl,
  .guide-hero-corner--tr   { top: 8px; }
  .guide-hero-corner--bl,
  .guide-hero-corner--br   { bottom: 8px; }
  .guide-hero-corner--tl,
  .guide-hero-corner--bl   { left: 8px; }
  .guide-hero-corner--tr,
  .guide-hero-corner--br   { right: 8px; }

  /* Buttons: keep side-by-side like tablet/desktop, just a touch tighter */
  .guide-actions {
    gap: 10px;
  }

  .guide-btn-primary,
  .guide-btn-secondary {
    padding: 13px 24px;
  }

  /* Section headers — softer padding, looser title */
  .guide-section-header {
    padding: 32px 18px 16px;
  }

  .guide-section-title {
    gap: 10px;
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }

  .guide-section-subtitle {
    font-size: 0.88rem;
    margin-top: 10px;
    line-height: 1.55;
  }

  /* Highlights */
  .guide-highlights {
    padding: 0 18px 28px;
  }

  .guide-highlights-grid {
    gap: 10px;
  }

  .guide-highlight-card {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .guide-highlight-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }

  .guide-highlight-icon .material-symbols-outlined { font-size: 18px; }

  .guide-highlight-name {
    font-size: 0.82rem;
  }

  .guide-highlight-desc {
    font-size: 0.74rem;
    line-height: 1.6;
  }

  /* Quote */
  .guide-quote {
    padding: 40px 20px;
  }

  .guide-quote-mark {
    font-size: 4.2rem;
    top: 10px;
  }

  .guide-quote blockquote p {
    margin: 14px 0 18px;
  }

  /* Stops list */
  .guide-stops-list {
    padding: 0 14px 24px;
  }

  /* list-pad(14) + card-pad(12) + num-radius(12) = 38px */
  .guide-stops-list::before {
    left: 38px;
  }

  .guide-stop-card {
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .guide-stop-num {
    width: 24px;
    height: 24px;
    font-size: 0.76rem;
  }

  .guide-stop-icon {
    width: 38px;
    height: 38px;
  }

  .guide-stop-icon .material-symbols-outlined { font-size: 18px; }

  .guide-stop-name { font-size: 0.86rem; }
  .guide-stop-desc { font-size: 0.74rem; }

  .guide-stop-dur {
    font-size: 0.56rem;
    padding: 3px 10px;
  }

  /* Tips — header-stacked layout, tighter on phones. */
  .guide-tips {
    padding: 0 18px 28px;
  }
  .guide-tip {
    gap: 12px;
    padding: 22px 0;
  }
  .guide-tip__num     { font-size: 0.64rem; letter-spacing: 0.2em; }
  .guide-tip__icon    { width: 22px; height: 22px; }
  .guide-tip__title   { font-size: 0.88rem; letter-spacing: 0.1em; }
  .guide-tip__desc    { font-size: 0.9rem; line-height: 1.65; }

  /* Bottom CTA */
  .guide-bottom-cta {
    padding: 52px 20px 64px;
  }

  .guide-cta-ornament {
    gap: 10px;
    margin-bottom: 18px;
  }

  .guide-cta-line {
    width: 32px;
  }

  .guide-cta-ornament .material-symbols-outlined {
    font-size: 22px;
  }

  .guide-bottom-cta p {
    font-size: 0.84rem;
    margin-bottom: 24px;
  }
}

/* Extra-narrow phones — collapse highlights to a single column */
@media (max-width: 380px) {
  .guide-highlights-grid {
    grid-template-columns: 1fr;
  }

  .guide-hero-body {
    padding: 32px 16px 40px;
  }

  .guide-section-header { padding: 28px 16px 14px; }
  .guide-highlights     { padding: 0 16px 24px; }
  .guide-tips           { padding: 0 16px 24px; }
  .guide-stops-list     { padding: 0 12px 20px; }

  /* list-pad(12) + card-pad(12) + num-radius(12) = 36px */
  .guide-stops-list::before { left: 36px; }
}


/* ═══════════════════════════ RESPONSIVE: TABLET (640 px) ══════════════ */

@media (min-width: 640px) {
  .guide-hero-body {
    padding: 52px 36px 52px;
  }

  .guide-section-header {
    padding: 40px 36px 22px;
  }

  .guide-highlights {
    padding: 0 36px 36px;
  }

  .guide-highlights-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .guide-quote {
    padding: 56px 36px;
  }

  .guide-stops-list {
    padding: 0 36px 28px;
  }

  /* 36 + 16 + 14 = 66px */
  .guide-stops-list::before {
    left: 66px;
  }

  /* Summary outer footprint = single review card's outer footprint.
     Cards live inside .guide-reviews-list (which has 36 px padding)
     so each card's outer box is offset 36 px from the parent edge
     on each side. The summary is a direct child of .guide-reviews,
     not the list, so we use MARGIN here instead of padding to
     match that offset — its outer box ends at the same x position
     as a card's outer box on every side. */
  .guide-reviews-summary {
    box-sizing: border-box;
    margin-left: 36px;
    margin-right: 36px;
    padding-left: 0;
    padding-right: 0;
  }
  .guide-reviews-list {
    box-sizing: border-box;
    padding-left: 36px;
    padding-right: 36px;
    margin-left: 0;
    margin-right: 0;
  }

  .guide-tips {
    padding: 0 36px 36px;
  }
  .guide-tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 0;
  }

  .guide-bottom-cta {
    padding: 72px 36px 80px;
  }
}


/* ═══════════════════════════ RESPONSIVE: DESKTOP (1024 px) ════════════ */

@media (min-width: 1024px) {
  .guide-layout {
    padding: 0 20px;
  }

  .guide-hero-body {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 60px 52px 56px;
  }

  .guide-hero-left {
    flex: 1;
    max-width: 520px;
  }

  .guide-hero-right {
    display: flex;
    align-items: center;
    flex: 0 0 320px;
  }

  .guide-hero-arch {
    right: 40px;
    bottom: -30px;
    width: 280px;
    height: 360px;
    border-radius: 140px 140px 0 0;
  }

  .guide-hero-arch--inner {
    width: 200px;
    height: 280px;
    right: 80px;
    bottom: -30px;
    border-radius: 100px 100px 0 0;
  }

  .guide-section-header {
    padding: 44px 52px 24px;
  }

  .guide-highlights {
    padding: 0 52px 40px;
  }

  .guide-highlights-grid {
    gap: 16px;
  }

  .guide-quote {
    padding: 64px 52px;
  }

  .guide-stops-list {
    padding: 0 52px 32px;
  }

  /* 52 + 16 + 14 = 82px */
  .guide-stops-list::before {
    left: 82px;
  }

  /* Summary outer footprint = card outer footprint at this
     breakpoint too — switch to margin so the summary's outer box
     ends 52 px from each parent edge (matching the list padding
     that frames the cards). */
  .guide-reviews-summary {
    margin-left: 52px;
    margin-right: 52px;
    padding-left: 0;
    padding-right: 0;
  }
  .guide-reviews-list {
    padding-left: 52px;
    padding-right: 52px;
  }
  /* `.guide-reviews-summary__bars { width: 260px }` for this
     breakpoint lives in the late media block (after the base
     reviews CSS) so it wins the cascade. */

  .guide-tips {
    padding: 0 52px 40px;
  }

  .guide-bottom-cta {
    padding: 80px 52px 88px;
  }
}


/* ═══════════════════════════ RESPONSIVE: LARGE DESKTOP (1280 px) ══════ */

@media (min-width: 1280px) {
  .guide-hero-body {
    gap: 80px;
    padding: 68px 64px 64px;
  }

  .guide-hero-right {
    flex: 0 0 360px;
  }

  .guide-hero h1 {
    font-size: 3.2rem;
  }

  .guide-desc {
    font-size: 0.94rem;
  }

  .guide-section-header {
    padding: 48px 64px 24px;
  }

  .guide-highlights {
    padding: 0 64px 44px;
  }

  .guide-quote {
    padding: 72px 64px;
  }

  .guide-stops-list {
    padding: 0 64px 36px;
  }

  /* 64 + 16 + 14 = 94px */
  .guide-stops-list::before {
    left: 94px;
  }

  .guide-tips {
    padding: 0 64px 44px;
  }

  .guide-bottom-cta {
    padding: 88px 64px 104px;
  }

  .guide-cta-line {
    width: 64px;
  }
}


/* ═══════════════════════════ REDUCED MOTION ═══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .guide-highlight-card,
  .guide-stop-card {
    transition: none !important;
    opacity: 1;
    transform: none;
  }

  .guide-badge-dot {
    animation: none;
  }

  .guide-btn-shine {
    display: none;
  }

  .guide-stop-card,
  .guide-stop-num,
  .guide-stop-icon,
  .guide-stop-dur,
  .guide-btn-primary,
  .guide-btn-secondary,
  .guide-highlight-card,
  .guide-highlight-icon,
  .guide-route-node,
  .guide-route-dot,
  .guide-tip,
  .guide-tip__num,
  .guide-tip__icon,
  .guide-tip__rule,
  .guide-meta-item {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Visitor reviews panel (Reviews tab + desktop bottom section)
   ───────────────────────────────────────────────────────────────────
   The Reviews tab on mobile/tablet, also stacked at the bottom of the
   page on desktop. Everything inherits the existing --nv-* tokens so
   light/dark themes swap with zero local overrides.

   Layout:
     guide-reviews-summary   → aggregate card (avg score + per-★ bars)
     guide-reviews-list      → grid of review cards
     guide-reviews-empty     → "be the first" state
     guide-reviews-error     → "couldn't load" state
     guide-reviews-cta       → "Share your experience" button
   ═══════════════════════════════════════════════════════════════════ */

.guide-reviews {
  position: relative;
}

/* ─── Aggregate summary block ───
   No surrounding container — sits inline in the page flow,
   filling the same width as the section's other content (matches
   the hero card's footprint on desktop). Two columns: score on
   the left (eyebrow + big number + "/5" + stars + caption), bar
   chart on the right, with a short centered divider between them.
   Layout stays two-column on mobile/tablet too — never stacks.
   Doubles as the empty state via [data-empty="true"]. */
.guide-reviews-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1px minmax(220px, 1fr);
  align-items: center;
  column-gap: 44px;
  padding: 24px 4px 28px;
  margin: 0 0 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Left column: score block */
.guide-reviews-summary__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Small gold eyebrow with a short hairline accent rule. Adds a
   bit of typographic structure without colour noise. */
.guide-reviews-summary__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 10px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nv-accent);
}
.guide-reviews-summary__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Big score number + inline "/ 5" suffix in muted weight. */
.guide-reviews-summary__num {
  font: 500 54px/0.95 'Playfair Display', Georgia, serif;
  color: var(--nv-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
}
.guide-reviews-summary__num::after {
  content: ' / 5';
  font: 400 18px/1 'Playfair Display', Georgia, serif;
  color: var(--nv-muted-fg);
  letter-spacing: 0;
  margin-left: 4px;
}
.guide-reviews-summary[data-empty="true"] .guide-reviews-summary__num {
  color: var(--nv-muted-fg);
  font-weight: 400;
}
.guide-reviews-summary[data-empty="true"] .guide-reviews-summary__num::after {
  display: none;
}

.guide-reviews-summary__stars {
  display: inline-flex;
  gap: 3px;
  margin-top: 2px;
}
.guide-reviews-summary__stars .guide-review-star .material-symbols-outlined {
  font-size: 22px;
}

.guide-reviews-summary__count {
  font: 500 13px/1.3 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.guide-reviews-summary__count [data-reviews-total] {
  color: var(--nv-fg);
  font-weight: 700;
}

/* Short centered divider, 70 % of the cell height — feels lighter
   than the previous full-height rule. */
.guide-reviews-summary__divider {
  background: var(--nv-border);
  width: 1px;
  height: 72%;
  justify-self: center;
  align-self: center;
}

/* Right column: per-rating bars */
.guide-reviews-summary__bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.guide-reviews-bar {
  display: grid;
  grid-template-columns: 26px 1fr 30px;
  align-items: center;
  gap: 14px;
  font: 500 12.5px/1 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
}
.guide-reviews-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nv-fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.guide-reviews-bar__label .material-symbols-outlined {
  font-size: 13px;
  color: var(--nv-accent);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.guide-reviews-summary[data-empty="true"] .guide-reviews-bar__label .material-symbols-outlined {
  color: var(--nv-muted-fg);
  font-variation-settings: 'FILL' 0, 'wght' 400;
}
.guide-reviews-bar__track {
  /* Track uses --nv-muted-fg (warm grey in light mode, cool grey
     in dark mode — both neutral, neither gold-tinted) at 28 %
     opacity. Reads as a clean neutral pill in both themes without
     fighting the gold fills or the warm sanctuary palette. */
  position: relative;
  height: 7px;
  background: color-mix(in srgb, var(--nv-muted-fg) 28%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.guide-reviews-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--nv-accent);
  border-radius: inherit;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.guide-reviews-bar__count {
  text-align: right;
  color: var(--nv-fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
.guide-reviews-summary[data-empty="true"] .guide-reviews-bar__count {
  color: var(--nv-muted-fg);
  font-weight: 500;
}

/* Mobile / tablet: keep score + bars side-by-side. Ratio-based
   columns (5fr : 6fr) instead of `max-content` so the score block
   doesn't expand wider than its share of the row, regardless of
   how big the serif number is. Adds horizontal padding so content
   never kisses the viewport edge. */
@media (max-width: 720px) {
  .guide-reviews-summary {
    column-gap: 20px;
    padding: 18px 12px 22px;
    grid-template-columns: minmax(110px, 5fr) 1px minmax(0, 6fr);
  }
  .guide-reviews-summary__score { gap: 8px; }
  /* Eyebrow hidden on mobile — the big serif number + stars are
     enough visual anchor for the score column on small screens
     without the extra "VISITOR RATING" line crowding things. */
  .guide-reviews-summary__eyebrow { display: none; }
  .guide-reviews-summary__num { font-size: 38px; }
  .guide-reviews-summary__num::after { font-size: 13px; margin-left: 3px; }
  .guide-reviews-summary__stars { gap: 2px; }
  .guide-reviews-summary__stars .guide-review-star .material-symbols-outlined {
    font-size: 17px;
  }
  .guide-reviews-summary__count { font-size: 11.5px; }
  .guide-reviews-bar {
    grid-template-columns: 20px 1fr 22px;
    column-gap: 10px;
    font-size: 11.5px;
  }
  .guide-reviews-bar__label { gap: 3px; }
  .guide-reviews-bar__label .material-symbols-outlined { font-size: 11px; }
  .guide-reviews-bar__track { height: 5px; }
}

/* Very small phones: tighter still. The score number drops to
   32 px which keeps the eyebrow + number + "/5" inside the
   100-ish px column on 360 px viewports. */
@media (max-width: 420px) {
  .guide-reviews-summary {
    column-gap: 14px;
    padding: 16px 10px 20px;
    grid-template-columns: minmax(96px, 5fr) 1px minmax(0, 6fr);
  }
  .guide-reviews-summary__num { font-size: 32px; }
  .guide-reviews-summary__num::after { font-size: 12px; }
  .guide-reviews-summary__stars .guide-review-star .material-symbols-outlined {
    font-size: 15px;
  }
  .guide-reviews-bar {
    grid-template-columns: 18px 1fr 20px;
    column-gap: 8px;
    font-size: 11px;
  }
}

/* Desktop layout for the summary. Lives down here AFTER the base
   `.guide-reviews-summary { display: grid; ... }` block so the
   cascade picks the flex layout at ≥ 1024 px instead of the grid
   one. Score hugs the LEFT edge, bars hug the RIGHT corner;
   `margin-left: auto` on the bars consumes all flex slack and
   pins them to the right — more robust than space-between. The
   `!important` markers are belt-and-suspenders against any
   higher-specificity rule we might add later by accident.       */
@media (min-width: 1024px) {
  .guide-reviews-summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    flex-wrap: nowrap !important;
    /* Outer footprint must match a single review card. Cards live
       inside .guide-reviews-list which has 36 px horizontal
       padding, so their outer box ends 36 px from each parent
       edge. The summary is a sibling of the list (not a child),
       so we replicate that 36 px inset with MARGIN here. The
       base rule's `padding: 24px 4px 28px` and `margin: 0 0 16px`
       are declared LATER in source order, so we have to
       `!important` these to win the cascade. */
    margin-left: 36px !important;
    margin-right: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .guide-reviews-summary__score   { flex-shrink: 0 !important; flex-grow: 0 !important; }
  .guide-reviews-summary__divider { display: none !important; }
  .guide-reviews-summary__bars {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 220px !important;
    max-width: 220px !important;
    margin-left: auto !important;
    gap: 7px;
  }
  .guide-reviews-summary__bars .guide-reviews-bar {
    grid-template-columns: 22px 1fr 22px;
    column-gap: 10px;
  }
  .guide-reviews-summary__bars .guide-reviews-bar__track {
    height: 6px;
  }
}

@media (min-width: 1280px) {
  .guide-reviews-summary {
    /* Match the wider 52 px card inset at this breakpoint. */
    margin-left: 52px !important;
    margin-right: 52px !important;
  }
  .guide-reviews-summary__bars {
    width: 260px !important;
    max-width: 260px !important;
  }
}

/* ─── List of reviews ───
   Reviews render as clean comment rows (avatar | content) with a
   thin horizontal divider between each. No card chrome — no border,
   no background, no shadow, no rounded corners. The list itself
   provides the only frame around the section. */
.guide-reviews-list {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px;
}

.guide-review-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  padding: 26px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nv-border);
  border-radius: 0;
  /* No hover lift — reads as text content, not a clickable card. */
}
.guide-review-card:first-child { padding-top: 24px; }
.guide-review-card:last-child  { border-bottom: 0; padding-bottom: 4px; }

/* Avatar — a small monogrammed disc. Subtle neutral background with
   a hairline border. No gold gradient. */
.guide-review-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--nv-fg) 6%, transparent);
  color: var(--nv-fg);
  border: 1px solid var(--nv-border);
  font: 600 17px/1 'Playfair Display', Georgia, serif;
  align-self: start;
}

.guide-review-card__content { min-width: 0; }

/* Top header row: name on the left, date pinned to the far right —
   reads like a comment header. */
.guide-review-card__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.guide-review-card__name {
  font: 600 15.5px/1.3 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-fg);
  letter-spacing: -0.005em;
}
.guide-review-card__date {
  color: var(--nv-muted-fg);
  font: 500 13px/1.2 'Source Sans 3', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sub row: rating stars + locale chip. */
.guide-review-card__sub-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Locale chip — neutral mono pill, not gold. */
.guide-review-card__lang {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: transparent;
  color: var(--nv-muted-fg);
  border: 1px solid var(--nv-border);
  border-radius: 4px;
  font: 600 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.guide-review-star {
  color: var(--nv-border-strong, var(--nv-border));
  display: inline-flex;
  line-height: 1;
}
.guide-review-star .material-symbols-outlined {
  font-size: 15px;
  font-variation-settings: 'FILL' 0, 'wght' 400;
}
.guide-review-star.is-on {
  color: var(--nv-accent);
}
.guide-review-star.is-on .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

.guide-review-card__title {
  margin: 4px 0 6px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--nv-fg);
  letter-spacing: -0.005em;
}
.guide-review-card__body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--nv-muted-fg);
  white-space: pre-wrap;
  word-break: break-word;
}
.guide-review-card__body + .guide-review-card__body { margin-top: 8px; }

/* ─── Skeleton state ─── */
.guide-review-card--skeleton {
  pointer-events: none;
}
.guide-review-card--skeleton .guide-review-card__avatar,
.guide-review-card--skeleton .guide-review-card__name,
.guide-review-card--skeleton .guide-review-card__date,
.guide-review-card--skeleton .guide-review-card__sub-row,
.guide-review-card--skeleton .guide-review-card__title,
.guide-review-card--skeleton .guide-review-card__body {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--nv-fg) 6%, transparent) 0%,
              color-mix(in srgb, var(--nv-fg) 12%, transparent) 50%,
              color-mix(in srgb, var(--nv-fg) 6%, transparent) 100%);
  background-size: 200% 100%;
  animation: guide-review-skel 1.4s linear infinite;
  border-radius: 4px;
  color: transparent;
}
.guide-review-card--skeleton .guide-review-card__avatar  { border-color: transparent; }
.guide-review-card--skeleton .guide-review-card__name    { height: 14px; width: 35%; }
.guide-review-card--skeleton .guide-review-card__date    { height: 12px; width: 64px; }
.guide-review-card--skeleton .guide-review-card__sub-row { height: 14px; width: 110px; }
.guide-review-card--skeleton .guide-review-card__title   { height: 16px; width: 75%; }
.guide-review-card--skeleton .guide-review-card__body    { height: 12px; width: 100%; margin-top: 8px; }
.guide-review-card--skeleton .guide-review-card__body + .guide-review-card__body { width: 70%; }
@keyframes guide-review-skel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Error state ─── */
.guide-reviews-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 32px 24px;
  margin: 0 0 24px;
  background: var(--nv-bg);
  border: 1px dashed var(--nv-border);
  border-radius: 0;
  color: var(--nv-muted-fg);
}
/* `display: flex` above wins against the UA stylesheet's
   `[hidden] { display: none }` rule, so reinstate it explicitly
   for the hidden state. */
.guide-reviews-error[hidden] { display: none; }
.guide-reviews-error .material-symbols-outlined {
  font-size: 36px;
  color: var(--nv-muted-fg);
  width: auto; height: auto;
  margin-bottom: 4px;
}
.guide-reviews-error h3 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--nv-fg);
}
.guide-reviews-error p {
  margin: 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ─── CTA button ─── */
.guide-reviews-cta {
  display: flex;
  justify-content: center;
  margin: 8px 0 0;
}
.guide-reviews-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font: 600 14px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--nv-accent-on, #fff);
  background: var(--nv-accent);
  border: 1px solid var(--nv-accent);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 25%, transparent));
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.guide-reviews-cta__btn:hover {
  transform: translateY(-1px);
  background: var(--nv-accent-soft, var(--nv-accent));
  box-shadow: 0 10px 24px var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 35%, transparent));
}
.guide-reviews-cta__btn:focus-visible {
  outline: 3px solid var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 35%, transparent));
  outline-offset: 3px;
}
.guide-reviews-cta__btn .material-symbols-outlined { font-size: 19px; }

/* ═══════════════════════════════════════════════════════════════════
   Reviews filter bar
   Sits between the aggregate summary and the list of reviews. Offers
   three filters — rating (chips), POI (select), language (select) —
   that narrow the visible reviews client-side. Footprint matches the
   summary above (36 px inset on desktop, 52 px at ≥ 1280 px) so the
   whole reviews region reads as a single column.
   ═══════════════════════════════════════════════════════════════════ */

.guide-reviews-filters {
  /* The reviews list below contains .reveal.is-visible cards — each
     card has `transform: translateY(0)`, which spawns its own
     stacking context. Without an explicit z-index here, this filter
     bar (earlier in DOM order) would paint BEHIND those cards, so
     the dropdown menu would render under them and pointer events
     would fall through to the card rather than the option. Lifting
     the filter bar onto its own stacking layer fixes both. */
  position: relative;
  z-index: 20;
  margin: 4px 4px 20px;
  padding: 4px 4px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nv-border);
  border-radius: 0;
  /* Subtle reveal when the filter region first appears. */
  animation: guide-reviews-filters-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.guide-reviews-filters[hidden] { display: none; }

/* Open dropdowns need to clear the empty-state card and the review
   list explicitly, since both come later in DOM order. */
.guide-reviews-dd.is-open { z-index: 30; }

@keyframes guide-reviews-filters-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.guide-reviews-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.guide-reviews-filters__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nv-accent);
}
.guide-reviews-filters__title .material-symbols-outlined {
  font-size: 16px;
  color: var(--nv-accent);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

.guide-reviews-filters__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--nv-border);
  border-radius: 999px;
  color: var(--nv-muted-fg);
  font: 600 12px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.guide-reviews-filters__clear:hover {
  color: var(--nv-fg);
  border-color: var(--nv-fg);
  background: color-mix(in srgb, var(--nv-fg) 5%, transparent);
}
.guide-reviews-filters__clear:focus-visible {
  outline: 3px solid var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 35%, transparent));
  outline-offset: 2px;
}
.guide-reviews-filters__clear .material-symbols-outlined { font-size: 15px; }
.guide-reviews-filters__clear[hidden] { display: none; }

/* Row of three filter groups. On desktop they share the row evenly;
   on smaller screens each group occupies a full line. */
.guide-reviews-filters__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.guide-reviews-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.guide-reviews-filter__label {
  font: 600 10.5px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nv-muted-fg);
}

/* ─── Rating chips ─── */
.guide-reviews-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guide-reviews-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: var(--nv-bg, transparent);
  color: var(--nv-fg);
  border: 1px solid var(--nv-border);
  border-radius: 999px;
  font: 600 12.5px/1 'Source Sans 3', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease,
              background 160ms ease, box-shadow 160ms ease,
              transform 160ms ease;
}
.guide-reviews-chip .material-symbols-outlined {
  font-size: 14px;
  color: var(--nv-muted-fg);
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: color 160ms ease, font-variation-settings 160ms ease;
}
.guide-reviews-chip:hover {
  border-color: var(--nv-fg);
  color: var(--nv-fg);
  transform: translateY(-1px);
}
.guide-reviews-chip:hover .material-symbols-outlined {
  color: var(--nv-accent);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.guide-reviews-chip:focus-visible {
  outline: 3px solid var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 35%, transparent));
  outline-offset: 2px;
}
.guide-reviews-chip.is-active {
  background: var(--nv-accent);
  border-color: var(--nv-accent);
  color: var(--nv-accent-on, #fff);
  box-shadow: 0 4px 12px var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 25%, transparent));
}
.guide-reviews-chip.is-active .material-symbols-outlined {
  color: var(--nv-accent-on, #fff);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* ─── Custom dropdown (POI + Language) ───
   Native <select> elements render their option list with OS chrome —
   on dark themes that means a stark white panel, and the list flips
   above the trigger whenever viewport space is tight (which makes the
   filter feel disconnected from the trigger that opened it). The
   custom dropdown below is a button + absolutely-positioned listbox
   styled with the same tokens as the rest of the page, so the open
   menu inherits dark/light theme automatically. */
.guide-reviews-dd {
  position: relative;
  min-width: 0;
}

.guide-reviews-dd__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 36px 10px 38px;
  background: var(--nv-bg, transparent);
  border: 1px solid var(--nv-border);
  border-radius: 10px;
  color: var(--nv-fg);
  font: 500 13.5px/1.2 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease,
              background 160ms ease;
}
.guide-reviews-dd__trigger:hover { border-color: var(--nv-fg); }
.guide-reviews-dd__trigger:focus-visible {
  outline: 0;
  border-color: var(--nv-accent);
}
.guide-reviews-dd.is-open .guide-reviews-dd__trigger {
  border-color: var(--nv-accent);
}

.guide-reviews-dd__icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  font-size: 18px;
  color: var(--nv-accent);
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.guide-reviews-dd__caret {
  position: absolute;
  right: 10px;
  pointer-events: none;
  font-size: 20px;
  color: var(--nv-muted-fg);
  transition: transform 200ms ease, color 160ms ease;
}
.guide-reviews-dd.is-open .guide-reviews-dd__caret {
  transform: rotate(180deg);
  color: var(--nv-accent);
}

.guide-reviews-dd__value {
  display: block;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Popup menu ───
   Anchored to the trigger. Slides open downward by default; the
   `is-flipped` modifier (set by JS when there isn't room below) flips
   it above. The menu itself is a card with its own border + a small
   shadow so it floats above adjacent content. */
.guide-reviews-dd__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 14px 32px -8px color-mix(in srgb, var(--nv-fg) 25%, transparent),
              0 4px 10px -2px color-mix(in srgb, var(--nv-fg) 12%, transparent);
  transform-origin: top center;
  animation: guide-reviews-dd-in 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.guide-reviews-dd__menu[hidden] { display: none; }

.guide-reviews-dd.is-flipped .guide-reviews-dd__menu {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom center;
}

@keyframes guide-reviews-dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* Thin themed scrollbar so a long option list reads cleanly. */
.guide-reviews-dd__menu {
  scrollbar-width: thin;
  scrollbar-color: var(--nv-border) transparent;
}
.guide-reviews-dd__menu::-webkit-scrollbar { width: 8px; }
.guide-reviews-dd__menu::-webkit-scrollbar-track { background: transparent; }
.guide-reviews-dd__menu::-webkit-scrollbar-thumb {
  background: var(--nv-border);
  border-radius: 999px;
  border: 2px solid var(--nv-bg);
}

/* ─── Options inside the menu ─── */
.guide-reviews-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--nv-fg);
  font: 500 13.5px/1.3 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.guide-reviews-dd__opt:hover,
.guide-reviews-dd__opt:focus-visible {
  background: color-mix(in srgb, var(--nv-fg) 6%, transparent);
  outline: 0;
}
.guide-reviews-dd__opt.is-selected {
  background: color-mix(in srgb, var(--nv-accent) 14%, transparent);
  color: var(--nv-fg);
  font-weight: 600;
}
.guide-reviews-dd__opt.is-selected:hover {
  background: color-mix(in srgb, var(--nv-accent) 22%, transparent);
}

.guide-reviews-dd__opt-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide-reviews-dd__opt-check {
  flex-shrink: 0;
  font-size: 17px;
  color: var(--nv-accent);
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

/* ─── Status line (count of matched reviews) ─── */
.guide-reviews-filters__status {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--nv-border);
  font: 500 12.5px/1.4 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
  letter-spacing: 0.01em;
}
.guide-reviews-filters__status[hidden] { display: none; }
.guide-reviews-filters__status [data-reviews-status-count] {
  font-weight: 700;
  color: var(--nv-fg);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* ─── Zero-state when nothing has been posted yet ───
   Replaces the (otherwise dashy) aggregate card + filter strip when
   the POI has never received a review. Reads as an invitation rather
   than a stats block: a small ornament, a serif headline, a one-line
   ask, and a gold CTA wired to the same `data-action="review"` hook
   that the nav buttons use. */
.guide-reviews-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 28px 64px;
  margin: 0 4px 24px;
  color: var(--nv-muted-fg);
}
.guide-reviews-zero[hidden] { display: none; }

.guide-reviews-zero__ornament {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--nv-accent);
  margin-bottom: 4px;
}
.guide-reviews-zero__rule {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--nv-accent) 70%, transparent) 50%,
    transparent 100%
  );
}
.guide-reviews-zero__icon {
  font-size: 30px;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  color: var(--nv-accent);
}

.guide-reviews-zero__title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--nv-fg);
}

.guide-reviews-zero__body {
  margin: 0;
  max-width: 46ch;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--nv-muted-fg);
}

.guide-reviews-zero__btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  font: 600 14px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--nv-accent-on, #1a1407);
  background: var(--nv-accent);
  border: 1px solid var(--nv-accent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease,
              border-color 160ms ease;
}
.guide-reviews-zero__btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--nv-accent) 88%, #000);
  border-color: color-mix(in srgb, var(--nv-accent) 88%, #000);
}
.guide-reviews-zero__btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nv-accent) 35%, transparent);
  outline-offset: 3px;
}
.guide-reviews-zero__btn .material-symbols-outlined {
  font-size: 18px;
  color: inherit;
}

@media (max-width: 600px) {
  .guide-reviews-zero { padding: 40px 18px 48px; gap: 12px; }
  .guide-reviews-zero__title { font-size: 22px; }
  .guide-reviews-zero__body { font-size: 13.5px; }
  .guide-reviews-zero__rule { width: 32px; }
  .guide-reviews-zero__icon { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-reviews-zero__btn { transition: background 120ms ease; }
  .guide-reviews-zero__btn:hover { transform: none; }
}

/* ─── "Show more reviews" button ───
   Sits at the foot of the rendered list whenever there are more
   matched reviews than the current visible window. Styled as a
   ghost pill with a small chip that surfaces how many more entries
   are queued up — the chip gives the click predictability ("+12
   more" feels concrete in a way "Load more" doesn't). */
.guide-reviews-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 28px;
}
.guide-reviews-loadmore-wrap[hidden] { display: none; }

.guide-reviews-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font: 600 13.5px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--nv-fg);
  background: transparent;
  border: 1px solid var(--nv-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease,
              background 160ms ease, transform 160ms ease;
}
.guide-reviews-loadmore:hover {
  color: var(--nv-accent);
  border-color: var(--nv-accent);
  background: color-mix(in srgb, var(--nv-accent) 8%, transparent);
  transform: translateY(-1px);
}
.guide-reviews-loadmore:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nv-accent) 35%, transparent);
  outline-offset: 3px;
}
.guide-reviews-loadmore .material-symbols-outlined {
  font-size: 18px;
  color: var(--nv-accent);
}

.guide-reviews-loadmore__count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font: 700 11.5px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--nv-accent);
  background: color-mix(in srgb, var(--nv-accent) 14%, transparent);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.guide-reviews-loadmore__count:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .guide-reviews-loadmore { transition: color 120ms ease, border-color 120ms ease, background 120ms ease; }
  .guide-reviews-loadmore:hover { transform: none; }
}

/* ─── Empty-state when filters yield no reviews ─── */
.guide-reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 24px;
  margin: 0 4px 24px;
  background: color-mix(in srgb, var(--nv-fg) 3%, transparent);
  border: 1px dashed var(--nv-border);
  border-radius: 14px;
  color: var(--nv-muted-fg);
}
.guide-reviews-empty[hidden] { display: none; }
.guide-reviews-empty .material-symbols-outlined {
  font-size: 36px;
  color: var(--nv-muted-fg);
  margin-bottom: 4px;
}
.guide-reviews-empty h3 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--nv-fg);
}
.guide-reviews-empty p {
  margin: 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
}
.guide-reviews-empty__btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--nv-fg);
  border-radius: 999px;
  color: var(--nv-fg);
  font: 600 12.5px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.guide-reviews-empty__btn:hover {
  background: var(--nv-fg);
  color: var(--nv-bg);
  transform: translateY(-1px);
}
.guide-reviews-empty__btn:focus-visible {
  outline: 3px solid var(--nv-accent-glow, color-mix(in srgb, var(--nv-accent) 35%, transparent));
  outline-offset: 2px;
}
.guide-reviews-empty__btn .material-symbols-outlined {
  font-size: 15px;
  color: inherit;
  margin: 0;
}

/* ─── Responsive breakpoints ─── */

/* On tablet, drop to two rows so each control gets full width. */
@media (max-width: 900px) {
  .guide-reviews-filters__row {
    grid-template-columns: 1fr 1fr;
  }
  .guide-reviews-filter:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .guide-reviews-filters {
    margin: 2px 4px 14px;
    padding: 2px 4px 12px;
  }

  /* Hide the "Filter reviews" header text on mobile — the controls
     themselves make the purpose obvious and the title eats a whole
     row of vertical space we can't afford. Clear-all button still
     shows, anchored to the top-right of the rating row. */
  .guide-reviews-filters__head {
    margin-bottom: 0;
    height: 0;
  }
  .guide-reviews-filters__title { display: none; }
  .guide-reviews-filters__clear {
    position: absolute;
    top: -2px;
    right: 4px;
    padding: 4px 9px;
    font-size: 11px;
    z-index: 1;
  }
  .guide-reviews-filters__clear .material-symbols-outlined { font-size: 13px; }

  /* Single column at the top for the rating row, then a 2-column
     grid below for POI + Language so the two selects share a row
     instead of stacking. */
  .guide-reviews-filters__row {
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    align-items: end;
  }
  .guide-reviews-filter:first-child {
    grid-column: 1 / -1;
  }

  .guide-reviews-filter { gap: 5px; }
  .guide-reviews-filter__label {
    font-size: 9.5px;
    letter-spacing: 0.16em;
  }

  /* Compact rating chips — smaller, tighter gap, no shadow on
     active state so the row stays slim. Star icon shrinks too. */
  .guide-reviews-filter__chips { gap: 5px; }
  .guide-reviews-chip {
    padding: 5px 9px;
    font-size: 11.5px;
    gap: 3px;
  }
  .guide-reviews-chip .material-symbols-outlined { font-size: 12px; }
  .guide-reviews-chip.is-active { box-shadow: none; }

  /* Tighter dropdowns — smaller icons, less horizontal padding so the
     selected label has room when the field is half-width. */
  .guide-reviews-dd__trigger {
    padding: 8px 26px 8px 30px;
    font-size: 12.5px;
    border-radius: 9px;
  }
  .guide-reviews-dd__icon  { left: 9px; font-size: 15px; }
  .guide-reviews-dd__caret { right: 6px; font-size: 17px; }
  .guide-reviews-dd__menu  { max-height: 220px; padding: 3px; }
  .guide-reviews-dd__opt   { padding: 8px 10px; font-size: 12.5px; }
  .guide-reviews-dd__opt-check { font-size: 15px; }

  .guide-reviews-filters__status {
    margin-top: 10px;
    padding-top: 9px;
    font-size: 11.5px;
  }
}

/* Very small phones (≤ 380 px): drop the POI + Language pair back
   to a single column so the option text isn't truncated. */
@media (max-width: 380px) {
  .guide-reviews-filters__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Desktop: match the summary card's 36 px / 52 px inset so all three
   regions (summary, filters, list) hang from the same left rail. */
@media (min-width: 1024px) {
  .guide-reviews-filters {
    margin-left: 36px;
    margin-right: 36px;
  }
  .guide-reviews-empty {
    margin-left: 36px;
    margin-right: 36px;
  }
}
@media (min-width: 1280px) {
  .guide-reviews-filters {
    margin-left: 52px;
    margin-right: 52px;
  }
  .guide-reviews-empty {
    margin-left: 52px;
    margin-right: 52px;
  }
}