/* ============================================================
   mobile.css — DAI marketing site responsive overrides
   ------------------------------------------------------------
   Strategy: components use inline styles (desktop-first).
   This stylesheet uses high-specificity attribute selectors +
   !important to override inline styles below 768px.

   Opt-out: add `data-mobile-keep` to any element whose grid
   should NOT collapse on mobile (e.g. 2-button row).
   ============================================================ */

/* ---------- Tablet (max 1024px) ---------- */
@media (max-width: 1024px) {
  [style*="padding: 120px"], [style*="padding: 140px"], [style*="padding: 160px"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* ---------- Mobile (max 768px) ---------- */
@media (max-width: 768px) {

  /* --- Container --- */
  [style*="max-width: 1240px"],
  [style*="max-width: 1120px"],
  [style*="max-width: 1080px"],
  [style*="max-width: 960px"],
  [style*="max-width: 880px"] {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Grid collapse (universal opt-out via data-mobile-keep) --- */
  [style*="grid-template-columns"]:not([data-mobile-keep]) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [style*="display: grid"]:not([data-mobile-keep]) {
    grid-template-columns: 1fr !important;
  }

  /* --- Section padding --- */
  section,
  [style*="padding: 120px 0"],
  [style*="padding: 140px 0"],
  [style*="padding: 96px 0"],
  [style*="padding: 100px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Typography scaling --- */
  h1, [style*="font-size: 72"], [style*="font-size: 80"], [style*="font-size: 88"], [style*="font-size: 96"] {
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }
  h2, [style*="font-size: 48"], [style*="font-size: 52"], [style*="font-size: 56"], [style*="font-size: 60"], [style*="font-size: 64"] {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.12 !important;
  }
  [style*="font-size: 32"], [style*="font-size: 36"], [style*="font-size: 40"], [style*="font-size: 44"] {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.2 !important;
  }
  /* clamp() values inside inline styles already scale — leave them */

  /* --- Flex layouts: stack tall when wide --- */
  [style*="display: flex"][style*="gap: 80"]:not([data-mobile-keep]),
  [style*="display: flex"][style*="gap: 64"]:not([data-mobile-keep]),
  [style*="display: flex"][style*="gap: 56"]:not([data-mobile-keep]),
  [style*="display: flex"][style*="gap: 48"]:not([data-mobile-keep]) {
    flex-direction: column !important;
    gap: 32px !important;
    align-items: flex-start !important;
  }

  /* --- Hide desktop nav, show mobile menu trigger --- */
  [data-dai-nav-desktop] { display: none !important; }
  [data-dai-nav-mobile-trigger] { display: flex !important; }

  /* --- Hero adjustments --- */
  [data-dai-hero] {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 80px !important;
  }
  [data-dai-hero-stats] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- Forms --- */
  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* --- FAQ accordion: collapse 2-col layout --- */
  [data-dai-faq-grid] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* --- Footer columns stack --- */
  footer [style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* --- Methodology: large gold numerals scale down --- */
  [data-dai-methodology-num] {
    font-size: clamp(48px, 14vw, 88px) !important;
  }

  /* --- Card padding reduce --- */
  [style*="padding: 48px"], [style*="padding: 56px"], [style*="padding: 64px"] {
    padding: 28px !important;
  }

  /* --- Cap absolute large widths --- */
  [style*="width: 880px"], [style*="width: 720px"], [style*="width: 640px"], [style*="width: 600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Remove sticky on small screens (chrome jumps) --- */
  [data-dai-sticky-mobile-off] {
    position: relative !important;
  }

  /* --- Tap target floor --- */
  button, a {
    min-height: 44px;
  }
  button[style*="padding"], a[style*="padding"][role="button"] {
    min-height: 0;
  }
}

/* ---------- Very small (max 380px) ---------- */
@media (max-width: 380px) {
  h1, [style*="font-size: 72"], [style*="font-size: 80"], [style*="font-size: 88"] {
    font-size: 30px !important;
  }
  section, [style*="padding: 120px 0"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}