/* =========================================
   Looks Lab - Responsive
   ========================================= */

@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .ig-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1.05fr 1fr; }

  .why-grid { grid-template-columns: repeat(2, 1fr); }

  .booking-fields {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

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

  .gallery-item { flex-basis: min(42vw, 340px); }
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }

  .why-grid { grid-template-columns: repeat(4, 1fr); }

  .about-media img { min-height: 560px; }

  .gallery-item { flex-basis: 320px; }
}

@media (max-width: 899px) {
  .nav-toggle {
    display: grid;
    place-content: center;
  }

  .nav {
    position: fixed;
    inset: calc(var(--announce-h) + var(--header-h) + 0.6rem) 1rem auto;
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: var(--radius);
    background: rgba(39, 35, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }

  .nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link,
  .nav-cta {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  .nav-link:hover,
  .nav-link.is-active { background: rgba(255, 255, 255, 0.06); }

  .section-header--row .btn { width: 100%; }
}

@media (max-width: 480px) {
  .container { width: min(100% - 1.4rem, var(--container)); }

  .announce { font-size: 0.78rem; }

  .hero-controls { bottom: 1rem; }

  .stats-grid { gap: 1.1rem; }
}

@media (pointer: coarse) {
  .btn,
  .hero-arrow,
  .icon-btn,
  .slider-btn,
  .back-to-top,
  .lightbox-close { min-height: 48px; }
}