/* ============================================================
   GUIDE PAGES — SUPPORTING CONTENT STYLES
   ============================================================ */

/* ── Guide Hero ── */
.guide-hero {
  position: relative;
  padding: 180px 0 80px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
.guide-hero__bg {
  position: absolute; inset: 0;
}
.guide-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.guide-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.97) 0%, rgba(13,13,13,0.5) 50%, rgba(13,13,13,0.3) 100%);
}
.guide-hero__content {
  position: relative; z-index: 1;
  /* .guide-hero is a flex container, so this item shrink-wraps to its text
     and the hero indent drifts page-to-page with title length. Full width
     pins the hero text to the same left edge as the body columns. */
  width: 100%;
}
.guide-hero__breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 16px;
}
.guide-hero__breadcrumb a { color: var(--accent); }
.guide-hero__breadcrumb a:hover { text-decoration: underline; }
.guide-hero__tag {
  display: inline-block;
  background: var(--accent); color: var(--dark);
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 2px; margin-bottom: 16px;
}
.guide-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900; line-height: 0.95;
  text-transform: uppercase; margin-bottom: 16px;
}
.guide-hero__sub {
  font-size: 1.15rem; color: rgba(255,255,255,0.7);
  max-width: 640px; line-height: 1.65;
}

/* Breadcrumb bar — sits under the hero image rather than over it, so the
   trail back out of the page is legible instead of fighting the photo. */
.guide-crumbbar {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.guide-crumbbar .container { padding-top: 16px; padding-bottom: 16px; }
/* With no hero above it the crumb bar is the first thing on the page, and
   the nav is fixed — clear its 72px so the trail back out isn't hidden. */
.guide-crumbbar--top .container { padding-top: 96px; }
.guide-crumbbar a { color: var(--accent); text-decoration: none; }
.guide-crumbbar a:hover { text-decoration: underline; }
.guide-crumbbar span { margin: 0 6px; color: rgba(255,255,255,0.3); }

/* ── Guide Body ── */
.guide-body {
  padding: 80px 0;
}
.guide-body__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}

/* Single-column variant — used by the per-winery pages. No sidebar: the
   booking CTA sits inline in the flow, where you've just read the reason
   to book. One readable measure, centred. */
/* Doubled class: the responsive .guide-body__inner rules live further down
   this file and would otherwise win on source order. */
/* Keep the two-column track sizing even with no sidebar, so the text column
   is the same width and sits on the same left edge as every other guide
   page — the sidebar track is simply left empty. */
.guide-body__inner.guide-body__inner--single {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 80px;
}

/* ── Main content column ── */
.guide-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; text-transform: uppercase;
  line-height: 1; margin: 56px 0 20px;
  color: var(--white);
}
.guide-content h2:first-child { margin-top: 0; }

.guide-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); margin: 36px 0 12px;
}

.guide-content p {
  font-size: 1.05rem; line-height: 1.8;
  color: rgba(255,255,255,0.75); margin-bottom: 16px;
}

.guide-content ul, .guide-content ol {
  margin: 16px 0 24px 20px;
  color: rgba(255,255,255,0.75);
}
.guide-content li {
  font-size: 1rem; line-height: 1.7;
  margin-bottom: 8px;
}
.guide-content li::marker { color: var(--accent); }

.guide-content strong { color: var(--white); }

.guide-content img {
  width: 100%; border-radius: 8px; margin: 32px 0;
}

/* ── Embedded trail map (shared component) on guide pages ──────────────
   The map renders inside .guide-content, so the generic content-image
   styling above leaks onto Leaflet tiles + marker icons — the 32px margin
   shoves tiles apart (roads/trail misalign) and resizes the marker icons.
   Neutralise it for everything inside the map module, and restore the
   bungy logo's size. */
.guide-content .guide-route-map img {
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}
.guide-content .guide-route-map .wiz-marker--bungy img {
  width: 72px !important;
}

/* Legend ("the key") sits below the map on the dark guide background —
   make it white and space it from the map above. */
.guide-content .map-legend--above {
  margin: 16px 0 0;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
.guide-content .map-legend--above .map-legend__item {
  color: rgba(255,255,255,0.85);
}

.guide-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 16px 24px; margin: 32px 0;
  background: var(--dark-2); border-radius: 0 6px 6px 0;
}
.guide-content blockquote p {
  font-style: italic; color: rgba(255,255,255,0.8); margin: 0;
}

