/* ==========================================================
   RESPONSIVE OVERRIDES
   The approved hero/highlights/tickets artwork is one image,
   so it scales automatically without separate layout rules.
   ========================================================== */

@media (max-width: 480px) {
  .performances,
  .social {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .section-title {
    margin-bottom: var(--space-md);
    font-size: 1.5rem;
  }

  /* Keep invisible ticket hotspots easy to tap on narrow phones. */
  .ticket-hotspot {
    min-height: 28px;
  }
}

@media (min-width: 600px) {
}

@media (min-width: 900px) {
  .section-title {
    font-size: 2.4rem;
  }
}


@media (max-width: 600px) {
.social__heading::before,
  .social__heading::after {
    width: 32px;
  }

  .social__link {
    min-width: 145px;
    min-height: 68px;
    padding: 0.7rem 0.9rem;
  }

  .social__brand-icon {
    width: 34px;
    height: 34px;
  }

  .social__label {
    font-size: 1.15rem;
  }
}


@media (max-width: 600px) {
  .bottom-art {
    width: 100%;
    overflow: visible;
  }

  .bottom-art__image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    transform: none;
  }

  .hotel-hotspot {
    left: 73.9%;
    top: 18.7%;
    width: 16.8%;
    height: 28.4%;
  }
}


@media (max-width: 600px) {
  .social {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .social__heading {
    font-size: clamp(1.05rem, 5vw, 1.55rem);
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .social__heading::before,
  .social__heading::after {
    width: 18px;
    height: 3px;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .social__link {
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    padding: 0;
  }

  .social__brand-icon {
    width: 36px;
    height: 36px;
  }

  .door-ticket-note {
    font-size: 1rem;
    padding: 0.85rem 0.6rem 0.55rem;
  }
}


@media (max-width:700px){
  .event-info{padding:2rem .8rem 2.2rem;}
  .event-info__notice{padding:1rem .85rem 1.1rem;margin-bottom:1.7rem;}
  .event-info__why{margin-bottom:1.7rem;}
  .event-info__grid{grid-template-columns:1fr;gap:.65rem;}
  .event-info__grid p{padding:.8rem .9rem;}
}


@media (max-width: 700px) {
  .hotel-booking__inner {
    grid-template-columns: 1fr;
  }

  .hotel-booking__photo-wrap {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .hotel-booking__content {
    padding: 1rem 0.85rem 1.15rem;
  }

  .hotel-booking__eyebrow {
    font-size: clamp(1.6rem, 7vw, 2.25rem);
  }

  .hotel-booking__title {
    font-size: clamp(2rem, 8.8vw, 3rem);
  }

  .hotel-booking__subhead {
    font-size: clamp(0.98rem, 4.2vw, 1.2rem);
    margin-bottom: 0.95rem;
  }

  .hotel-booking__button {
    width: 100%;
    font-size: clamp(2.6rem, 13vw, 4rem);
    padding: 0.85rem 0.75rem;
    margin-bottom: 0.9rem;
  }

  .hotel-booking__auto {
    width: 100%;
    padding: 0.8rem 0.75rem;
    margin-bottom: 0.9rem;
  }

  .hotel-booking__check {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 1.9rem;
  }

  .hotel-booking__auto-top {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  }

  .hotel-booking__auto-bottom {
    font-size: clamp(1.12rem, 5vw, 1.4rem);
  }

  .hotel-booking__details {
    grid-template-columns: 1fr;
  }

  .hotel-booking__website,
  .hotel-booking__promo {
    font-size: clamp(1rem, 4.35vw, 1.18rem);
    padding: 0.72rem 0.75rem;
  }
}


/* ==========================================================
   v1.12 MOBILE TICKET LAYOUT
   Desktop keeps the exact v1.11 four-across artwork.
   Phones use the exact same four approved cards in a 2 x 2 layout.
   ========================================================== */
@media (max-width: 600px) {
  .hero-tickets picture {
    display: block;
    width: 100%;
  }

  .hero-buy-hotspot {
    left: 34.3500%;
    top: 23.7411%;
    width: 30.7500%;
    height: 3.6308%;
  }

  .ticket-hotspot--general {
    left: 6.5237%;
    top: 59.6394%;
    width: 35.7063%;
    height: 5.3157%;
  }

  .ticket-hotspot--flag {
    left: 57.2073%;
    top: 59.6394%;
    width: 35.7063%;
    height: 5.3157%;
  }

  .ticket-hotspot--jersey {
    left: 6.5237%;
    top: 93.2340%;
    width: 35.7063%;
    height: 5.3157%;
  }

  .ticket-hotspot--vip {
    left: 57.2073%;
    top: 93.2340%;
    width: 35.7063%;
    height: 5.3157%;
  }
}


@media (max-width: 600px) {
  .door-ticket-note {
    font-size: 1.12rem;
    line-height: 1.3;
    padding: 0.9rem 0.85rem 0.65rem;
  }

  .contact-email {
    font-size: 1.5rem;
    line-height: 1.2;
    padding: 0 0.9rem;
  }
}


@media (max-width: 600px) {
  .real-ticket-button {
    font-size: clamp(1.35rem, 5vw, 2rem);
  }

  .real-ticket-button--hero {
    font-size: clamp(1.45rem, 5.8vw, 2.25rem);
  }
}




/* ==========================================================
   v1.18 MOBILE HERO BUTTON FIX ONLY
   Wider button so BUY TICKETS NOW! stays on one line.
   ========================================================== */
@media (max-width: 600px) {
  .hero-buy-hotspot.real-ticket-button--hero {
    left: 25% !important;
    top: 21.82% !important;
    width: 50% !important;
    height: 3.35% !important;
    padding: 0 0.25rem !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    font-size: clamp(0.82rem, 4vw, 1.25rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    border-radius: 6px;
  }
}