/* 5PACE tablet + footer reachability (v30). Additive only: the original v27
   index.html is never modified. Loaded last, so these rules win over the
   desktop, laptop-height, footer-privacy and mission3 layers at equal
   specificity.

   Two problems are fixed here (the scroll-stop half is in the stepper patch
   applied by scripts/apply-tablet-footer.mjs):
   1. Tablets (821-1280px) used to get the full desktop composition squeezed
      into a narrow frame: a 200px label column next to three skinny feature
      cards, team cut-outs overflowing the right edge, a roadmap sized from
      the viewport *height*. Portrait tablets now stack like the phone
      composition at a readable measure; landscape tablets keep the desktop
      grammar with columns that actually fit.
   2. The footer was the stepper's last stop in name only (see the JS patch):
      it now rests fully in view at the end of the page. */

/* ---- tablet landscape / small laptop: desktop grammar, fitting columns ---- */
@media (min-width: 821px) and (max-width: 1280px) {
  /* Features: narrower label column, so the three cards get the width */
  #features .wrap { grid-template-columns: 168px minmax(0,1fr); column-gap: 30px; }
  /* Team: cap the cut-out stage so it can never spill out of its column */
  #team .tgrid { grid-template-columns: minmax(260px,330px) minmax(0,1fr); gap: 38px; }
  #team .tcut { --sh: min(54vh, 470px); }
  /* Footer: a little less air between the groups while it is a 4-column row */
  .site-footer .wrap { column-gap: clamp(18px, 2.6vw, 40px); }
}

/* ---- tablet portrait: stacked composition at a readable measure ---- */
@media (min-width: 821px) and (max-width: 1080px) and (orientation: portrait) {
  /* Film: satellite stage in the upper half, captions docked underneath it
     (the desktop side-caption + centred satellite collides at this shape) */
  .vis #stg { top: 9svh; height: 56svh; bottom: auto; }
  .cp:not(.hh) .cw { justify-content: flex-end; padding-bottom: 10svh; }
  .cp:not(.hh) .cw > * { max-width: 600px; }
  .cp.rt .cw > * { margin-left: 0; }
  /* HUD type is set in viewBox units; at this scale it would land at ~8px */
  .lab, .sl, .dh { font-size: 16px !important; }
  .conf, .sn { font-size: 13px !important; }
  .hudt { font-size: 12px !important; }
  .tlb, #tlab { font-size: 13px !important; }
  #stamp text { font-size: 15px !important; }

  /* Mission: one column inside its panel, panel inset from the screen edges */
  .mission > .wrap.mrow { width: auto; margin-left: 20px; margin-right: 20px; }
  .mission .mrow { grid-template-columns: 1fr; gap: 14px; }
  .mission .mrow p { max-width: 62ch; }

  /* Features: label above the cards, cards two-up, "Caught early" three-up */
  #features .wrap { display: block; }
  #features .head { margin-bottom: 26px; }
  #features .fg { grid-template-columns: 1fr 1fr; }
  #features .f.loc { grid-column: 1 / -1; }
  #features .why { grid-template-columns: 1fr; gap: 18px; margin-top: 38px; }
  #features .why ul { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  /* Roadmap: the tall (phone) mountain, centred at a readable measure.
     The section grows past one screen and the stepper adds page stops. */
  section#roadmap .head { position: static; max-width: 640px; margin-bottom: 8px; }
  #roadmap .mwrap { width: min(100%, 620px); }
  #roadmap .mtn.d { display: none; }
  #roadmap .mtn.m { display: block; margin-bottom: -34px; }
  #roadmap .mtn.m .wpc { padding: 2.63cqw 3.2cqw 2.9cqw; border-radius: 3.5cqw; }
  #roadmap .mtn.m .wpc .q { font-size: 2.92cqw; }
  #roadmap .mtn.m .wpc .trl { font-size: 2.78cqw; padding: .6cqw 2cqw; }
  #roadmap .mtn.m .wpc h4 { font-size: 4.68cqw; margin: 1.17cqw 0 .88cqw; white-space: normal; }
  #roadmap .mtn.m .wpc p { font-size: 3.65cqw; line-height: 1.38; }
  #roadmap .mtn.m .wpc .nowtag { font-size: 2.63cqw; padding: .6cqw 2cqw; }

  /* Team: heading, cut-outs, then the name list two-up (phone grammar,
     tablet measure). The stage is width-driven so it cannot overflow. */
  #team { justify-content: flex-start; padding-top: 104px; }
  #team .tgrid { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  #team .tside { display: contents; }
  #team .head { order: 1; margin-bottom: 8px; }
  #team .tphoto { order: 2; padding-top: 10px; }
  #team .tnames { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
  #team .tcut .tst { width: min(100%, 600px); height: auto; aspect-ratio: 910/940; margin-inline: auto; }
  #team .tcut .tmarks { width: min(100%, 600px); margin-inline: auto; }

  /* Articles keep three columns (they fit); just tighten the gaps */
  #articles .agrid { gap: 16px; }
}

/* ---- footer: fully reachable resting place, every width ----
   The stepper patch guarantees a final stop at the page end; make sure the
   footer itself never needs more room than that stop can show, and that its
   last row is not tucked under anything fixed. */
.site-footer { scroll-margin-bottom: 0; }
@media (min-width: 821px) and (max-width: 1080px) {
  .site-footer { padding-block: 34px; }
  .site-footer .footer-copy { margin-top: 4px; }
}