/* GG-68 — venue detail band layout.
 *
 * A linked file, not an inline <style>, for two hard test reasons:
 *   1. tests/test_venue_detail_page.py asserts bare `"gg-strip" not in html` /
 *      `"gg-map" not in html` on a coordinate-less venue. An inline block emits
 *      every selector name onto every page. Grid hooks therefore use the gg-a-*
 *      prefix, which contains neither substring — do NOT rename them.
 *   2. base.html shares ONE cache-buster across all first-party assets, pinned to
 *      ?v=4 by test_all_icon_references_share_one_cache_buster. Bump ALL of them
 *      together or none.
 *
 * This sheet loads on EVERY page (it is linked from base.html), so every rule here
 * is scoped under .gg-vlayout or a gg-a-* / gg-strip-* class. A bare element rule
 * would restyle home, the category pages, About and the 404.
 */

.gg-vlayout { display: grid; gap: 1.5rem 2rem; }

/* Hours is a day/time pair grid designed for ~21rem; never let it stretch. */
.gg-vlayout .gg-a-hours > * { max-width: 21rem; }

@media (min-width: 768px) {
  /* grid-area assignments live INSIDE the breakpoint: below it no named areas
     exist, and a grid-area referencing an undefined name resolves against
     implicit lines — every block lands in the SAME cell and the opaque map
     paints over the strip, nearby and tagline (measured at 375px, 2026-08-11).
     Mobile is pure auto-placement in DOM order, by design. */
  .gg-vlayout .gg-a-tagline { grid-area: tagline; }
  .gg-vlayout .gg-a-facts   { grid-area: facts; }
  .gg-vlayout .gg-a-chips   { grid-area: chips; }
  .gg-vlayout .gg-a-hours   { grid-area: hours; }
  .gg-vlayout .gg-a-strip   { grid-area: strip; }
  .gg-vlayout .gg-a-map     { grid-area: map; }
  .gg-vlayout .gg-a-nearby  { grid-area: nearby; }

  .gg-vlayout {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    /* Class A and C — hours present (card, or the one-line fallback). */
    grid-template-areas:
      "tagline tagline"
      "facts   facts"
      "chips   chips"
      "strip   map"
      "hours   nearby";
  }

  /* Class A and C in practice — no outdoor facts. A declared-but-empty facts
     track would still collect row-gap on BOTH sides (~24px of dead space between
     tagline and chips), so the row is omitted rather than left to collapse.
     data-facts is set from `not v.outdoor_chips`. Listed BEFORE the data-hours
     variant: both are (0,2,0), so on the (today nonexistent) outdoor-without-facts
     combination the later data-hours rule wins. */
  .gg-vlayout[data-facts="none"] {
    grid-template-areas:
      "tagline tagline"
      "chips   chips"
      "strip   map"
      "hours   nearby";
  }

  /* Class B — outdoor: facts row present, hours area EMPTY. */
  .gg-vlayout[data-hours="none"] {
    grid-template-areas:
      "tagline tagline"
      "facts   facts"
      "chips   chips"
      "strip   map"
      "nearby  nearby";
  }

  /* .gg-a-map is a WRAPPER; #gg-map is its child and must fill the row. This is
     (0,1,1) and beats h-64 (0,1,0) — which is why it is scoped inside the media
     query, so the mobile h-64 still governs below 768px. */
  .gg-vlayout .gg-a-map { min-height: 16rem; }
  .gg-vlayout .gg-a-map > div { height: 100%; }
}

/* The current-venue chip grows LEFTWARD from the rail into a lane only as wide as
 * the rail offset, inside a container that can only scroll RIGHT. Cap it and let it
 * wrap. Wrapping then needs BLOCK-axis room: overflow-x:auto forces overflow-y:auto,
 * so a wrapped chip at either flipped extreme (north 4.63%, south 96.37%) would be
 * clipped rather than revealed. padding-block reserves that room without changing
 * the rail height, so every mark keeps its position on the same scale.
 * Sized against point-arena-lighthouse (13.3px of top slack), the tightest case. */
.gg-strip-scroll { padding-block: 1.25rem; }
.gg-strip-you-chip {
  display: inline-block;
  max-width: 7.4rem;          /* the lane width; matches the rail offset */
  overflow-wrap: break-word;
  text-align: right;
}