/* ==========================================================================
   Nexus Mastering — Responsive Rules
   Mobile-first breakpoints layered on top of the desktop-default layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop refinement
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-grid .footer-col:last-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-lg);
  }

  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-split .btn-row,
  .hero-split .badge-pill {
    justify-content: center;
    margin-inline: auto;
  }

  .hero-media {
    order: 2;
  }

  .about-split,
  .service-split,
  .artist-bio-split {
    grid-template-columns: 1fr !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Navigation collapses to mobile menu
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .nav-menu,
  .nav-actions .nav-cta-desktop {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Small tablet / large phone
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --space-2xl: 4.5rem;
    --space-3xl: 6rem;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

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

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

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

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

  .container,
  .container-narrow {
    padding-inline: var(--space-sm);
  }

  .display-1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

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

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-sm);
  }

  .badge-pill {
    font-size: 0.76rem;
    padding: 0.45rem 0.9rem;
  }

  .nav-mobile-link {
    font-size: 1.35rem;
  }

  .card {
    padding: var(--space-md);
  }

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