/* Site utilities — works alongside legacy css.css */

.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

/* Lazy reveal: opacity only (GPU-friendly, no layout thrash) */
[data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Carousel track focus ring for keyboard users */
.wl-carousel-track:focus-visible {
	outline: 2px solid #c50000;
	outline-offset: 2px;
}

/* Program carousel thumbnails (240×135 source assets) */
.wl-carousel-thumb {
	display: block;
	width: 240px;
	max-width: 100%;
	aspect-ratio: 240 / 135;
	height: auto;
	object-fit: cover;
}

.wl-carousel-thumb--lg {
	width: 100%;
	max-width: 550px;
	aspect-ratio: 550 / 310;
}

/* Mobile: one slide per view, fixed thumb ratio, spacing around slides */
@media (max-width: 639px) {
	[data-wl-carousel] .wl-carousel-track {
		container-type: inline-size;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	[data-wl-carousel] .wl-carousel-inner {
		gap: 0.5rem;
	}
	[data-wl-carousel] .wl-carousel-item {
		flex: 0 0 100cqw;
		width: 100cqw;
		max-width: none;
		scroll-snap-stop: always;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0.75rem;
		box-sizing: border-box;
	}
	[data-wl-carousel] .wl-carousel-thumb,
	[data-wl-carousel] .wl-carousel-thumb--lg {
		width: min(240px, 100%);
		max-width: 240px;
		aspect-ratio: 240 / 135;
	}
}

/* Defer off-screen section paint */
[data-reveal],
#zse,
#zse2,
#zse4 {
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

#d0:not(:empty) {
	border: 1px solid rgb(63 63 70 / 0.8);
	border-radius: 0.5rem;
	padding: 1rem 0;
	margin-top: 0.5rem;
	background: rgb(24 24 27 / 0.6);
}

/* Sticky nav: keep home, menu, and search on one row below 640px */
#d4 {
	flex-wrap: nowrap;
}
@media (max-width: 639px) {
	#d6 {
		width: auto;
		padding-left: 0;
	}
}