/* mobile.css — the responsive layer over the design system.
   The design is authored at 1440px and the design-system bundle contains no
   media queries at all. Everything in this file is additive: above 1024px
   nothing changes. The 900px tier is mirrored by MOBILE_QUERY in app.js,
   which switches the page to its mobile layout (stacked hero, one-column
   sections, drawer navigation from mobile-nav.js). Keep the two in step.

   TWO THINGS TO KNOW BEFORE CHANGING ANYTHING HERE
   1. The desktop rendering above 1024px is pixel-locked. It has to stay
      identical to tools/shots/baseline-1440.png and baseline-1280.png, so a
      rule that escapes its media query is a regression even when it looks
      like an improvement. Check it with:
        bash tools/shots.sh 1440 9000 check-1440
        powershell -ExecutionPolicy Bypass -File tools/pixeldiff.ps1 \
            tools/shots/baseline-1440.png tools/shots/check-1440.png
      Only the two animated row bands described in tools/NOISE.txt may differ.
      That file also holds the canonical viewport sizes and the command that
      rebuilds the baselines; tools/README.md is the short version.
   2. Every selector below reaches into generated components under _ds/**
      (which is never edited by hand) and is keyed to their current DOM shape.
      Regenerating the bundle can make them silently stop matching, so re-check
      this whole file after any regeneration. */

/* Tablet: sizes only, layout stays desktop. */
@media (max-width: 1024px){
  :root{
    --section-y:96px;
    --gutter:32px;
    --fs-display-xl:64px;
    --fs-display-l:52px;
    --fs-display-m:40px;
  }
}

/* Tablet only (901-1024px): the desktop tree is still what renders here, while
   below 901px app.js swaps in the mobile one. Both bounds of this query are
   load-bearing, for the reasons given at each rule. */
@media (max-width: 1024px) and (min-width: 901px){
  /* Hero: ChevronPanel's Seal (design-system internal, position:absolute) sits
     at a fixed geometric offset from the copy panel's right edge, unrelated to
     viewport width. At the narrow end of this tier the shrunk --fs-display-xl
     above lets "accessible pet" fit on one line, which reaches far enough
     right to run under the seal. Reserve room for it so the heading wraps
     one word earlier instead. (!important because the 720px cap it overrides
     is an inline style on the h1.)
     The max-width: 1024px bound is the ONLY thing that keeps this off the
     desktop; the h1's own 720px cap does not make it harmless up there.
     Measured at 1440px: the h1's containing block is 718px, so the inline cap
     never binds, and calc(100% - 96px) would resolve to 622px and rewrap the
     heading — a visible break of the pixel-locked desktop rendering. Do not
     widen or remove that bound. */
  #top h1{max-width:calc(100% - 96px) !important}

  /* Safety net for the desktop NavBar, which sets no flex-wrap of its own: if
     logo, link pill, CTA and search ever stop fitting on one line, wrap rather
     than overflow. It does not fire at any width in this tier today — the row
     measures 884px, so it still fits with room to spare at 901px, and the bar
     is 80px tall on one line at 920, 1024 and 1440.
     The min-width: 901px bound is what keeps it here: the same selector also
     matches the <header> that mobile-nav.js renders below 901px, which decides
     its own wrapping in its own inline style and must not inherit this one. */
  #root header{flex-wrap:wrap;row-gap:var(--space-4)}
}

/* Mobile: sizes here, layout in app.js. */
@media (max-width: 900px){
  :root{
    --section-y:64px;
    --gutter:20px;
    --space-8:48px;
    --space-9:56px;
    --space-10:72px;
    --fs-display-xl:44px; --lh-display-xl:1.02;
    --fs-display-l:36px;  --lh-display-l:1.06;
    --fs-display-m:30px;  --lh-display-m:1.1;
    --fs-heading-s:24px;
    --fs-heading-xs:20px;
    --fs-body-l:17px;
  }
}

/* Design-system internals that props cannot reach. The components spread
   `...rest` on their root, so app.js hands them a className to hook on.
   Note: every nth-child selector below — in this block and in the 480px block
   under it, which narrows the same footer grid — is keyed to the current DOM
   order of these generated components, as is .zpc-vacancy > div. If the
   design-system bundle is regenerated with a different internal structure,
   these selectors can silently stop matching — re-check them then. */
@media (max-width: 900px){
  /* VacancyCard: the inner block is indented 96px on desktop; on a phone that
     leaves too little room for the role title. */
  .zpc-vacancy > div{padding:64px 16px 16px 24px !important}

  /* Footer: four link columns in two, the empty spacer column dropped, legal
     links allowed to wrap. */
  .zpc-footer{padding:64px var(--gutter) 24px !important}
  .zpc-footer > div > div:nth-child(1){grid-template-columns:1fr 1fr !important}
  .zpc-footer > div > div:nth-child(1) > div:first-child{display:none}
  .zpc-footer > div > div:nth-child(3){flex-wrap:wrap;gap:var(--space-4) var(--space-6) !important}
}

/* Footer: below 480px the two link columns become one. Same generated-DOM
   caveat as the block above — this is the same grid, one selector deeper. */
@media (max-width: 480px){
  .zpc-footer > div > div:nth-child(1){grid-template-columns:1fr !important}
}