/* =====================================================================
   mobile-fix.css — MOBILE RESPONSIVENESS PASS
   Loaded LAST so it wins over inline <style>, enhancements, premium
   and refined layers. Desktop rendering is intentionally untouched:
   every rule here is inside a max-width media query, except the
   universal overflow guards in section 0.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. OVERFLOW GUARDS (all viewports, harmless on desktop)
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, canvas { max-width: 100%; }

/* Long unbroken strings (URLs, emails) must not force a scrollbar */
p, li, td, th, h1, h2, h3, h4, dd, dt, blockquote, figcaption {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   1. HEADER — reclaim the hidden top-bar offset
   #top-bar is display:none at <=760px, but nav stayed at top:38px,
   which made the brand name and sub-label collide.
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  nav { top: 0 !important; }
  #top-bar { display: none !important; }
}

@media (max-width: 860px) {
  .nav-brand { min-width: 0; }
  .nav-brand-name {
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  .nav-brand-sub {
    font-size: 12px !important;
    letter-spacing: .12em !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------------------------------------------------------------------
   2. HERO BOOKING CARD
   enhancements.css switches this to position:relative at <=960px but
   left the desktop offsets in place (right:80px; bottom:80px;
   width:320px), dragging the card to left:-64px on a 390px screen.
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-book-card {
    position: static !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 16px 24px !important;
    padding: 20px !important;
    box-sizing: border-box;
  }
  .hero-book-card .hero-card-title { font-size: 12px !important; }
  .hero-book-card .btn { width: 100%; justify-content: center; }
  .hero-perk-note { font-size: 12px !important; }
}

@media (max-width: 860px) {
  .hero-content { max-width: 100%; box-sizing: border-box; }
  .hero-subtitle { max-width: 100% !important; }
}

/* ---------------------------------------------------------------------
   3. COMPARISON TABLE
   A 680px table inside a 350px viewport showed only one column. Keep
   the table semantics, but pin the row label so the horizontal scroll
   stays meaningful, and signal that it scrolls.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .cmp-wrap, .cmp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border: 1px solid var(--line, #e2e0dc);
  }
  .cmp-table { min-width: 580px; }
  .cmp-table th, .cmp-table td { scroll-snap-align: start; }

  /* Sticky row-header column so labels stay visible while scrolling */
  .cmp-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--white, #fff);
    box-shadow: 1px 0 0 var(--line, #e2e0dc);
    min-width: 150px;
  }
  .cmp-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--white, #fff);
  }
  .cmp-table th, .cmp-table td { font-size: 13px !important; }

  /* "Scroll for more" affordance */
  .cmp-wrap::after {
    content: "Swipe to compare all three properties \2192";
    display: block;
    position: sticky;
    left: 0;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #6b655d);
    background: var(--page-alt, #f6f5f3);
    border-top: 1px solid var(--line, #e2e0dc);
  }
}

/* ---------------------------------------------------------------------
   4. FILTER ROWS — single-line scrollers with no clipped labels
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    /* bleed to the screen edges so the last pill reads as scrollable */
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-pill {
    flex: 0 0 auto !important;
    white-space: nowrap;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    padding: 14px 14px !important;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------
   5. SEARCH FIELD — icon was crowding the placeholder
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .search-box { width: 100%; max-width: 100% !important; min-width: 0 !important; }
  .search-input {
    padding-left: 48px !important;
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    min-height: 48px;
  }
  .search-icon { left: 16px !important; }
}

/* Never let a form control trigger iOS auto-zoom or overflow its parent */
@media (max-width: 860px) {
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------
   6. FIXED OVERLAYS — keep floating controls clear of sticky booking
   bar from stacking on top of each other and of page content.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  #sticky-book {
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap;
  }
  #sticky-book .sb-actions { flex: 1; justify-content: center; gap: 8px; }
  #sticky-book .btn { font-size: 12px !important; padding: 12px 14px !important; }

  /* Lift the floating controls clear of the sticky booking bar */
  #contact-pill { bottom: 84px !important; right: 12px !important; }
  #scroll-guide { bottom: 84px !important; right: 12px !important; }

  /* Blog pages carry an always-visible bottom bar (.mbar) */
  .mbar { padding: 8px 12px !important; gap: 8px !important; }
  .mbar .btn, .mbar a { flex: 1; justify-content: center; min-height: 44px; }
}

/* Reserve space so the persistent blog bar never covers the last content */
@media (max-width: 860px) {
  body:has(.mbar) { padding-bottom: 80px; }
}

/* ---------------------------------------------------------------------
   7. LEGIBILITY FLOOR — nothing below 12px on a phone
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .section-eyebrow,
  .hero-property-label,
  .why-accent-label,
  .prop-label,
  .prop-qf-label,
  .prop-amen,
  .carousel-counter,
  .trust-text-label,
  .ph-text,
  .eyebrow,
  .tag,
  .chip,
  .foot-bottom-new,
  .cmp-price,
  .cmp-yes,
  .cmp-no {
    font-size: 12px !important;
    letter-spacing: .1em !important;
  }
  .btn, .btn-sm { font-size: 12.5px !important; letter-spacing: .1em !important; }
  .blog-card-new h4, .b-card h4 { font-size: 13px !important; }
}

/* ---------------------------------------------------------------------
   8. TOUCH TARGETS — 44px minimum on interactive elements
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .ham {
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
  }
  .sb-close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cp-opt { min-height: 44px; }
  .btn, .btn-sm, button { min-height: 44px; }

  /* Inline text links that act as primary navigation */
  .blog-more-btn,
  .fg-maps-link,
  .foot-fb-link,
  .foot-links-new a,
  .foot-col a,
  .b-logo,
  .nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Give stacked footer / nav links breathing room between targets */
  .foot-col a, .foot-links-new a { padding: 2px 0; }
}

