/* ═══════════════════════════════════════════════════════════════════
   SURERENT · responsive.css — wrap-first safety layer (general pages)
   Loads LAST in base.html, after tokens/style/premium/avant-public + page
   sheets. Job: cards must WRAP to the next line, never squeeze side-by-side.

   Root cause it fixes: fixed `repeat(3,1fr)` / `repeat(5,1fr)` grids only
   break at 1–2 hard breakpoints, so every width between them squeezes.
   Fix: intrinsic `repeat(auto-fit, minmax(...))` grids + min-width:0 on
   children + fluid media + overflow guards. No visual redesign — same
   brass/paper ledger, just fluid.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Global safety net ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

/* Grid children must be allowed to shrink past content size,
   otherwise long titles force the whole track to squeeze. */
.curated-grid > *, .top-agents-grid > *, .sr-properties-grid > *,
.av-terra-grid > *, .av-doors > *, .sr-agents-grid > *,
.sr-about-intro-grid > *, .sr-about-values-grid > *,
.sr-about-team-grid > *, .sr-about-timeline > * { min-width: 0; }

/* Long words / prices / locations wrap instead of blowing tracks out. */
.curated-card, .agent-card, .sr-prop-card, .sr-agent-card,
.av-terra, .av-door, .av-rail-card {
  overflow-wrap: anywhere;
  word-break: normal;
}
.curated-content h3, .sr-prop-title, .av-rail-card strong,
.av-rail-card span.loc { min-width: 0; }

/* Tables / code / pre never break mobile layout on detail pages. */
table { width: 100%; max-width: 100%; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ── 1. HOME — sealed inventory (the reported bug) ─────────────
   Was: `1.15fr 1fr 1fr` until 991px, then 2col, then 1col at 767px.
   Between those widths 3 cramped cards squeezed. Now intrinsic. */
.curated-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)) !important;
  gap: clamp(16px, 2.5vw, 24px) !important;
  align-items: stretch;
}
.curated-card { height: 100%; min-width: 0; }
.curated-img-wrapper { height: clamp(190px, 22vw, 240px); }
.curated-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.curated-footer { flex-wrap: wrap; gap: 10px; }

/* ── 2. HOME — certified desks (was repeat(5,1fr): worst squeezer) */
.top-agents-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)) !important;
  gap: clamp(14px, 2vw, 24px) !important;
}
.agent-card { min-width: 0; padding: clamp(20px, 3vw, 30px) clamp(14px, 2vw, 20px); }
.agent-card h3 { overflow-wrap: anywhere; }

/* ── 3. HOME — territories + two doors ────────────────────────── */
.av-terra-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
  gap: 18px;
}
.av-terra { min-height: 210px; min-width: 0; }
.av-terra h3 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); overflow-wrap: anywhere; }

.av-doors {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: 22px;
}
.av-door { min-width: 0; }

/* ── 4. LISTINGS — property grid (unify the two competing sheets) */
.sr-properties-grid,
.sr-listings-page .sr-properties-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)) !important;
  gap: clamp(16px, 2.4vw, 24px) !important;
  align-items: stretch;
}
/* List-view toggle still forces single column rows (tablet+). */
.sr-listings-page .sr-properties-grid.sr-list-view { grid-template-columns: 1fr !important; }
.sr-prop-card, .sr-prop-card-list { min-width: 0; }
.sr-prop-location, .sr-agent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sr-prop-footer { flex-wrap: wrap; }

/* ── 5. AGENTS page grid (already auto-fill — just harden) ────── */
.sr-agents-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}
.sr-agent-card { min-width: 0; }

