/*------------------------------------
 * Video Series row (template-parts/flex/flex-videos.php)
 *
 * Hand-authored, NOT part of the gulp/SASS build -- style.css at the theme
 * root is a build artifact and node-sass no longer compiles here.
 * See CLAUDE.md -> Build pipeline.
 *
 * Breakpoints follow the theme's ladder (_screen-sizes.scss): 783 =
 * $bp-tablet-s, 980 = $bp-tablet, 1280 = $bp-nav.
 *-----------------------------------*/

.videos__wrap {
	--vid-navy: #143250;
	--vid-teal: #1dc2bb;
	--vid-teal-text: #00857e;
	--vid-gray: #6a747c;
}

.videos--navy {
	background-color: var(--vid-navy);
	color: #fff;
}

/* Header
   - - - - - - - - - - - - - - - - - - - - - - - - - */
.videos__header {
	max-width: 46em;
	margin-bottom: 40px;
}

.videos__eyebrow {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--vid-teal-text);
}

.videos--navy .videos__eyebrow {
	color: var(--vid-teal);
}

.videos__header h2 {
	margin-bottom: 16px;
}

.videos--navy .videos__header h2 {
	color: #fff;
}

.videos__lede {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.5;
}

.videos--navy .videos__lede {
	color: #c8d8e6;
}

/* Grid
   - - - - - - - - - - - - - - - - - - - - - - - - - */
.videos__lead {
	margin-bottom: 40px;
}

.videos__grid {
	display: grid;
	gap: 32px;
}

.videos__note {
	margin: 28px 0 0;
	font-size: 14px;
	color: var(--vid-gray);
}

.videos--navy .videos__note {
	color: #8ea4b8;
}

/* Facade
   - - - - - - - - - - - - - - - - - - - - - - - - - */
.videofacade {
	margin: 0;
}

.videofacade__btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--vid-navy);
	cursor: pointer;
	overflow: hidden;
}

.videofacade__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.videofacade__btn:hover .videofacade__poster,
.videofacade__btn:focus-visible .videofacade__poster {
	transform: scale(1.03);
	opacity: 0.88;
}

.videofacade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 68px;
	height: 48px;
	pointer-events: none;
}

.videofacade__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The theme's own teal rather than YouTube red -- this is a Unify page, and
   the player chrome only appears once the real embed loads. Solid teal, not a
   translucent navy: poster frames run from near-black to near-white and a
   washed-out button vanishes on the dark ones. */
.videofacade__play-bg {
	fill: var(--vid-teal);
	transition: fill 0.25s ease;
}

.videofacade__play-arrow {
	fill: #fff;
}

.videofacade__play svg {
	filter: drop-shadow(0 4px 14px rgba(6, 22, 38, 0.45));
}

.videofacade__btn:hover .videofacade__play-bg,
.videofacade__btn:focus-visible .videofacade__play-bg {
	fill: var(--vid-teal-text);
}

/* The reset predates :focus-visible and puts a UA ring on bare button:focus. */
.videofacade__btn:focus {
	outline: none;
}

.videofacade__btn:focus-visible {
	outline: 3px solid var(--vid-teal);
	outline-offset: 3px;
}

.videofacade__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.videofacade__caption {
	padding-top: 14px;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--vid-navy);
}

.videos--navy .videofacade__caption {
	color: #fff;
}

.videofacade__label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--vid-teal-text);
}

.videos--navy .videofacade__label {
	color: var(--vid-teal);
}

.videofacade--lead .videofacade__caption {
	font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.videofacade__poster {
		transition: none;
	}

	.videofacade__btn:hover .videofacade__poster,
	.videofacade__btn:focus-visible .videofacade__poster {
		transform: none;
	}
}

@media (min-width: 783px) {
	.videos__header {
		margin-bottom: 48px;
	}

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

	.videofacade--lead .videofacade__play {
		width: 96px;
		height: 68px;
	}
}

@media (min-width: 980px) {
	.videos__lead {
		margin-bottom: 56px;
	}

	.videos__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px;
	}

	.videofacade__caption {
		font-size: 17px;
	}

	.videofacade--lead .videofacade__caption {
		font-size: 24px;
	}

	/* The lead video is the section's anchor, not a full-bleed band. Half the
	   container, so it sits on the same measure as the two-column CTA rows
	   above it rather than reading as a third, wider column. */
	.videos__lead .videofacade {
		max-width: 50%;
	}
}