/* Admin + Supabase utility screens: compact controls still need to be tappable */
@media (max-width: 860px) {
  .btn, .pg, .cp-opt { min-height: 44px; }
  table.tbl, .tbl-wrap, .table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------
   9. GRID / SPACING SAFETY at the smallest widths
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .prop-quick { grid-template-columns: 1fr !important; }
  .search-filter-row { gap: 12px !important; }
}

/* ---------------------------------------------------------------------
   10. MOTION PREFERENCES
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   11. SECOND-PASS LEGIBILITY FLOOR
   Small badge/tag/meta styles revealed once the first tier was fixed.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .room-badge-new,
  .blog-cat-tag,
  .spot-tag-inline,
  .blog-more-btn,
  .timeline-badge,
  .timeline-time,
  .fg-cat,
  .fg-score-label,
  .fg-score-num,
  .fg-maps-link,
  .ja-tag,
  .score-label,
  .rate-label,
  .foot-col h5,
  .b-meta,
  .b-tag {
    font-size: 12px !important;
    letter-spacing: .08em !important;
    line-height: 1.4 !important;
  }

  /* Blog card sub-headings and inline meta text */
  h4, h5 { font-size: 13px !important; }
  .b-card p, .b-card span, .blog-card-new span { font-size: 13px !important; }
}

/* ---------------------------------------------------------------------
   12. TOUCH TARGETS — admin / supabase utility screens
   These pages declare their own <style> AFTER this file, so the height
   floor needs !important to survive.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .btn,
  .btn.pri,
  .btn.sm,
  .btn.danger,
  .pg,
  button.on,
  .tabs button,
  .seg button {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Toolbars of small buttons should wrap instead of shrinking */
  .toolbar, .tbl-actions, .row-actions, .seg, .tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Any remaining inline anchor that is a real tap target */
  .fg-maps-link,
  .blog-more-btn,
  .b-more,
  .read-more {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   13. ADMIN / SUPABASE TABLES — contain wide data, never the page
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  table { max-width: 100%; }
  .card, .panel, .box { min-width: 0 !important; }
  .grid, .g2, .g3 { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------
   14. THIRD-PASS LEGIBILITY FLOOR + generic guard
   Remaining micro-labels in reviews, CTA and footer, plus a safety net
   for unclassed inline text that still renders under 12px.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .rev-meta-new,
  .rev-prop-new,
  .cta-eyebrow,
  .foot-contact-eyebrow,
  .foot-col-title,
  .foot-socials a,
  .foot-links-new a,
  .sb-text,
  .hbb-label,
  .season-badge,
  .nav-links a,
  .mob-link {
    font-size: 12px !important;
    letter-spacing: .1em !important;
  }

  /* Safety net: any inline text inside these regions gets the 12px floor */
  #cta span, #cta a, #cta b,
  footer span, footer a, footer b, footer div,
  .rev-card-new span, .rev-card-new b,
  .score span, .score div,
  .trust-item span, .trust-item div {
    font-size: 12px;
  }

  /* Keep genuinely large display numerals large — the floor above must
     not shrink hero/stat figures. */
  .why-accent-num,
  .stat-num,
  .score-num,
  .rating-score,
  .rate-num,
  .foot-fb-link,
  .cta-title,
  .foot-contact-title {
    font-size: revert !important;
  }
}

/* ---------------------------------------------------------------------
   15. REMAINING TAP TARGETS
   Small inline anchors (breadcrumbs, footer legal, "view map" links).
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .foot-bottom-new a,
  .crumb a,
  .breadcrumb a,
  .b-crumb a,
  footer a,
  .sb-text a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Separate stacked legal links so targets do not touch */
  .foot-bottom-new { gap: 4px !important; }
}

/* ---------------------------------------------------------------------
   16. HERO — reserve space for the fixed nav
   #hero is a flex column with justify-content:flex-end, so its content
   can ride up underneath the fixed nav. Padding on the flex CONTAINER
   shrinks the content box and guarantees the eyebrow label clears the
   header instead of colliding with the brand lockup.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  #hero {
    padding-top: 92px !important;
    box-sizing: border-box !important;
  }
  .hero-property-label {
    display: block;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }
  .hero-title { line-height: 1.08 !important; }
}

@media (max-width: 480px) {
  #hero { padding-top: 84px !important; }
  .hero-title { font-size: clamp(2rem, 9.5vw, 2.8rem) !important; }
}