/* =============================================================================
   RESPONSIVE
   -----------------------------------------------------------------------------
   Breakpoints, largest first. Every multi-column layout in the site has a
   collapse rule here — nothing is left in two columns on a phone.

     1080px  tablet landscape   (the nav also becomes a drawer — see header.css)
      900px  tablet portrait
      820px  large phone / small tablet
      720px  phone landscape
      620px  phone portrait
      400px  small phone
   ========================================================================== */


/* ============================================================ ≤ 1080px ==== */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================= ≤ 900px ==== */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A lone card on the last row is centred rather than stretched half-width. */
  .grid--3 > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: min(50%, 340px);
    margin-inline: auto;
  }

  /* Mission / Vision — long sentences, so one per row from here down. */
  .mv { grid-template-columns: 1fr; }
}


/* ============================================================= ≤ 820px ==== */
@media (max-width: 820px) {
  /* Text-beside-photo blocks stack. Used on About, Outreach Materials,
     Partner With Us and Join the Crew. */
  .split { grid-template-columns: 1fr; }

  /* Whatever the desktop order, the words come first once stacked. */
  .split__body  { order: 0; }
  .split__media { order: 1; }
  .split--reverse .split__media { order: 1; }

  .split__media img { width: 100%; }

  /* The decorative offset frame would poke outside the screen edge. */
  .framed::before { display: none; }

  .icon-panel { padding: var(--space-6); }
}


/* ============================================================= ≤ 720px ==== */
@media (max-width: 720px) {
  .who { grid-template-columns: 1fr; text-align: center; }
  .who__icon .icon { width: 74px; height: 74px; }
  .who__body { padding-left: 0; border-left: 0; text-align: left; }

  /* Once the band is a column, flex-basis measures HEIGHT — the 420px basis
     that sizes the text column on desktop would become 420px of empty space.
     Reset it to auto and let the content decide. */
  .cta-band__inner { flex-direction: column; align-items: stretch; }
  .cta-band__text  { flex: 0 0 auto; width: 100%; }
  .cta-band__inner > .reveal { width: 100%; }

  .tabs { width: 100%; max-width: none; justify-content: stretch; }
  .tab  { flex: 1 1 auto; text-align: center; }

  .edition { grid-template-columns: 1fr; }
  .edition__cover { max-width: 240px; margin-inline: auto; }

  .pull-quote {
    padding: var(--space-5);
    padding-left: var(--space-6);
  }
  .pull-quote::before { font-size: 3.25rem; }
}


/* ============================================================= ≤ 620px ==== */
@media (max-width: 620px) {

  /* ---- Grids collapse to a single column --------------------------------- */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--3 > *:last-child:nth-child(odd) { max-width: none; grid-column: auto; }

  /* …except small tiles, which read better two-up than as a long stack.
     This must stay AFTER the rule above — same specificity, later wins. */
  .grid--2up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .grid--2up .card-value { padding: var(--space-4) var(--space-2); }
  .grid--2up .card-value__title { font-size: 0.72rem; letter-spacing: 0.06em; }
  .grid--2up .pub__body { padding: var(--space-4); }
  .grid--2up .pub__title { font-size: 0.88rem; }
  .grid--2up .pub__text  { font-size: 0.82rem; }

  /* ---- The CTA band's gold rule ------------------------------------------
     On desktop it is a thin vertical line down the left of the headline. On a
     phone the headline wraps to several lines, which stretched that line into
     an odd long streak. It becomes a short horizontal rule above the text —
     the same gold underline used beneath every section heading.            */
  .cta-band__text {
    padding-left: 0;
    padding-top: calc(var(--space-4) + 3px);
  }
  .cta-band__text::before {
    top: 0;
    bottom: auto;
    left: 0;
    width: 48px;
    height: 3px;
  }
  .cta-band__inner { gap: var(--space-5); }
  .cta-band__inner .btn { width: 100%; }

  /* ---- Forms -------------------------------------------------------------- */
  .field-row       { grid-template-columns: 1fr; }
  .tick-list--2col { grid-template-columns: 1fr; }
  .form-card       { padding: var(--space-5) var(--space-4); }
  .form__foot      { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
  /* Same flex-basis-becomes-height trap as the CTA band above. */
  .form__foot .form__note { flex: 0 0 auto; }

  /* ---- Buttons ------------------------------------------------------------ */
  .btn-row .btn { flex: 1 1 100%; }

  /* ---- Lists -------------------------------------------------------------- */
  .num-list li { padding: var(--space-4) var(--space-4) var(--space-4) 3.1rem; }
  .num-list li::before { left: var(--space-4); top: var(--space-4); }

  /* ---- Long words and addresses must never widen the page ---------------- */
  .footer-contact li,
  .footer-contact a,
  .contact-card__value,
  .pub__title,
  .report-card__title { overflow-wrap: anywhere; }

  /* ---- Section spacing ---------------------------------------------------- */
  .section-head { margin-bottom: var(--space-6); }
}


/* ============================================================= ≤ 400px ==== */
@media (max-width: 400px) {
  /* Photos and book covers get their full width back on the narrowest screens. */
  .grid--2up.grid--photos { grid-template-columns: 1fr; }

  .brand__name   { font-size: 0.79rem; }
  .brand__name-2 { font-size: 0.67rem; }
  .brand__mark   { width: 38px; height: 38px; }

  .hero__title  { font-size: 1.85rem; }
  .hero__eyebrow { font-size: 0.64rem; }

  .icon-badge    { width: 54px; height: 54px; }
  .icon-badge .icon { width: 24px; height: 24px; }

  .tab { font-size: 0.7rem; padding: 0.6rem 0.5rem; }
}


/* ================================================================ PRINT ==== */
@media print {
  .site-header, .site-footer, .wa-float, .nav-overlay,
  .btn-row, .tabs, .filters, .lightbox { display: none !important; }

  body { color: #000; background: #fff; }
  .hero, .page-hero, .cta-band { color: #000; background: none; }
  .hero__media, .hero__scrim,
  .page-hero__media, .page-hero__scrim,
  .cta-band__bg, .wave { display: none !important; }
  .cta-band::after { display: none; }

  .hero__title, .page-hero__title, .cta-band__title,
  .section-head__title { color: #000; }

  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }

  .split, .mv, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .card { break-inside: avoid; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}