/**
 * Charts: V6 Seasons ribbon (sl-seasons), V5 / M4 Seat map (sl-seat-map) and
 * V5 Light schedule (sl-light).
 * Breakpoints: tablet ≤1024px (designed at 834), phone ≤767px (designed at 390).
 */

/* ------------------------------------------------------------------ */
/* Shared: sideways scroll that bleeds to the right edge (phones)     */
/* ------------------------------------------------------------------ */

.sl-seasons__scroll:focus-visible,
.sl-light__scroll:focus-visible {
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ */
/* V6 Seasons                                                         */
/* ------------------------------------------------------------------ */

.sl-seasons {
	--sl-seasons-band-h: 560px;
	--sl-seasons-band-b: 80px;
	--sl-seasons-shade: 0.35;
	--sl-seasons-label-w: 200px;
	--sl-seasons-dark: #6b6862;
}

.sl-seasons__photo {
	display: flex;
	align-items: flex-end;
	min-height: var(--sl-seasons-band-h);
	background: var(--sl-c-ink);
}

.sl-seasons__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 18, 18, var(--sl-seasons-shade));
}

.sl-seasons__band {
	position: relative;
	z-index: 1;
	padding-top: 48px;
	padding-bottom: var(--sl-seasons-band-b);
}

.sl-seasons__copy {
	max-width: 640px;
}

.sl-seasons__text {
	margin-top: 16px;
	color: var(--sl-text);
}

.sl-seasons__panel {
	padding-top: var(--sl-pad-t, 56px);
	padding-bottom: var(--sl-pad-b, 64px);
}

.sl .sl-seasons__ribbon {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.sl-seasons__ribbon thead,
.sl-seasons__ribbon tbody {
	display: block;
}

.sl-seasons__ribbon tr {
	display: grid;
	grid-template-columns: var(--sl-seasons-label-w) repeat(12, minmax(0, 1fr));
	align-items: center;
}

.sl .sl-seasons__ribbon :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	vertical-align: middle;
}

.sl-seasons__months {
	align-items: start;
	height: 28px;
}

.sl .sl-seasons__ribbon .sl-seasons__month {
	color: var(--sl-muted);
	text-align: center;
	white-space: nowrap;
}

.sl-seasons__row {
	height: 44px;
	border-top: 1px solid var(--sl-line);
}

.sl-seasons__row:last-child {
	border-bottom: 1px solid var(--sl-line);
}

.sl .sl-seasons__ribbon .sl-seasons__label {
	padding-right: 12px;
	color: var(--sl-text);
	font-weight: 400;
}

/* Positioned so the screen-reader text inside bars stays within the scroll area. */
.sl-seasons__track {
	position: relative;
	display: grid;
	grid-column: 2 / -1;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
}

.sl-seasons__bar {
	grid-row: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 24px;
	margin-inline: 2px;
	padding-inline: 8px;
	overflow: hidden;
	border-radius: 4px;
	white-space: nowrap;
}

.sl-seasons__bar--light {
	background: var(--sl-c-light);
	color: var(--sl-c-ink);
}

.sl-seasons__bar--mid {
	background: var(--sl-c-light-muted);
	color: var(--sl-c-ink);
}

.sl-seasons__bar--dark {
	background: var(--sl-seasons-dark);
	color: var(--sl-c-light);
}

.sl-seasons__dot {
	grid-row: 1;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: var(--sl-fs-caption);
	line-height: var(--sl-lh-caption);
	font-weight: 500;
}

.sl-seasons__dot--light {
	background: var(--sl-c-light);
	color: var(--sl-c-ink);
}

.sl-seasons__dot--mid {
	background: var(--sl-c-light-muted);
	color: var(--sl-c-ink);
}

.sl-seasons__dot--dark {
	background: var(--sl-seasons-dark);
	color: var(--sl-c-light);
}

/* On a light palette the light tone would vanish; draw it in ink. */
.sl--paper .sl-seasons__bar--light,
.sl--paper .sl-seasons__dot--light,
.sl--sand .sl-seasons__bar--light,
.sl--sand .sl-seasons__dot--light {
	background: var(--sl-c-ink);
	color: var(--sl-c-light);
}

