/* ============================================================
   VELARÉ — Hair Studio · responsive.css
   Breakpoints: 1024px (tablet-landscape) · 820px (tablet)
                600px (large phone) · 420px (small phone)
   ============================================================ */

/* ---------- Tablet landscape / small laptop ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(2.3rem, 5vw, 3.4rem); }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 820px) {
  /* Hero stacks: copy above image */
  .hero { padding-top: calc(var(--nav-h) + 3rem); }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-img-wrap { width: min(400px, 90%); }
  .hero-chip { left: 0.4rem; }
  .scroll-indicator { display: none; }

  .grid-2 { grid-template-columns: 1fr; }
  .about-card { right: 0.8rem; bottom: 0.8rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Mobile slide-in menu */
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 82vw);
    flex-direction: column;
    justify-content: center;
    gap: 1.9rem;
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.15);
    transform: translateX(105%);
    transition: transform 0.5s var(--ease);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-link { font-size: 1.05rem; }
}

/* ---------- Large phones ---------- */
@media (max-width: 600px) {
  .services-grid, .why-grid, .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .form-row { grid-template-columns: 1fr; }
  .hero-trust { gap: 1.4rem; }
  .contact-form-wrap { padding: 1.8rem 1.4rem; }
  .slide { padding: 2.1rem 1.4rem 5rem; }
  .lightbox-nav.prev { left: 0.4rem; }
  .lightbox-nav.next { right: 0.4rem; }
  .lightbox-nav { width: 42px; height: 42px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-trust { flex-wrap: wrap; justify-content: center; }
  .filter-btn { padding: 0.5rem 1.1rem; font-size: 0.8rem; }
  .stats-grid { gap: 0.7rem; }
  .back-to-top { right: 1rem; bottom: 1rem; }
}