/* ── Sidebar ── */
.guide-sidebar {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 24px;
}

.guide-cta-card {
  background: var(--dark-2);
  border: 1px solid rgba(200,241,53,0.2);
  border-radius: 10px; padding: 32px 28px;
  text-align: center;
}
.guide-cta-card__eyebrow {
  font-family: var(--font-display); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.guide-cta-card__title {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 800; text-transform: uppercase; line-height: 1.1;
  margin-bottom: 8px;
}
.guide-cta-card__price {
  font-size: 0.95rem; color: rgba(255,255,255,0.6); margin-bottom: 20px;
}
.guide-cta-card__price strong {
  font-size: 1.8rem; color: var(--accent);
  font-family: var(--font-display); font-weight: 800;
}
.guide-cta-card__trust {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 16px;
}

.guide-related {
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 28px 24px;
}
.guide-related__title {
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 16px;
}
.guide-related a {
  display: block; padding: 10px 0;
  font-size: 0.95rem; color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--transition);
}
.guide-related a:last-child { border-bottom: none; }
.guide-related a:hover { color: var(--accent); }

/* ============================================================
   WINERY PAGES — blocks shared by every /gibbston-valley-wineries/<slug>
   ============================================================ */

/* The focused map. Same shared component as the homepage, so this only
   sets the box — .map-wrapper's own 560px min-height is too tall here. */
.guide-content .winery-map {
  margin: 28px 0 8px;
  height: 420px; min-height: 0;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: none;
}
.guide-content .winery-map #trail-map { height: 100%; min-height: 0; }
.winery-mapnote {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 0 8px !important;
}

/* Visiting facts — the practical stuff, above any opinion. A definition
   list so screen readers and search engines get the label/value pairing. */
/* Bookings use one of three fixed levels across every winery page, so the
   answer is comparable stop to stop rather than a sentence to interpret:
     winery-booking--none        "Not essential"
     winery-booking--recommended "Recommended"
     winery-booking--groups      "Essential for 6+"
   The wording carries the meaning; colour only reinforces it. */
.winery-booking {
  display: inline-block; margin-right: 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.winery-booking--none { color: var(--text-muted); }
.winery-booking--recommended { color: var(--accent); }
.winery-booking--groups { color: #ff3581; }

/* The two fact sections sit side by side once there's room, stacking below
   900px. Each keeps its own heading so the split still reads on a phone. */
/* Four blocks in two rows: contact | hours, then tastings+bookings | food+
   menus. Splitting them this way is what makes Tastings and Food start on
   the same line — the taller of the first pair sets where the second begins.
   The row gap is the breath between the contact details and the visit ones. */
.winery-info-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
@media (min-width: 900px) {
  .winery-info-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  /* Narrower label column in the two-up layout, so the values keep room. */
  .winery-info-grid .winery-info { grid-template-columns: 96px minmax(0, 1fr); }
}

/* Label/value rows: how to reach them in one section, what to expect on the
   visit in the next. Label column is fixed so both sections line up. */
.winery-info {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: 0; margin: 0 0 8px;
  align-content: start;
}
.winery-info dt, .winery-info dd {
  padding: 13px 0; margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.winery-info dt {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem; color: var(--text-muted); padding-right: 16px;
}
.winery-info dd { color: rgba(255,255,255,0.85); font-size: 1rem; }
.winery-info a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(200,241,53,0.35); }
.winery-info a:hover { border-bottom-color: var(--accent); }
.winery-info .muted { color: var(--text-muted); font-size: 0.9rem; }
/* Tappable address/phone need a real target on a phone, not a text-sized one. */
@media (max-width: 768px) {
  .winery-info dd a { display: inline-block; padding: 4px 0; }
  .winery-info dd .muted { display: block; padding: 0; }
}
@media (max-width: 560px) {
  .winery-info { grid-template-columns: 1fr; }
  .winery-info dt { padding-bottom: 0; border-bottom: none; }
  .winery-info dd { padding-top: 4px; }
}

/* Page head for a winery page, which carries no hero photo: the title sits
   in the column with the rest of the article, so the pictures and the map
   are the first things you see rather than a slab of overlaid text. */
.guide-body--nohero { padding-top: 44px; }
.winery-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 900; line-height: 0.95; text-transform: uppercase;
  color: var(--white); margin: 0 0 14px;
}
.winery-stand {
  font-size: 1.15rem !important; line-height: 1.6;
  color: rgba(255,255,255,0.72) !important; margin: 0 0 26px !important;
}

/* Opening hours: the whole week, always visible. winery.js marks today in
   New Zealand time so the relevant line stands out without hiding the rest. */
.winery-hours__week { margin: 2px 0; border-collapse: collapse; font-size: 0.92rem; }
.winery-hours__week th, .winery-hours__week td {
  text-align: left; font-weight: 400; padding: 4px 24px 4px 0;
  color: rgba(255,255,255,0.6);
}
.winery-hours__week .is-today th, .winery-hours__week .is-today td {
  color: var(--white); font-weight: 600;
}

/* The wine range, laid out like a shop: bottle shot, name, vintage. The
   photography is the winery's own, served from their Shopify CDN, and every
   bottle links straight to its page in their shop. */
.winery-wines {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 16px; margin: 18px 0 8px; padding: 0; list-style: none;
}
.winery-wines li { margin: 0; }
.winery-wine { display: block; text-align: center; }
.winery-wine__shot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; padding: 14px; margin-bottom: 10px;
  border-radius: 8px; background: #f4f4ef;
  transition: transform var(--transition), box-shadow var(--transition);
}
.winery-wine__shot img {
  max-width: 100%; max-height: 100%; width: auto !important;
  object-fit: contain; margin: 0 !important; border-radius: 0 !important;
}
.winery-wine:hover .winery-wine__shot {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.winery-wine__name {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 0.95rem; line-height: 1.2; color: var(--white);
}
.winery-wine:hover .winery-wine__name { color: var(--accent); }
.winery-wine__vintage {
  display: block; font-size: 0.78rem; color: var(--text-muted);
  letter-spacing: 0.06em; margin-top: 3px;
}

/* Photo gallery */
.winery-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 20px 0 8px;
}
.winery-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; margin: 0 !important;
}

