/* ============================================================
   Base + responsive layer for the Miami Real Estate Case site.
   The markup uses inline styles (ported 1:1 from the source
   design doc), so responsive fixes target the exact inline
   grid declarations with !important overrides at breakpoints.
   ============================================================ */

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;   /* clamp the ICB so fixed nav tracks the true viewport width */
  max-width: 100%;
}
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--text-primary);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-primary); }
::selection { background: var(--highlight-marker); color: var(--text-primary); }

@keyframes bc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes bc-marquee { to { transform: translateX(-50%); } }

/* Grid/flex items default to min-width:auto, which lets a wide child
   (e.g. a min-width:680px dashboard table) blow the item out past the
   viewport instead of letting the inner scroll container handle it.
   Reset it so wide tables scroll inside their card on small screens. */
#breath-case [data-reveal] { min-width: 0; }
#breath-case [style*="overflow-x:auto"],
#breath-case [style*="overflow-x: auto"] { max-width: 100%; }

/* NOTE: the markup is inline-styled and reveal JS re-serializes some
   style attributes (adding a space after the colon). We therefore match
   on the *value* substring only — it contains no colon, so it stays
   stable regardless of serialization. */

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  [style*="1.35fr 0.9fr"],
  [style*="1.1fr 1fr"],
  [style*="1.15fr 0.85fr"],
  [style*="0.85fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  /* Collapse all remaining multi-column layouts to a single column
     (value-only substrings; "1fr 1fr" also covers the "1.1fr 1fr" hero). */
  [style*="1fr 1fr"],
  [style*="1fr auto 1fr"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* The "$10 vs $100" comparison: tighten the stacked gap */
  [style*="1fr auto 1fr"] {
    gap: 16px !important;
  }

  /* Section vertical rhythm — trim the big desktop paddings */
  section[id],
  section {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  /* Hero: reduce top padding under the fixed nav */
  header#top { padding: 104px 5vw 56px !important; }

  /* Hero stat row: let stats wrap with tighter gap */
  header#top [style*="gap:44px"] { gap: 26px !important; }

  /* Nav: hide the in-page section links, keep only the CTA (#contact) */
  #bc-nav > a[href^="#"]:not([href="#contact"]) { display: none !important; }
  #bc-nav { gap: 0 !important; }
}

@media (max-width: 480px) {
  /* Tighten the marquee + oversized display numbers a touch */
  header#top { padding-top: 96px !important; }
}