/* ============================================================
   RhinoCove — Responsive Layer (mobile-first)
   File: assets/css/mobile.css
   Loaded after rhinocove.css to override inline-styled grids
   on the legacy page templates.

   Breakpoints:
     Small mobile  : <= 480px
     Large mobile  : 481px - 767px
     Tablet        : 768px - 1024px
     Desktop       : 1025px+
   ============================================================ */

/* ── 0. SAFETY NETS ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent any rogue element from creating horizontal scroll */
section, header, footer, main, article, aside, div { max-width: 100%; }

/* iOS input zoom prevention (16px minimum) */
input, select, textarea, button {
  font-size: 16px;
  font-family: inherit;
}

/* ── 1. TOP BAR ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { display: none; }
}

/* ── 2. HEADER & MOBILE NAVIGATION ──────────────────────────── */

/* Hamburger button — hidden on desktop */
.rc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.18s, border-color 0.18s;
}
.rc-hamburger:hover { border-color: var(--ink); }
.rc-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.rc-hamburger.open span:nth-child(1) { transform: translate(0, 7px) rotate(45deg); }
.rc-hamburger.open span:nth-child(2) { opacity: 0; }
.rc-hamburger.open span:nth-child(3) { transform: translate(0, -7px) rotate(-45deg); }

/* Tablet & Mobile header */
@media (max-width: 1024px) {

  header.site .inner {
    padding: 14px 20px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    position: relative;
  }

  header.site .logo { max-width: 175px; }
  header.site .logo .brand-img {
    width: auto !important;
    height: auto !important;
    max-height: 36px !important;
    max-width: 170px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Show hamburger */
  .rc-hamburger { display: flex; }

  /* Hide desktop CTAs */
  .header-cta { display: none !important; }
  .mobile-nav-cta { display: none !important; }

  /* Mobile nav drawer */
  nav.primary {
    display: none;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100%;
    margin: 0 !important;
    padding: 8px 0 12px !important;
    border-top: 1px solid var(--line);
    order: 10;
  }
  nav.primary.open { display: flex; }

  nav.primary a {
    padding: 14px 8px !important;
    font-size: 15.5px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line);
    width: 100%;
    min-height: 48px;
    display: flex !important;
    align-items: center;
  }
  nav.primary a:last-child { border-bottom: none; }
  nav.primary a:hover { background: var(--bg-soft); }

  /* Mobile-only CTA strip */
  .mobile-nav-cta {
    display: none;
    gap: 10px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--line);
    order: 11;
    width: 100%;
  }
  nav.primary.open ~ .mobile-nav-cta { display: flex !important; }
  .mobile-nav-cta a {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  header.site .logo { max-width: 150px; }
  header.site .logo .brand-img { max-height: 32px !important; max-width: 145px !important; }
  .mobile-nav-cta { flex-direction: column; }
}

/* ── 3. CONTAINER PADDING ───────────────────────────────────── */
@media (max-width: 1024px) {
  .wrap, .wrap-wide { padding: 0 24px !important; }
  section.block { padding: 80px 0 !important; }
  section.block.tight { padding: 56px 0 !important; }
}
@media (max-width: 767px) {
  .wrap, .wrap-wide { padding: 0 18px !important; }
  section.block { padding: 56px 0 !important; }
  section.block.tight { padding: 36px 0 !important; }
}
@media (max-width: 480px) {
  .wrap, .wrap-wide { padding: 0 16px !important; }
  section.block { padding: 44px 0 !important; }
}

