/* ==========================================================================
   Mobile responsive overrides — applies below 768px
   Strategy: catch-all on inline `display: grid` + targeted clean-ups.
   Inline React styles don't always match exact attr-selector strings
   (e.g. "repeat(4, 1fr)" with the space), so we use broad rules that
   force any inline grid to single-column on mobile.
   ========================================================================== */

/* Safety net everywhere — applied at all sizes */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 768px) {

  /* ---------- Universal grid collapse ----------
     Any element with inline `display: grid` (React style={{display:'grid'}})
     gets forced to a single column. This is broader than attribute matching
     and safer because it doesn't depend on string syntax.
  */
  [style*="display: grid"],
  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Allow specific 2-col grids if marked (none right now, but escape hatch) */
  [data-mobile-cols="2"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ---------- Sections: shrink horizontal padding ---------- */
  section[id] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* Hero keeps full bleed */
  section#top {
    padding: 0 !important;
  }
  section#top > div[style*="position: absolute"] {
    left: 24px !important;
    right: 24px !important;
    bottom: 56px !important;
    max-width: calc(100vw - 48px) !important;
  }
  section#top > div[style*="top: 56px"] {
    top: 24px !important;
    right: 24px !important;
  }
  section#top > div[style*="bottom: 32px"] {
    bottom: 16px !important;
    left: 24px !important;
  }

  /* ---------- Headlines: scale down ---------- */
  h1, h2, h3 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.05 !important;
  }
  section#top h1,
  section#top div[style*="fontSize: 88px"],
  section#top div[style*="fontSize: 96px"],
  section#top div[style*="fontSize: 104px"] {
    font-size: clamp(36px, 10vw, 56px) !important;
    line-height: 1.05 !important;
  }
  div[style*="fontSize: 56px"],
  div[style*="fontSize: 64px"],
  div[style*="fontSize: 72px"],
  div[style*="fontSize: 80px"] {
    font-size: clamp(28px, 7.5vw, 42px) !important;
    line-height: 1.1 !important;
  }
  div[style*="fontSize: 44px"],
  div[style*="fontSize: 48px"] {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.15 !important;
  }
  div[style*="fontSize: 100px"],
  div[style*="fontSize: 120px"],
  span[style*="fontSize: 100px"],
  span[style*="fontSize: 120px"] {
    font-size: 56px !important;
  }

  /* ---------- Body text ---------- */
  p, li {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  p[style*="fontSize: 22px"],
  p[style*="fontSize: 24px"],
  p[style*="fontSize: 26px"] {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  /* ---------- Eyebrow / tracking-out tags shouldn't blow past viewport ---------- */
  /* Reduce letter-spacing on small screens to keep them on one line. */
  [style*="letter-spacing: 0.28em"],
  [style*="letterSpacing: 0.28em"],
  [style*="letter-spacing: 0.3em"],
  [style*="letterSpacing: 0.3em"],
  [style*="letter-spacing: 0.32em"],
  [style*="letterSpacing: 0.32em"] {
    letter-spacing: 0.18em !important;
  }
  [style*="letter-spacing: 0.22em"],
  [style*="letterSpacing: 0.22em"],
  [style*="letter-spacing: 0.24em"],
  [style*="letterSpacing: 0.24em"] {
    letter-spacing: 0.16em !important;
  }
  /* Allow eyebrows to wrap if necessary */
  [style*="textTransform: uppercase"],
  [style*="text-transform: uppercase"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* ---------- Images: cap heights so tall portraits don't dominate ---------- */
  div[style*="aspectRatio"][style*="3/4"],
  div[style*="aspect-ratio: 3/4"] {
    max-height: 70vh !important;
  }
  div[style*="minHeight: 70vh"],
  div[style*="minHeight: 80vh"],
  div[style*="minHeight: 90vh"] {
    min-height: 50vh !important;
  }

  /* ---------- Header ---------- */
  header {
    padding: 12px 20px !important;
  }
  /* Override grid catch-all for the header (it's also a grid) */
  header[style*="display: grid"] {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  /* But the mobile menu drawer inside header should span full row */
  header > div[style*="gridColumn"] {
    grid-column: 1 / -1 !important;
  }

  /* ---------- Modals ---------- */
  div[style*="position: fixed"][style*="inset: 0"] > div[style*="maxWidth"] {
    max-width: 92vw !important;
    max-height: 88vh !important;
    padding: 32px 24px !important;
  }

  /* ---------- Forms ---------- */
  form, form > div {
    grid-template-columns: 1fr !important;
  }
  input, textarea, select, button {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }

  /* ---------- Tweaks panel ---------- */
  div[style*="position: fixed"][style*="bottom: 24px"][style*="right: 24px"] {
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* ---------- Anchored absolute content ---------- */
  div[style*="position: absolute"][style*="top: 56px"] { top: 24px !important; }
  div[style*="position: absolute"][style*="left: 56px"] { left: 24px !important; }
  div[style*="position: absolute"][style*="right: 56px"] { right: 24px !important; }
  div[style*="position: absolute"][style*="bottom: 56px"] { bottom: 32px !important; }

  /* ---------- Stretch images full-width on mobile ---------- */
  img {
    max-width: 100% !important;
    height: auto;
  }

  /* ---------- Long inline tracked numerals (prices) shouldn't overflow ---------- */
  [style*="white-space: nowrap"],
  [style*="whiteSpace: nowrap"] {
    white-space: normal !important;
  }
}

/* Very small phones — extra tightening */
@media (max-width: 420px) {
  section[id] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  div[style*="fontSize: 88px"],
  div[style*="fontSize: 96px"],
  div[style*="fontSize: 104px"] {
    font-size: 32px !important;
  }
  /* Tighten eyebrows further */
  [style*="letter-spacing: 0.28em"],
  [style*="letterSpacing: 0.28em"] {
    letter-spacing: 0.14em !important;
    font-size: 10px !important;
  }
}