/* ============================================================
   AGS Property & Investment — Responsive Design
   Mobile-first breakpoints
   ============================================================ */

/* ── Tablet ≤ 1024px ──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --nav-height: 64px; }

  /* Nav */
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-actions .btn { display: none; }
  .nav-actions .btn.btn-accent { display: inline-flex; }

  /* Hero */
  .hero-title { font-size: clamp(2rem, 5vw, 3.5rem); }
  .search-widget-body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .search-widget-body > *:last-child { grid-column: 1 / -1; }

  /* Sections */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .investments-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .how-steps::before { display: none; }
  .how-steps-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .how-steps-3::before { display: block; left: calc(16.666% + 28px); right: calc(16.666% + 28px); }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .agents-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  /* Properties */
  .properties-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .filter-sidebar.mobile-open { display: block; position: fixed; bottom: 0; left: 0; right: 0; top: auto; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; z-index: var(--z-modal); max-height: 80vh; overflow-y: auto; }
  .properties-grid { grid-template-columns: repeat(2, 1fr); }

  /* Dashboard */
  .sidebar-mobile-header { display: flex; }
  .dashboard-layout { grid-template-columns: 100% !important; width: 100% !important; }
  #sidebar-overlay,
  #nav-overlay {
    z-index: 1050 !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .nav-mobile-drawer {
    z-index: 1100 !important;
  }
  .dashboard-sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 1100 !important;
    width: min(320px, 85vw) !important;
    max-width: 340px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--color-white) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .dashboard-sidebar.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .dashboard-main { width: 100% !important; min-width: 0 !important; }
  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-4); }
  .dashboard-two-col,
  .dashboard-two-col-wide { grid-template-columns: 1fr !important; gap: var(--space-5); }
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3); }
  .portfolio-summary { grid-template-columns: 1fr; gap: var(--space-4); }
  .messages-layout { grid-template-columns: 1fr; }
  .conversations-list { display: none; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Mobile ≤ 768px ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Typography */
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  .section-title { font-size: var(--text-3xl); }
  .page-hero-title { font-size: var(--text-3xl); }

  /* Container */
  .container { padding-inline: var(--space-4); }

  /* Hero */
  .hero { min-height: 90vh; }
  .hero-content { padding-block: var(--space-24) var(--space-16); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; justify-content: center; }
  .hero-trust-badges { flex-direction: column; gap: var(--space-3); }

  /* Search widget */
  .search-widget-body {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .search-widget-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .search-tab { font-size: var(--text-xs); padding: var(--space-3) var(--space-3); }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .stat-number { font-size: var(--text-3xl); }

  /* Categories */
  .categories-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .category-card-name { font-size: var(--text-base); }

  /* Why AGS */
  .why-grid { grid-template-columns: 1fr; }

  /* How it works */
  .how-steps, .how-steps-3 { grid-template-columns: 1fr; gap: var(--space-6); }
  .how-steps-3::before { display: none; }

  /* Locations */
  .locations-grid { grid-template-columns: 1fr 1fr; }
  .location-card:first-child { grid-row: span 1; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Agents */
  .agents-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-description { max-width: 100%; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-legal-links { flex-wrap: wrap; justify-content: center; }

  /* CTA */
  .cta-title { font-size: var(--text-3xl); }
  .cta-subtitle { font-size: var(--text-base); }
  .cta-btn-group { flex-direction: column; align-items: center; }

  /* Properties & Investments */
  .properties-grid { grid-template-columns: 1fr; }
  .investments-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .investment-card-body { padding: 16px; }
  .investment-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .investment-stat-value { font-size: 13.5px; }
  .properties-results-header { flex-direction: column; align-items: flex-start; }

  @media (max-width: 640px) {
    .investments-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  }

  /* Property detail */
  .property-detail-grid { grid-template-columns: 1fr !important; }
  .property-gallery-grid { grid-template-columns: 1fr 1fr !important; }

  /* Header clean mobile spacing without overflow */
  .site-nav { overflow-x: clip; }
  .nav-inner { padding-inline: var(--space-3) !important; gap: var(--space-2) !important; }
  .nav-logo-tagline { display: none !important; }
  .user-menu-name, .user-menu-trigger svg { display: none !important; }
  .user-menu-trigger { padding: 0 !important; }
  .nav-actions { gap: var(--space-2) !important; }
  .nav-icon-btn { width: 38px !important; height: 38px !important; }

  /* Dashboard mobile bottom dock */
  .dashboard-bottom-nav { display: flex !important; }

  /* Dashboard main with bottom clearance for dock */
  .dashboard-main {
    padding: var(--space-4) var(--space-3) 84px var(--space-3) !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .dashboard-page-header { margin-bottom: var(--space-5); }
  .dashboard-header-flex { flex-direction: row; align-items: center; justify-content: space-between; }
  .dashboard-page-title { font-size: clamp(1.25rem, 4.5vw, var(--text-2xl)) !important; }
  .dashboard-page-subtitle { font-size: var(--text-xs); }
  .header-action-btn { font-size: var(--text-xs); padding: 6px 12px; }

  /* Stats cards */
  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }
  .stat-card { padding: var(--space-3) !important; min-width: 0 !important; border-radius: var(--radius-lg); }
  .stat-card-value { font-size: clamp(1.05rem, 3.6vw, 1.35rem) !important; }
  .stat-card-icon { width: 34px !important; height: 34px !important; font-size: 16px !important; }

  /* Wallet Card */
  .wallet-card { padding: var(--space-5) var(--space-4) !important; border-radius: var(--radius-xl); }
  .wallet-card-balance { font-size: clamp(1.75rem, 6vw, var(--text-3xl)) !important; margin-bottom: var(--space-4); word-break: break-word; overflow-wrap: anywhere; }
  .wallet-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .wallet-action-btn { padding: 8px 4px !important; font-size: 11px !important; justify-content: center; text-align: center; }

  /* Activity list on mobile */
  .activity-item {
    padding: 12px var(--space-4) !important;
    gap: var(--space-3) !important;
    align-items: flex-start !important;
  }
  .activity-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    margin-top: 2px;
  }
  .activity-title {
    font-size: var(--text-xs) !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
  }
  .activity-amount {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .stat-card-value {
    white-space: nowrap !important;
  }

  /* Quick Actions */
  .quick-actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }
  .quick-actions-grid .btn { padding: 10px 12px; font-size: var(--text-xs); }

  /* Listings & Seller Metrics */
  .seller-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
  }
  .seller-metric-card {
    padding: var(--space-3) !important;
    gap: var(--space-3) !important;
    border-radius: var(--radius-lg) !important;
  }
  .seller-metric-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
    border-radius: var(--radius-md) !important;
  }
  .seller-metric-value {
    font-size: clamp(1.15rem, 4.2vw, 1.4rem) !important;
  }
  .seller-metric-label {
    font-size: 11px !important;
  }
  .listings-desktop-table,
  .portfolio-desktop-table,
  .history-desktop-table,
  .wallet-desktop-table,
  .withdrawals-desktop-table,
  .transactions-desktop-table,
  .statements-desktop-table {
    display: none !important;
  }
  .listings-mobile-cards,
  .portfolio-mobile-cards,
  .history-mobile-cards,
  .wallet-mobile-cards,
  .withdrawals-mobile-cards,
  .transactions-mobile-cards,
  .statements-mobile-cards {
    display: flex !important;
  }
  .btn-full-mobile {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Modals */
  .modal-presets-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }

  /* Auth pages */
  .auth-card { padding: var(--space-6) !important; }
  .auth-container { padding-inline: var(--space-4) !important; }

  /* Admin */
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }

  /* Modals as bottom-sheet on mobile */
  .modal {
    max-width: 100%;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    margin-bottom: 0;
    margin-top: auto;
    max-height: 90vh;
    max-height: 90dvh;
    animation: slideUpBottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-body { padding: var(--space-5) var(--space-4); }
  .modal-header { padding: var(--space-4) var(--space-5); }
  .modal-footer { padding: var(--space-4) var(--space-5); }

  /* Buttons */
  .btn-xl { font-size: var(--text-base); padding: 0.875rem 1.75rem; }
}

