/* ==========================================================================
   STYLE_RESPONSIVE.CSS — all @media breakpoints for style.css, kept in one
   place instead of scattered through the base file. Must load AFTER
   style.css (see includes/header.php) so same-specificity overrides win.

   Ordered narrowest → widest. Section numbers reference style.css.
   ========================================================================== */

/* ===== ≤600px — hero stats (§6), "Latest activities" head (§2/§14) ===== */
@media (max-width: 600px) {
  /* 3 equal columns wrap longer labels ("Client-committed") to 2 lines on
     phones. 2 columns gives more width each; the 3rd stat just wraps down. */
  .hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }

  /* Stack heading + "View all" instead of squeezing them side by side. */
  .section__head--split { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* "View all" moves below the activity cards on mobile instead of the top. */
  .btn.view-all-desktop { display: none; }
  .btn.view-all-mobile { display: flex; justify-content: center; margin: 28px auto 0; width: fit-content; }
}

/* ===== ≤700px — activities date-range popover (§14) ===== */
@media (max-width: 700px) {
  /* Filter chips wrap to multiple lines here, so the trigger button is no
     longer a reliable anchor. Anchor the popover to the whole .filter row
     instead so it stays on-screen regardless of where the chip wraps to. */
  .filter { position: relative; }
  .daterange-pop { position: static; }
  .daterange-pop__panel { left: 0; right: 0; min-width: 0; }
}

/* ===== ≤860px — app bar/nav collapse (§4), mission chevrons (§22),
   misc mobile spacing ===== */
@media (max-width: 860px) {
  /* 860px not 760px: the full inline nav needs ~850px to stay on one line
     before links start wrapping mid-bar. Tested: fine at 850px, broken at 800px. */
  .appbar { padding: 12px 16px 0; }
  .appbar__inner { padding: 0 8px 0 18px; height: 64px; }
  .hero, .pagehead, .section.section--head { padding-top: 110px; }
  .nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--sc-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg); padding: 12px; gap: 2px;
    box-shadow: var(--elev3); max-height: 90vh; overflow: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97);
    transform-origin: top center;
    transition: opacity .3s var(--ease-glass), transform .3s var(--ease-glass), visibility .3s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  /* Underline hugs the link's own text instead of the full menu row width. */
  .nav__link { align-self: flex-start; width: auto; justify-content: flex-start; padding: 10px 16px; }
  .has-drop { align-self: stretch; }
  /* Collapsed accordion — no :hover on touch, so app.js toggles .open. */
  .drop {
    position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 0 0 0 12px;
    opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
    transition: opacity .25s ease, max-height .25s ease;
  }
  .has-drop.open .drop { opacity: 1; visibility: visible; max-height: 600px; padding-top: 4px; padding-bottom: 4px; }
  .has-drop .nav__link .ic { transition: transform .25s ease; }
  .has-drop.open .nav__link .ic { transform: rotate(180deg); }
  .menu-btn { display: inline-flex; }
  /* Contact Us moves from the top bar into the bottom of the nav panel. */
  .appbar__actions .nav__cta { display: none; }
  .nav .nav__mobile-cta { display: flex; justify-content: center; margin-top: 10px; }

  .section { padding: 56px 0; } .chair, .cta-band, .form, .featured__body { padding: 26px; }

  /* Partner-strip marquee: stack the label above instead of squeezing the
     scrolling row down to nothing. */
  .partners__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .marquee { width: 100%; }

  /* Mission chevrons shrink evenly to fit one row instead of wrapping. */
  .fillip { flex-wrap: nowrap; }
  .fillip__item { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
  .fillip__chev { font-size: clamp(1rem, 4vw, 1.6rem); height: 64px; padding-left: 6px; }

  .ogrid { justify-content: center; }
  .act-search input { width: 100%; }
}

/* ===== ≤960px — general grid collapse to single column ===== */
@media (max-width: 960px) {
  .vm { grid-template-columns: 1fr; }
  .hero__grid, .grid--3, .grid--2, .chair, .contact__grid, .footer__grid, .featured, .sd-hero, .promise { grid-template-columns: 1fr; }
  .orbit, .hero__media { max-width: 340px; order: -1; }
  .footer__grid { gap: 28px; }
  /* Chevrons shrink further still, on top of the 860px shrink-to-fit rule. */
  .fillip__chev { padding-left: 4px; }
}

/* ===== ≤1024px — org chart cards (§20) ===== */
@media (max-width: 1024px) {
  /* Fixed 200px cards wrap 3-per-row on tablet, 1-per-row on phones. Fluid-
     width .node in a firm 2-column grid keeps 2 per row on both. */
  .ogrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .node { width: 100%; height: auto; aspect-ratio: 200 / 234; }
  /* Font size now scales fluidly with the card's own width (see .node__role
     / .node__name in style.css) instead of stepping at this breakpoint —
     only spacing needs a nudge here as cards get smaller. */
  .node__body { padding: 6px 8px 8px; gap: 0; }
}

/* ===== Container queries on .node itself (§20) =====
   Font-size for node__role/name already scales continuously with card
   width via clamp(...,cqi,...) in style.css. These just fine-tune padding
   at the smallest card widths, since padding doesn't respond to cqi the
   same way font-size does. */
@container node (max-width: 220px) {
  .node__body { padding: 5px 6px 6px; }
}
@container node (max-width: 170px) {
  .node__body { padding: 4px 5px 5px; }
}