/* ── 6. HERO — stop overflow, stack cleanly ───────────────────── */
.sr-home-shell, .sr-home-hero, .av-rail-wrap, .band-ink { overflow: clip; }
.sr-home-hero { min-height: auto !important; }
.sr-home-title { text-wrap: balance; max-width: 100%; }
/* `nowrap` on the gold underline burst mobile layouts — allow wrap ≤560px. */
.sr-home-title .deed-underline { white-space: nowrap; }
@media (max-width: 560px) {
  .sr-home-title .deed-underline { white-space: normal; }
}
.sr-home-search-card { min-width: 0; max-width: 100%; }
.sr-home-cta-row { flex-wrap: wrap; }
.sr-home-cta-row > a { flex: 1 1 auto; min-width: min(100%, 220px); text-align: center; }
.sr-seal-stamp { right: 8px; }
@media (max-width: 991px) { .sr-seal-stamp { display: none !important; } }

/* ── 7. LIVE RAIL — fixed 340px cards overflow 360px phones ───── */
.av-rail { overflow: hidden; }
.av-rail-card { width: clamp(250px, 82vw, 340px) !important; flex: 0 0 auto; }
.av-rail-card strong, .av-rail-card span.loc { max-width: 100%; }

/* ── 8. FOLIO heads / misc home furniture ─────────────────────── */
.sr-folio-head { flex-wrap: wrap; }
.sr-home-coords { gap: 14px 22px; }
.sr-home-section { overflow: clip; }
.av-faq summary { font-size: clamp(1.02rem, 0.95rem + 1vw, 1.3rem); gap: 1rem; }
.band-ink { border-radius: clamp(18px, 3vw, 32px); }

/* ── 9. GENERAL pages: heroes, filters, footers ───────────────── */
.sr-page-hero-section, .sr-agents-hero { overflow: clip; }
.sr-page-hero-section h1, .sr-agents-hero h1 { text-wrap: balance; overflow-wrap: anywhere; }
.sr-filter-top-card { max-width: 100%; }
.sr-filter-top-card .row > div { min-width: 0; }
.sr-view-toggle { flex-wrap: wrap; }
.footer-bottom { flex-wrap: wrap; }
.sr-utility-strip .container { flex-wrap: wrap; gap: 0.4rem 1rem; }
.sr-utility-strip { font-size: 0.66rem; }

/* Constrain the sticky listings filter so it never covers content. */
@media (min-width: 768px) {
  .sr-listings-page .sr-filter-top-card { max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* ── 10. ABOUT / CONTACT hardening ────────────────────────────── */
.sr-about-hero-grid, .sr-about-story-layout, .sr-about-founder-banner { min-width: 0; }
.sr-about-hero-actions .btn, .sr-about-hero-actions a { flex: 1 1 auto; min-width: min(100%, 200px); text-align: center; }
.sr-about-title { overflow-wrap: anywhere; }

/* ── 11. Header / nav on small screens ────────────────────────── */
@media (max-width: 991px) {
  .sr-header-main { top: 0 !important; }
  .sr-nav-actions { width: 100%; }
  .sr-nav-actions > a { width: 100%; text-align: center; }
  .sr-home-hero { padding: 128px 0 64px !important; }
}
@media (max-width: 575px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .sr-home-hero { padding: 118px 0 54px !important; }
  .sr-home-section { padding: 56px 0 !important; }
  .sr-page-hero-section { padding: 56px 0 48px !important; }
  .curated-img-wrapper { height: 200px; }
  .av-terra { min-height: 180px; padding: 22px; }
  .av-door { padding: 26px 22px; }
}

/* ── 12b. Utility strip vs header overlap (small screens) ──────
   ≤991px the header sits at top:0 while the fixed strip also sits at top:0
   with a HIGHER z-index (2001 > 2000) → the strip paints over the nav.
   The strip's wrapped height is unpredictable, so pixel offsets are fragile:
   hide it on small screens instead. The hero ledger tag + coverage ticker
   already carry the "ledger live" message on mobile. */
@media (max-width: 991px) {
  .sr-utility-strip { display: none !important; }
}

/* ── 12. Motion + focus (quality floor) ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .av-ticker-track, .av-rail-track { animation: none !important; }
  .sr-seal-stamp { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
:focus-visible { outline: 3px solid var(--sr-gold, #c9a84c); outline-offset: 3px; border-radius: 6px; }