/* =============================================================
   neo-responsive.css — Breakpoint overrides only
   NashDomBG · Neo-Glassmorphism v2.2
   3 breakpoints: Desktop default > 1024px | Tablet ≤ 1024px | Mobile ≤ 640px
   DO NOT add new layout rules — only override existing ones
   ============================================================= */

/* ----------------------------------------------------------
   TABLET — max-width: 1024px
   6-column grid, 2×2 KPI row, reduced padding
   ---------------------------------------------------------- */
@media (max-width: 1024px) {

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

  /* Glass cards reduce padding */
  .glass-card {
    padding: var(--space-lg);
  }

  /* Auth card stays centred but gets some breathing room */
  .auth-card {
    max-width: 380px;
  }

  /* Nav tabs: reduce horizontal padding */
  .nav-tabs {
    padding: 0 var(--space-lg);
  }

  /* App header tightens */
  .app-header {
    padding: var(--space-lg) 0 var(--space-md);
  }

  /* KPI row: 2×2 grid instead of flex row */
  .kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

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

  /* Section header: allow tighter stacking */
  .section-header {
    gap: var(--space-sm);
  }

  /* Filters: reduce input max-width */
  .filter-input {
    max-width: 120px;
  }

  /* Map: reduce height slightly */
  #leaflet-map {
    height: 500px;
  }

  /* Card grid: collapse to 6 columns */
  .card-grid {
    grid-template-columns: repeat(6, 1fr);
    padding: var(--space-lg);
    gap: var(--card-gap);
  }

  /* Hero card: full 6-column width, no row span */
  .card-grid .glass-card--hero {
    grid-column: span 6;
    grid-row: span 1;
  }

  /* Secondary cards: 3 columns each */
  .card-grid .glass-card:nth-child(2),
  .card-grid .glass-card:nth-child(3) {
    grid-column: span 3;
  }

}

/* ----------------------------------------------------------
   MOBILE — max-width: 640px
   Single column, minimal padding, scrollable nav
   ---------------------------------------------------------- */
@media (max-width: 640px) {

  /* Body padding */
  body {
    padding: 0;
  }

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

  /* Glass cards: compact padding */
  .glass-card {
    padding: var(--card-padding-sm);
  }

  /* Auth card: full width, reduced padding */
  .auth-card {
    max-width: 100%;
    padding: var(--space-xl) var(--space-lg);
  }

  /* App header */
  .app-header {
    padding: var(--space-md) 0;
  }

  /* Nav tabs: no extra padding, allow horizontal scroll */
  .nav-tabs {
    padding: 0;
    gap: 0;
  }

  .nav-tab {
    padding: var(--space-sm) var(--space-md);
    font-size: 13px;
  }

  /* KPI row: 2×2 with tighter gap */
  .kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  /* KPI value: smaller type */
  .kpi-value {
    font-size: 18px;
    line-height: 1;
  }

  /* City grid: single column */
  .city-grid {
    grid-template-columns: 1fr;
  }

  /* Section header: stack vertically */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  /* Typography: one size down */
  h1 {
    font: var(--text-h2);
    letter-spacing: var(--ls-headline);
  }

  h2 {
    font: var(--text-h3);
    letter-spacing: var(--ls-headline);
  }

  /* Filters: full-width items */
  .filters-bar {
    gap: var(--space-sm);
  }

  .filter-btn {
    flex: 1;
    min-width: auto;
  }

  .filter-select {
    flex: 1;
    min-width: 0;
  }

  .filter-input {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* Table: bleed to edges for full scroll area */
  .listings-table-wrap {
    margin: 0 calc(var(--space-md) * -1);
    border-radius: 0;
  }

  /* Map: reduce height */
  #leaflet-map {
    height: 400px;
  }

  /* Decorative background shapes: hide on mobile (perf + clutter) */
  .scene-bg-shape {
    display: none;
  }

  /* Card grid: single column, reset column spans */
  .card-grid {
    grid-template-columns: 1fr;
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .card-grid .glass-card--hero,
  .card-grid .glass-card--full,
  .card-grid .glass-card:nth-child(2),
  .card-grid .glass-card:nth-child(3) {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Pagination: tighten spacing */
  .pagination {
    gap: var(--space-sm);
    padding: var(--space-md) 0;
  }

}

/* ----------------------------------------------------------
   SMALL MOBILE — max-width: 380px
   Tiny phones: KPI stacks to 1 column, nav tabs tightest
   ---------------------------------------------------------- */
@media (max-width: 380px) {

  /* KPI: single column */
  .kpi-row {
    grid-template-columns: 1fr;
  }

  /* Nav tabs: minimal tap targets */
  .nav-tab {
    padding: var(--space-sm) var(--space-sm);
    font-size: 12px;
  }

  /* Container: tightest padding */
  .container {
    padding: var(--space-sm);
  }

}

/* ----------------------------------------------------------
   LANDSCAPE PHONE — height-based override
   Prevent map from dominating in landscape orientation
   ---------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {

  #leaflet-map {
    height: 300px;
  }

  /* Nav: shrink vertical footprint */
  .nav-tabs {
    margin-bottom: var(--space-md);
  }

  .app-header {
    padding: var(--space-sm) 0;
  }

}

/* ----------------------------------------------------------
   REDUCED MOTION — respect system preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .scene-bg-shape {
    display: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}