/* ============================================================
   AAARealEstate.ng — Responsive
   Mobile-first overrides. Load last so it wins the cascade.
   Priority per build plan: filters, post-property form, and
   property card grid get the closest mobile attention.
   ============================================================ */

/* ------------------------------------------------------------
   Large desktop → laptop
   ------------------------------------------------------------ */
@media (max-width: 1280px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo-collage { height: 320px; }

  .layout-2col { grid-template-columns: 1fr; }
  .sticky-side { position: static; }

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

  .dashboard-shell { grid-template-columns: 200px 1fr; }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-4); }

  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  .site-nav__links { display: none; }
  .site-nav__toggle { display: block; }

  .hero { padding: var(--space-5) 0; }
  .hero__photo-collage { display: none; } /* search takes full width on mobile */

  .rail > * { width: 240px; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }

  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    display: flex;
    overflow-x: auto;
    gap: var(--space-2);
  }
  .dashboard-sidebar a { white-space: nowrap; margin-bottom: 0; }
  .dashboard-main { padding: var(--space-4); }

  /* Post-property multi-step form: single column, larger tap targets */
  .form-row-2col { grid-template-columns: 1fr !important; }
  .btn { width: 100%; justify-content: center; }
  .property-card__footer .btn { width: auto; }
}

/* ------------------------------------------------------------
   Small mobile
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .property-card__body { padding: var(--space-3); }
  .modal { padding: var(--space-4); }
}