/* Responsive retrofit for the inline-styled .dc.html pages.
   Inline styles can't hold media queries, so this layer overrides them with
   [style*=...] attribute selectors + !important at two breakpoints. */

html, body { overflow-x: clip; }

/* ---------- Tablet and below (≤900px) ---------- */
@media (max-width: 900px) {

  /* 4- and 5-column card grids collapse to 2 columns */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1.2fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Header: keep one row, make the 9-link nav horizontally scrollable */
  header[style] { padding: 12px 20px !important; }
  header[style] nav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header[style] nav::-webkit-scrollbar { display: none; }
  header[style] nav a { flex: none; white-space: nowrap; }
}

/* ---------- Phone (≤640px) ---------- */
@media (max-width: 640px) {

  /* Every multi-column grid becomes a single column */
  [style*="grid-template-columns:"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 48px side gutters shrink to 20px (all padding patterns used in the site) */
  [style*="padding:10px 48px"],  [style*="padding:14px 48px"],
  [style*="padding:16px 48px"],  [style*="padding:20px 48px"],
  [style*="padding:32px 48px"],  [style*="padding:34px 48px"],
  [style*="padding:44px 48px"],  [style*="padding:48px 48px"],
  [style*="padding:56px 48px"],  [style*="padding:64px 48px"],
  [style*="padding:70px 48px"],  [style*="padding:72px 48px"],
  [style*="padding:80px 48px"],  [style*="padding:88px 48px"],
  [style*="padding:92px 48px"],  [style*="padding:96px 48px"],
  [style*="padding:104px 48px"], [style*="padding:72px 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Tall section top-paddings compress */
  [style*="padding:88px 48px"], [style*="padding:92px 48px"],
  [style*="padding:96px 48px"], [style*="padding:104px 48px"] {
    padding-top: 64px !important;
  }
  [style*="padding:70px 48px"], [style*="padding:72px 48px"],
  [style*="padding:80px 48px"] {
    padding-top: 56px !important;
  }

  /* Fixed-size serif headings scale down (clamp() already handles the h1s) */
  [style*="font:400 42px"], [style*="font:400 40px"], [style*="font:400 38px"] {
    font-size: 30px !important;
  }
  [style*="font:400 36px"], [style*="font:400 34px"], [style*="font:600 34px"] {
    font-size: 27px !important;
  }
  [style*="font:400 32px"], [style*="font:600 32px"], [style*="font:600 30px"] {
    font-size: 25px !important;
  }

  /* Hero height driven by content, not a desktop min-height */
  [style*="min-height:660px"] { min-height: 0 !important; }

  /* Oversized grid/flex gaps tighten */
  [style*="gap:64px"] { gap: 36px !important; }
  [style*="gap:56px"] { gap: 32px !important; }
  [style*="gap:48px"] { gap: 28px !important; }

  /* Header stacks: logo row, then full-width scrollable nav row */
  header[style] {
    flex-wrap: wrap !important;
    gap: 6px 24px !important;
    padding: 10px 14px 8px !important;
  }
  header[style] nav { flex-basis: 100% !important; min-width: 100% !important; }
  header[style] nav a[style*="margin-left"] { margin-left: 6px !important; }
}