/* ---------- TABLET (≤1024px) ---------- */
@media (max-width: 64rem) {
  .container { width: 94%; }

  .top-bar { padding: 0 1.25rem; }
  .logo img { height: 10rem; } /* 160px */

  nav .menu { gap: 2.5rem; }

  .ticket-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ticket-left { order: 2; }
  .schedule { order: 1; }

  .bio-inner { grid-template-columns: 16.25rem 1fr; gap: 2.25rem; padding: 2.75rem; }
  .bio-photo { width: 16.25rem; height: 16.25rem; }

  .members-row { gap: 2.5rem 3rem; }
}

/* ---------- LARGE PHONE / SMALL TABLET (≤48rem / 768px) ---------- */
@media (max-width: 48rem) {

  /* Header: social icons + lang + Buy Tickets share the top row,
     logo sits centered on the row below. */
  .top-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "social controls"
      "logo   logo";
    align-items: center;
    row-gap: 1rem;
    padding: 1.25rem;
  }

  .social-icons {
    grid-area: social;
    justify-self: start;
    gap: 1rem;
  }

  .right-controls {
    grid-area: controls;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .lang { font-size: 0.9375rem; }

  .btn-ticket {
    font-size: 0.9375rem;
    padding: 0.625rem 1.375rem;
    white-space: nowrap;
  }

  .logo {
    grid-area: logo;
    justify-self: center;
  }

  .logo img {
    height: 7.5rem; /* 120px — bigger, now the row's centerpiece */
    padding: 0;
  }

  nav { margin-top: 0; }
  nav .menu { flex-wrap: wrap; justify-content: center; gap: 1.25rem 1.5625rem; padding-bottom: 1rem; }
  nav .menu li { font-size: 1rem; }

  /* Homepage hero */
  .hero { padding: 1.875rem 0; }
  .hero-content { padding: 1.5rem; }
  .hero-title img { height: 4.5rem; }
  .hero-buttons { flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
  .hero-button { font-size: 1rem; padding: 0.625rem 1.375rem; }

  .section-title { margin: 2rem 0 1.25rem; }
  .cards-grid, .cards-grid.three, .news-grid { grid-template-columns: 1fr; gap: 1rem; }
  .card-label { font-size: 1.25rem; padding: 1.25rem 1rem 1rem; }
  .cards-grid.three .card-label { font-size: 1.125rem; }

  .newsletter { padding: 2.5rem 1.25rem; margin-top: 3.125rem; }
  .newsletter h2 { font-size: 1.375rem; }

  footer { margin-top: 3.75rem; padding: 1.875rem 0; }
  .partners { gap: 1.5625rem; justify-content: flex-start; }
  .partner-logos img { height: 2.5rem; }

  /* Content page hero */
  .hero-banner { padding-bottom: 60%; }
  .hero-info { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 0 1.5625rem 1.875rem; }
  .hero-text h1 { margin-bottom: 0.625rem; }
  .hero-text p { font-size: 1rem; margin-bottom: 1.25rem; }
  .hero-buy { padding: 0.75rem 1.75rem; font-size: 1.0625rem; }
  .hero-content-new { top: 0; }

  .intro-strip { padding: 1.875rem 1.25rem; }
  .intro-strip p { font-size: 0.9375rem; line-height: 1.8; }

  .tabs { flex-wrap: wrap; gap: 0.5rem; padding-top: 1.25rem; }
  .tab { padding: 0.625rem 1.25rem; font-size: 0.9375rem; }

  .overview { padding: 2.5rem 1.25rem 3rem; }
  .overview h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }
  .overview p { font-size: 0.9375rem; line-height: 1.8; }

  .story-section { padding: 2.5rem 0 0; }
  .story-section h2 { margin-bottom: 2rem; }
  .story-row { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .story-row .story-img { order: -1 !important; }
  .story-row .story-text h3 { font-size: 1.375rem; }
  .story-row .story-text p { font-size: 0.9375rem; }

  .ticketing { padding: 2.5rem 0 3.125rem; }
  .ticketing h2 { margin-bottom: 1.875rem; }
  .ticket-info-box { padding: 1.25rem; }
  .info-item p { font-size: 0.875rem; }
  .schedule .sched-date { font-size: 1.375rem; }
  .schedule .sched-time { font-size: 1rem; }
  .price-row { flex-wrap: wrap; gap: 1rem 1.5rem; }

  /* Team page */
  .page-title { padding: 3rem 1.25rem 2.5rem; }
  .page-title h1, .page-title h2 { letter-spacing: 0.25rem; }
  .cat-tabs { gap: 1rem; padding: 0 1.25rem 3rem; }
  .cat-tab { padding: 1rem 1.5rem; font-size: 1rem; min-width: 9.375rem; }

  .team-group { padding: 2.5rem 0 4.375rem; }
  .group-title { margin-bottom: 2rem; }
  .members-row { gap: 2rem 1.5rem; margin-bottom: 2rem; }
  .member { width: 45%; }
  .member .avatar { width: 100%; height: auto; aspect-ratio: 1/1; }
  .member .name { font-size: 1.375rem; }

  .bio-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.5rem 1.5rem;
    justify-items: center;
    text-align: center;
  }
  .bio-photo { width: 11.25rem; height: 11.25rem; }
  .bio-body h2 { font-size: 1.75rem; }
  .bio-body .m-role { font-size: 1.0625rem; margin-bottom: 1rem; }
  .bio-body .m-bio { font-size: 0.875rem; }
  .bio-close { top: 1rem; right: 1rem; font-size: 1.75rem; }

  /* Subscribe modal */
  .modal-box { padding: 2.8125rem 1.5625rem 3.125rem; border-radius: 1.125rem; }
  .modal-title { font-size: 1.75rem; }
  .modal-subtitle { font-size: 1rem; margin-bottom: 1.75rem; }
  .modal-close { top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; }
  .modal-row { flex-direction: column; gap: 1.125rem; }
  .modal-form input { padding: 1rem 1.25rem; font-size: 1rem; }
  .modal-submit { padding: 1rem 2.5rem; font-size: 1.125rem; }

  /* News details / listing pages */
  .news-details-container { padding: 1.75rem; }
  .nd-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .nd-title { width: 100%; padding-right: 0; }
  .nd-title h1 { font-size: 1.75rem; }
  .nd-date { font-size: 1.125rem; }
  .nd-cover { width: 100%; }
  .nd-main { padding-top: 1.875rem; }
  .nd-main p { font-size: 1.0625rem; }
  .nd-gallery-entry { width: 48%; }
  .nd-more-container h3 { font-size: 1.5rem; }
  .nd-more-container .news-card { width: 100%; }

  .news-list-container .news-card { width: 100%; margin-bottom: 1.25rem; }
  .news-card-large .news-label,
  .news-card-large .news-date { font-size: 1.375rem; }

  /* Sponsors */
  .sponsors-container { padding-bottom: 4rem; }
  .sponsor-logo-image { width: 45%; }
  .sponsor-logo-images-entry { width: 40%; }
  .sponsor-logo-name h3 { font-size: 2.25rem; }

  .audio-btn { right: 1.25rem; bottom: 1.25rem; width: 3rem; height: 3rem; font-size: 1.25rem; }
}

/* ---------- SMALL PHONE (≤26.25rem / 420px) ---------- */
@media (max-width: 26.25rem) {
  /* .top-bar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "social"
      "controls"
      "logo";
    row-gap: 0.75rem;
  }

  .social-icons { justify-self: center; }

  .right-controls {
    justify-self: center;
    justify-content: center;
    flex-wrap: wrap;
  } */

  .logo img { height: 6rem; }
  .page-title h1, .page-title h2 { letter-spacing: 0.125rem; }
  .cat-tab { width: 100%; }
  .member { width: 100%; }
  .members-row { gap: 1.5rem; }
  .nd-gallery-entry { width: 100%; }
  .sponsor-logo-image, .sponsor-logo-images-entry { width: 100%; }
  .modal-title { font-size: 1.5rem; }
}

/* ---------- Admin bar spacing on mobile (kept consistent with main sheet) ---------- */
@media screen and (max-width: 48.875rem) { /* 782px, WP default */
  body.admin-bar { margin-top: 2.875rem; }
}