.sl-seasons__source {
	margin-top: 24px;
	color: var(--sl-muted);
}

@media (max-width: 1024px) {
	.sl-seasons {
		--sl-seasons-band-h: 480px;
		--sl-seasons-band-b: 86px;
		--sl-seasons-label-w: 150px;
	}

	.sl-seasons__copy {
		max-width: 560px;
	}

	.sl-seasons__panel {
		padding-top: var(--sl-pad-t, 48px);
		padding-bottom: var(--sl-pad-b, 56px);
	}
}

@media (max-width: 767px) {
	.sl-seasons {
		--sl-seasons-band-h: 540px;
		--sl-seasons-band-b: 40px;
		--sl-seasons-label-w: 128px;
	}

	.sl-seasons__panel {
		padding-top: var(--sl-pad-t, 40px);
		padding-bottom: var(--sl-pad-b, 48px);
	}

	/* The year stays readable: 46 px months, scrolled sideways to the right edge. */
	.sl-seasons__scroll {
		margin-right: calc(-1 * var(--sl-gutter));
		padding-right: var(--sl-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.sl-seasons__scroll::-webkit-scrollbar {
		display: none;
	}

	.sl .sl-seasons__ribbon {
		width: calc(var(--sl-seasons-label-w) + 12 * 46px);
	}
}

/* ------------------------------------------------------------------ */
/* V5 / M4 Seat map                                                   */
/* ------------------------------------------------------------------ */

.sl-seatmap {
	padding-top: var(--sl-pad-t, 80px);
	padding-bottom: var(--sl-pad-b, 80px);
}

.sl-seatmap__grid {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 571px);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		". diagram"
		"head diagram"
		"kit diagram"
		". diagram";
	justify-content: space-between;
	column-gap: 48px;
}

.sl-seatmap__head {
	grid-area: head;
}

.sl-seatmap__eyebrow {
	margin-bottom: 16px;
}

.sl-seatmap__text {
	margin-top: 16px;
	color: var(--sl-text);
}

.sl-seatmap__diagram {
	grid-area: diagram;
	min-width: 0;
}

.sl .sl-seatmap__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sl-seatmap__kit {
	grid-area: kit;
	margin-top: 24px;
}

.sl-seatmap__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
}

.sl-seatmap__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--sl-text);
}

.sl-seatmap__icon {
	flex: none;
	color: var(--sl-heading);
}

.sl .sl-seatmap__link {
	margin-top: 24px;
}

/* Diagram parts */
.sl-seatmap__svg text {
	font-family: var(--sl-font-body);
	dominant-baseline: central;
	fill: var(--sl-heading);
}

.sl-seatmap__body {
	fill: var(--sl-card);
	stroke: var(--sl-heading);
	stroke-width: 2;
}

.sl-seatmap__line,
.sl-seatmap__hatch,
.sl-seatmap__line-muted {
	fill: none;
	stroke: var(--sl-heading);
	stroke-width: 1.5;
}

.sl-seatmap__hatch {
	stroke-dasharray: 6 4;
}

.sl-seatmap__line-muted {
	stroke: var(--sl-muted);
}

.sl-seatmap__fill {
	fill: var(--sl-heading);
}

.sl-seatmap__fill-muted {
	fill: var(--sl-muted);
}

