/* ==========================================================================
   Hero video thumbnail on the shared landing layout (template-parts/landing.php), JT 2026-11-02.
   Loaded only by pages that pass 'thumb' (Chronic Fatigue), after main.css. Built exactly like
   .vet-thumb in veterans.css, which stays separate so /veterans/ can't change.
   ========================================================================== */

.landing-thumb {
	--play-x: 50%;
	position: relative;
	display: block;
	margin-top: 24px;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.landing-thumb__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.landing-thumb__play {
	position: absolute;
	left: var(--play-x);
	top: 50%;
	width: 26%;
	height: auto;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform 0.25s ease;
}
/* The intro paragraph sits under the thumbnail (JT, 2026-11-02): a little more room than under the headline. */
.landing-thumb + .hero__lede--landing { margin-top: 20px; }

.landing-thumb:hover,
.landing-thumb:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 28px rgba(126, 211, 33, 0.35);
}
.landing-thumb:hover .landing-thumb__play,
.landing-thumb:focus-visible .landing-thumb__play { transform: translate(-50%, -50%) scale(1.08); }
.landing-thumb:focus-visible { outline: 2px solid var(--zen-white); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.landing-thumb, .landing-thumb__play { transition: none; }
	.landing-thumb:hover, .landing-thumb:focus-visible { transform: none; }
}