/* ==========================================================================
   Savlee Estate - Property Listing Prototype
   responsive.css  |  Breakpoints for the public website
   --------------------------------------------------------------------------
   Tested widths: 375 / 390 / 430 (mobile), 768 / 1024 (tablet),
                 1366 x 768 and 1440 x 900 (desktop).
   Mobile-first: base rules live in style.css, this file only adds up.
   ========================================================================== */

/* ==========================================================================
   TABLET  >= 600px
   ========================================================================== */
@media (min-width: 600px) {
  :root { --svl-gutter: 22px; }

  .search-box { grid-template-columns: 1fr auto; align-items: center; }
  .search-box .btn { min-height: 50px; padding-inline: 34px; }
  .quick-chips { grid-column: 1 / -1; }

  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-scroll .prop-card { flex-basis: 42%; }

  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pd-facts { grid-template-columns: repeat(3, 1fr); }
  .amenity-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-strip { grid-template-columns: repeat(4, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Modal becomes a centred dialog */
  .modal-backdrop { align-items: center; padding: 24px; }
  .modal { border-radius: var(--svl-radius-lg); max-height: 88vh; }

  .brand-text { display: block; }
}

/* ==========================================================================
   SMALL DESKTOP  >= 880px
   ========================================================================== */
@media (min-width: 880px) {
  :root { --svl-header-h: 74px; }

  .section { padding: 60px 0; }
  .section-tight { padding: 36px 0; }

  .hero { padding: 84px 0 92px; }

  /* Inline navigation replaces the hamburger */
  .nav-toggle,
  .mobile-nav { display: none !important; }
  .main-nav { display: block; min-width: 0; }
  .nav-actions { display: flex; flex-shrink: 0; }

  .cat-rail { gap: 16px; }
  .cat-item { width: 108px; padding: 16px 10px 14px; }

  .h-scroll { gap: 18px; }
  .h-scroll .prop-card { flex-basis: 32%; }

  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .listing-layout { grid-template-columns: 268px minmax(0, 1fr); align-items: start; }
  /* On desktop the filter is a sticky sidebar, not a bottom sheet */
  .filter-panel { position: sticky; top: calc(var(--svl-header-h) + 16px); max-height: calc(100vh - var(--svl-header-h) - 32px); overflow-y: auto; }
  #filterPanel { display: block; }
  .filter-sidebar { display: block; }
  .filter-mobile-trigger { display: none; }
  .filter-sheet,
  .sheet-backdrop { display: none !important; }

  .sticky-bar { display: none; }
  body.has-sticky-bar { padding-bottom: 0; }
  .wa-float { bottom: 20px; right: 20px; }
  .toast-host { bottom: 24px; }

  .gallery { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: start; }
  .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 330px;
    overflow-y: auto;
  }
  .gallery-thumb { width: 100%; flex: 1 1 auto; }
  .gallery-main { aspect-ratio: 4 / 3; }

  .pd-facts { grid-template-columns: repeat(4, 1fr); }
  .amenity-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }

  .cta-band { padding: 48px 40px; }

  .sticky-cta .row-2 { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   COMPACT DESKTOP  880px - 1199px
   --------------------------------------------------------------------------
   The full header (brand + 6 nav links + WhatsApp + Call + favourites) does
   not fit below 1200px. Drop the two text CTAs in that band; the floating
   WhatsApp button and the mobile drawer still cover those actions.
   ========================================================================== */
@media (min-width: 880px) and (max-width: 1199px) {
  .nav-actions .hide-xs { display: none; }
  .main-nav a { padding: 8px 10px; font-size: 0.89rem; }
}

/* ==========================================================================
   DESKTOP  >= 1200px
   ========================================================================== */
@media (min-width: 1200px) {
  :root { --svl-gutter: 28px; }

  .main-nav ul { gap: 6px; }
  .main-nav a { padding: 9px 15px; font-size: 0.97rem; }

  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .h-scroll .prop-card { flex-basis: 25%; }

  .gallery-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pd-facts { grid-template-columns: repeat(4, 1fr); }
  .amenity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   WIDE DESKTOP  >= 1400px  (1440 x 900 target)
   ========================================================================== */
@media (min-width: 1400px) {
  :root { --svl-maxw: 1340px; }

  .results-grid { gap: 22px; }
  .grid { gap: 22px; }
  .cat-item { width: 116px; }
}

/* ==========================================================================
   FOUR-COLUMN GRID for very wide screens
   ========================================================================== */
@media (min-width: 1600px) {
  .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   MOBILE-ONLY OVERRIDES (< 880px)
   ========================================================================== */
@media (max-width: 879px) {
  .section { padding: 38px 0; }

  /* Compact brand + nav actions stay in the header */
  .nav-actions { display: flex; margin-left: auto; }
  .main-nav { display: none; }
  .brand-text { display: block; }
  .nav-actions .btn { min-height: 40px; padding: 6px 14px; font-size: 0.85rem; }
  .nav-actions .hide-xs { display: none; }

  /* Compact result cards: 2-up on wider phones */
  .results-grid { grid-template-columns: 1fr; }
  .prop-card.is-compact .prop-media { flex: 0 0 116px; }

  .panel { padding: 16px; }

  /* Reduce the "View Details" button text on narrow phones */
  .prop-foot .btn { padding-inline: 12px; font-size: 0.88rem; }
}

@media (max-width: 599px) {
  :root { --svl-gutter: 14px; --svl-header-h: 62px; }

  .results-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr 1fr; }

  .h-scroll { gap: 12px; }
  .h-scroll .prop-card { flex-basis: 80%; }

  .pd-facts { grid-template-columns: repeat(2, 1fr); }
  .amenity-grid { grid-template-columns: 1fr 1fr; }

  .hero { padding: 40px 0 52px; }
  .hero-stats { gap: 8px 18px; font-size: 0.82rem; }

  .modal-foot { flex-wrap: wrap; }
  .sheet-foot { flex-direction: column-reverse; }

  .footer-grid { gap: 24px; }
  .cat-item { width: 88px; }
}

/* Very narrow (iPhone SE / small Android) */
@media (max-width: 359px) {
  .check-grid { grid-template-columns: 1fr; }
  .amenity-grid { grid-template-columns: 1fr; }
  .h-scroll .prop-card { flex-basis: 86%; }
  .prop-meta li { font-size: 0.76rem; }
}

/* ==========================================================================
   TOUCH / HOVER HYGIENE
   ========================================================================== */
@media (hover: none) {
  .btn:hover,
  .prop-card:hover,
  .svc-card:hover,
  .cat-item:hover { transform: none; }
  .prop-card:active { transform: scale(0.99); }
}

/* ==========================================================================
   MOTION / CONTRAST PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --svl-text: #0a1522;
    --svl-text-soft: #26374b;
    --svl-muted: #4b5b6e;
    --svl-border: #a9b6c6;
    --svl-border-strong: #7d8ea3;
  }
  .prop-card, .panel, .filter-panel, .chip { border-width: 1px; }
  .btn { border-color: transparent; }
}