/* ============================================================
   LTF CT LIVE — Video Wall ([ctlive_video_wall])
   Main stage + cam-tile rail + gold HAPPENING NOW timeline.

   Built to the Leadville hub design system (references/design-system.md),
   modeled on the COMPLIANT ltf-weather card — not the legacy inline hub
   block (whose 11px/13px text + 3px radius is exactly what this replaces):
     - tokens below are the measured site values (gold/ink/body/muted/line)
     - font-family: inherit (the Leadville theme face)
     - size in em off the 18px body — NEVER rem (Total's 10px root makes
       rem render ~40% too small)
     - SQUARED corners (the mockup + rail modules are squared, not rounded)
   Prefix: ltf-ct-vw-  (sibling-safe with ltf-ct- leaderboard styles)
   ============================================================ */

.ltf-ct-video-wall {
	/* Measured Leadville hub tokens (design-system.md → "Tokens"). */
	--vw-gold:  #c2a14d;
	--vw-navy:  #1f2a44;
	--vw-ink:   #1a1a1a;
	--vw-body:  #4c4c4c;
	--vw-muted: #6f6f6f;
	--vw-line:  #e3e3e3;
	--vw-live:  #cc2200; /* HAPPENING-NOW live accent (timeline gets its own spec) */

	font-family: inherit;
	color: var(--vw-ink);
}

.ltf-ct-vw__config {
	display: none;
}

/* Section header — matches the hub's main-column gold left-border <h2>
   (renders at the theme h2 size, ~36px, like the "Highlights" header). */
.ltf-ct-vw__heading {
	margin: 0 0 0.5em;
	border-left: 4px solid var(--vw-gold);
	padding-left: 12px;
	font-family: inherit;
	color: var(--vw-ink);
}

/* ------------------------------------------------------------
   Cam tile rail
   ------------------------------------------------------------ */
.ltf-ct-vw__rail {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
}

.ltf-ct-vw__tile {
	min-width: 0;
}

/* Label bar above each media box (sits OUTSIDE the iframe so clicks land
   reliably — the promote hit-target). */
.ltf-ct-vw__label-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 6px;
}

.ltf-ct-vw__label {
	display: inline-flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.ltf-ct-vw__label-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8em;           /* ~14px — readable, off the 18px body (was a tiny ~11px) */
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--vw-ink);
}

.ltf-ct-vw__label:hover .ltf-ct-vw__label-text {
	color: var(--vw-gold);
}

/* Expand-to-main icon — high-contrast by DEFAULT (gold fill, black glyph),
   readable without hovering. Squared. The corner affordance that pairs with
   the hover "Spotlight" pill over the media. */
.ltf-ct-vw__expand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vw-gold);
	color: #000000;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ltf-ct-vw__expand:hover,
.ltf-ct-vw__expand:focus-visible {
	background: var(--vw-ink);
	color: #ffffff;
}

/* ------------------------------------------------------------
   Media box (16:9). Holds the YT iframe, the poster still, and the
   offline overlay, stacked.
   ------------------------------------------------------------ */
.ltf-ct-vw__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000000;
	overflow: hidden;
}

/* aspect-ratio fallback for old engines. */
@supports not ( aspect-ratio: 16 / 9 ) {
	.ltf-ct-vw__media {
		height: 0;
		padding-bottom: 56.25%;
	}
}

.ltf-ct-vw__media iframe,
.ltf-ct-vw__player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 0;
}

/* The poster sits ABOVE a paused/idle iframe (a demoted poster-mode tile keeps its
   moved iframe, paused — the still must cover it, not show a black box). */
.ltf-ct-vw__poster-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}

/* Once a slot is the live stage (is-playing), reveal the player by dropping the still. */
.ltf-ct-vw__media.is-playing .ltf-ct-vw__poster-img {
	display: none;
}

/* ---- hover spotlight affordance ----
   People look at the video, not the label bar. On tile hover we dim the cam and
   reveal a centered "Spotlight" pill (it carries data-promote like the icon +
   label) so it reads as "click this cam to bring it to the main player". */
