/* ============================================
   Audio Lab — Responsive Breakpoints
   ============================================ */

/* --- Tablet (≤1024px) --- */
@media (max-width: 1024px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }

  .hero__logo {
    font-size: 4.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .proof-bar {
    gap: 32px;
  }
}

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }

  .section {
    padding: 48px 0;
  }

  /* Nav */
  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Hero */
  .hero__logo {
    font-size: 3rem;
    letter-spacing: 3px;
  }

  .hero__tagline {
    font-size: 0.8rem;
    letter-spacing: 4px;
  }

  /* Shockwave rings scale down */
  .hero__rings {
    transform: translate(-50%, -50%) scale(0.625);
  }

  /* EQ control panel — full-width bottom strip on mobile */
  .hero__control {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    padding: 12px 16px 14px;
  }

  /* Parallax on mobile: swap to portrait-friendly image but KEEP
     background-attachment: fixed so the photo stays locked to the
     viewport as cards scroll past it (true parallax).

     Why not scroll attachment: with scroll, the image is sized
     relative to the full 1500+px section, which either stretches
     it huge (cover) or leaves it static in one spot. With fixed,
     the image is sized to the viewport (412×915 area) and stays
     put while content scrolls — so every card sweeps past the
     DD Audio build as you scroll the section.

     hatch1.webp is used instead of hummerL1.webp because it's
     portrait-oriented and reads well at narrow viewport widths. */
  .section--parallax {
    background-image: url('../images/gallery/audio/hatch1.webp');
    background-size: auto 90vh;
    background-position: center center;
  }

  /* Lighten the overlay on mobile so the parallax image is actually
     visible. The desktop gradient is 92% dark at top/bottom which
     completely hides the fixed background image on narrow mobile
     viewports where the section is much taller (1600px+). */
  .section--parallax::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(10, 0, 0, 0.42) 18%,
      rgba(20, 4, 0, 0.32) 50%,
      rgba(10, 0, 0, 0.45) 82%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }

  /* Cards */
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* Photo grid */
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }

  /* Proof bar */
  .proof-bar {
    gap: 20px;
  }

  .proof-bar__number {
    font-size: 1.8rem;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* CTA */
  .cta-banner .btn {
    display: block;
    margin: 8px auto;
    max-width: 280px;
  }

  /* Gallery filter */
  .gallery-filter {
    gap: 8px;
  }

  .gallery-filter__btn {
    font-size: 0.8rem;
    padding: 6px 14px;
  }

  /* Brands */
  .brands {
    gap: 20px;
  }

  .brands__item {
    font-size: 1rem;
  }

  /* Timeline */
  .timeline {
    padding-left: 24px;
  }

  /* Page hero */
  .page-hero {
    padding: 110px 0 40px;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Small Mobile (≤480px) --- */
@media (max-width: 480px) {
  .hero__logo {
    font-size: 2.4rem;
    letter-spacing: 2px;
  }

  .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}