/* Video: a click-to-play facade, so no YouTube iframe (and no YouTube
   cookies or ~1 MB of player) loads unless the visitor asks for it. */
.winery-video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; margin: 20px 0 8px;
  background: var(--dark-2);
}
.winery-video iframe, .winery-video__play { width: 100%; height: 100%; border: 0; display: block; }
.winery-video__play { position: relative; padding: 0; cursor: pointer; background: none; }
.winery-video__play img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.winery-video__icon {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--accent); color: var(--dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; padding-left: 5px;
  transition: transform var(--transition);
}
.winery-video__play:hover .winery-video__icon { transform: scale(1.08); }
.winery-credit {
  font-size: 0.82rem !important; color: var(--text-muted) !important;
  margin: 0 0 8px !important;
}

/* Booking CTA inside the article — the same component the sales page uses,
   dropped in sparingly rather than a box at every scroll depth. */
.guide-content .inline-cta { text-align: center; margin: 48px 0; }
.guide-content .inline-cta .section-eyebrow { margin-bottom: 14px; }
.guide-content .inline-cta .hero__reassurance {
  margin: 16px 0 0 !important; font-size: 0.82rem !important;
}

/* Nearest stops — a scannable list, not prose. */
.winery-near { list-style: none; margin: 0 0 8px !important; padding: 0; }
.winery-near li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.winery-near li::marker { content: none; }
.winery-near b {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--white); font-size: 1.05rem;
}
.winery-near span { color: rgba(255,255,255,0.6); font-size: 0.95rem; }

/* Prev/next along the trail — keeps you moving through the 11 stops. */
.winery-nextprev {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.winery-nextprev a {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--white); font-size: 1.05rem;
}
.winery-nextprev a:hover { color: var(--accent); }
.winery-nextprev small {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.78rem; text-transform: none; letter-spacing: 0.02em;
  color: var(--text-muted);
}
.winery-nextprev__next { text-align: right; margin-left: auto; }

@media (max-width: 600px) {
  .guide-content .winery-map { height: 440px; }
}

/* ── CTA Banner (bottom of article) ── */
.guide-banner {
  padding: 80px 0;
  background: var(--dark-2);
  text-align: center;
}
.guide-banner__eyebrow {
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.guide-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 0.95; margin-bottom: 16px;
}
.guide-banner__sub {
  font-size: 1.05rem; color: rgba(255,255,255,0.6);
  max-width: 560px; margin: 0 auto 32px; line-height: 1.6;
}
.guide-banner__trust {
  font-size: 0.85rem; color: var(--text-muted); margin-top: 20px;
}

