/* ============================================================
   DETAIL PAGE REDESIGN — v102
   Three-page snap-scroll detail: Hero / Facts / Story.
   Phone-first (390px). Desktop override at bottom.
   Uses only CSS vars from tokens.css — no hardcoded colors
   except where final.html uses them in SVG-level decorations.
   ============================================================ */

/* ── Page-indicator dots (right edge) ──────────────────────── */
.detail-page-dots {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}
.detail-page-dots .dp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(242, 237, 228, 0.18);
  transition: height 150ms ease, border-radius 150ms ease, background 150ms ease;
}
.detail-page-dots .dp-dot.active {
  background: var(--gold, var(--accent));
  height: 12px;
  border-radius: 3px;
}
/* Hide dots on desktop — unnecessary with the 2-col layout */
@media (min-width: 900px) { .detail-page-dots { display: none; } }

/* Right-column wrapper (facts + story). On mobile it must NOT generate a box,
   so the cards stay direct snap children of .cards — display:contents does
   exactly that. Desktop turns it into the scrolling right column. */
.detail-right { display: contents; }

/* ── Hero card ─────────────────────────────────────────────── */
/* Overrides components.css .card-hero to match final.html:
   full-bleed photo, gradient to near-black, content at bottom. */
.card-hero {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: calc(var(--safe-bottom, 0px) + 36px);
  padding-left: 22px;
  padding-right: 22px;
}
.card-hero .hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}
.card-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 15%, rgba(0,0,0,0.96) 88%);
}
.card-hero .hero-content {
  position: relative;
  z-index: 1;
  padding: 0;
}
.card-hero .cat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* Category pill: transparent bg, fg border — matches final.html .cat-pill */
.card-hero .cat-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 237, 228, 0.4);
  color: var(--fg);
  background: transparent;
}
/* Stock chip on hero: no background color fill — icon style only */
.card-hero .stock-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(242, 237, 228, 0.2);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
}
.card-hero .card-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.card-hero .hero-loc {
  font-size: 15px;
  color: rgba(242, 237, 228, 0.62);
  margin: 0;
  letter-spacing: 0;
  font-weight: 400;
}
.card-hero .hero-loc strong {
  color: var(--fg);
  font-weight: 800;
}
/* Scroll cue */
.card-hero .scroll-hint {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.32);
}

/* ── Facts card (card-photostage) ──────────────────────────── */
.card-photostage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  padding: 0;        /* no base-card padding — we tile sections manually */
}
/* Category backdrop SVG — behind everything at low opacity.
   The SVGs use near-black fills (#0d0b09–#221e12) on a near-black page
   background (#0a0a0a). A brightness boost via filter makes the shapes
   visible as warm-brown silhouettes; the ::before/::after overlays then
   tame the overall level so art reads clearly-but-faintly. */
