/**
 * GVS What's On.
 *
 * Layout: each day is a responsive grid of stage cards — one column on
 * mobile, two on tablet, three on desktop. Each card is a stage name with
 * that stage's running order beneath it.
 *
 * Deliberately low-specificity and colour-light so The7 / Elementor
 * typography and palette come through. Colours are driven by custom
 * properties and currentColor, so it sits on light or dark sections
 * without edits.
 */

.gvs-wo {
	--gvs-wo-rule: rgba( 127, 127, 127, 0.25 );
	--gvs-wo-muted: rgba( 127, 127, 127, 0.1 );
	--gvs-wo-gap: 1.5em;

	/* Lets the stage grid respond to its own width, not the viewport's,
	   so it still behaves inside a narrow Elementor column. */
	container-type: inline-size;
}

/**
 * Below desktop, the Elementor single-page template runs its container
 * edge to edge (only a 10px margin), so the schedule would otherwise touch
 * the screen. Add our own gutter rather than editing that template, which
 * is shared with other pages.
 *
 * This shrinks the query container slightly, which is correct: the grid
 * should respond to the space it actually has.
 */
@media (max-width: 1024px) {
	.gvs-wo {
		padding-inline: 1.25rem;
	}
}

.gvs-wo__heading {
	margin: 0 0 0.75em;
}

/* Day tabs ---------------------------------------------------------------- */

.gvs-wo__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1.5em;
	padding: 0;
}

.gvs-wo__tab {
	appearance: none;
	background: transparent;
	border: 1px solid var(--gvs-wo-rule);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.2;
	padding: 0.55em 1.15em;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gvs-wo__tab:hover,
.gvs-wo__tab:focus-visible {
	background: var(--gvs-wo-muted);
}

.gvs-wo__tab.is-active {
	background: var(--gvs-wo-muted);
	border-color: currentColor;
	font-weight: 600;
}

/* Day groups -------------------------------------------------------------- */

.gvs-wo__group.is-hidden {
	display: none;
}

.gvs-wo__day {
	margin: 0 0 0.6em;
	font-size: 1.75em;
	line-height: 1.2;
}

/* Stage grid: one column, widening with available space ------------------- */

.gvs-wo__stages {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gvs-wo-gap);
	align-items: start;
	margin: 0 0 2em;
}

@container (min-width: 38em) {
	.gvs-wo__stages {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@container (min-width: 58em) {
	.gvs-wo__stages {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Browsers without container queries fall back to the viewport. */
@supports not (container-type: inline-size) {
	@media (min-width: 38em) {
		.gvs-wo__stages {
			grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		}
	}

	@media (min-width: 58em) {
		.gvs-wo__stages {
			grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		}
	}
}

/* Stage card -------------------------------------------------------------- */

.gvs-wo__stage-card {
	border: 1px solid var(--gvs-wo-rule);
	border-radius: 0.5em;
	padding: 1.1em 1.2em 0.5em;
	min-width: 0;
}

.gvs-wo__stage-name {
	margin: 0 0 0.6em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--gvs-wo-rule);
	font-size: 1.2em;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* Performances ------------------------------------------------------------ */

.gvs-wo__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gvs-wo__item {
	display: grid;
	grid-template-columns: 5.5em minmax( 0, 1fr );
	gap: 0 0.9em;
	padding: 0.65em 0;
	border-top: 1px solid var(--gvs-wo-muted);
}

.gvs-wo__item:first-child {
	border-top: 0;
}

.gvs-wo__time {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

.gvs-wo__start {
	font-weight: 600;
}

.gvs-wo__end {
	opacity: 0.6;
	font-size: 0.9em;
}

.gvs-wo__end::before {
	content: "– ";
}

.gvs-wo__start--tba {
	opacity: 0.6;
	font-weight: 400;
}

.gvs-wo__body {
	min-width: 0;
}

.gvs-wo__act {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.gvs-wo__act a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.gvs-wo__meta {
	margin: 0.2em 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.gvs-wo__desc {
	margin: 0.35em 0 0;
	font-size: 0.9em;
	opacity: 0.8;
	line-height: 1.5;
	overflow-wrap: break-word;
}

/* Clock states ------------------------------------------------------------ */

.gvs-wo__item.is-past {
	opacity: 0.45;
}

.gvs-wo__item.is-now {
	background: var(--gvs-wo-muted);
	border-radius: 0.35em;
	margin: 0 -0.6em;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.gvs-wo__item.is-now .gvs-wo__act::after,
.gvs-wo__item.is-next .gvs-wo__act::after {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.15em 0.55em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.65em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.gvs-wo__item.is-now .gvs-wo__act::after {
	content: "On now";
	opacity: 0.85;
}

.gvs-wo__item.is-next .gvs-wo__act::after {
	content: "Up next";
	border-style: dashed;
	opacity: 0.6;
}

/* Footnote ---------------------------------------------------------------- */

.gvs-wo__empty {
	opacity: 0.7;
}

.gvs-wo__footnote {
	margin: 0;
	font-size: 0.8em;
	opacity: 0.5;
}

.gvs-wo__footnote:empty {
	display: none;
}

/* Narrow cards: stack the time above the act ------------------------------ */

@container (max-width: 24em) {
	.gvs-wo__item {
		grid-template-columns: 1fr;
		gap: 0.2em;
	}

	.gvs-wo__time {
		flex-direction: row;
		gap: 0.35em;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 24em) {
		.gvs-wo__item {
			grid-template-columns: 1fr;
			gap: 0.2em;
		}

		.gvs-wo__time {
			flex-direction: row;
			gap: 0.35em;
		}
	}
}