/* ============================================================================
   responsive.css — breakpoints, last in the cascade
   1180 · 1060 (header) · 1024 · 980 · 760 · 520
   ========================================================================= */

@media (max-width: 1180px) {
  :root { --fs-4xl: 50px; --fs-3xl: 38px; --fs-2xl: 30px; }
  .tutorials  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--wide { grid-column: 1 / -1; }
  /* Tighten the padding to buy room, but hold the type size: 13px was the main
     reason the navigation read as faint on laptops. 14.5px still fits the full
     link set down to the 1060px collapse. */
  .nav__link { padding: 0 10px; font-size: 14.5px; }
  .nav__link[aria-current="page"]::after { left: 10px; right: 10px; }
  .site-header__inner { gap: var(--sp-8); }
}

@media (max-width: 1024px) {
  .legal { grid-template-columns: 1fr; gap: var(--sp-8); }
  .legal__nav { position: static; }
  .legal__nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .legal__nav a { border: 1px solid var(--c-border); }
  .support-grid { grid-template-columns: 1fr; }
  .contact-card { position: static; }
  .beta-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .beta-aside { position: static; }
}

/* ── Header collapse — 1060px, NOT the 980px layout breakpoint ─────────────
   These two used to be the same number. They can't be any more.

   The brand is now 245px wide (48px mark + 12px + a 22px wordmark) and the six
   navigation links sit at ~15px. Measured at 1024px, that set needs 1009px of
   a 976px container — it overflows. Shrinking the type back down to make it fit
   would undo the whole point of this change, so the navigation folds into the
   menu button earlier instead, at 1060px, where there is genuinely no longer
   room for it.

   The layout breakpoint below stays at 980px: card grids and section padding
   have nothing to do with how much room the header needs, and moving them
   would have been a redesign rather than a header fix.

   If you want the full navigation back at 1024px, the cheapest 65px is
   shortening "System Requirements" to "Requirements" in every header. That is
   a content change, so it is not made here.                                  */
@media (max-width: 1060px) {
  /* 64px carries a 40px mark with the same proportional breathing room the
     desktop header gives a 48px one. */
  :root { --header-h: 64px; }

  /* Navigation collapses into a disclosure panel, so the header goes back to
     logo on the left and the menu button on the right. */
  .site-header__inner { justify-content: space-between; gap: var(--sp-4); }
  .site-header .brand { gap: 10px; }
  .site-header .brand__icon { height: 40px; }
  .site-header .wordmark { font-size: 19px; letter-spacing: 1.6px; }
  /* 44px minimum touch target, per WCAG 2.5.8. */
  .nav-toggle { display: inline-flex; position: relative; width: 44px; height: 44px; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    background: var(--c-navy);
    border-bottom: 1px solid var(--c-accent-line);
    box-shadow: var(--shadow-3);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav:not([data-open="true"]) { display: none; }
  /* 15px in the panel: there is room for it here, and it keeps the menu the
     same size as the desktop navigation it replaces. */
  .nav__link { height: 44px; padding: 0 var(--sp-4); font-size: 15px; }
  /* Vertical panel: a left bar suits the stacked layout better than an
     underline, which would span the full row width. */
  .nav__link[aria-current="page"] { box-shadow: inset 2px 0 0 var(--c-accent); background: rgba(11,132,255,0.10); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav .btn { margin-top: var(--sp-3); }
}

@media (max-width: 980px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .features   { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .benefits   { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-6); }
  .gallery    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tutorials  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workflow   { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .requirements, .download-grid { grid-template-columns: 1fr; }
  .spotlight { grid-template-columns: 1fr; gap: var(--sp-8); }
  .spotlight--flip .spotlight__copy, .spotlight--flip .spotlight__media { order: 0; }
  .scope-callout { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-8); }
  .scope-callout__units { padding-left: 0; padding-top: var(--sp-6); border-left: 0; border-top: 1px solid var(--c-border); }
  .section { padding-block: var(--sp-12); }
  .hero { padding-block: var(--sp-8) var(--sp-12); }
}

@media (max-width: 760px) {
  :root {
    --fs-4xl: 38px; --fs-3xl: 31px; --fs-2xl: 26px;
    --fs-xl: 22px;  --fs-lg: 18px;  --fs-md: 16px; --fs-base: 15px;
  }
  .wrap, .wrap-wide, .wrap-text { padding-inline: var(--sp-5); }

  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .features, .gallery, .tutorials { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; gap: var(--sp-5); }

  .hero__meta { gap: var(--sp-6); }
  .hero .btn-row .btn, .cta .btn-row .btn { width: 100%; }
  .cta { padding: var(--sp-12) var(--sp-6); }

  .step { gap: var(--sp-3); padding: var(--sp-5); }
  .step::before { width: 38px; height: 38px; font-size: 13px; }

  .spec__row { grid-template-columns: 1fr; gap: 3px; padding: var(--sp-3) 0; }

  .panel__body, .notice, .release__item { padding: var(--sp-6); }
  .scope-callout { padding: var(--sp-6); }
  .form-summary { padding: var(--sp-5); }
  .beta-actions .btn { width: 100%; }
  .legal__slot { padding: var(--sp-10) var(--sp-5); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .lb-btn--prev { left: var(--sp-2); }
  .lb-btn--next { right: var(--sp-2); }
  .lb-btn--close { top: var(--sp-3); right: var(--sp-3); }
  .gallery-lightbox { padding: var(--sp-3); }
  .gallery-lightbox__img { max-height: 66vh; }

  /* Footer brand only. The header brand is set in the 1060px block above and
     must not be shrunk to 28px — scoping it here keeps the two independent. */
  .site-footer .brand__icon { width: 28px; height: 28px; }
  .site-footer .wordmark { font-size: 14px; }
}

@media (max-width: 520px) {
  .section-head { margin-bottom: var(--sp-8); }
  .hero__platforms { font-size: var(--fs-xs); }
  .req-card__head, .dl-card__head { flex-wrap: wrap; }
  .req-card__head .badge, .dl-card__head .badge { margin-left: 0; }
}

/* Coarse pointers: keep every interactive target comfortably tappable. */
@media (pointer: coarse) {
  .nav__link, .btn, .lb-btn, .faq__q { min-height: 44px; }
}