/* ==========================================================================
   Responsive — tablet (≤1024px) and mobile (≤768px)
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --container-px: 24px; }
  .listings-grid            { grid-template-columns: repeat(2, 1fr); }
  .blog-grid                { grid-template-columns: repeat(2, 1fr); }
  .location-banners__grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid              { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer-widgets           { grid-template-columns: 1fr 1fr; }
  .footer-newsletter__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .blog-layout              { grid-template-columns: 1fr 260px; gap: var(--sp-8); }
  .single-listing-layout    { grid-template-columns: 1fr 320px; }
  .archive-layout           { grid-template-columns: 250px 1fr; gap: var(--sp-6); }
}

@media (max-width: 768px) {
  :root { --container-px: 20px; }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  /* Header */
  .header-actions .btn--outline,
  .header-actions .btn--primary { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero { min-height: auto; padding-top: var(--header-height); }
  .hero__inner { padding-block: var(--sp-16) var(--sp-10); }
  .hero__title { font-size: clamp(2.2rem, 8vw, 3rem); }
  .hero__search-inner { border-radius: var(--radius-md); }

  /* Section headers */
  .section-header { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .section { padding-block: var(--sp-12); }

  /* Grids */
  .listings-grid          { grid-template-columns: 1fr; }
  .blog-grid              { grid-template-columns: 1fr; }
  .location-banners__grid { grid-template-columns: 1fr; }

  /* Posts list */
  .posts-list .blog-card { flex-direction: column; }
  .posts-list .blog-card__thumb-link { width: 100%; }
  .posts-list .blog-card__thumb { height: 200px; min-height: unset; }

  /* Blog layout */
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; order: -1; }

  /* Archive */
  .archive-layout { grid-template-columns: 1fr; }
  .listings-sidebar {
    position: fixed; inset: 0; top: var(--header-height);
    z-index: 50; border-radius: 0; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  .listings-sidebar.is-open { transform: translateX(0); }
  .filter-toggle { display: flex; }

  /* Parallax CTA */
  .parallax-cta { min-height: 45vh; }
  .parallax-cta__title { font-size: var(--text-3xl); }

  /* Single listing */
  .listing-hero { height: 300px; }
  .single-listing-layout { grid-template-columns: 1fr; }
  .listing-sidebar { position: static; }

  /* Footer */
  .footer-widgets { grid-template-columns: 1fr; gap: var(--sp-6); }
  .newsletter-form__group { flex-direction: column; background: transparent; border: none; gap: var(--sp-3); }
  .newsletter-form__group input {
    padding: var(--sp-4); border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.15); color: var(--color-white);
    font: inherit; font-size: var(--text-sm);
    min-width: 0; width: 100%;
  }
  .newsletter-form__group input::placeholder { color: rgba(255,255,255,.5); }
  .newsletter-form__group .btn { border-radius: var(--radius-md); width: 100%; }

  /* Auth modal */
  .modal { padding: var(--sp-6); border-radius: var(--radius-lg); }

  /* Post nav */
  .post-nav { grid-template-columns: 1fr; }

  /* Profile */
  .profile-header { flex-direction: column; text-align: center; }
  .profile-favorites-grid { grid-template-columns: 1fr; }

  /* 404 */
  .error-404 { padding-block: var(--sp-16); }
  .error-404__code { font-size: 6rem; }

  /* Map page sidebar */
  .map-panel { width: 100%; }
}

@media (max-width: 480px) {
  :root { --container-px: 16px; }
  .hero__search-inner { flex-direction: column; }
  .hero__search-inner input { padding: var(--sp-4); text-align: center; border-bottom: 1px solid var(--color-border); }
  .hero__search-inner .btn { width: 100%; border-radius: 0; }
  .hero__search-icon { display: none; }
  .modal { padding: var(--sp-5); }
  .location-banner { height: 200px; }
}

/* Keyboard focus */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Disable parallax for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg { transform: none !important; }
}