/* ENGINPILOT — responsive layer.
   Layout is authored as inline styles, so this file matches on the *serialised*
   declaration (React normalises to "prop: value" with spaces) and overrides it
   per breakpoint. One rule → every instance of that layout, site-wide.

   Strategy:  ≥1181 desktop · 861–1180 tablet · ≤860 mobile · ≤520 compact
   Desktop composition is untouched. */

/* ============ TABLET — 4-up steps to 2-up, wide data rows pair up ============ */
@media (max-width: 1180px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1.5fr 0.9fr"],
  [style*="grid-template-columns: 0.9fr 1.3fr 1.1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1.5fr 1.2fr 0.7fr"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============ TABLET — editorial + figure pairs stack ============ */
@media (max-width: 1020px) {
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.35fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr auto"] { grid-template-columns: minmax(0px, 1fr) !important; }

  /* sticky sidebars release: manifesto contents, legal nav, library index */
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 220px 1fr 200px"] { grid-template-columns: minmax(0px, 1fr) !important; }
  [style*="grid-template-columns: 240px 1fr"] > nav,
  [style*="grid-template-columns: 220px 1fr 200px"] > nav,
  [style*="grid-template-columns: 220px 1fr 200px"] > aside { position: static !important; }
}

/* ============ MOBILE ============ */
@media (max-width: 860px) {
  /* remaining multi-column blocks collapse to one */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: minmax(0px, 1fr) !important; }

  /* auto-fit tracks: drop the 280px floor so they don't force overflow */
  [style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] { grid-template-columns: minmax(0px, 1fr) !important; }

  /* label/value gutters become label-above-value */
  [style*="grid-template-columns: 110px 1fr"],
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: 150px 1fr"],
  [style*="grid-template-columns: 170px 1fr"],
  [style*="grid-template-columns: 180px 1fr"],
  [style*="grid-template-columns: 190px 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 64px 28px 1fr"],
  [style*="grid-template-columns: 26px 1fr auto"] { grid-template-columns: minmax(0px, 1fr) !important; }

  /* list rows with trailing meta: research, thinking, careers, company */
  [style*="grid-template-columns: 130px 1fr 160px"],
  [style*="grid-template-columns: 150px 1fr 130px"],
  [style*="grid-template-columns: 1fr 220px 150px 100px"],
  [style*="grid-template-columns: 1fr 200px 90px"] { grid-template-columns: minmax(0px, 1fr) !important; gap: 8px !important; }

  /* container gutters */
  [style*="max-width: 1280px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* section rhythm compresses without losing separation.
     Two-value rules first, three-value after, so asymmetric paddings win. */
  [style*="padding: 112px 32px"] { padding: 56px 20px !important; }
  [style*="padding: 104px 32px"] { padding: 56px 20px !important; }
  [style*="padding: 96px 32px"] { padding: 52px 20px !important; }
  [style*="padding: 88px 32px"] { padding: 48px 20px !important; }
  [style*="padding: 80px 32px"] { padding: 44px 20px !important; }
  [style*="padding: 72px 32px"] { padding: 44px 20px !important; }
  [style*="padding: 64px 32px"] { padding: 40px 20px !important; }
  [style*="padding: 36px 32px"] { padding: 28px 20px !important; }
  [style*="padding: 34px 32px"] { padding: 26px 20px !important; }
  [style*="padding: 140px 32px 120px"] { padding: 64px 20px 52px !important; }
  [style*="padding: 112px 32px 96px"] { padding: 56px 20px 48px !important; }
  [style*="padding: 104px 32px 88px"] { padding: 52px 20px 44px !important; }
  [style*="padding: 96px 32px 104px"] { padding: 52px 20px 56px !important; }
  [style*="padding: 88px 32px 72px"] { padding: 48px 20px 40px !important; }
  [style*="padding: 72px 32px 112px"] { padding: 44px 20px 56px !important; }
  [style*="padding: 72px 32px 64px"] { padding: 44px 20px 40px !important; }
  [style*="padding: 64px 32px 32px"] { padding: 40px 20px 24px !important; }
  [style*="padding: 20px 32px 40px"] { padding: 20px 20px 32px !important; }
  [style*="padding: 0px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* former column gaps become vertical rhythm */
  [style*="gap: 80px"], [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap: 64px"] { gap: 36px !important; }
  [style*="gap: 56px"] { gap: 32px !important; }

  /* data tables keep their columns and scroll inside their own frame */
  [style*="grid-template-columns: 46px 1.15fr"],
  [style*="grid-template-columns: 46px 1.2fr"],
  [style*="grid-template-columns: 52px 1.5fr"],
  [style*="grid-template-columns: 0.7fr 1.1fr 1.8fr 0.8fr"],
  [style*="grid-template-columns: 1.1fr 1.6fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr 1.6fr 0.8fr"] { min-width: 680px; }
  [style*="border: 1px solid var(--border-subtle)"]:has(> [style*="grid-template-columns: 46px 1.15fr"]),
  [style*="border: 1px solid var(--border-subtle)"]:has(> [style*="grid-template-columns: 46px 1.2fr"]),
  [style*="border: 1px solid var(--border-subtle)"]:has(> [style*="grid-template-columns: 52px 1.5fr"]),
  [style*="border: 1px solid var(--border-subtle)"]:has(> [style*="grid-template-columns: 0.7fr 1.1fr 1.8fr 0.8fr"]),
  [style*="border: 1px solid var(--border-subtle)"]:has(> [style*="grid-template-columns: 1.1fr 1.6fr 1fr"]),
  [style*="border: 1px solid var(--border-subtle)"]:has(> [style*="grid-template-columns: 1.1fr 1fr 1.6fr 0.8fr"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* hero photography holds its subject as the frame narrows */
  [style*="object-position: 72% 58%"] { object-position: 64% 58% !important; }
  [style*="object-position: 88% 100%"] { object-position: 76% 100% !important; }
  [style*="object-position: 62% 62%"] { object-position: 58% 62% !important; }

  /* architecture seven-layer heading */
  [style*="font-size:44px"][style*="letter-spacing:-.025em"] {
    font-size: clamp(26px, 5.5vw, 44px) !important;
  }

  /* architecture seven-layer stack */
  .ep-stack-layers {
    height: auto !important;
  }
  .ep-stack-layers > div {
    flex: 0 1 auto !important;
    min-height: auto !important;
    padding: 14px 16px !important;
  }
}

/* ============ COMPACT MOBILE ============ */
@media (max-width: 520px) {
  [style*="max-width: 1280px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 104px 32px"],
  [style*="padding: 96px 32px"],
  [style*="padding: 88px 32px"],
  [style*="padding: 140px 32px 120px"] { padding-left: 16px !important; padding-right: 16px !important; }
  /* long mono metadata rows wrap rather than forcing overflow */
  [style*="white-space: nowrap"][style*="font-family: var(--font-mono)"] { white-space: normal !important; }
}

/* Belt-and-braces guard against horizontal overflow. `clip` rather than
   `hidden`: hidden would force overflow-y to auto, making BODY the scroll
   container — which pins window.scrollY at 0 and silently kills the nav's
   scrolled state and the manifesto scrollspy. `clip` creates no scroll box.
   Applied to BODY only: on the root element overflow-x propagates to the
   viewport, which cuts off `position: sticky` — the sticky nav would scroll
   away with the page. */
body { max-width: 100%; overflow-x: clip; }