.sl .sl-seatmap__front {
	fill: var(--sl-muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-anchor: middle;
	text-transform: uppercase;
}

.sl-seatmap__seat,
.sl-seatmap__seat-note,
.sl-seatmap__row {
	text-anchor: middle;
}

.sl-seatmap__seat {
	font-size: 14px;
}

.sl .sl-seatmap__seat-note {
	fill: var(--sl-muted);
	font-size: 12px;
}

.sl-seatmap__row,
.sl-seatmap__callout {
	font-size: 17px;
	font-weight: 600;
}

.sl-seatmap__callout--left {
	text-anchor: end;
}

@media (max-width: 1024px) {
	.sl-seatmap {
		padding-top: var(--sl-pad-t, 72px);
		padding-bottom: var(--sl-pad-b, 72px);
	}

	.sl-seatmap__grid {
		grid-template-columns: minmax(0, 504px) minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			"head head"
			"diagram kit";
		justify-content: stretch;
		column-gap: 32px;
	}

	.sl-seatmap__head {
		margin-bottom: 40px;
	}

	.sl-seatmap__kit {
		align-self: center;
		margin-top: 0;
	}

	.sl-seatmap__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.sl-seatmap {
		padding-top: var(--sl-pad-t, 56px);
		padding-bottom: var(--sl-pad-b, 56px);
	}

	.sl-seatmap__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"diagram"
			"kit";
	}

	.sl-seatmap__head {
		margin-bottom: 32px;
	}

	.sl-seatmap__diagram {
		width: 100%;
		max-width: 504px;
		margin-inline: auto;
	}

	.sl-seatmap__kit {
		margin-top: 32px;
	}

	.sl-seatmap__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sl .sl-seatmap__link {
		margin-top: 32px;
	}
}

/* ------------------------------------------------------------------ */
/* V5 Light schedule                                                  */
/* ------------------------------------------------------------------ */

.sl-light {
	padding-top: var(--sl-pad-t, 80px);
	padding-bottom: var(--sl-pad-b, 80px);
}

.sl-light__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	align-items: end;
	column-gap: 40px;
	margin-bottom: 40px;
}

.sl-light__eyebrow {
	margin-bottom: 16px;
}

.sl-light__text {
	color: var(--sl-muted);
}

.sl .sl-light__svg {
	display: block;
	width: 100%;
	height: auto;
}

.sl-light__source {
	margin-top: 40px;
	color: var(--sl-muted);
}

/* Chart parts */
.sl-light__svg text {
	font-family: var(--sl-font-body);
	dominant-baseline: central;
	fill: var(--sl-heading);
}

.sl-light__band {
	fill: var(--sl-heading);
	opacity: 0.18;
}

.sl-light__band--twilight {
	opacity: 0.07;
}

.sl-light__grid {
	fill: var(--sl-heading);
	opacity: 0.14;
}

.sl-light__grid--strong {
	opacity: 0.4;
}

.sl-light__ink {
	fill: var(--sl-heading);
}

.sl-light__leader {
	fill: var(--sl-heading);
	opacity: 0.5;
}

.sl-light__tick {
	fill: var(--sl-heading);
	opacity: 0.4;
}

.sl-light__curve {
	fill: none;
	stroke: var(--sl-heading);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sl .sl-light__axis {
	fill: var(--sl-muted);
	font-size: 12px;
}

.sl-light__axis--y {
	text-anchor: end;
}

.sl-light__axis--x,
.sl-light__noon {
	text-anchor: middle;
}

.sl-light__time {
	font-size: 17px;
	font-weight: 600;
}

.sl .sl-light__note {
	fill: var(--sl-muted);
	font-size: 14px;
	font-weight: 400;
}

.sl-light__block--filled {
	fill: var(--sl-heading);
}

.sl-light__block--outline,
.sl-light__block--dashed {
	fill: none;
	stroke: var(--sl-heading);
	stroke-width: 1;
}

.sl-light__block--dashed {
	stroke: var(--sl-c-faint);
	stroke-dasharray: 4 4;
}

.sl-light__block-label {
	font-size: 14px;
}

.sl .sl-light__block-label--filled {
	fill: var(--sl-bg);
}

@media (max-width: 1024px) {
	.sl-light {
		padding-top: var(--sl-pad-t, 72px);
		padding-bottom: var(--sl-pad-b, 72px);
	}

	.sl-light__head {
		display: block;
	}

	.sl-light__text {
		margin-top: 16px;
	}
}

@media (max-width: 767px) {
	.sl-light {
		padding-top: var(--sl-pad-t, 56px);
		padding-bottom: var(--sl-pad-b, 56px);
	}

	/* Full-size chart, scrolled sideways to the right edge. */
	.sl-light__scroll {
		margin-right: calc(-1 * var(--sl-gutter));
		padding-right: var(--sl-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.sl-light__scroll::-webkit-scrollbar {
		display: none;
	}

	.sl .sl-light__svg {
		width: 1200px;
		max-width: none;
	}
}