/**
 * MADDev Bootstrap — THE viewport media-query file.
 *
 * House rule (theme-css.md): this is the only place in the theme where a
 * viewport @media may be written, and each block contains nothing but :root
 * token redefinitions. Tiers are Bootstrap-aligned: 48rem / 62rem / 75rem.
 *
 * As of 2026-09-10 there are no viewport queries left anywhere else in this
 * theme — style.css, project.css and admin-tab.css are clean. Never add a new
 * one outside this file; add a token in tokens.css instead.
 */

/* ── Tier: >= 48rem (768px) — tablets ───────────────────────────────── */
@media (min-width: 48rem) {
  :root {
    --mad-gutter: clamp(2rem, 6vw, 4rem);
    /* 4-up from the tablet tier, which is what the `max-width: 768px`
       block this replaces produced. Four cells at 25% with a 1.5rem gutter
       clear the 10rem min-width from 768px up. */
    --resp-stats-basis: calc(25% - 1.125rem);

    /* From a tablet up there is vertical room to breathe, and the CTA
       clears the fold comfortably at the roomier rhythm. */
    --resp-hero-center-gap: 1.875rem;
    --resp-hero-center-pt:  0.75rem;

    /* Navbar brand + logo return to their established values exactly, so no
       width at or above 768px differs from before this tier existed. Only the
       base/phone tier is scaled (0.737, as for the hero mark). */
    --resp-brand-madd-size:  2.125rem;
    --resp-brand-big-size:   0.75rem;
    --resp-brand-of-size:    0.625rem;
    --resp-brand-strap-size: 0.40625rem;
    --resp-logo-height:      2.75rem;

    /* Replaces the legacy `max-width: 768px` / `min-width: 769px` pair for
       section rhythm, blueprint chrome and the footer columns. Same values
       those blocks produced — the boundary is now the tier, so the fractional
       768.x band and the double-application at exactly 768px are both gone. */
    --resp-section-v: var(--mad-section-v);
    --resp-blueprint-display: block;
    --resp-admin-tab-display: block;
    --resp-footer-row-dir: row;
    --resp-footer-row-gap: 0;
    /* 16%: the menu columns were 20% and are 20% narrower now. */
    --resp-footer-col-rest: 16%;
    /* Once the row is horizontal the menus align to the right edge of
       their own column. */
    --resp-footer-menu-align: flex-end;
    --resp-footer-menu-text: right;

    /* B-203: reinstate the established wordmark composition verbatim
       from the tablet tier up; only the base/phone tier is scaled. */
    --resp-hero-mark-gap:       clamp(0.25rem, 0.8vw, 0.75rem);
    --resp-hero-mark-madd-size: clamp(4.75rem, 16vw, 14.375rem);
    --resp-hero-mark-the-size:  clamp(2.25rem, 7.2vw, 6.875rem);
    --resp-hero-mark-the-mr:    clamp(0.125rem, 0.5vw, 0.5rem);
    --resp-hero-mark-stack-gap: clamp(0.375rem, 1vw, 0.875rem);
    --resp-hero-mark-stack-pt:  clamp(0rem, 0.3vw, 0.3125rem);
    --resp-hero-mark-big-size:  clamp(1.875rem, 6.4vw, 5.75rem);
    --resp-hero-mark-of-size:   clamp(1.625rem, 4.4vw, 3.75rem);

    /* The lock-up goes horizontal (was `max-width: 680px`). */
    --resp-hero-mark-dir:         row;
    --resp-hero-mark-align:       flex-start;
    --resp-hero-mark-stack-align: stretch;
    --resp-hero-mark-stack-text:  left;

    /* Gecko motif at full strength, measured off the content shell rather
       than the viewport (was `max-width: 820px`, so 768-820px now gets the
       larger treatment). */
    --resp-hero-motif-right:   calc(var(--mad-gutter) - 3.75rem);
    --resp-hero-motif-size:    min(46vw, 37.5rem);
    --resp-hero-motif-opacity: 0.13;

    /* Work and method rows line up (was two `min-width: 820px` blocks —
       768-820px now lines up rather than stacking). */
    --resp-work-row-wrap:       nowrap;
    --resp-work-row-gap:        2.25rem;
    --resp-work-row-meta-flex:  0 0 3.5rem;
    --resp-work-row-body-flex:  1 1 auto;
    --resp-work-row-arrow-flex: 0 0 2.25rem;

    --resp-method-row-wrap:       nowrap;
    --resp-method-row-gap:        2rem;
    --resp-method-row-idx-flex:   0 0 3.5rem;
    --resp-method-row-label-flex: 0 0 11.25rem;
    --resp-method-row-body-flex:  1 1 auto;
    --resp-method-row-arrow-flex: 0 0 2.25rem;

    /* Founder project logo column gets room to read. */
    --resp-founder-logo-w:   8rem;
    --resp-founder-logo-gap: 2rem;
  }
}

/* ── Tier: >= 62rem (992px) — small desktops ────────────────────────── */
@media (min-width: 62rem) {
  :root {
    /* F-029 desktop borders, preserved. */
    --mad-gutter: clamp(2.5rem, 8vw, 7rem);

    /* Card rows go three across. Replaces two `max-width: 899px` blocks, so
       900-992px now stacks where it used to be 3-up — the two rules moved
       together, which is why they share one token. */
    --resp-tri-basis: calc(33.333% - 1rem);

    /* Intro grid (was `min-width: 920px`). */
    --resp-intro-wrap:      nowrap;
    --resp-intro-gap:       clamp(3rem, 6vw, 6rem);
    --resp-intro-side-flex: 0 0 calc((100% - clamp(3rem, 6vw, 6rem)) * 0.4);
    --resp-intro-body-flex: 1 1 auto;

    /* Section head (was `min-width: 900px`). */
    --resp-section-head-wrap:     nowrap;
    --resp-section-head-gap:      3rem;
    --resp-section-head-col-flex: 1 1 calc(50% - 1.5rem);
  }
}

/* ── Tier: >= 75rem (1200px) — large desktops ───────────────────────── */
@media (min-width: 75rem) {
  :root {
    --mad-gutter: clamp(3rem, 8vw, 7rem);
  }
}