/* =========================================================
   HOT LATIN FEST — responsive.css
   Mobile-first base lives in style.css using clamp()/fluid units.
   Overrides below adjust layout at wider breakpoints.
   ========================================================= */

/* ---------- Mobile base overrides (<640px) ---------- */
@media (max-width: 640px){

  .navbar__nav{
    position: fixed;
    top: 0; right: 0;
    height: 100svh;
    width: min(78vw, 320px);
    background: var(--bg-secondary);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    box-shadow: -20px 0 60px -20px rgba(0,0,0,.6);
  }
  .navbar__nav.is-open{ transform: translateX(0); }
  .navbar__nav a{ font-size: 1.1rem; }
  .navbar__cta{ margin-top: var(--space-2); }
  .navbar__toggle{ display: flex; z-index: 101; }
  .navbar__toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .navbar__toggle.is-active span:nth-child(2){ opacity: 0; }
  .navbar__toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .hero{ padding-top: var(--space-5); }
  .hero__blob--1, .hero__blob--2, .hero__blob--3{ filter: blur(60px); }

  .countdown__grid{ gap: var(--space-2); }
  .countdown__unit{ min-width: 64px; }
  .countdown__sep{ display: none; }

  .ticket-card{
    grid-template-columns: 1fr;
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .artist-grid,
  .video-grid{
    grid-template-columns: 1fr;
  }

  .experience-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 160px);
  }
  .experience-tile--tall{ grid-row: span 1; }
  .experience-tile--wide{ grid-column: span 2; }

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

  .footer__top{ flex-direction: column; gap: var(--space-4); }
  .footer__links{ gap: var(--space-4); }
  .footer__bottom{ flex-direction: column; gap: .4rem; }
}

/* ---------- Tablet (641px–1024px) ---------- */
@media (min-width: 641px) and (max-width: 1024px){

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

  .experience-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 200px);
  }
  .experience-tile--wide{ grid-column: span 2; }

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

  .ticket-card{ grid-template-columns: 1fr; text-align: center; }
  .ticket-card__desc{ margin: 0 auto; }
}

/* ---------- Desktop refinements (>=1025px) handled by base styles ---------- */
@media (min-width: 1025px){
  .container{ padding: 0 var(--space-4); }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px){
  .hero__title-line{ font-size: clamp(2.6rem, 13vw, 4rem); }
  .btn{ padding: .9rem 1.6rem; font-size: .88rem; }
}