/* APHIS site — responsive retrofit.
   Pages are rendered from design-tool templates whose styles are inline, so this
   sheet overrides them via [style*=...] attribute hooks (both "x:y" and "x: y"
   serializations) and re-scales the design tokens. Deploy-only; the imported
   design system is untouched. */

html, body { overflow-x: clip; }

/* ---------- fluid below the 1440px design canvas ---------- */
@media (max-width: 1439px) {
  [style*="min-width:1440px"], [style*="min-width: 1440px"] { min-width: 0 !important; }
  /* split-hero text column: align with the standard 32px gutter */
  [style*="margin-left:max("], [style*="margin-left: max("] {
    margin-left: var(--space-8) !important;
    margin-right: var(--space-8) !important;
  }
}

/* ---------- tablet and down: linearize ---------- */
@media (max-width: 1099px) {
  /* every inline grid collapses to a single column… */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* …except icon/label/value and label/value rows, which stay tabular */
  [style*="grid-template-columns:88px 1fr"], [style*="grid-template-columns: 88px 1fr"] {
    grid-template-columns: 88px 1fr !important;
  }
  [style*="22px 88px 1fr"], [style*="22px 88px  1fr"] { grid-template-columns: 22px 88px 1fr !important; }
  /* document/resource rows: name+badge / status+icon in a 2x2 flow */
  [style*="1fr 96px 140px 40px"], [style*="1fr 140px 140px 40px"] { grid-template-columns: 1fr auto !important; }

  /* grid items may shrink below their content's min-width (prevents 1fr blowout) */
  [style*="grid-template-columns"] > * { min-width: 0; }
  textarea { max-width: 100%; }

  /* flex rows may wrap instead of overflowing */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }

  /* fixed-height bars (context bar, provenance, corporate note) grow naturally */
  [style*="height:56px"], [style*="height: 56px"],
  [style*="height:64px"], [style*="height: 64px"] {
    height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; row-gap: 6px;
  }

  /* header: allow wrap, tighter */
  header { flex-wrap: wrap !important; row-gap: 10px !important; justify-content: center !important; }
  header nav { flex-wrap: wrap; justify-content: center; row-gap: 10px !important; }

  /* split-hero imagery panel needs its own height once stacked
     (its contents are absolutely positioned) */
  section [style*="background:var(--grey-500)"][style*="overflow:hidden"],
  section [style*="background: var(--grey-500)"][style*="overflow: hidden"] { min-height: 300px; }

  /* about-page mission divider column becomes a horizontal rule */
  [style*="1fr 1px 1fr"] > [style*="background:var(--teal-700)"],
  [style*="1fr 1px 1fr"] > [style*="background: var(--teal-700)"] { height: 1px; }

  :root:root {
    --section-y: 64px;
    --section-y-sm: 48px;
    --space-32: 80px;
    --space-24: 64px;
    --space-20: 48px;
  }
}

/* tablet only: symmetric card grids keep two columns */
@media (min-width: 768px) and (max-width: 1099px) {
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(6,1fr)"], [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* …but label-led comparison tables (160px first column) stack fully */
  [style*="grid-template-columns:160px"], [style*="grid-template-columns: 160px"] { grid-template-columns: 1fr !important; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root:root {
    --text-7xl: 42px;
    --text-6xl: 36px;
    --text-5xl: 31px;
    --text-4xl: 28px;
    --text-3xl: 24px;
    --text-2xl: 21px;
    --text-xl: 19px;
    --section-y: 48px;
    --section-y-sm: 40px;
    --space-32: 56px;
    --space-24: 48px;
    --space-20: 40px;
    --space-16: 36px;
    --space-8: 24px;
    --gutter: 16px;
  }

  /* long uppercase button labels wrap instead of overflowing the screen */
  button {
    white-space: normal !important;
    height: auto !important;
    min-height: var(--control-h-md);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* homepage hero shorter than the desktop 820px stage */
  [style*="min-height:820px"], [style*="min-height: 820px"] { min-height: 60vh !important; }

  /* hero stages on inner pages */
  [style*="min-height:460px"], [style*="min-height: 460px"],
  [style*="min-height:480px"], [style*="min-height: 480px"],
  [style*="min-height:520px"], [style*="min-height: 520px"] { min-height: 0 !important; }

  header nav { gap: 14px !important; }
}