/* ==========================================================================
   SRP FOUNDATION — RESPONSIVE OVERRIDES
   Mobile-first base lives in style.css. This file layers on structure for
   wider viewports only — never redefines colour/type tokens.
   ========================================================================== */

/* ---------- ≥ 640px : large phones / small tablets ---------- */
@media (min-width: 40em){
  .hero__meta{ gap: var(--sp-9); }
  /* Moments gallery runs edge-to-edge across the full container — more
     columns keep each photo compact even as the row widens. */
  .moments__grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≥ 768px : tablets ---------- */
@media (min-width: 48em){
  .about__entry{ display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); }
  .about__entry-label{ padding-top: var(--sp-1); }

  .split{ grid-template-columns: 1fr 1fr; }

  .stat-band{ grid-template-columns: repeat(4, 1fr); }
  .stat-band__item{ padding: var(--sp-7) var(--sp-6); }
  .stat-band__num{ font-size: var(--fs-56); }
  .stat-band__unit{ font-size: var(--fs-28); }

  /* Impact ticker: fixed column counts (not auto-fit) so square cards keep
     their true 1:1 ratio and a short last row never stretches to fill. */
  .impact__list{ grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .impact__num{ font-size: var(--fs-56); }
  .impact__num .unit{ font-size: var(--fs-22); }
  .impact__label{ font-size: var(--fs-16); }

  /* Program grid: 2-up, with feature cards (the highest-reach clubs)
     breaking full width as a banner tile. */
  .program-grid{ grid-template-columns: repeat(2, 1fr); }
  .program-card--feature{ grid-column: span 2; }

  .leader{ grid-template-columns: 380px 1fr; }
  /* Content column is wider than the text needs to be (max-width capped) —
     push it flush to the right margin instead of hugging the photo. */
  .leader__content{ margin-left: auto; }

  .family-grid{ grid-template-columns: repeat(3, 1fr); }

  .directory-grid{ grid-template-columns: repeat(3, 1fr); }

  .roadmap__list{ grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .roadmap__item{ grid-template-columns: 90px 1fr; }
  .roadmap__item:nth-child(even){ padding-left: 0; }
  .roadmap__item:nth-child(1),.roadmap__item:nth-child(2){ border-top: none; }

  .footer__top{ grid-template-columns: 1fr 1fr; }

  .event-photos{ grid-template-columns: repeat(3, 1fr); }
  .event-photos--single{ grid-template-columns: 1fr; }
}

/* ---------- ≥ 900px : nav breakpoint ---------- */
@media (min-width: 56.25em){
  .primary-nav{ display: block; }
  .nav-toggle, .mobile-nav{ display: none; }
  .header__actions .btn--primary{ display: inline-flex; }

  .hero__grid{ grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .hero__visual{ justify-self: end; width: 100%; max-width: 460px; }

  .page-header__grid{ grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .page-header__media{ margin-top: 0; }
}

/* ---------- ≥ 1024px : desktop ---------- */
@media (min-width: 64em){
  .about__layout{ grid-template-columns: 160px 1fr; }

  .section-head--split{ grid-template-columns: 1.3fr 1fr; align-items: end; }

  .impact__foot{ flex-wrap: nowrap; }
  .impact__list{ grid-template-columns: repeat(4, 1fr); }

  .cta-band__title{ max-width: 22ch; }

  /* Family of brands: image sits beside the cards instead of stretching
     full-width — keeps the 500px source at a natural, unblown-up size. */
  .family{ grid-template-columns: 0.85fr 1fr; align-items: center; }
  .family__media{ max-width: none; margin-inline: 0; }

  .contact-grid{ grid-template-columns: 0.8fr 1fr; gap: var(--sp-10); }

  .sdg-grid{ grid-template-columns: repeat(3, 1fr); }

  /* Moments gallery: five across — 15 tiles lands on exact, even rows. */
  .moments__grid{ grid-template-columns: repeat(5, 1fr); }

  /* Programme directory: five across — 10 clubs land on two exact rows. */
  .directory-grid{ grid-template-columns: repeat(5, 1fr); }

  /* Program grid: full bento mosaic. Feature tiles run tall (2 rows) and
     wide (half the row); wide tiles run half the row at normal height;
     everything else takes a third of the row — three distinct rhythms
     instead of one repeated card size. */
  .program-grid{ grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); gap: var(--sp-5); }
  .program-card{ grid-column: span 2; }
  .program-card--feature{ grid-column: span 3; grid-row: span 2; }
  .program-card--wide{ grid-column: span 3; grid-row: span 1; }
}

/* ---------- ≥ 1200px : wide desktop ---------- */
@media (min-width: 75em){
  .footer__top{ grid-template-columns: 1.4fr 0.8fr 1fr 0.9fr; }

  .hero__visual{ transform: translateY(-14px); }
}

/* ---------- ≤ 400px : very small phones — protect rhythm ---------- */
@media (max-width: 25em){
  :root{ --edge: 1rem; }
  .hero__badge{ left: -6px; max-width: 168px; padding: var(--sp-3) var(--sp-4); }
}