/* What's On (whats-on.html): page-only rules. Linked after css/style.css. */

/* 01 Opening: the title block sits beside a portrait photograph (the DJ set,
   1200px wide). The split stays inside the hero's vertical padding; the photo
   is capped at 560px so it stays a column beside the title. */
.page-whats-on .whats-on-open .split__media { max-width: 560px; width: 100%; justify-self: end; }
.page-whats-on .whats-on-open .hero__title { max-width: none; }

/* 02 Calendar: one centred column. The legend centres under the heading and
   sits a little closer to it; the event list keeps its left-aligned rows. */
.page-whats-on #calendar .events__legend { justify-content: center; margin-top: -8px; }
.page-whats-on #calendar .events { margin-inline: auto; }
.page-whats-on #calendar .events__empty { margin-inline: auto; text-align: center; }

/* 03 Instagram and Experiences share one body beside the photograph. */
.page-whats-on .whats-on-more .split__media { max-width: 560px; width: 100%; }
.page-whats-on .whats-on-more .split__body > div + div { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  /* Stacked: the photograph leads, full column width, 3:2 as the shared split does. */
  .page-whats-on .whats-on-open .split__media,
  .page-whats-on .whats-on-more .split__media { max-width: none; justify-self: stretch; }
  /* A 3:2 frame shows about half the height of these 4:5 photographs. Hold
     the DJ set high so his head and headphones stay whole (the booth
     lettering is cut; both cannot fit), and the sunset photograph a little
     low so the standing guest keeps her head and her feet. */
  .page-whats-on .whats-on-open .split__media img { object-position: 50% 30%; }
  .page-whats-on .whats-on-more .split__media img { object-position: 50% 62%; }
}