/* ═══════════════════════════════════════════════════════════════
   Responsive
   ───────────────────────────────────────────────────────────────
   Desktop was designed at 1280px, mobile at 390pt. Tablet was never
   designed, so the 768–1079 band is a considered fallback rather
   than a mockup translation.

   Breakpoints:
     ≥1080  desktop, as designed
     768–1079  tablet — two-column layouts relax, rails drop below
     <768   mobile — single column, drawer nav, sticky CTA bar

   The governing rule for collapsing: a right rail moves BELOW the
   content it supports — except the Request Blood availability panel,
   which moves ABOVE the form. Its entire purpose is to tell you
   whether you need a replacement donor before you start typing.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   Tablet and below
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1079px) {

  :root {
    --gutter: 28px;
    --gap-major: 32px;
    --section-y: 42px;
    --hero-y: 44px;
  }

  /* Hero and rails go single-column. */
  .split--hero,
  .split--rail-380,
  .split--rail-400,
  .split--rail-360 { grid-template-columns: 1fr; }

  .rail-sticky { position: static; }

  .home-hero__title { font-size: 38px; }
  .home-hero__intro { font-size: 17.5px; max-width: none; }
  .page-hero__title { font-size: 32px; }

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

  /* Nav gets tight before it becomes a drawer. The lockup is wider
     than the old mark, so it loses a few pixels here too. */
  .site-nav__list { gap: 18px; font-size: 14px; }
  .site-nav { gap: 20px; }
  .site-header__inner { gap: 20px; }
  .site-header__brand img { height: 38px; }

  /* Revision-round sections collapse at the same point as the rest. */
  .appeal,
  .story__split,
  .story__pair { grid-template-columns: 1fr; }

  .story__photo { height: 280px; }
  .what-we-have__photo { height: 200px; }
}

/* ───────────────────────────────────────────────────────────────
   Mobile
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  :root {
    --gutter: 18px;
    --gap-major: 26px;
    --gap-cards: 14px;
    --section-y: 36px;
    --hero-y: 32px;
  }

  /* ── Topbar: the address is the first thing to go. The phone
        number and the registration badge are what matter on a
        phone. ─────────────────────────────────────────────────── */
  .topbar__inner { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .topbar__address { display: none; }
  .topbar__meta { width: 100%; justify-content: space-between; gap: 12px; }

  /* ── Header becomes a drawer ─────────────────────────────────── */
  .site-header__inner { height: 64px; gap: 12px; }
  .site-header__brand img { height: 34px; }

  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--color-white);
    box-shadow: var(--shadow-modal);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .site-nav.is-open { display: flex; }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .site-nav__link {
    padding: 14px 4px;          /* ≥46pt touch target */
    border-bottom: 1px solid var(--color-divider);
    border-radius: 0;
  }

  .site-nav__link.is-active {
    color: var(--bbb-red-deep);
    font-weight: var(--weight-semibold);
    border-bottom-color: var(--color-divider);
    box-shadow: inset 3px 0 0 var(--bbb-red);
    padding-left: 12px;
  }

  .site-nav__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
  .site-nav__cta .btn { height: 50px; width: 100%; }

  /* A wrapped eyebrow should keep its dot beside the first line. */
  .eyebrow { align-items: flex-start; }
  .eyebrow__dot { margin-top: 5px; }

  /* ── Type scales down ────────────────────────────────────────── */
  .home-hero__title { font-size: 28px; line-height: 1.15; }
  .home-hero__intro { font-size: 16.5px; margin-top: 16px; }
  .page-hero__title { font-size: 27px; }
  .page-hero__intro { font-size: 16px; }
  .section-head__title { font-size: 21px; }
  .screening__title { font-size: 20px; }

  .section-head { gap: 12px; }
  .section-head__note { text-align: left; max-width: none; }

  /* ── Grids collapse ──────────────────────────────────────────── */
  .grid--2, .grid--3, .grid--4,
  .split--even,
  .field-grid { grid-template-columns: 1fr; }

  /* The eligibility strip stays 2×2 — four figures in a column
     lose the at-a-glance comparison that makes them useful. */
  .home-hero__criteria-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Eight blood groups become 4×2. Still one tap, still scannable. */
  .group-picker { grid-template-columns: repeat(4, 1fr); }

  .stock-card__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stock-tile { padding: 10px 4px; }
  .stock-tile__group { font-size: 17px; }
  .stock-tile__status { font-size: 9.5px; letter-spacing: .03em; }

  /* ── Touch targets: 46pt minimum, 52pt for primary actions ───── */
  .btn { height: 46px; }
  .btn--lg { height: 52px; width: 100%; }
  .home-hero__actions { flex-direction: column; gap: 10px; }
  .home-hero__actions .btn { width: 100%; }

  .check-row { padding: 16px 14px; min-height: 46px; }
  .accordion__toggle { padding: 16px 14px; min-height: 46px; }

  /* ── Mobile sticky CTA bar ───────────────────────────────────── */
  .mobile-bar { display: flex; }

  /* Clear the fixed bar so the footer is fully reachable. */
  .page { padding-bottom: 76px; }

  /* ── Footer stacks ───────────────────────────────────────────── */
  .site-footer { padding-top: 36px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer__licence { gap: 10px; }

  /* ── Request Blood: the panel goes ABOVE the form ────────────── */
  /* Every other rail drops below the content it supports. This one
     does not. Its entire purpose is to tell a requester whether they
     need a replacement donor BEFORE they start typing — below the
     form it would be read after the decision it should inform. */
  .request-split { display: flex; flex-direction: column; }
  .request-split > form { order: 2; }
  .request-split > aside { order: 1; margin-bottom: 22px; }

  /* Group and units are asked before patient details on mobile,
     because those two answers are what determine the replacement
     donor requirement. */
  .step-pair { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }

  /* ── Forms ───────────────────────────────────────────────────── */
  .form-note { max-width: none; }
  .pill-group { flex-wrap: wrap; }
  .pill-choice { flex: 1 1 calc(50% - 4px); min-height: 46px; }
}

