/* responsive.css
   Mobile / tablet overrides for the inline-styled React components.
   Components opt in via data-r="…" attributes; rules use !important
   so they override inline styles. Two breakpoints:
     - 860px  (tablet & narrow desktop — main "stack everything" point)
     - 560px  (phone — additional type-scale + grid drops)
*/

/* ---------- Nav hamburger: hidden on desktop ---------- */
[data-r~="nav-hamburger"] { display: none; }

/* ---------- Grid overflow guard (all widths) ----------
   Grid/flex items default to min-width:auto, so their min-content
   (long headings, the "Get in touch →" button) can force tracks wider
   than their 1fr share and overflow the row at intermediate widths
   (notably the 861–960px band, above the mobile breakpoint). Pinning
   children to min-width:0 lets the tracks shrink as intended. */
[data-r~="grid-4"] > *,
[data-r~="grid-2"] > *,
[data-r~="grid-hero"] > *,
[data-r~="grid-evidence"] > *,
[data-r~="grid-report"] > *,
[data-r~="grid-footer"] > * { min-width: 0; }

/* ====================================================
   <= 860px — tablet & mobile
   ==================================================== */
@media (max-width: 860px) {

  /* Anchor jumps (footer + hamburger) need to clear the sticky nav,
     which is ~72px tall on mobile. 88px gives the section marker
     ~16px of breathing room below the nav. Desktop keeps its
     scroll-padding-top: 0 from index.html — sections there already
     have 96–140px of top padding, so no clearance is needed. */
  html { scroll-padding-top: 40px !important; }

  /* Founder uses an inline scrollMarginTop: 48 as a desktop band-aid
     (its 60px top padding is shorter than the 72px nav). On mobile
     that stacks with the scroll-padding-top above and pushes the
     section too far down — zero it out. */
  #founder { scroll-margin-top: 24px !important; }

  /* ---------- Section side padding tightening ---------- */
  [data-r~="sect"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Vertical padding tightening by class ----------------- */
  [data-r~="pad-y-120"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [data-r~="pad-y-96"]  { padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-r~="pad-hero"]  { padding: 96px 20px 96px !important; }
  [data-r~="pad-founder"] { padding: 48px 20px 80px !important; }
  [data-r~="pad-report"] { padding: 64px 20px 48px !important; }
  [data-r~="pad-footer"] { padding: 60px 20px 32px !important; }

  /* ---------- Two-column grids stack ---------- */
  [data-r~="grid-2"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-r~="grid-hero"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  [data-r~="grid-evidence"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-r~="grid-report"] {
    grid-template-columns: 1fr !important;
  }

  /* Aside borders that look wrong when stacked become a top rule */
  [data-r~="aside-border"] {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(232, 198, 116, 0.22) !important;
    padding-top: 32px !important;
  }

  /* ---------- Type scaling ---------- */
  [data-r~="h-display"] { font-size: 56px !important; line-height: 1.04 !important; }
  [data-r~="h-1"]       { font-size: 36px !important; }
  [data-r~="h-2"]       { font-size: 30px !important; }
  [data-r~="h-3"]       { font-size: 26px !important; }
  [data-r~="lead"]      { font-size: 20px !important; line-height: 1.32 !important; }
  [data-r~="evidence-num"] { font-size: 80px !important; }

  /* Drop forced <br>s in headlines on tight widths */
  [data-r~="no-br"] br { display: none !important; }

  /* ---------- Programs 4-card grid: 2 columns on tablet ---------- */
  [data-r~="grid-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ---------- Students featured card collapses 3-col ---------- */
  [data-r~="grid-students"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 28px 24px !important;
    align-items: flex-start !important;
  }
  [data-r~="grid-students"] [data-r~="students-cta"] {
    align-self: flex-start !important;
  }

  /* ---------- Footer 5-col grid collapses to 2 col + full-width brand ---------- */
  [data-r~="grid-footer"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding-bottom: 40px !important;
  }
  [data-r~="footer-brand"] {
    grid-column: 1 / -1 !important;
  }
  [data-r~="footer-bottom"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    text-align: left !important;
  }

  /* ---------- ReportCard padding/cover ---------- */
  [data-r~="report-left"]  { padding: 40px 28px !important; }
  [data-r~="report-right"] { padding: 40px 24px !important; }
  [data-r~="report-cover"] {
    width: 240px !important;
    height: 320px !important;
    padding: 28px 22px !important;
  }

  /* ---------- Modals ---------- */
  [data-r~="modal-overlay"] {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  [data-r~="modal-card"] {
    padding: 28px 22px !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
  }
  [data-r~="modal-form"] {
    grid-template-columns: 1fr !important;
  }

  /* ---------- Nav: hamburger pattern ---------- */
  [data-r~="nav-inner"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    position: relative !important;
  }
  [data-r~="nav-hamburger"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(232,198,116,0.28);
    color: var(--offwhite);
    width: 40px;
    height: 40px;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
  }
  [data-r~="nav-links"] {
    display: none !important;
  }
  [data-r~="nav-links"][data-open="true"] {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    background: rgba(15, 42, 71, 0.98) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 12px 20px 18px !important;
    border-bottom: 1px solid rgba(232, 198, 116, 0.22) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    /* Cap to the space below the nav and scroll internally, so the lower
       items (Get Involved + Get in touch) stay reachable in short landscape
       viewports instead of being clipped off-screen. Nav.jsx measures the
       real available height into --drawer-max-h; the calc() is the no-JS
       fallback (vh first, dvh where supported). */
    max-height: var(--drawer-max-h, calc(100vh - 76px)) !important;
    max-height: var(--drawer-max-h, calc(100dvh - 76px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  [data-r~="nav-links"][data-open="true"] a {
    padding: 12px 4px !important;
    border-bottom: 1px solid rgba(232,198,116,0.08) !important;
    font-size: 15px !important;
  }
  [data-r~="nav-links"][data-open="true"] a:last-of-type {
    border-bottom: none !important;
  }
  [data-r~="nav-links"][data-open="true"] button {
    margin-top: 10px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    width: 100%;
  }

  /* Logo word-marks tighten so they don't crowd the hamburger */
  [data-r~="nav-logo-eyebrow"] { font-size: 9px !important; letter-spacing: 0.18em !important; }
  [data-r~="nav-logo-name"]    { font-size: 18px !important; }

  /* Logo chip shrinks a touch so the wider bird mark doesn't crowd the hamburger */
  [data-r~="nav-logo-chip"]     { height: 38px !important; padding: 0 9px !important; }
  [data-r~="nav-logo-chip"] img { height: 22px !important; }
}

/* ====================================================
   <= 560px — phone
   ==================================================== */
@media (max-width: 560px) {
  [data-r~="grid-4"] {
    grid-template-columns: 1fr !important;
  }
  [data-r~="h-display"]    { font-size: 44px !important; }
  [data-r~="h-1"]          { font-size: 30px !important; }
  [data-r~="h-2"]          { font-size: 26px !important; }
  [data-r~="h-3"]          { font-size: 22px !important; }
  [data-r~="lead"]         { font-size: 18px !important; line-height: 1.35 !important; }
  [data-r~="evidence-num"] { font-size: 64px !important; }

  /* Hero CTA row wraps */
  [data-r~="hero-cta-row"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* Founder link row gap tightens */
  [data-r~="founder-links"] {
    gap: 16px !important;
    row-gap: 14px !important;
  }

  /* Modal headlines smaller too */
  [data-r~="modal-title"] { font-size: 28px !important; }

  /* ReportCard cover scales down further so it never overflows */
  [data-r~="report-cover"] {
    width: 200px !important;
    height: 280px !important;
    padding: 24px 20px !important;
  }
}