/* ============================================================
   WMC House — What's On
   One poster at a time, at size, with the copy beside it.
   Replaced the marquee in 1.39.0: a moving row of eight small
   cards showed everything and said nothing.
   ============================================================ */

/* === Frame ===
   Arrows hang off the stage, so the frame is the positioning context. */
.show { position: relative; }

/* === Stage ===
   Every slide sits in the SAME grid cell. The stage is therefore as tall as
   the tallest slide and the section never changes height mid-fade, which is
   what made stacking with position:absolute unusable — the first slide sets
   the height and every longer one is clipped. */
.show__stage { display: grid; }
.show__slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.show__slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }

/* A single item never fades and never needs the machinery. */
.show:not(.show--multi) .show__slide { opacity: 1; visibility: visible; }

/* === Poster === */
.show__media { overflow: hidden; border-radius: var(--radius); background: var(--dark); }
.show__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio); }

/* === Copy === */
.show__body { max-width: 46ch; }
.show__cat { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); margin-bottom: .9rem; }
.show__cat::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; flex: 0 0 auto; }
.show__title { margin-bottom: .9rem; }
.show__text { margin-bottom: 1.1rem; }
.show__act { margin-top: 1.4rem; }

/* === Arrows ===
   Visible on hover on a pointer device, and always visible to a keyboard.
   Hidden entirely on touch, where the segments and a swipe are the controls
   and a hover-only affordance would simply never appear. */
.show__arw { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: clamp(34px, 4vw, 48px); height: clamp(60px, 8vw, 92px); padding: 0; border: 0; background: none; color: var(--ink); opacity: 0; cursor: pointer; transition: opacity .3s ease, color .3s ease; }
.show__arw svg { width: 100%; height: 100%; }
.show__arw--prev { left: calc(var(--gutter) * -1); }
.show__arw--next { right: calc(var(--gutter) * -1); }
.show:hover .show__arw, .show__arw:focus-visible { opacity: .55; }
.show .show__arw:hover, .show__arw:focus-visible { opacity: 1; }

@media (pointer: coarse) {
	.show__arw { display: none; }
}

/* === Segments ===
   Progress indicator and control in one. The tap target is 44px tall with the
   visible 3px bar drawn inside it, so a thumb is not aiming at a hairline. */
.show__nav { display: flex; gap: clamp(.5rem, 1.4vw, 1rem); margin-top: var(--s-3); }
.show__seg { flex: 1 1 0; display: grid; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.show__seg__bar { display: block; height: 3px; background: var(--rule); transition: background .4s ease; }
.show__seg.is-on .show__seg__bar { background: var(--ink); }
.show__seg:hover .show__seg__bar { background: var(--ink-soft); }
.show__seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* === Foot === */
.show__foot { display: flex; justify-content: center; margin-top: var(--s-4); }

/* === Narrow ===
   Poster over copy. The two-column split at phone width gave a 150px-wide
   poster next to a 12-character measure. */
@media (max-width: 860px) {
	.show__slide { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
	.show__body { max-width: none; }
}

/* === Reduced motion ===
   No crossfade. The slide still changes, it just cuts. Autoplay is switched
   off in wmc.js under the same query, so the only changes are ones the guest
   asked for. */
@media (prefers-reduced-motion: reduce) {
	.show__slide { transition: none; }
	.show__slide.is-on { transition: none; }
	.show__arw { transition: none; opacity: .55; }
}