/* ── 4. TYPOGRAPHY SCALING ──────────────────────────────────── */
@media (max-width: 767px) {
  h1.display, .display {
    font-size: clamp(40px, 11vw, 60px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.02em;
  }
  h2.title, .title {
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.05 !important;
  }
  h3.heading, .heading {
    font-size: 18px !important;
  }
  .lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  .eyebrow { font-size: 11px; letter-spacing: 0.1em; }

  .page-intro { padding: 72px 0 44px !important; }
  .page-intro .lead { font-size: 17px !important; margin-top: 18px !important; }
}
@media (max-width: 480px) {
  h1.display, .display { font-size: clamp(36px, 12vw, 52px) !important; }
  h2.title, .title { font-size: clamp(28px, 9vw, 40px) !important; }
}

/* ── 5. UNIVERSAL GRID STACKING ─────────────────────────────── */

/* Tablet — collapse heaviest grids */
@media (max-width: 1024px) {
  /* Hero asymmetric grid → stack */
  div[style*="grid-template-columns: 1.15fr"][style*=".85fr"],
  div[style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* 4-col cards → 2-col on tablet */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 5/7 column logo strips → 3 col */
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Map sidebar layout */
  div[style*="grid-template-columns: 1fr 380px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile — collapse everything else */
@media (max-width: 767px) {
  /* Two-column variants → stack */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns: .9fr 1.1fr"],
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 2fr"],
  div[style*="grid-template-columns: 260px 1fr"],
  div[style*="grid-template-columns: 320px 1fr"],
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns: 1fr 260px"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Three-column → single */
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Featured listing that spans 2 rows on desktop */
  article.listing[style*="grid-row: span 2"] { grid-row: span 1 !important; }

  /* Logo strips */
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Small mobile — keep 4-up stat grids at 2-col, drop everything else */
@media (max-width: 480px) {
  /* 2-col stat blocks remain at 2-col for compactness */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="border"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Path/feature 4-up cards → single col on small */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 16px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. SECTION HEAD UTILITY ────────────────────────────────── */
@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 36px !important;
  }
}

/* ── 7. ROW UTILITY (used everywhere) ───────────────────────── */
@media (max-width: 600px) {
  .row { flex-wrap: wrap; }
  .row.between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .row.gap-12,
  .row.gap-16 {
    gap: 10px !important;
  }
}

/* ── 8. BUTTONS ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Hero / CTA stacks become full-width */
  section .row.gap-12 > a.btn-lg,
  section .row.gap-12 > button.btn-lg {
    flex: 1 1 100%;
    justify-content: center;
  }
  .btn-lg {
    padding: 14px 22px !important;
    font-size: 15px !important;
  }
  .btn { white-space: normal; text-align: center; }
}

/* ── 9. CARDS ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .card[style*="padding: 36px"],
  .card[style*="padding: 40px"] {
    padding: 24px !important;
  }
  .card[style*="padding: 28px"] {
    padding: 20px !important;
  }
  .card[style*="border-radius: 24px"],
  .card[style*="border-radius: 28px"] {
    border-radius: 16px !important;
  }
}

/* ── 10. HERO — HOMEPAGE SPECIFIC ───────────────────────────── */
@media (max-width: 1024px) {
  /* Hide the floating hero deal card on tablet/mobile (tucked behind hero) */
  section[style*="padding: 80px 0 100px"] .wrap-wide > div > div:last-child[style*="position: relative"] {
    display: none !important;
  }
}
@media (max-width: 767px) {
  section[style*="padding: 80px 0 100px"] {
    padding: 48px 0 60px !important;
  }
  /* Hide floating ticker chip */
  div[style*="position:absolute"][style*="bottom: -32px"] {
    display: none !important;
  }
}

/* ── 11. HERO STATS ROW ─────────────────────────────────────── */
@media (max-width: 767px) {
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="border-top"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    margin-top: 36px !important;
    padding-top: 24px !important;
  }
  .stat .n { font-size: clamp(36px, 9vw, 56px) !important; }
}

/* ── 12. CAPITAL PARTNERS LOGO STRIP ────────────────────────── */
@media (max-width: 767px) {
  div[style*="display:flex"][style*="gap: 56px"][style*="flex-wrap:wrap"] {
    gap: 22px !important;
    justify-content: center !important;
    font-size: 18px !important;
  }
}

/* ── 13. MARKETPLACE FILTERS BAR ────────────────────────────── */
@media (max-width: 1024px) {
  .filters {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .filters > div:first-child { grid-column: span 2; }
  .filters > button { grid-column: span 2; }
}
@media (max-width: 540px) {
  .filters {
    grid-template-columns: 1fr !important;
  }
  .filters > div:first-child,
  .filters > button { grid-column: span 1; }
}

/* ── 14. MARKETPLACE MAP SIDEBAR ────────────────────────────── */
@media (max-width: 1024px) {
  /* Hide map sidebar on tablet & mobile (use full width for grid) */
  div[style*="grid-template-columns: 1fr 380px"] > aside {
    display: none !important;
  }
  div[style*="grid-template-columns: 1fr 380px"] > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  div[style*="grid-template-columns: 1fr 380px"] > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 15. MARKETPLACE — DARK CTA ("Sell quietly") ────────────── */
@media (max-width: 767px) {
  div[style*="background: var(--ink)"][style*="border-radius: 28px"] {
    padding: 44px 24px !important;
    border-radius: 16px !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  div[style*="background: var(--ink)"][style*="border-radius: 28px"]
    > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── 16. LENDING PAGE PRODUCT GRID ──────────────────────────── */
@media (max-width: 900px) {
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 2px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Lending sidebar */
@media (max-width: 900px) {
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns: 1fr 260px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  div[style*="grid-template-columns: 1fr 320px"] > aside,
  div[style*="grid-template-columns: 1fr 260px"] > aside {
    position: static !important;
  }
}

/* ── 17. CALCULATOR LAYOUT ──────────────────────────────────── */
@media (max-width: 900px) {
  div[style*="grid-template-columns: 1.1fr 1fr"][style*="gap: 56px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 540px) {
  svg#amort-chart { height: 140px !important; }
  /* Calculator output card */
  .card[style*="padding: 36px"][style*="background: var(--ink)"] {
    padding: 28px 22px !important;
  }
  /* Term chips wrap nicely */
  .filter-chip.term { padding: 7px 12px !important; font-size: 13px !important; }
}

/* ── 18. WHOLESALE PAGE ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Stat row */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="border"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Wholesale deal table — make horizontally scrollable */
  div[style*="grid-template-columns: 36px 1fr auto auto auto"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }
}

/* ── 19. MEMBERSHIP PRICING CARDS ───────────────────────────── */
@media (max-width: 900px) {
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 16px"] {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Don't scale the featured tier on mobile */
  div[style*="transform: scale(1.02)"] {
    transform: none !important;
  }
}

/* ── 20. LOGIN / SIGNUP SPLIT ───────────────────────────────── */
@media (max-width: 767px) {
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-radius: 24px"],
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-radius: 28px"] {
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
  }
}

/* ── 21. MEMBER PORTAL (APP) ────────────────────────────────── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns: 260px 1fr"],
  div[style*="grid-template-columns: 320px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Sidebar inside portal */
  div[style*="grid-template-columns: 260px 1fr"] > div:first-child,
  div[style*="grid-template-columns: 320px 1fr"] > div:first-child {
    width: 100% !important;
    min-height: unset !important;
    position: static !important;
  }
}
@media (max-width: 767px) {
  /* Portal stat cards 4-up → 2-up */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 16px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 16px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 22. FORMS (sell-property, buy-box, contact, lending apply) ─ */
@media (max-width: 767px) {
  /* Two-col form fields → single */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"],
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Chip groups */
  div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap: 8px"] {
    gap: 6px !important;
  }
  .filter-chip {
    padding: 8px 13px !important;
    font-size: 13px !important;
  }
  .input, .select {
    padding: 12px 14px !important;
  }
}

/* ── 23. ABOUT PAGE ─────────────────────────────────────────── */
@media (max-width: 767px) {
  div[style*="grid-template-columns: 1fr 1.2fr"][style*="gap: 64px"],
  div[style*="grid-template-columns: 1.2fr 1fr"][style*="gap: 64px"] {
    gap: 32px !important;
  }
}

/* ── 24. DARK PROMO BLOCKS ──────────────────────────────────── */
@media (max-width: 767px) {
  div[style*="background: var(--ink)"][style*="padding: 80px"] {
    padding: 44px 24px !important;
    border-radius: 16px !important;
  }
}

/* ── 25. PROPERTY LISTING CARDS ─────────────────────────────── */
@media (max-width: 540px) {
  .listing .price { font-size: 26px !important; }
  .listing .body { padding: 18px !important; }
  .listing .meta {
    flex-wrap: wrap;
    gap: 8px !important;
    font-size: 12.5px !important;
  }
  .listing .photo { aspect-ratio: 16/10 !important; }
}

/* ── 26. FOOTER ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  footer.site {
    margin-top: 80px;
    padding: 64px 0 32px;
  }
  footer.site .grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
    padding-bottom: 44px !important;
  }
  footer.site .grid > div:first-child {
    grid-column: span 3;
  }
}
@media (max-width: 767px) {
  footer.site { margin-top: 64px; padding: 48px 0 28px; }
  footer.site .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer.site .grid > div:first-child {
    grid-column: span 2;
  }
  footer.site .legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
  }
  footer.site .legal .row { flex-wrap: wrap; gap: 12px; }
  footer.site h5 { margin-bottom: 14px; }
  footer.site ul { gap: 10px; }
}
@media (max-width: 480px) {
  footer.site .grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer.site .grid > div:first-child { grid-column: span 1; }
}

/* ── 27. TOUCH TARGETS ──────────────────────────────────────── */
@media (max-width: 767px) {
  a:not(.eyebrow):not(.tag),
  button {
    min-height: 44px;
  }
  .btn-sm { min-height: 40px; }
}

/* ── 28. UTILITY: HIDE ON MOBILE / DESKTOP ──────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ── 29. ANY GRID with PIXEL-WIDTH SIDEBAR ─────────────────── */
/* Catches grid-template-columns: <something> 320px / 380px / 260px patterns */
@media (max-width: 900px) {
  [style*="grid-template-columns"][style*="380px"],
  [style*="grid-template-columns"][style*="320px"],
  [style*="grid-template-columns"][style*="260px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 30. DARK CTA BLOCKS — INNER 2-COL OVERRIDE ────────────── */
@media (max-width: 767px) {
  /* Inside dark cta promo blocks, inner 2-col stat grid */
  div[style*="background: var(--ink)"] div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── 31. BLOG / INDEX CARDS ─────────────────────────────────── */
@media (max-width: 900px) {
  div[style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  div[style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 32. HORIZONTAL OVERFLOW PROTECTION ─────────────────────── */
@media (max-width: 767px) {
  /* Any nested wide content gets a horizontal scroll fallback */
  table, pre {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   v1.4 ADDITIONS — cash-offer + submit-deal page-specific overrides
   These pages have unique inline grids that need explicit targeting.
   ════════════════════════════════════════════════════════════════ */

/* ── /cash-offer hero grid (1.1fr .9fr) ─────────────────────── */
@media (max-width: 1024px) {
  div[style*="grid-template-columns: 1.1fr .9fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ── /cash-offer trust strip ────────────────────────────────── */
@media (max-width: 767px) {
  /* Trust strip wraps to 2-up grid instead of single line */
  section[style*="background: var(--bg-elev)"] .row[style*="space-between"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* ── /cash-offer + /submit-deal — comparison table responsive ── */
@media (max-width: 767px) {
  /* The 3-column comparison table on cash-offer */
  div[style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Re-style cells when stacked */
  div[style*="grid-template-columns: 1.4fr 1fr 1fr"] > div {
    border-left: none !important;
  }
}

/* ── /cash-offer FAQ details summary ────────────────────────── */
@media (max-width: 480px) {
  details summary {
    padding: 18px 22px !important;
    font-size: 15px !important;
  }
  details > div {
    padding: 0 22px 20px !important;
    font-size: 14.5px !important;
  }
}

/* ── /cash-offer final blue gradient CTA block ──────────────── */
@media (max-width: 767px) {
  div[style*="linear-gradient(135deg, var(--brand)"] {
    padding: 48px 28px !important;
    border-radius: 16px !important;
  }
}

/* ── /submit-deal form — 3-column number row ────────────────── */
@media (max-width: 540px) {
  /* Asking / ARV / Rehab inputs */
  form div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ── Hero deal card on /cash-offer right column ─────────────── */
@media (max-width: 1024px) {
  /* The form card sits beside hero on desktop, below on mobile */
  /* Already handled by the 1.1fr .9fr → 1fr conversion above */
}

/* ── Strengthen earlier patterns that were too specific ─────── */
@media (max-width: 767px) {
  /* Catch-all for any lingering 2-column inline grids */
  [style*="grid-template-columns: 1.1fr .9fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 0.9fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Generic select / input full width */
  .input, .select { width: 100% !important; }

  /* Form column wrapping */
  form > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Better spacing on stacked sections ─────────────────────── */
@media (max-width: 767px) {
  section.block,
  section[style*="padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* But preserve internal wrap-wide padding */
  section .wrap-wide,
  section .wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ── Tablet: wider gutters ──────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  section .wrap-wide,
  section .wrap {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}


/* ── DISTRESSED DEALS PAGE MOBILE/IMAGE FIX ───────────────────
   Stacks the deal grid/sidebar on small screens and keeps listing
   photos visible with proper aspect ratio instead of overflowing. */
.distressed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.distressed-listings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.distressed-layout > *,
.distressed-listings > * {
  min-width: 0;
}
.distressed-listings .listing .photo {
  min-height: 180px;
  overflow: hidden;
}
.distressed-listings .listing .photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 1024px) {
  .distressed-layout {
    grid-template-columns: 1fr !important;
  }
  .distressed-listings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .distressed-listings {
    grid-template-columns: 1fr !important;
  }
  .distressed-listings .listing .photo {
    aspect-ratio: 16 / 10 !important;
    min-height: 210px;
  }
}