/* spectators.css — page-only rules, every selector prefixed .spectators- (design-system.md §8.1).
   Sections: page-title band with the Round Room photo (§2.1), "Ticketing Information" intro (§2.2),
   the two ticket cards (§2.3). The celebration section is the shared partial. */

/* ---------- §2.1 page-title band: 77px title box + rounded photo at 50% width ---------- */
.spectators-title h1{line-height:77px}                 /* Elementor 5.5rem @14px line box; glyphs centred in it */
.spectators-title__photo{width:50%;margin-inline:auto}

/* ---------- §2.2 ticketing intro: logo, gradient heading, centred intro copy ---------- */
.spectators-intro{padding:80px 10px 52px;text-align:center}   /* 10px container default + 5em / 3em @14px */
.spectators-intro__logo{width:36%;margin-inline:auto}
.spectators-intro__title{line-height:77px}
.spectators-intro__text{width:100%;margin-bottom:0}

/* ---------- §2.3 ticket cards: boxed 1440, 40px side padding, 100px below, 50/50 columns ---------- */
.spectators-cards{max-width:var(--container-max);margin-inline:auto;padding:0 40px 100px}
.spectators-cards__row{justify-content:center}
.spectators-card{flex:0 1 calc((100% - 40px) / 2);min-width:0}   /* half a 40px-gap row, so a lone card stays a centred column */
.spectators-card__name{margin:0 !important;line-height:1.2;letter-spacing:-0.04em}   /* the hoisted "<h2>" line: heading line-height and theme h2 tracking, sits directly above the price */
.spectators-card__link{font-weight:700;color:var(--c-text)}
.spectators-card__link:hover,.spectators-card__link:focus-visible{text-decoration:underline}

/* ---------- §5 responsive ---------- */
@media (max-width:1366px){
  .spectators-intro__text{padding:0 20px}
  .spectators-cards{padding:0 60px}                    /* outer + row containers both 0 30px; bottom padding drops */
}
@media (max-width:1024px){
  .spectators-intro{padding:24px 10px}                 /* 10px + 1em @14px top and bottom */
}
@media (max-width:767px){
  .spectators-title__photo{width:100%}
  .spectators-cards{padding:40px}                      /* both containers 20px */
  .spectators-cards .spectators-cards__row{gap:0}      /* stacked cards touch (shadows overlap); beats responsive.css .row{gap:20px} */
  .spectators-card{flex:0 0 auto;width:100%}
  .spectators-card__name{line-height:inherit}          /* mobile: 26px like every other line */
  .spectators-card .btn{margin-top:40px}               /* 20px spacer + 20px button wrapper padding-top */
}