/* =============================================================
   DICAMAROTE — responsive.css
   Mobile styles live in style.css. Breakpoints here progressively
   enhance the layout for tablets and desktop. Nothing should break
   between steps — each query only adds/adjusts, never repairs.
   ============================================================= */

/* -------------------------------------------------------------
   ≥ 560px — small tablets / large phones
   ----------------------------------------------------------- */
@media (min-width: 560px) {
  .experience__grid { grid-template-columns: repeat(2, 1fr); }
  .tickets__row { grid-template-columns: repeat(2, 1fr); }
  .tickets__row--featured { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------
   ≥ 768px — tablets
   ----------------------------------------------------------- */
@media (min-width: 768px) {
  :root { --header-h: 84px; }

  .container { padding-left: var(--space-lg); padding-right: var(--space-lg); }

  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
  .gallery__item--a { grid-column: span 4; aspect-ratio: 21/9; }
  .gallery__item--d { grid-column: span 2; aspect-ratio: 4/3; }
  .gallery__item--b, .gallery__item--c, .gallery__item--e { grid-column: span 2; }

  .lineup__grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }

  .lineup__blind { padding: var(--space-2xl) var(--space-xl); }
  .lineup__blind-actions { flex-direction: row; justify-content: center; gap: var(--space-md); }
  .lineup__blind-note { text-align: left; }

  .manifesto__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-2xl); }

  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
  .site-footer__brand { flex: 1 1 260px; }
  .site-footer__cols { flex: 2 1 420px; }
  .site-footer__cta { align-self: center; }

  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* -------------------------------------------------------------
   ≥ 1024px — desktop
   ----------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --header-h: 92px; }

  /* Header goes horizontal */
  .header__nav {
    position: static;
    inset: auto;
    background: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
  .header__nav .header__nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    padding: 0;
  }
  .nav-link {
    font-family: var(--font-body);
    text-transform: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cream-dim);
  }
  .site-header.is-scrolled .nav-link,
  .nav-link { color: var(--cream); }
  .nav-link:hover { color: var(--gold-500); }

  .header__toggle { display: none; }
  .header__actions .btn--primary { display: inline-flex; }

  .header__logo img { height: 40px; }

  /* Hero */
  .hero__content { max-width: 60rem; }
  .hero__pattern-corner { width: 74px; }

  /* Experience */
  .experience__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

  /* Numbers */
  .numbers__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

  /* Tickets */
  .tickets__row { grid-template-columns: repeat(4, 1fr); }
  .tickets__row--featured { grid-template-columns: repeat(2, 1fr); max-width: 46rem; }

  /* FAQ */
  .faq__question { font-size: 1.15rem; }

  /* Gallery */
  .gallery__grid { gap: var(--space-md); }

  section { scroll-margin-top: var(--header-h); }
}

/* -------------------------------------------------------------
   ≥ 1280px — large desktop refinements
   ----------------------------------------------------------- */
@media (min-width: 1280px) {
  .manifesto__grid { gap: var(--space-2xl); }
  .lineup__artist-name { font-size: 4.5rem; }
}

/* -------------------------------------------------------------
   Anchor scroll offset (all breakpoints, needs header var)
   ----------------------------------------------------------- */
section[id] { scroll-margin-top: var(--header-h); }