/* Highway 20 — responsive rules (shared by index.html and crew.html).
   Inline styles carry the desktop design; these class-based media queries
   restack it for tablets and phones. */

/* Beer section: stacked by default, two columns on wide screens */
.h20-beer-grid { grid-template-columns: 1fr; }

/* Photo blocks: enforce fill geometry in CSS so full-bleed images can never
   collapse to their natural aspect, even if inline styles are lost. The
   transform and object-position stay inline (parallax + per-photo focus). */
.h20-photo { position: relative; overflow: hidden; }
.h20-photo > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Nothing may create sideways scroll — clamp the page and third-party
   embeds (Untappd injects fixed-width elements on phones). */
html, body { overflow-x: clip; max-width: 100%; }
img, video { max-width: 100%; }

/* Untappd menu: its content is designed ~600px wide. On narrow screens,
   shrink it natively with zoom — pure CSS, no scripting. */
@media (max-width: 620px) { #menu-container { zoom: 0.62; } }
@media (max-width: 460px) { #menu-container { zoom: 0.56; } }
@media (max-width: 390px) { #menu-container { zoom: 0.52; } }

/* The zoomed menu must never dictate the column's width — let grid items
   shrink and clip anything the menu still insists on. */
.h20-beer-grid > * { min-width: 0; max-width: 100%; }
#menu-container { overflow-x: hidden; }
@media (min-width: 1100px) {
  .h20-beer-grid { grid-template-columns: minmax(360px, 1fr) minmax(320px, 663px); }
  .h20-beer-left { position: sticky; top: 96px; }
}

@media (max-width: 900px) {
  /* Two-column feature sections stack */
  .h20-two-col { grid-template-columns: 1fr !important; }
  /* Plan Your Visit: 4 -> 2 columns */
  .h20-visit-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Bartenders: 5 -> 3 columns */
  .h20-bartender-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* Nav: tighter links */
  .h20-nav-links { gap: 20px !important; }
  .h20-nav-brand { display: none !important; }
}

@media (max-width: 600px) {
  /* Bartenders: 2 columns on phones */
  .h20-bartender-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Plan Your Visit: single column */
  .h20-visit-grid { grid-template-columns: 1fr !important; }
  /* Family photo pair keeps 2-up but loses the stagger */
  .h20-photo-pair img { transform: none; }
  .h20-photo-pair > * { margin-top: 0 !important; }
  /* Nav: hide section links on phones (page scrolls; button remains) */
  .h20-nav-links a.h20-navlink { display: none; }

  /* Grid/flex items must never widen their section past the screen */
  main section > *, main section div { min-width: 0; }
  /* Event rows: slimmer date column + tighter padding so they fit */
  #events article { grid-template-columns: 52px 1fr auto !important; gap: 14px !important; padding: 18px 6px !important; }

  /* Phones: lighter, airier scale — desktop sizes read oversized on tall screens */
  :root {
    --type-hero: 500 clamp(40px, 11vw, 52px)/1.06 var(--font-serif-display);
    --type-display: 500 clamp(30px, 8vw, 38px)/1.12 var(--font-serif-display);
    --type-title: 500 24px/1.2 var(--font-serif-display);
    --type-subtitle: 500 20px/1.3 var(--font-serif-display);
    --type-body-lg: 300 16.5px/1.7 var(--font-sans-body);
    --type-body: 400 15px/1.65 var(--font-sans-body);
    --space-section: 72px;
    --gutter: 20px;
  }
  /* Tall photos shrink so content keeps flowing */
  .h20-photo-pair > * { height: 300px !important; }
  /* In-flow photo blocks: cap heights on phones (full-bleed absolute
     backgrounds keep their section's size and are untouched). */
  .h20-photo:not([style*="absolute"]) { height: auto !important; max-height: 44vh !important; aspect-ratio: 4 / 3; }
  /* Patio + hero bands: shorter on phones */
  header#top { min-height: 78vh !important; height: 78vh !important; }
}