/* =========================================================
   RESPONSIVE.CSS — all @media (loaded LAST so it wins)
   Breakpoints: 1040px, 720px, 640px, 400px
   ========================================================= */

/* ---------- ≤ 1040px: tablet / mobile layout ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .mobile-menu-btn { display: flex; }

  .layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .filter-toggle { display: flex; }

  /* Filters become off-canvas drawer */
  .filters {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(340px, 86vw);
    max-height: none;
    z-index: var(--z-drawer-panel);
    border-radius: 0;
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.3,.9,.4,1);
    box-shadow: 0 0 60px rgba(0,0,0,.24);
    padding: 22px;
  }
  .filters.open { transform: none; }

  /* Overlay shown on mobile only */
  .drawer-overlay { display: block; }

  .modal-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- ≤ 720px: footer stacks ---------- */
@media (max-width: 720px) {
  .footer-main { flex-direction: column; }
  .footer-brand {
    margin-left: 0;
    max-width: 100%;
    flex-basis: auto;
  }
  .footer-info { padding: 22px 18px; gap: 22px; }
}

/* ---------- ≤ 640px: phones ---------- */
@media (max-width: 640px) {
  .header-inner {
    padding: 0 16px;
    height: 62px;
    gap: 10px;
  }
  .saved-btn span.lbl { display: none; }
  .btn-primary.list-home { display: none; }

  .hero { padding: 44px 16px 52px; }
  .hero-stats { gap: 20px; }

  .searchbar {
    flex-direction: column;
    padding: 10px;
    border-radius: 16px;
  }
  .searchbar .field { width: 100%; padding: 4px 8px; }
  .searchbar input { padding: 11px 0; }
  .searchbar button { width: 100%; padding: 13px; }

  .layout { padding: 24px 16px 56px; }
  /* FIX: scope to listings grid + raise specificity so desktop rule cannot win on phones */
  #grid.grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  .modal-body { padding: 20px 18px 24px; }
  .modal-price { font-size: 26px; }
  .gallery-thumbs button { width: 50px; height: 38px; }

  .toolbar { gap: 10px; }
  .sort-wrap label { display: none; }

  footer { padding: 36px 16px 28px; }
  .footer-grid { gap: 24px 28px; }
}

/* ---------- ≤ 400px: tiny phones ---------- */
@media (max-width: 400px) {
  .mobile-menu { width: 92vw; }
}
/* ============================================================
   MODAL GALLERY — hard override at mobile widths
   Loaded AFTER modal.css, wins the cascade
   ============================================================ */
@media (max-width: 900px) {
  .gallery,
  .gallery-grid {
    overflow: hidden !important;
    max-height: 60vh;
  }
  .gallery-grid {
    aspect-ratio: 4 / 3 !important;
  }
  .gallery-row.top {
    aspect-ratio: 4 / 3;
  }
  .gallery-cell {
    overflow: hidden !important;
  }
  .modal-body {
    position: relative;
    z-index: 2;
    background: #fff;
  }
  .modal-top,
  .modal-price {
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 640px) {
  .gallery-grid {
    aspect-ratio: auto !important;
    min-height: 280px;
    max-height: 340px;
  }
  .gallery-row.top {
    flex: 1 1 55%;
    min-height: 180px;
  }
  .gallery-row.bottom {
    flex: 1 1 45%;
    min-height: 120px;
  }
  .gallery-cell img {
    min-height: 100%;
  }
}
/* ============================================================
   MOBILE HEADER FIX — prevent horizontal overflow
   Hide Sign Up button, hide Saved label, ensure everything fits
   ============================================================ */
@media (max-width: 900px) {
  /* Prevent horizontal scroll at the page level */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Header container: no overflow, tight spacing */
  .site-header,
  .header-inner {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  /* Hide Sign Up button on mobile — Login + drawer handle registration */
  .header-right .btn-outline-signup,
  .header-right a[href*="register.php"] {
    display: none !important;
  }

  /* Hide "Saved" text label — keep icon only */
  .saved-btn span.lbl {
    display: none !important;
  }

  /* Hide "List your home" primary CTA on mobile */
  .btn-primary.list-home,
  .header-right .btn-primary {
    display: none !important;
  }

  /* Login link: compact */
  .header-login-link {
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  /* Saved icon: smaller on mobile */
  .saved-btn {
    padding: 6px 10px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  /* Hamburger: fixed size, right-most */
  .mobile-menu-btn {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    margin-left: 4px !important;
  }
}

@media (max-width: 640px) {
  /* Even tighter on small phones */
  .site-header,
  .header-inner {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  .header-login-link {
    padding: 7px 8px !important;
    font-size: 12px !important;
  }

  /* Logo: smaller to save space */
  .logo {
    font-size: 15px !important;
    gap: 6px !important;
  }

  .logo-mark {
    width: 26px !important;
    height: 26px !important;
  }
}

@media (max-width: 380px) {
  /* Ultra-small phones — very compact */
  .header-login-link {
    font-size: 11.5px !important;
    padding: 6px 6px !important;
  }

  .logo {
    font-size: 14px !important;
  }

  .saved-btn {
    min-width: 34px !important;
    height: 34px !important;
    padding: 4px 8px !important;
  }

  .mobile-menu-btn {
    width: 34px !important;
    height: 34px !important;
  }
}
/* ============================================================
   GLOBAL MOBILE OVERFLOW PREVENTION
   Ensure no section can push page wider than viewport
   ============================================================ */
@media (max-width: 900px) {
  body,
  main,
  .layout,
  .up-content,
  .hero,
  .hero-inner,
  .filters,
  .results,
  .toolbar,
  .grid,
  #grid.grid,
  .footer-main,
  .footer-info,
  .footer-bottom,
  .footer-grid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Images never overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Cards respect container width */
  .card,
  .agent-card,
  .agent-card-item {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Modals fit screen */
  .modal,
  .overlay .modal {
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
  }

  /* Toolbar wraps on mobile */
  .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .toolbar-right {
    flex: 1 1 100% !important;
  }
}

/* ============================================================
   HIDE HORIZONTAL SCROLLBAR (mobile only)
   ============================================================ */
@media (max-width: 900px) {
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}