/* ============================================================
   DAE — Mobile responsive overrides
   Layered on top of inline styles via attribute selectors.
   ============================================================ */

/* ─── Base: prevent horizontal overflow ────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg { max-width: 100%; height: auto; }

/* Long heading words break instead of overflowing the viewport */
h1, h2, h3, h4, p, li, a, span { overflow-wrap: anywhere; word-break: normal; }

/* ─── Container padding ────────────────────────────────────── */
@media (max-width: 1280px) {
  .dae-wrap { padding: 0 28px; }
}
@media (max-width: 768px) {
  .dae-wrap { padding: 0 20px; }
}

/* ─── Tablet (≤ 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Collapse 2-col grids to single column */
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns: 0.6fr 1.4fr"],
  [style*="grid-template-columns:0.6fr 1.4fr"],
  [style*="grid-template-columns: 0.7fr 1.3fr"],
  [style*="grid-template-columns:0.7fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1.3fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 3-col grids → 2 cols */
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 4-col grids → 2 cols */
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1.4fr repeat(4,1fr)"],
  [style*="grid-template-columns:1.4fr repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Offices "1.6fr 1fr 1fr 1fr 1fr" → 2 cols */
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [style*="grid-row: span 2"],
  [style*="gridRow: span 2"] {
    grid-row: auto !important;
  }

  section[style*="padding: 112px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  section[style*="padding: 120px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  section[style*="padding: 96px"]  { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 88px"]  { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ─── Mobile (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Aggressive typography scale — tuned for 390px viewport */
  .dae-h1   { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; }
  .dae-h2   { font-size: 26px !important; line-height: 1.15 !important; }
  .dae-h3   { font-size: 20px !important; line-height: 1.25 !important; }
  .dae-h4   { font-size: 17px !important; }
  .dae-lede { font-size: 15px !important; line-height: 1.55 !important; }

  /* Inline maxWidth overrides — design uses "52ch" etc which is too wide on phones */
  [style*="max-width: 52ch"], [style*="maxWidth: 52ch"],
  [style*="max-width: 50ch"], [style*="maxWidth: 50ch"],
  [style*="max-width: 60ch"], [style*="maxWidth: 60ch"],
  [style*="max-width: 55ch"], [style*="maxWidth: 55ch"],
  [style*="max-width: 48ch"], [style*="maxWidth: 48ch"],
  [style*="max-width: 44ch"], [style*="maxWidth: 44ch"],
  [style*="max-width: 42ch"], [style*="maxWidth: 42ch"],
  [style*="max-width: 30ch"], [style*="maxWidth: 30ch"],
  [style*="max-width: 22ch"], [style*="maxWidth: 22ch"],
  [style*="max-width: 20ch"], [style*="maxWidth: 20ch"],
  [style*="max-width: 18ch"], [style*="maxWidth: 18ch"],
  [style*="max-width: 16ch"], [style*="maxWidth: 16ch"],
  [style*="max-width: 12ch"], [style*="maxWidth: 12ch"] {
    max-width: 100% !important;
  }

  /* Inline minWidth overrides — sidebar columns etc */
  [style*="min-width: 110"], [style*="minWidth: 110"] { min-width: 0 !important; }

  /* Section padding tightens further */
  section[style*="padding: 72px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding: 56px"] { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Nav: hide desktop link bar */
  header nav { display: none !important; }

  /* All grids collapse to single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows wrap */
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  [style*="display:\"flex\""][style*="justifyContent:\"space-between\""] {
    flex-wrap: wrap !important;
  }
  [style*="display: flex"][style*="gap: 40"] {
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  [style*="display: flex"][style*="gap: 48"] {
    gap: 24px !important;
    flex-wrap: wrap !important;
  }

  /* Hero visual — eliminate fixed min-heights entirely on mobile */
  [style*="min-height: 520"], [style*="minHeight: 520"],
  [style*="min-height: 480"], [style*="minHeight: 480"],
  [style*="min-height: 460"], [style*="minHeight: 460"] {
    min-height: 0 !important;
  }

  /* Padding shrinks for cards */
  [style*="padding: 40px"] { padding: 24px !important; }
  [style*="padding: 36px"] { padding: 22px !important; }
  [style*="padding: 32px"] { padding: 20px !important; }
  [style*="padding: 24px 32px"] { padding: 16px 20px !important; }

  /* Big display numbers shrink */
  div[style*="font: 600 64px"] { font-size: 38px !important; }
  div[style*="font: 600 56px"] { font-size: 34px !important; }
  div[style*="font: 600 48px"] { font-size: 30px !important; }
  div[style*="font: 600 44px"] { font-size: 28px !important; }
  div[style*="font: 600 38px"] { font-size: 26px !important; }
  div[style*="font: 600 36px"] { font-size: 26px !important; }
  div[style*="font: 600 32px"] { font-size: 24px !important; }
  div[style*="font: 600 28px"] { font-size: 22px !important; }
  div[style*="font: 600 26px"] { font-size: 20px !important; }
  div[style*="font: 600 22px"] { font-size: 18px !important; }

  /* Hero h1 inline styles in CHHero (no class) */
  h1[style*="font:"] { font-size: 34px !important; line-height: 1.08 !important; }
  h2[style*="font:"] { font-size: 26px !important; line-height: 1.15 !important; }
  h3[style*="font:"] { font-size: 20px !important; line-height: 1.25 !important; }

  /* Inline image cards and visuals: no min-height */
  [style*="aspect-ratio"] { aspect-ratio: auto !important; height: auto !important; }

  /* Long mono labels: allow break */
  .dae-mono { overflow-wrap: anywhere; }

  /* Talk-to-sales button should not be cut off */
  header .dae-wrap > div:last-child { flex-shrink: 0; }
  header .dae-wrap { gap: 12px !important; }

  /* Logo: shrink wordmark tag on mobile */
  .dae-wordmark .pill { display: none; }

  /* Sticky-nav: more compact */
  header[style*="height: 72"] > div { height: 56px !important; }

  /* SVG diagrams: ensure they fit */
  svg[viewBox] { max-width: 100%; height: auto !important; }

  /* Hero visual card positions (absolutely-positioned inner cards): stack normally */
  [style*="position: absolute"][style*="top: 32"],
  [style*="position: absolute"][style*="bottom: 32"] {
    position: static !important;
    width: 100% !important;
  }
}

/* ─── Small phones (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
  .dae-wrap { padding: 0 14px; }
  .dae-h1   { font-size: 28px !important; }
  .dae-h2   { font-size: 22px !important; }
  .dae-h3   { font-size: 18px !important; }
  h1[style*="font:"] { font-size: 28px !important; }
  h2[style*="font:"] { font-size: 22px !important; }

  /* Very compact section padding */
  section[style*="padding: 72px"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  section[style*="padding: 96px"] { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Buttons fit on row */
  .dae-btn-lg { height: 44px !important; padding: 0 18px !important; font-size: 14px !important; }
}

/* ─── Loading state while Babel transpiles JSX ─────────────── */
#root:empty::before {
  content: "DAE";
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 48px/1 'Poppins', sans-serif;
  letter-spacing: -0.06em;
  color: var(--dae-blue, #274C77);
  background: #fff;
  z-index: 9999;
}