/* AE Blue Capital — responsive layer.
 * The components use inline styles (high specificity), so these overrides use
 * !important and target the serialized inline grid values. Serialization is
 * stable in all engines (e.g. "grid-template-columns: 1fr 1.6fr"). Loaded after
 * colors_and_type.css on every page.
 *
 * Breakpoints:  ≤1024px tablet   ≤700px phone
 */

/* ---- universal safety ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, image-slot, picture { max-width: 100%; height: auto; }
image-slot { display: block; }

/* ===================== TABLET  (≤1024px) ===================== */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(5, 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(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* footer multi-up → 2-up */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.7fr 1fr 1fr 1fr 0.8fr"] { grid-template-columns: 1fr 1fr !important; row-gap: 32px !important; }
}

/* ===================== PHONE  (≤700px) ===================== */
@media (max-width: 700px) {
  /* every multi-column grid → single column */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.7fr 1fr 1fr 1fr 0.8fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="grid-template-columns: 1.04fr 0.96fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    min-height: 0 !important;
  }

  /* the LP access matrix (Investor film page): keep the row shape, narrow the
     three fixed check columns so the label column survives a phone viewport */
  [style*="grid-template-columns: 1fr 110px 110px 110px"] { grid-template-columns: 1fr 62px 62px 62px !important; }
  [style*="grid-template-columns: 1fr 110px 110px 110px"] > span[style*="text-transform: uppercase"] { font-size: 9px !important; letter-spacing: .06em !important; }

  /* fixed-pixel list rows → stack cleanly */
  [style*="grid-template-columns: 88px 1fr auto"],
  [style*="grid-template-columns: 54px 110px 1fr auto"],
  [style*="grid-template-columns: 60px 120px 1fr auto"],
  [style*="grid-template-columns: 56px 104px 1fr auto auto"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* tighten very large vertical rhythm */
  [style*="padding: 120px"], [style*="padding: 104px"], [style*="padding: 100px"],
  [style*="padding: 96px"], [style*="padding: 88px"] {
    padding-top: 56px !important; padding-bottom: 56px !important;
  }

  /* tighten oversized inner padding on CTA / framed boxes */
  [style*="padding: 56px 48px"], [style*="padding: 64px 48px"], [style*="padding: 56px 40px"],
  [style*="padding: 56px 48px 40px"], [style*="padding: 36px 40px"], [style*="padding: 40px 40px"] {
    padding: 28px 22px !important;
  }

  /* stacked nav cells: keep the alignment readable */
  [style*="justify-content: flex-end"][style*="grid-template-columns: 1fr"] { justify-content: flex-start !important; }
}

/* very small phones */
@media (max-width: 400px) {
  [style*="padding: 28px 22px"] { padding: 22px 18px !important; }
}