/* ============================================================
   AURÉA — Hair Studio · responsive.css
   Breakpoints: 1080px · 860px · 640px · 440px
   ============================================================ */

/* ---------- Small laptops / tablet landscape ---------- */
@media (max-width: 1080px) {
  .services-grid, .pricing-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row.four { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .masonry { columns: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 860px) {
  .grid-2, .contact-layout { grid-template-columns: 1fr; }
  .mv-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .story-badge { right: 0.8rem; bottom: 0.8rem; }

  /* Timeline collapses to a single left rail */
  .timeline::before { left: 10px; }
  .timeline-item,
  .timeline-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 2.4rem 2.6rem; }
  .timeline-item::before,
  .timeline-item:nth-child(even)::before { left: 2px; right: auto; }

  /* Fullscreen mobile menu */
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.1rem;
    background: rgba(14, 14, 14, 0.96);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
    z-index: 1200;
  }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links .nav-link { color: var(--white); font-size: 1.15rem; }
  .nav-links .nav-link:hover, .nav-links .nav-link.active { color: var(--gold); }
  .nav-cta { margin-top: 0.6rem; }
}

/* ---------- Large phones ---------- */
@media (max-width: 640px) {
  .services-grid, .pricing-grid, .team-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; gap: 2.2rem; }
  .stats-row.four { grid-template-columns: repeat(2, 1fr); }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 1.9rem 1.4rem; }
  .testimonial { padding: 2.1rem 1.4rem; }
  .testimonial-swiper .swiper-button-prev,
  .testimonial-swiper .swiper-button-next { display: none; }
  .map-embed.large { height: 280px; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-nav.prev { left: 0.4rem; }
  .lightbox-nav.next { right: 0.4rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 440px) {
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-glass { width: 100%; }
  .gallery-filters { gap: 0.45rem; }
  .filter-btn { padding: 0.5rem 1.05rem; font-size: 0.72rem; }
  .back-to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
  .float-circle, .blur-blob { display: none; }
}