.photostage-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 38%;
  z-index: 0;
  filter: brightness(5) contrast(0.55) sepia(0.35);
}
.photostage-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Reduced from 0.35 → 0.10 so the category backdrop art reads through.
     The ::after gradient still protects text legibility at top and bottom. */
  background: rgba(0, 0, 0, 0.10);
}
.photostage-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Top and bottom scrim kept for text contrast; mid section opened up
     so backdrop art is clearly visible at arm's length on a phone.
     Before: 0.60 / 0.16 / 0.08 / 0.76 → After: 0.55 / 0.08 / 0.04 / 0.70 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.08) 20%,
    rgba(0,0,0,0.04) 48%,
    rgba(0,0,0,0.70) 100%
  );
}
.photostage-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* HEADER — thin gold rule under title */
.spec-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(196, 152, 64, 0.30);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  background: rgba(0, 0, 0, 0.58);
  padding-top: calc(var(--safe-top, 0px) + 18px);
}
.spec-header-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, var(--accent));
}
.spec-header-category {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ABV + PRICE two-stat row — equal siblings, white/cream */
.spec-abv-zone {
  padding: 14px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(0, 0, 0, 0.65);
}
/* ABV column */
.spec-abv-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.spec-gauge {
  flex: 0 0 auto;
  width: 48px;
  height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.gauge-track {
  width: 12px;
  height: 52px;
  background: rgba(30, 28, 24, 0.8);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(196, 152, 64, 0.28);
}
.gauge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, var(--gold, #c49840), rgba(196, 152, 64, 0.38));
  border-radius: 6px 6px 0 0;
  /* height is set inline from abv value */
}
.gauge-label {
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.spec-abv-nums {
  flex: 1;
}
.spec-abv-big {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.spec-abv-unit {
  font-size: 15px;
  font-weight: 300;
  color: rgba(242, 237, 228, 0.70);
  vertical-align: top;
  margin-top: 7px;
  display: inline-block;
}
.spec-abv-sub {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.38);
  margin-top: 2px;
}
/* Price column — same weight/style as ABV, no gold */
.spec-price-col {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.spec-price-eyebrow {
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.38);
  margin-bottom: 4px;
  font-weight: 600;
}
.spec-price-big {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.spec-price-sub {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.38);
  margin-top: 2px;
}
/* When only ABV (no price): remove divider, center ABV */
.spec-abv-zone.abv-only .spec-abv-col {
  border-right: none;
  padding-right: 0;
  justify-content: center;
}
/* When only price (no ABV): full width, no left divider */
.spec-abv-zone.price-only .spec-price-col {
  padding-left: 0;
}

/* TASTING / ORIGIN zone */
.spec-origin-zone {
  flex: 0 0 auto;
  padding: 12px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.spec-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim, rgba(196,152,64,0.65));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.spec-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(196, 152, 64, 0.18);
}
/* spec-origin-place and spec-origin-sub removed — place names no longer
   render inside the "In the glass" zone. Origin lives in the map SVG
   gold label and the spec-grid Region cell only. */
.spec-pull-text {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(242, 237, 228, 0.84);
  font-style: italic;
}

/* SPEC GRID + MAP wrapper — fills remaining space */
.spec-grid-wrap {
  background: rgba(0, 0, 0, 0.86);
  border-top: 1px solid rgba(196, 152, 64, 0.22);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* No-map samples (origin like "Multi-Island Blend" or Bermuda): without the
   map banner the wrapper would flex-grow into a tall empty dark panel. Size it
   to content instead, so the category backdrop fills the space below the spec
   grid rather than an empty bordered void. */
.spec-grid-wrap.no-map {
  flex: 0 0 auto;
  background: transparent;
  border-top: none;
}

/* MAP BANNER */
.map-inset-row {
  position: relative;
  border-bottom: 1px solid rgba(196, 152, 64, 0.16);
  background: rgba(0, 0, 0, 0.48);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.map-inset-svg-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Map SVG: stroke uses currentColor — color set via CSS on the element */
.map-inset-svg-wrap svg {
  width: 78%;
  height: 100%;
  max-height: 180px;
  overflow: visible;
  display: block;
  color: rgba(242, 237, 228, 0.60);  /* base stroke for country outline */
}
/* Gold crosshair/dot/label classes — match theme2.html exactly */
.mx-grat { stroke: rgba(242,237,228,0.08); stroke-width: 0.6; fill: none; }
.mx-inset-fill { fill: rgba(242,237,228,0.05); stroke: none; }
.mx-inset-stroke { fill: none; stroke: rgba(242,237,228,0.60); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mx-dot-ring  { fill: none; stroke: var(--gold, #c49840); stroke-width: 1.4; opacity: 0.88; }
.mx-dot-ring2 { fill: none; stroke: var(--gold, #c49840); stroke-width: 1;   opacity: 0.35; }
.mx-dot       { fill: var(--gold, #c49840); }
.mx-pin       { stroke: var(--gold, #c49840); stroke-width: 1.1; opacity: 0.60; }
.mx-label     { fill: var(--gold, #c49840); font-family: "Georgia","Times New Roman",serif; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
/* Corner bracket decorations */
.map-banner-frame {
  position: absolute;
  inset: 9px 14px;
  pointer-events: none;
  z-index: 1;
}
.map-banner-corner {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(196, 152, 64, 0.38);
}
.map-banner-corner.tl { top: 0;    left: 0;  border-right: none; border-bottom: none; }
.map-banner-corner.tr { top: 0;    right: 0; border-left: none;  border-bottom: none; }
.map-banner-corner.bl { bottom: 0; left: 0;  border-right: none; border-top: none; }
.map-banner-corner.br { bottom: 0; right: 0; border-left: none;  border-top: none; }
/* map-inset-label-col (Production Region overlay) intentionally removed —
   origin appears once in the SVG gold pin label and once in the spec-grid
   Region cell. No additional bottom-left text block. */

/* SPEC GRID */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.spec-cell {
  padding: 10px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.spec-cell:nth-child(even) { border-right: none; }
.spec-cell:last-child,
.spec-cell:nth-last-child(2) { border-bottom: none; }
.spec-cell-label {
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.spec-cell-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.2;
  /* Long origins (e.g. "Healesville, Yarra Valley, Victoria, Australia") clamp
     to 2 lines so one cell can't wrap taller than its neighbour and break the
     grid rhythm — esp. in the narrower desktop right column. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.spec-cell-value.mono {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
}

/* ── Story card ─────────────────────────────────────────────── */
.card-story-v2 {
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 36px;
  /* override base .card padding for this specific layout */
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 36px;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.story-v2-header {
  padding: 20px 22px 16px;
  padding-top: calc(var(--safe-top, 0px) + 20px);
  border-bottom: 1px solid rgba(196, 152, 64, 0.30);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-shrink: 0;
}
.story-v2-header-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold, var(--accent));
}
.story-v2-header-name {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.story-v2-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bottom, 0px) + 36px);
}
/* Lead pull quote — 17px per final.html spec */
.story-lead {
  padding: 22px 22px 0;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
}
/* Story sections — small-caps eyebrow + gold left rule, NO numbers */
.story-section {
  padding: 22px 22px 0;
}
.section-title-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}
.section-title-text {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-variant: small-caps;
  font-weight: 700;
  color: var(--fg-dim);
  border-left: 2px solid var(--gold, var(--accent));
  padding-left: 10px;
}
.section-body {
  font-size: 14px;
  line-height: 1.72;
  font-weight: 300;
  color: var(--fg-dim);
}
/* Fun fact — gold left border + faint gold bg */
.story-funfact {
  margin: 24px 22px 0;
  padding: 16px 18px;
  border-left: 2px solid var(--gold, var(--accent));
  background: var(--gold-faint, rgba(196,152,64,0.12));
}
.funfact-eyebrow {
  font-size: 7.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold, var(--accent));
  font-weight: 600;
  margin-bottom: 8px;
}
.funfact-body {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
  color: var(--fg-dim);
}

/* ── Desktop overrides (>= 900px) ──────────────────────────── */
@media (min-width: 900px) {
  /* Hide dots handled above */

  /* ───────────────────────────────────────────────────────────────────
     DESKTOP DETAIL LAYOUT — single source of truth (this block, last-loaded,
     applies on mouse AND touch). Replaces the old components.css
     `@media (min-width:900px) and (pointer:fine)` detail block, now deleted:
     that block was clobbered by detail.css base rules (load order) AND skipped
     touchscreen laptops (pointer:coarse), so the desktop hero rendered as a
     cropped thumbnail with the title dumped at the bottom. Two columns: a
     pinned full-bleed photo POSTER left, facts + story scroll right. */
  .detail {
    scroll-snap-type: none;
    overflow-y: auto;
    touch-action: auto;
    animation: none;
  }
  .detail-back { position: fixed; top: 20px; left: 24px; }
  .detail-edit { position: fixed; top: 20px; right: 24px; }

  .detail .cards {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.2fr);
    align-items: start;
    align-content: start;
    max-width: 1240px;
    margin: 0 auto;
  }

  /* Hero = full-bleed poster pinned as the left column. The BASE rules already
     make .hero-image absolute / inset:0 / cover with a bottom gradient and put
     the content at the bottom — we keep all of that and only pin + size it.
     A DEFINITE height (not min-height) stops the sticky pin from inflating the
     shared grid row (which used to open a void before the story card). */
  .card-hero {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    min-height: 0;
    scroll-snap-align: none;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: calc(var(--safe-bottom, 0px) + 48px);
    border-right: 1px solid var(--line);
    overflow: hidden;
  }
  .card-hero .card-title { font-size: clamp(28px, 2.2vw, 38px); }
  .card-hero .hero-loc { font-size: 16px; }
  .card-hero .scroll-hint { display: none; }

  /* The facts + story wrapper becomes the scrolling right column. Its two
     cards stack with no inter-row gap because they no longer share a grid
     row with the tall sticky hero. */
  .detail-right {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    min-width: 0;
  }

  /* card-photostage in desktop context: right column, normal flow.
     min-height MUST be content-driven here — a forced 100dvh let the
     flex:1 spec-grid-wrap / map-inset-row grow to fill a tall window,
     ballooning the map into a giant empty bordered box on wide monitors. */
  .card-photostage {
    grid-column: 2;
    position: static;
    height: auto;
    min-height: auto;
    scroll-snap-align: none;
    overflow-y: visible;
  }
  /* Backdrop only makes visual sense when the card is full-bleed;
     on desktop it sits in a scrolling column, so dim it further. */
  .photostage-bg { opacity: 0.55; }

  /* Map is a fixed, proportioned banner on desktop — never flex-fills.
     Pairs with the content-driven card height above. */
  .map-inset-row {
    flex: 0 0 auto;
    height: 300px;
  }
  .map-inset-svg-wrap svg {
    width: 66%;
    max-height: 248px;
  }

  /* Story card also in right column */
  .card-story-v2 {
    grid-column: 2;
    position: static;
    height: auto;
    min-height: auto;
    scroll-snap-align: none;
    overflow-y: visible;
    padding-bottom: 64px;
    border-top: 1px solid var(--line);
  }
  .card-story-v2 .story-v2-scroll {
    overflow-y: visible;
    padding-bottom: 0;
  }

  /* On desktop the spec-abv-zone is still side-by-side; numbers can be
     a touch smaller since there is more context around them. */
  .spec-abv-big, .spec-price-big { font-size: 38px; }
}