/* ───────────────────────────────────────────────────────────────
   Very narrow — 360px and below
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .home-hero__title { font-size: 25px; }
  .group-picker { gap: 6px; }
  .group-tile { font-size: 17px; padding: 14px 0; }
  .topbar__badge { font-size: 10px; padding: 3px 8px; }
}

/* ───────────────────────────────────────────────────────────────
   Revision round — mobile
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* A 420px map on a 390px screen pushes the address card below two
     folds. The embed stays usable at 280. */
  .map-panel { min-height: 280px; }

  .what-we-have { grid-template-columns: 1fr; }
  .what-we-have__photo { height: 190px; }
  .what-we-have__title { font-size: 20px; }

  /* Three figures side by side at 390px would set the captions in
     two-word columns. Stack them, dividers become rules. */
  .home-stats { grid-template-columns: 1fr; gap: 0; }

  .home-stats .stat:not(:first-child) {
    padding: 14px 0 0;
    margin-top: 14px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .stat--lg .stat__figure { font-size: 30px; }

  .appeal__quote { font-size: 22px; }
  .appeal__aside { padding: 22px 20px 24px; }

  .story__quote { margin-top: 30px; padding-left: 18px; }
  .story__quote-text { font-size: 16.5px; }
  .story__title { font-size: 22px; }
  .story__pair { margin-top: 30px; }

  .screening__photo { height: 150px; margin-top: 20px; }

  .site-footer__bar { gap: 18px; }
  .site-footer__powered { order: 2; }
}

@media (max-width: 767px) {
  .thal-hero__photo .photo__img { height: 210px; }
}

/* ───────────────────────────────────────────────────────────────
   Grids that never got a breakpoint
   ───────────────────────────────────────────────────────────────
   Found by auditing every grid-template-columns in the desktop
   sheets against this file: ten multi-column grids had no override
   at all and were overflowing horizontally below about 900px — the
   Services cards, the About timeline, the sponsorship tiers, the
   Punnett square, and both halves of the contact page.

   Grouped here rather than scattered so the next audit is one grep.
   (.leadership was here too; it now auto-fills in pages.css.)
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1079px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }

  .facts,
  .prevention,
  .map-split { grid-template-columns: 1fr; }

  /* The rail is 400px of a 1fr/400px split; once stacked it should
     fill the width rather than keep its rail proportions. */
  .map-panel { min-height: 360px; }

  /* ── Timeline: horizontal above 1080px, vertical below ────────
     The dots are pulled up 30px to straddle the shared rule along
     the top of the four columns. The moment the stages wrap, that
     -30px drags each dot into the previous stage's body text. So
     the rule turns into a rail down the left and the dots straddle
     that instead — one column, however narrow the screen gets. */
  .timeline {
    grid-template-columns: 1fr;
    border-top: 0;
    border-left: 2px solid var(--bbb-red-tint);
    padding-left: 24px;
  }

  .timeline__stage {
    position: relative;
    padding: 0 0 26px;
    border-right: 0;
  }

  .timeline__stage:last-child { padding-bottom: 0; }

  .timeline__dot {
    position: absolute;
    left: -30px;          /* centres the 11px dot on the 2px rail */
    top: 3px;
    margin-top: 0;
  }

  .timeline__label { margin-top: 0; }
}

@media (max-width: 767px) {
  .service-grid,
  .tiers { grid-template-columns: 1fr; }

  /* Four inheritance outcomes read better as a 2x2 block than as a
     single row of 80px squares. */
  .punnett { grid-template-columns: repeat(2, 1fr); }

  /* Prose cannot share a 390px row with its label. The infection
     becomes the heading and its reason sits underneath. The head row
     then has nothing left to label, so it goes — and the Method cell,
     on the day it exists, carries its own label instead. */
  .panel__row,
  .panel--methods .panel__row {
    grid-template-columns: 1fr;
    row-gap: 5px;
    padding: 14px 18px;
  }

  .panel__row--head { display: none; }

  .panel__method-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bbb-ink-soft);
  }
}