/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 480px; margin: 0 auto; order: -1; }
  .hero-floating { right: 4%; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  :root { --fs-3xl: 3rem; --fs-4xl: 3.8rem; --fs-2xl: 2.2rem; }
}

/* ---- Mobile nav / small tablet (≤880px) ---- */
@media (max-width: 880px) {
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: min(78vw, 340px);
    height: 100vh;
    background: var(--color-husk-light);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    transition: right var(--dur-med) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 1.1rem; }
  .hamburger { display: flex; }
  .nav-phone { display: none; }
  .nav-cta .btn-primary { padding: 0.7em 1.3em; font-size: 0.85rem; }

  .nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(43,36,32,0.5);
    z-index: calc(var(--z-header) - 1);
  }
  .nav-overlay.open { display: block; }
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
  :root {
    --space-2xl: 3.5rem;
    --space-xl: 2.5rem;
    --fs-3xl: 2.3rem;
    --fs-4xl: 2.9rem;
    --fs-2xl: 1.8rem;
    --fs-xl: 1.4rem;
  }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; padding: var(--space-lg); }
  .trust-bar { justify-content: center; gap: var(--space-md) var(--space-lg); }
  .hero-stats { flex-wrap: wrap; gap: var(--space-md); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 16px; right: 16px; }
  .form-card { padding: var(--space-lg); }
  .contact-info-card { padding: var(--space-lg); }
  .page-hero { padding: 130px 0 var(--space-xl); }
  .hero-badge { position: static; margin-top: var(--space-sm); }
  .hero-visual::after { display: none; }
}

/* ---- Small mobile (≤480px) ---- */
@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 var(--space-sm); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  h1 { font-size: var(--fs-3xl); }
  .brand .brand-text small { display: none; }
}