/* ==========================================================================
   AIRAA SRL — responsive
   Breakpoints and print. Loaded LAST so media queries win.
   ========================================================================== */

@media print {
  .site-header,
  .cookie-banner,
  .modal,
  .scroll-progress,
  .orb,
  .grid-lines { display: none !important; }

  body { background: #fff; }
  .glass { box-shadow: none; border-color: #ddd; background: #fff; }
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */

/* Header tiers. The link group needs ~1130px at full size, so it is stepped
   down twice before handing over to the hamburger — never squeezed. */
@media (max-width: 1300px) {
  .nav { gap: 0.85rem; }
  .nav-list { gap: 0; }
  .nav-link { padding-inline: 0.5rem; font-size: 0.8625rem; }
}

/* The hero network needs ~530px before its cards start colliding with the
   centre circle and with the labels above them. In the two-column hero it drops
   below that as soon as the viewport leaves 1280, so stack from there and give
   the visual its own full-width row rather than letting it be squeezed. */
@media (max-width: 1280px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero-viz { order: -1; max-width: 620px; }
}

@media (max-width: 1200px) {
  .brand-sub { display: none; }
  .nav-link { padding-inline: 0.42rem; }
}

@media (max-width: 1080px) {
  :root { --header-h: 70px; }

  .nav-list,
  .nav > .nav-cta { display: none; }

  .nav-toggle { display: grid; }
  .brand-sub { display: block; }

  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }

  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .timeline::before,
  .timeline__progress { display: none; }

  .NATO -layout { grid-template-columns: minmax(0, 1fr); }

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

  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; max-height: none; }
  .legal-toc ol {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    display: grid;
  }
}

@media (max-width: 900px) {
  /* Scaled down and pulled inside the viewport so the orbs cannot widen the
     document even where `overflow: clip` is unsupported (pre-2022 engines).
     The clip on .section is the primary guard; this is the fallback. */
  .orb { filter: blur(56px); }
  .orb--a { width: 20rem; height: 20rem; top: -6rem; left: -7rem; }
  .orb--b { width: 18rem; height: 18rem; top: 10%; right: -2rem; }
  .orb--c { width: 16rem; height: 16rem; bottom: -4rem; left: 8%; }

  .split,
  .split--wide-left,
  .leader,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .leader__portrait { max-width: 420px; margin-inline: auto; }
  .leader__badge { right: 0; }

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

  .media-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-row > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions .btn { flex: 1 1 auto; }

  .segmented { grid-template-columns: minmax(0, 1fr); }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --section-y: clamp(3.5rem, 12vw, 4.5rem); }

  .grid-2,
  .grid-3,
  .grid-4,
  .field-grid,
  .timeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillars { grid-template-columns: minmax(0, 1fr); }

  .media-row { grid-template-columns: minmax(0, 1fr); }
  .media-row > :first-child { grid-column: auto; }

  .btn-row .btn { width: 100%; }
  .btn-row { gap: 0.75rem; }
  .btn-row .btn-ghost { width: auto; }

  /* Below this width the network diagram cannot lay out cleanly: the cards
     have a readable minimum width that no longer fits around a centred circle,
     so they collide with the core and with the labels above them. Drop the
     absolute positioning and show all six as a plain two-column list — an
     earlier version instead set display:none on four of the six cards at
     420px, which hid real content rather than laying it out. */
  .hero-viz {
    max-width: 460px;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    align-items: start;
  }

  .hero-viz__map,
  .hero-viz__links,
  .hv-ring { display: none; }

  /* animation:none matters — the float keyframes carry the translate(-50%,-50%)
     centring offset, which would drag every card out of its grid cell. */
  .hv-node,
  .hv-core,
  .hv-label {
    position: static;
    transform: none;
    animation: none;
  }

  .hv-node { width: auto; min-width: 0; padding: 0.55rem 0.65rem; }
  .hv-node strong { font-size: 0.7rem; }
  .hv-node span { font-size: 0.62rem; }
  .hv-avatar { width: 24px; height: 24px; }

  /* The base rule sets nowrap for the absolute layout; here a label sits in a
     grid column narrower than "NATO an Employers" and has to be free to wrap. */
  .hv-label {
    justify-self: center;
    font-size: 0.58rem;
    padding: 0.22rem 0.5rem;
    white-space: normal;
    text-align: center;
  }

  /* The core stops being a circle and becomes a full-width header pill. */
  .hv-core {
    grid-column: 1 / -1;
    order: -3;
    width: auto;
    aspect-ratio: auto;
    grid-auto-flow: column;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }

  /* Source order runs talent-side then employer-side. Interleave it so the two
     columns keep their meaning: talent on the left, employers on the right. */
  .hv-label--talent { order: -2; }
  .hv-label--employers { order: -1; }
  .hv-node--a { order: 1; }
  .hv-node--d { order: 2; }
  .hv-node--b { order: 3; }
  .hv-node--e { order: 4; }
  .hv-node--c { order: 5; }
  .hv-node--f { order: 6; }
  .hv-label--flow { order: 7; grid-column: 1 / -1; }

  /* Seven labels collide on a phone-width map, so only the active region is
     named. The detail panel below the map carries the full text. */
  .map-hotspot__label { display: none; }

  .map-hotspot[aria-current="true"] .map-hotspot__label {
    display: block;
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
  }

  /* Label and value stack rather than squeezing a 10rem column onto a phone. */
  .doc-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }

  .modal__head,
  .modal__body,
  .modal__foot { padding-inline: 1.125rem; }

  .modal__foot .btn { flex: 1 1 100%; }

  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .leader__badge {
    position: static;
    margin-top: 1rem;
    justify-content: center;
  }

  table { min-width: 420px; }
}

@media (max-width: 420px) {
  /* The two-column card list from the 640px block still fits here, so nothing
     needs hiding. Just tighten it up. */
  .hero-viz { gap: 0.5rem; }
  .hv-node { padding: 0.5rem 0.55rem; }
}