/* ── Mobile Sticky CTA ── */
.guide-sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(13,13,13,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(200,241,53,0.2);
  padding: 12px 20px;
}
.guide-sticky-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 600px; margin: 0 auto;
}
.guide-sticky-cta__text {
  font-family: var(--font-display); font-size: 0.85rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.guide-sticky-cta__text span { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .guide-body__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* Doubled class to match the base rule's specificity, or the empty
     sidebar track would keep squeezing the column on narrow screens. */
  .guide-body__inner.guide-body__inner--single {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .guide-sidebar {
    position: static;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .guide-sticky-cta { display: block; }
}
@media (max-width: 600px) {
  .guide-hero { padding: 140px 0 60px; min-height: 340px; }
  .guide-sidebar { grid-template-columns: 1fr; }
}

/* Gallery images are clickable (shared lightbox) — show it. */
.winery-gallery img { cursor: zoom-in; }

/* Shop button sits centred under the bottle grid. */
.winery-shop-cta { text-align: center; margin: 24px 0 8px !important; }

/* Nearest-stop names link through to that winery's page. */
.winery-near b a { color: inherit; text-decoration: none; }
.winery-near b a:hover { color: var(--accent); }

/* Common questions — plain Q/A pairs. Kept as a definition list so the
   pairing is explicit to screen readers and matches the FAQPage schema. */
.winery-faq { margin: 0 0 8px; }
/* Questions take the same grey label treatment as the Address/Phone labels,
   so the answer is the thing you read and the question is the signpost above
   it. Set slightly larger than those labels since it's a full sentence. */
.winery-faq dt {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.95rem; color: var(--text-muted);
  margin: 28px 0 6px;
}
.winery-faq dt:first-child { margin-top: 0; }
.winery-faq dd {
  margin: 0; font-size: 1.05rem; line-height: 1.8;
  color: rgba(255,255,255,0.75);
}

/* Links inside running text were the same colour as the text with no
   underline, so nothing marked them as links. Same treatment as the details
   list: accent, with a rule under it. Buttons opt out. */
.guide-content p a:not(.btn),
.winery-faq dd a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(200,241,53,0.35);
}
.guide-content p a:not(.btn):hover,
.winery-faq dd a:hover { border-bottom-color: var(--accent); }

/* Cellar-door index on the wineries hub: the distance line under each name,
   and the link through to that winery's own page. */
.winery-index__meta {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem !important; color: var(--text-muted) !important;
  margin: -6px 0 10px !important;
}
.winery-index__more { white-space: nowrap; }

/* ── Route map band ──────────────────────────────────────────────────────
   On the wineries hub the map is the first thing you see, at full container
   width rather than inside the 752px article column. That extra width is
   what makes the docked right-hand detail panel viable here, so the band
   borrows the homepage's .trail-map-grid wholesale. */
.guide-map-band { padding: 48px 0 4px; }
.guide-map-band .trail-map-grid { margin-top: 0; }
.guide-map-band__note {
  max-width: 720px; margin: 20px auto 0; text-align: center;
  color: var(--text-muted); font-size: 0.95rem; line-height: 1.6;
}
/* The map leads, so the prose under it starts closer than a full section. */
.guide-map-band + .guide-body { padding-top: 44px; }

@media (max-width: 768px) {
  /* Give the map the screen, as the homepage does. */
  .guide-map-band { padding: 20px 0 4px; }
  .guide-map-band .container { padding-left: 8px; padding-right: 8px; }
  .guide-map-band__note { padding: 0 16px; font-size: 0.9rem; }
  .guide-map-band + .guide-body { padding-top: 32px; }
}

/* The map is the payload on this page, so the hero is trimmed to let the
   map crest the fold on a laptop instead of filling the first screen. */
.guide-hero--compact { padding: 120px 0 44px; min-height: 0; }
@media (max-width: 768px) {
  .guide-hero--compact { padding: 110px 0 32px; min-height: 0; }
}

/* ── Cellar-door index: one white card per winery ────────────────────────
   Same card treatment as the winery grid on the homepage -- white panel,
   black name, photo flush to the edge -- so the two read as the same thing
   in two places. The whole card is the link; the "Visiting X by bike" line
   at the bottom is a span rather than an anchor, since an <a> inside an
   <a> is invalid. */
.winery-index__item {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
  margin: 0 0 24px;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.winery-index__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.winery-index__photo { display: block; background: #f4f4ef; }
.winery-index__photo img {
  display: block; width: 100%; height: 100%; min-height: 200px;
  object-fit: cover; margin: 0 !important; border-radius: 0 !important;
}
.winery-index__text { display: block; padding: 24px; }

/* The name matches the homepage card's: display face, black, uppercase. */
.guide-content .winery-index__item h3 {
  color: #0d0d0d; margin: 0 0 6px;
  font-size: 1.3rem; letter-spacing: 0.04em;
}
.winery-index__meta {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.85rem; color: rgba(13,13,13,0.55);
  margin: 0 0 12px;
}
.winery-index__desc {
  display: block;
  font-size: 0.95rem; line-height: 1.65;
  color: rgba(13,13,13,0.75);
}
/* Reads as the link it is, in the card's own ink rather than lime -- lime
   on white is about 1.4:1. */
.winery-index__more {
  display: inline-block; margin-top: 14px;
  font-weight: 600; font-size: 0.95rem;
  color: #0d0d0d; border-bottom: 2px solid #0d0d0d;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Too narrow to sit side by side -- photo on top, as on the homepage. */
  .winery-index__item { grid-template-columns: 1fr; margin-bottom: 20px; }
  .winery-index__photo img { height: 200px; min-height: 0; }
  .winery-index__text { padding: 20px 18px; }
  .winery-index__more { white-space: normal; }
}

/* ═══ Winery pages: readable on black ═════════════════════════════════
   These pages are reference material -- hours, an address, tasting prices,
   a wine list, FAQs. The guide theme sets body copy at 75% white and
   labels at #888, which is fine for a few paragraphs of prose and too low
   for a page you actually read facts off. Everything below lifts the type
   toward white; the layout is untouched.

   Scoped to body.winery-page so the hub and the trail guides keep the
   softer treatment they were designed with. */
body.winery-page .guide-content p,
body.winery-page .guide-content ul,
body.winery-page .guide-content ol { color: rgba(255,255,255,0.92); }
body.winery-page .winery-stand { color: rgba(255,255,255,0.92) !important; }

/* Labels: the grey signposts beside each fact. Still quieter than the
   value they label, but no longer #888 on black. */
body.winery-page .winery-info dt,
body.winery-page .winery-faq dt { color: rgba(255,255,255,0.62); }
body.winery-page .winery-info dd,
body.winery-page .winery-faq dd { color: rgba(255,255,255,0.95); }

/* Hours: today's row is already white and bold -- the rest of the week
   was 60% and is the part people scan for tomorrow. */
body.winery-page .winery-hours__week td { color: rgba(255,255,255,0.8); }

body.winery-page .winery-near span { color: rgba(255,255,255,0.8); }
body.winery-page .winery-nextprev { color: rgba(255,255,255,0.7); }
body.winery-page .winery-mapnote { color: rgba(255,255,255,0.7) !important; }
body.winery-page .winery-credit { color: rgba(255,255,255,0.6) !important; }
body.winery-page .guide-crumbbar { color: rgba(255,255,255,0.7); }

/* ── Map title bar (wineries hub) ────────────────────────────────────────
   Replaces the Next Stop arrows and the detail panel. It stays out of the
   way until you pick a stop, then names it and offers its page. */
.map-titlebar {
  /* 60% of the map, centred -- full width read as a banner across it. */
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 60%; min-width: 340px; bottom: 16px; z-index: 1002;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 12px 12px 20px;
  background: rgba(13,13,13,0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.map-titlebar[hidden] { display: none; }
.map-titlebar__name {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #fff; min-width: 0;
}
.map-titlebar__btn {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--accent); color: #0d0d0d;
  padding: 10px 16px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
}
.map-titlebar__btn:hover { background: #fff; }
.map-titlebar__btn[hidden] { display: none; }

@media (max-width: 600px) {
  /* 60% of a phone is too narrow for a winery name and a button, so the
     bar goes back to the full width of the map there. */
  .map-titlebar {
    left: 8px; right: 8px; transform: none;
    width: auto; min-width: 0; bottom: 8px;
    gap: 10px; padding: 10px 10px 10px 14px;
  }
  .map-titlebar__name { font-size: 0.95rem; }
  .map-titlebar__btn { font-size: 0.75rem; padding: 9px 12px; }
}