/* Responsive layer for Genaura site.
   Components use inline styles, so mobile overrides use two mechanisms:
   1) shrink the design-token CSS variables the components read (spacing + type scale);
   2) collapse the tagged multi-column grids to a single column with !important
      (needed to beat the components' inline grid-template-columns). */

/* Prevent any accidental horizontal scroll on small screens.
   Use overflow-x:clip (not hidden): per spec, `hidden` on the root forces the
   other axis to compute to `auto`, creating a nested scroll context and
   breaking normal vertical scroll; `clip` leaves overflow-y untouched. */
html { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* ---- Tablet / small laptop ---- */
@media (max-width: 900px) {
  .g-hero, .g-2col { grid-template-columns: 1fr !important; }
  .g-hero { gap: var(--space-6) !important; }
  .g-2col > div { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }
  .g-footer { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
}

/* ---- Phone ---- */
@media (max-width: 640px) {
  :root {
    --gutter-lg: 20px;
    --gutter: 16px;
    --section-y: 56px;
    --section-y-lg: 72px;
    --space-9: 56px;
    --space-8: 40px;
    --size-5xl: 2.625rem;   /* hero: 72 -> 42 */
    --size-4xl: 2.25rem;
    --size-3xl: 1.875rem;
    --size-2xl: 1.5rem;
    --size-xl: 1.3125rem;
    --size-lg: 1.1875rem;
  }

  /* stack every tagged multi-column grid */
  .g-hero, .g-band, .g-2col, .g-footer { grid-template-columns: 1fr !important; }
  .g-hero { gap: var(--space-5) !important; }
  .g-band { gap: var(--space-4) !important; }
  .g-footer { gap: var(--space-6) !important; }

  /* DetailList: number + label on row 1, note wraps under the label */
  .g-detail { grid-template-columns: 30px 1fr !important; row-gap: 2px !important; column-gap: var(--space-3) !important; }
  .g-detail > :nth-child(3) { grid-column: 2 !important; }

  /* Header nav: let the links wrap instead of overflowing */
  .g-nav { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 10px 18px !important; }

  h1 { letter-spacing: -0.01em; }
}