.ltf-ct-vw__tile .ltf-ct-vw__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba( 0, 0, 0, 0.32 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.ltf-ct-vw__tile:hover .ltf-ct-vw__media::after {
	opacity: 1;
}

.ltf-ct-vw__spotlight {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) translateY( 5px );
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.5em 1em;
	border: 0;
	background: var(--vw-gold);
	color: #000000;
	font-family: inherit;
	font-size: 0.8em;           /* ~14px */
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.ltf-ct-vw__spotlight-icon {
	font-size: 1.15em;
	line-height: 1;
}

.ltf-ct-vw__tile:hover .ltf-ct-vw__spotlight,
.ltf-ct-vw__spotlight:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate( -50%, -50% );
}

/* Offline / not-yet-live state — graceful poster + label, never a raw YT error. */
.ltf-ct-vw__offline {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.55 );
	z-index: 2;
}

/* A class selector beats the UA [hidden]{display:none}, so restore it explicitly. */
.ltf-ct-vw__offline[hidden] {
	display: none;
}

.ltf-ct-vw__offline-text {
	padding: 0.4em 0.8em;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
}

/* ------------------------------------------------------------
   Timeline strip — gold HAPPENING NOW / COMING UP buttons.
   ------------------------------------------------------------ */
.ltf-ct-vw__timeline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 24px 0 18px;
}

/* NOTE: the timeline strip's STRUCTURE/LAYOUT is intentionally untouched here —
   it gets its own spec (segmented live-windows/BREAK track). This pass only maps
   it onto the shared tokens + type scale + squared corners so it isn't an outlier. */
.ltf-ct-vw__now-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--vw-live);
}

.ltf-ct-vw__now-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vw-live);
}

.ltf-ct-vw__coming-label {
	margin-right: 4px;
	font-size: 0.78em;
	color: var(--vw-muted);
}

.ltf-ct-vw__seek {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0.5em 0.9em;
	border: 0;
	border-radius: 0;          /* squared, per the module rule + mockup */
	background: var(--vw-gold);
	color: #000000;
	font-family: inherit;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
}

.ltf-ct-vw__seek:hover {
	background: #b08f3d;
}

.ltf-ct-vw__seek-sub {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.8;
}

/* ------------------------------------------------------------
   Main stage
   ------------------------------------------------------------ */
.ltf-ct-vw__main {
	position: relative;
}

.ltf-ct-vw__main .ltf-ct-vw__label-text {
	font-size: 0.9em;           /* ~16px — the main stage label leads the rail */
	color: var(--vw-ink);
}

/* The active stage carries the gold "now playing" border (NBA multiview). */
.ltf-ct-vw__main.is-active .ltf-ct-vw__main-media {
	box-shadow: 0 0 0 3px var(--vw-gold);
}

/* Tap-for-sound affordance (main autoplays muted). */
.ltf-ct-vw__sound {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0.55em 0.9em;
	border: 0;
	border-radius: 0;          /* squared */
	background: rgba( 0, 0, 0, 0.78 );
	color: #ffffff;
	font-family: inherit;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.ltf-ct-vw__sound:hover {
	background: var(--vw-gold);
	color: #000000;
}

.ltf-ct-vw__sound[hidden] {
	display: none;
}

/* ------------------------------------------------------------
   Responsive — the all-cams-live effect is a desktop experience;
   the rail stacks on small screens so nothing breaks (PRD §3).
   ------------------------------------------------------------ */
@media ( max-width: 600px ) {
	.ltf-ct-vw__rail {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 420px ) {
	.ltf-ct-vw__rail {
		grid-template-columns: 1fr;
	}
}

/* ---- scheduled feed windows ----
   A feed can carry a live window, for a broadcast split across several YouTube
   links (YouTube caps DVR at 12 hours, so a 30 hour race needs more than one).
   A feed outside its window stays in the DOM so the JS can hand over on the exact
   second without a page load, but it is not shown: an ended stream in the rail
   reads as a second live feed, and a stream that has not started reads as broken. */
.ltf-ct-video-wall .ltf-ct-vw__tile.is-out-of-window {
	display: none;
}