/* ESE responsive overrides — tablet (≤1024px) and mobile (≤640px).
   Targets inline-styled layout via [style*=…] (both raw and serialized forms). */

/* Editorial line-wrapping — site-wide runt/widow elimination.
   `balance` evens display headings into deliberate-looking line groups;
   `pretty` lets the browser re-flow paragraph endings so no lone word
   (or short word like "a"/"the") strands on its own line. Both are
   width-adaptive, so every breakpoint stays runt-free without manual breaks.
   Browsers without support fall back to normal wrapping — no harm. */
h1, h2, h3, h4, blockquote { text-wrap: balance; }
p, li, label, figcaption { text-wrap: pretty; }

/* All widths: keep grid cells shrinkable — image-slot placeholder labels
   otherwise inflate min-content and cause sideways page overflow. */
[style*="display:grid"] > *, [style*="display: grid"] > * { min-width: 0; }

@media (max-width: 1024px) {
  h1 { font-size: clamp(40px, 7.5vw, 58px) !important; }
  h2 { font-size: clamp(30px, 5vw, 42px) !important; }
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:2fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1.2fr"] { grid-template-columns: 1fr 1fr !important; }
  [data-hdr-nav] { display: none !important; }
  [data-hdr-burger] { display: flex !important; }
  /* With the nav hidden, keep CTA + burger grouped at the right edge instead
     of space-between stranding the CTA mid-header. */
  [data-hdr-cta] { margin-left: auto !important; }
  /* The step rail only maps onto a 4-across row; below that the numbers
     restack 2x2, so hide it rather than float dots above nothing. */
  .ese-whyrail { display: none !important; }
  .ese-fwrail { display: none !important; }

  /* Home S3 bento: the 1.5fr + 2-col spans only work at 3 across.
     Collapse to 2 up and clear the spans so no cell doubles up. */
  [style*="grid-template-columns:1.5fr 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-row:span 2"],
  [style*="grid-row: span 2"] { grid-row: auto !important; }
  /* Map + stats: side-by-side needs desktop width; stack with the map first. */
  [data-esemap] { grid-template-columns: 1fr !important; gap: 40px !important; }
  /* Pin/h-scroll sections are disabled below 1025px by the motion engine, so
     their tracks become ordinary swipe rows — give them momentum + snap. */
  [data-hscroll-track], [data-kit-track] {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
  }
  [data-hscroll-track] > *, [data-kit-track] > * { scroll-snap-align: start; }
  [data-hscroll-pin] { height: auto !important; position: static !important; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(32px, 9.5vw, 40px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(26px, 7.5vw, 32px) !important; }
  blockquote { font-size: 26px !important; }

  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:1fr 1.6fr"], [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns:1.5fr 1fr"], [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"], [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"], [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr 1.2fr"], [style*="grid-template-columns: 2fr 1fr 1fr 1.2fr"],
  [style*="1fr auto 1.4fr auto 1fr"] { grid-template-columns: 1fr !important; }

  [style*="padding:128px 32px"],
  [style*="padding: 128px 32px"],
  [style*="padding: 128px 32px"] { padding: 64px 20px !important; }
  [style*="padding:96px 32px"],
  [style*="padding: 96px 32px"],
  [style*="padding: 96px 32px"] { padding: 56px 20px !important; }
  [style*="padding:160px 32px 96px"],
  [style*="padding: 160px 32px 96px"],
  [style*="padding: 160px 32px 96px"] { padding: 130px 20px 56px !important; }
  [style*="padding:176px 32px 128px"],
  [style*="padding: 176px 32px 128px"],
  [style*="padding: 176px 32px 128px"] { padding: 140px 20px 96px !important; }
  [style*="padding:64px 48px"],
  [style*="padding: 64px 48px"],
  [style*="padding: 64px 48px"] { padding: 32px 24px !important; }
  [style*="padding:48px 32px"],
  [style*="padding: 48px 32px"],
  [style*="padding: 48px 32px"] { padding: 32px 20px !important; }
  [style*="padding:64px 32px 32px"],
  [style*="padding: 64px 32px 32px"],
  [style*="padding: 64px 32px 32px"] { padding: 48px 20px 24px !important; }

  [style*="font-size:64px"],
  [style*="font-size: 64px"],
  [style*="font-size: 64px"] { font-size: 42px !important; }
  [style*="font-size:56px"],
  [style*="font-size: 56px"],
  [style*="font-size: 56px"] { font-size: 40px !important; }
  [style*="font-size:40px"],
  [style*="font-size: 40px"],
  [style*="font-size: 40px"] { font-size: 30px !important; }

  /* Horizontal-scroll cards sized to phone width */
  [style*="width:520px"],
  [style*="width: 520px"],
  [style*="width: 520px"] { width: 82vw !important; }
  [style*="width:460px"],
  [style*="width: 460px"],
  [style*="width: 460px"] { width: 80vw !important; }
  [style*="width:420px"],
  [style*="width: 420px"],
  [style*="width: 420px"] { width: 78vw !important; }
  [style*="width:400px"],
  [style*="width: 400px"],
  [style*="width: 400px"] { width: 76vw !important; }

  [data-hdr-cta] { display: none !important; }
  [style*="grid-template-columns:1.5fr 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-column:span 2"],
  [style*="grid-column: span 2"] { grid-column: auto !important; }
  /* About journey: the 180px year column strands the copy on a phone. */
  [style*="grid-template-columns:180px 1fr"],
  [style*="grid-template-columns: 180px 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  [data-jrail] { padding-left: 32px !important; }
  /* Deck modal: 48px padding leaves no measure on a 360px screen. */
  [style*="padding:48px"][role="dialog"],
  [style*="padding: 48px"][role="dialog"],
  [role="dialog"][style*="padding:48px"],
  [role="dialog"][style*="padding: 48px"] { padding: 28px 20px !important; }
  [style*="max-width:560px"],
  [style*="max-width: 560px"] { max-width: 100% !important; }
  /* Map pin labels: no hover on touch, so keep them inside the viewport. */
  [data-esemap] [style*="min-width:172px"] { min-width: 148px !important; font-size: 13px !important; }
  /* Type + leading at phone scale */
  [style*="font-size:26px"],
  [style*="font-size: 26px"],
  [style*="font-size: 26px"] { font-size: 22px !important; }
  [style*="font-size:20px;line-height:1.5"],
  [style*="font-size: 20px; line-height: 1.5"] { font-size: 17px !important; }
  /* Full-height heroes: 100vh + big padding overflows on short phones. */
  [style*="min-height:100vh"],
  [style*="min-height: 100vh"] { min-height: auto !important; }
  /* Tap targets: never below 44px. */
  a[style*="padding:12px 24px"], button[style*="padding:12px 24px"],
  a[style*="padding:16px 32px"], button[style*="padding:16px 32px"] { min-height: 44px; display: inline-flex; align-items: center; }
  /* Kill horizontal page overflow from any wide absolute child. */
  html, body { overflow-x: hidden; max-width: 100%; }

  [data-mobile-cta] { display: flex !important; }
}