/* ── Small Mobile ≤ 480px ─────────────────────────────────── */
@media (max-width: 480px) {
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; margin-bottom: var(--space-6) !important; }
  .why-card { padding: 14px 10px !important; }
  .why-icon { width: 42px !important; height: 42px !important; font-size: 20px !important; margin-bottom: 8px !important; }
  .why-title { font-size: 13px !important; margin-bottom: 4px !important; }
  .why-desc { font-size: 11px !important; line-height: 1.35 !important; }
  .dashboard-stats-grid,
  .viewings-stats-grid,
  .offers-stats-grid,
  .docs-stats-grid,
  .portfolio-kpi-grid.six-col,
  .withdrawals-kpi-grid,
  .transactions-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; }
  .stat-card-value { font-size: clamp(0.95rem, 4.2vw, 1.25rem) !important; }
  .wallet-kpi-val,
  .withdrawals-kpi-val,
  .transactions-kpi-val,
  .stmt-amount,
  .stmt-card-amount,
  .docs-stat-value,
  .investment-stat-value,
  .investment-funding-fig-val,
  .investment-pill-count { white-space: nowrap !important; }
  .listings-header,
  .portfolio-header,
  .wallet-page-header,
  .withdrawals-header,
  .transactions-header,
  .statements-header,
  .messages-header,
  .docs-page-header,
  .profile-page-header,
  .settings-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
  }
  .listings-header .btn,
  .portfolio-header-actions .btn,
  .wallet-header-actions .btn,
  .withdrawals-header-actions .btn,
  .transactions-header-actions .btn,
  .messages-header-actions .btn,
  .docs-header-actions .btn,
  .profile-header-actions .btn,
  .settings-header-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .portfolio-header-actions,
  .wallet-header-actions,
  .withdrawals-header-actions,
  .transactions-header-actions,
  .messages-header-actions,
  .docs-header-actions,
  .profile-header-actions,
  .settings-header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
    width: 100% !important;
  }
  .wallet-header-actions .btn:first-child {
    grid-column: 1 / -1;
  }
  .dashboard-main { padding: var(--space-3) var(--space-2) 80px var(--space-2) !important; }
  .quick-actions-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; }
  .quick-actions-grid .btn { padding: 8px 10px; font-size: 11px; }
  .wallet-card-actions { grid-template-columns: 1fr 1fr; }
  .investments-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .investment-card-body { padding: 14px 12px !important; }
  .investment-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px !important; }
  .investment-card-title { font-size: 14.5px !important; min-height: auto !important; }
  .investment-stat-label { font-size: 9.5px !important; }
  .investment-stat-value { font-size: 12.5px !important; }
  .locations-grid { grid-template-columns: 1fr; }
  .location-card:first-child { aspect-ratio: 3/2; }
  .agents-grid { grid-template-columns: 1fr; }

  .filter-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
  .filter-tab { flex-shrink: 0; }

  .form-row { grid-template-columns: 1fr; }
  .portfolio-summary { padding: var(--space-5); }
}

/* ── Large screens ≥ 1440px ───────────────────────────────── */
@media (min-width: 1440px) {
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .properties-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-nav,
  .dashboard-sidebar,
  .site-footer,
  .nav-mobile-drawer,
  .toast-container { display: none !important; }

  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-main { padding: 0; }
}

@keyframes slideUpBottom {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}