/* ============================================================================
   mobile.css — Maskit Garden's single authoritative MOBILE layer.
   ----------------------------------------------------------------------------
   RULES OF ENGAGEMENT (keep mobile & desktop edits independent):
   • This file contains ONLY rules inside @media (max-width: …). Never add an
     unguarded rule here — it would leak to desktop and break the isolation.
   • Desktop edits live in styles.css / pergolas.css. Mobile edits live HERE.
   • Loaded AFTER styles.css/pergolas.css, so equal-specificity rules win by
     source order. Author at the same specificity as the base rule.
   • Breakpoints: 768px (primary) and 430px (small-phone). 1100px only for the
     header/hamburger (matches where the desktop nav collapses).
   • Bump the ?v= query on the <link> in every HTML file when you change this.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HEADER / HAMBURGER
   The drawer itself is portalled to <body> in header.jsx so it escapes the
   header's stacking context and always fills the viewport.
   Keep the logo on the left and the menu toggle at the right edge. Collapse
   the desktop's three columns into two when its central navigation is hidden.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .header-row { grid-template-columns: auto 1fr; direction: ltr; }
  .header-cta { justify-self: end; direction: rtl; gap: 10px; }
  .nav-toggle { order: -1; flex-shrink: 0; margin-right: env(safe-area-inset-right, 0px); }
}
@media (max-width: 520px) {
  .header-cta { gap: 8px; }
}

/* ===========================================================================
   PRIMARY MOBILE PASS  @media (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* The gallery's edge-bleed (.gal-scroll-wrap negative margin, styles.css:1443)
     overshoots ~4px past the viewport on phones → stray horizontal scroll. The
     bleed adds nothing at 390px, so drop it; the scroller keeps its own
     internal overflow-x scroll. */
  .gal-scroll-wrap { margin-inline: 0; }

  /* CATEGORIES (bento) — the feature card keeps `grid-column: span 2` from the
     desktop rule, which forces an implicit 2nd column → cramped 91px sliver
     cards. Reset it so every category is a clean full-width card. */
  .bento { grid-template-columns: 1fr; grid-auto-flow: row; gap: 12px; margin-top: 28px; }
  .bento-card { min-height: 240px; }
  .bento-card.is-feature { grid-column: auto; grid-row: auto; min-height: 340px; }
  .bento-card.is-wide { grid-column: auto; }
  .bento-tag, .bento-chips { max-height: none; opacity: 1; }

  /* STRIP GALLERY (category pages) — desktop cards are 280/440px wide; on a
     390px phone that overflows the viewport. Size to the viewport so one card
     fills the screen and the scroll-snap feels native. */
  .gal-col { width: 64vw; }
  .gal-col.wide { width: 78vw; }
  .gal-col.wide .gal-card { height: 58vw; }

  /* LEAD form lede — 22px desktop is too large at 390px. */
  .lead-copy-lede { font-size: 1.125rem; margin-top: 20px; }

  /* LEAD forms — the desktop 2-col .form-row (styles.css) never collapsed on
     phones, cramming two underline inputs into ~160px each. Single column +
     tighter card padding. Applies to every page's .form (home, categories,
     pchoice). */
  .form { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }

  .proj-hero { padding: 36px 0 32px; }
  .proj-hero-inner { grid-template-columns: 1fr; gap: 18px; }
  .proj-hero-title { font-size: calc(clamp(32px, 8vw, 44px) * var(--a11y-font-scale, 1)); }
  .proj-hero-sub { font-size: 1.0625rem; max-width: 40ch; }
  .proj-grid-section { padding: 28px 0 56px; }
  .proj-grid { grid-template-columns: 1fr; gap: 36px; }
  .proj-card-img { margin-bottom: 16px; }
  .proj-card-title { font-size: 1.4375rem; }
  .proj-card-sub { font-size: 1rem; }

  .pdetail-sub { font-size: 1.0625rem; }
  .pdetail-eyebrow { margin-bottom: 10px; }
  .pdetail-hero-scrim {
    background: linear-gradient(0deg, rgba(11,20,24,.76) 0%, rgba(11,20,24,.38) 44%, rgba(11,20,24,.04) 82%);
  }

}

/* ===========================================================================
   SMALL-PHONE POLISH  @media (max-width: 430px)
   ========================================================================== */
@media (max-width: 430px) {
  .lead-copy-lede { font-size: 1.0625rem; max-width: none; }
}

/* Footer typography and layout live together in styles.css at every viewport. */