/* ============================================================
   VOX ENTERTAINMENT — Responsive Rules
   ============================================================ */

/* Ultra-wide monitors */
@media (min-width: 1600px) {
  :root { --container-w: 1440px; }
}

/* Laptop / small desktop */
@media (max-width: 1180px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 900px) {
  .about-preview__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .nav__links { gap: 1.4rem; }
  .location-detail-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .phase__list { grid-template-columns: 1fr; }
}

/* Mobile nav + layout */
@media (max-width: 760px) {
  .nav__toggle { display: flex; }

  .nav__links {
    position: fixed; inset: 0; top: 0; z-index: 999;
    flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
    background: var(--color-ink); color: #fff;
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform var(--dur-med) var(--ease-premium),
                opacity var(--dur-med) var(--ease-premium),
                visibility var(--dur-med) var(--ease-premium);
  }
  .nav__links.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__link { font-size: 1rem; }
  .nav__links .btn { margin-top: 1rem; }

  .card-grid { grid-template-columns: 1fr; }
  .location-card { aspect-ratio: 4 / 3; }

  .photo-band { grid-template-columns: 1fr; }
  .photo-band__item, .photo-band__item--tall { aspect-ratio: 4 / 3; }

  .feature-row, .feature-row--reverse { flex-direction: column !important; }
  .feature-row__media { order: 1; width: 100%; }
  .feature-row__text { order: 2; width: 100%; }

  .footer__top { flex-direction: column; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .whatsapp-float { width: 50px; height: 50px; bottom: 1.25rem; right: 1.25rem; }
  .whatsapp-float svg { width: 22px; height: 22px; }

  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }

  .moment__band { max-width: none; padding: 2.5rem 1.5rem; }
  .moment__visual {
    position: static; width: 100%; height: 220px;
    border-radius: var(--radius); margin-top: 1.5rem;
  }

  .service-grid { grid-template-columns: 1fr; }
  .location-detail__meta { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .phase__head { flex-direction: column; gap: .4rem; }

  .ticker__track { gap: 1.5rem; animation-duration: 22s; }
  .ticker__track span { font-size: .92rem; }
}

/* Small phones */
@media (max-width: 420px) {
  .container { padding: 0 1.1rem; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.75rem); }
}