/* =============================================================
   responsive.css — mobile overrides for inline-styled grids.
   Most layouts in this site use React inline styles, which makes
   media queries tricky. We use attribute selectors that match the
   exact substrings React emits in the resulting `style` attribute,
   then force single-column / reduced spacing on small viewports.

   Breakpoint: 768px and below = phone / small tablet portrait.
   ============================================================= */

@media (max-width: 768px) {

  /* ---------- Allow long content to wrap inside grid cells ----------
     Default `min-width: auto` on grid items expands to content, causing
     horizontal overflow when long titles / URLs sit inside narrow columns. */
  [style*="display: grid"] > * { min-width: 0; }
  [style*="display: grid"] * { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }

  /* ---------- About hero: long surnames overflow at desktop clamp min --------- */
  /* "Nontananandh" is wider than the mobile content area at 56px. */
  [style*="font-size: clamp(56px, 7vw, 96px)"] { font-size: clamp(38px, 10vw, 56px) !important; }
  [style*="font-size: clamp(48px, 6vw, 88px)"] { font-size: clamp(40px, 10vw, 56px) !important; }
  [style*="font-size: clamp(48px, 6vw, 80px)"] { font-size: clamp(40px, 10vw, 56px) !important; }

  /* ---------- Universal: collapse common multi-column inline grids ---------- */
  /* React serializes JSX `gridTemplateColumns` as `grid-template-columns:`. */
  [style*="grid-template-columns: 1fr 1fr"]            { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.4fr"]           { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.61fr"]          { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr"]           { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.61fr 1fr"]          { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"]     { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 2fr"]             { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 2fr 1fr"]             { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 2.22fr"]          { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 2.22fr 1fr"]          { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 450px"]           { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 180px 1fr"]           { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 160px 1fr"]           { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 80px 1fr 1.4fr 100px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 80px 1fr 1.4fr"]      { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"]      { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3,1fr)"]       { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"]      { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(4,1fr)"]       { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"]      { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5,1fr)"]       { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(6, 1fr)"]      { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(6,1fr)"]       { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(2, 1fr)"]      { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2,1fr)"]       { grid-template-columns: 1fr !important; }

  /* ---------- Padding: shrink section gutters ---------- */
  [style*="padding: 120px 32px"]   { padding: 56px 20px !important; }
  [style*="padding: 96px 32px"]    { padding: 48px 20px !important; }
  [style*="padding: 96px 32px 120px"]    { padding: 48px 20px 64px !important; }
  [style*="padding: 96px 32px 32px"]     { padding: 48px 20px 24px !important; }
  [style*="padding: 96px 32px 48px"]     { padding: 48px 20px 24px !important; }
  [style*="padding: 96px 32px 64px"]     { padding: 48px 20px 32px !important; }
  [style*="padding: 0 32px 96px"]        { padding: 0 20px 48px !important; }
  [style*="padding: 0 32px 120px"]       { padding: 0 20px 64px !important; }
  [style*="padding: 0 32px 64px"]        { padding: 0 20px 32px !important; }
  [style*="padding: 0 32px 80px"]        { padding: 0 20px 40px !important; }
  [style*="padding: 64px 32px 32px"]     { padding: 32px 20px 16px !important; }
  [style*="padding: 64px 32px 40px"]     { padding: 32px 20px 20px !important; }
  [style*="padding: 64px 32px 48px"]     { padding: 32px 20px 24px !important; }
  [style*="padding: 64px 32px 96px"]     { padding: 32px 20px 48px !important; }
  [style*="padding: 64px 32px 120px"]    { padding: 32px 20px 56px !important; }
  [style*="padding: 48px 32px"]    { padding: 32px 20px !important; }
  [style*="padding: 40px 32px"]    { padding: 28px 20px !important; }
  [style*="padding: 72px 32px"]    { padding: 36px 20px !important; }
  [style*="padding: 80px 32px"]    { padding: 40px 20px !important; }
  [style*="padding: 32px 32px"]    { padding: 20px 20px !important; }
  [style*="padding: 24px 32px"]    { padding: 16px 20px !important; }
  [style*="padding: 12px 32px"]    { padding: 10px 16px !important; }

  /* Compound paddings used in case-study heroes
     Top kept at ~56px so the "← back to work" link clears the browser chrome
     and isn't clipped by system status bar on mobile. */
  [style*="padding: 40px 32px 24px"]     { padding: 56px 20px 16px !important; }
  [style*="padding: 32px 32px 96px"]     { padding: 20px 20px 48px !important; }
  [style*="padding: 48px 32px 96px"]     { padding: 24px 20px 48px !important; }

  /* ---------- Gap reductions ---------- */
  [style*="gap: 64px"]     { gap: 24px !important; }
  [style*="gap: 56px"]     { gap: 24px !important; }
  [style*="gap: 48px"]     { gap: 20px !important; }

  /* ---------- Hero h1 shrink for non-clamp values ---------- */
  /* Most heroes use clamp() already; this catches a couple of fixed-px ones. */
  [style*="font-size: 70px"]  { font-size: 40px !important; }
  [style*="font-size: 56px"]  { font-size: 36px !important; }

  /* ---------- Filter rail (fixed bottom) ---------- */
  .ak-filter-rail [style*="margin-left: auto"] {
    margin-left: 0 !important;
  }
}