/* responsive.css — mobile/tablet layer for the inline-styled React pages.
   Targets the *serialized* inline-style attribute values, so no component
   code changes are needed. Loaded after colors_and_type.css on every page.
   NOTE: breakpoint 900px — phones & small/portrait tablets stack; wider keeps the desktop grid. */

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  img { max-width: 100%; }

  /* ---------- Nav: wrap the links onto a full-width second row ---------- */
  header[style*="z-index: 30"] > div {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 10px 16px !important;
    gap: 8px 14px !important;
  }
  header[style*="z-index: 30"] nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    order: 3 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px !important;
    justify-content: flex-start !important;
    padding-bottom: 2px;
  }
  header[style*="z-index: 30"] nav::-webkit-scrollbar { display: none; }
  header[style*="z-index: 30"] nav a { flex-shrink: 0 !important; }
  header[style*="z-index: 30"] > div > button { margin-left: auto !important; }

  /* ---------- Grids: collapse multi-column to stacked ---------- */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.65fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1.7fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 200px 1fr"] { grid-template-columns: 1fr !important; }
  /* timeline year column */
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: 128px 1fr"] { grid-template-columns: 64px 1fr !important; gap: 18px !important; }

  /* split / hero photo cells use an absolutely-positioned image-slot — give
     them height once the grid stacks, or they collapse to 0 */
  *:has(> image-slot[style*="position: absolute"]) { min-height: 300px !important; }

  /* ---------- Container side padding ---------- */
  [style*="max-width: 1200px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1520px"],
  [style*="max-width: 1040px"],
  [style*="max-width: 900px"],
  [style*="max-width: 820px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* bespoke large paddings */
  [style*="padding: 88px 64px"] { padding: 44px 22px !important; }
  [style*="padding: 72px 40px"] { padding: 44px 20px !important; }

  /* ---------- Display-type scaling ---------- */
  [style*="font-size: 128px"],
  [style*="font-size: 124px"],
  [style*="font-size: 120px"],
  [style*="font-size: 104px"],
  [style*="font-size: 96px"]  { font-size: clamp(42px, 12vw, 80px) !important; }
  [style*="font-size: 84px"],
  [style*="font-size: 82px"],
  [style*="font-size: 80px"],
  [style*="font-size: 72px"]  { font-size: clamp(34px, 10vw, 62px) !important; }
  [style*="font-size: 64px"],
  [style*="font-size: 62px"],
  [style*="font-size: 60px"],
  [style*="font-size: 58px"],
  [style*="font-size: 56px"],
  [style*="font-size: 54px"]  { font-size: clamp(28px, 8.4vw, 50px) !important; }
  [style*="font-size: 52px"],
  [style*="font-size: 48px"],
  [style*="font-size: 46px"],
  [style*="font-size: 44px"]  { font-size: clamp(26px, 7vw, 42px) !important; }

  /* brand wordmark in the BrandBar */
  img[style*="height: 140px"] { height: auto !important; width: auto !important; max-width: 78% !important; }

  /* trim the tallest hero sections */
  [style*="height: 700px"] { height: 460px !important; }
  [style*="height: 600px"] { height: 430px !important; }
  [style*="height: 540px"] { height: 420px !important; }

  /* news photo boxes: match the 2:1 promo cards so they're shown in full
     (not cropped) on narrow screens; the About photo keeps a 4:3 frame */
  [style*="height: 360px"],
  [style*="height: 170px"] { height: auto !important; aspect-ratio: 2 / 1 !important; }
  [style*="height: 380px"] { height: auto !important; aspect-ratio: 4 / 3 !important; }

  /* links page section header: stack the title and its right-side blurb */
  .lk-sechd { flex-wrap: wrap !important; }
  .lk-secblurb {
    margin-left: 0 !important;
    flex-shrink: 1 !important;
    width: 100% !important;
    margin-top: 3px !important;
  }
}