/* Video feature (node 2646:5017) — patterns/video-feature.php, #914.
 * Idiom: video-facade (CONTEXT.md). Every rule is scoped under the
 * pattern's own section class; a page hook (.infinitus-section--about-video)
 * is for a page that needs to differ, and About does not.
 *
 * The play button is drawn here, on the figure, so the core/image stays a
 * plain picture. The link inside the figure is the control; the ::after is
 * pointer-events: none so every click reaches it. */

.infinitus-section--video-feature {
	/* Player box, node 2646:5022: 816 x 459, 16:9. */
	--video-feature-player-measure: 816px;
	/* Play circle, node 2646:5023: 120px on the 816 player = 14.7%. Sized as a
	   share of the player so it scales with it below 816. */
	--video-feature-play-size: min(120px, 14.7%);
	/* Label to player: 50 on the node. Intra-section gap, so not subject to
	   the rhythm cut; the theme's rung is sp-12 (48px). */
	--video-feature-gap: var(--wp--preset--spacing--sp-12);
}

/* Node 2646:5020 is the DS Desktop/H4 style: Inter Light 26/1.3, tracking
 * +1.2. --fs-h4 / --lh-h4 land on 26/34 at desktop and step down with the
 * ladder; tracking is the theme's wide rung (1px, the hair rule). Case is
 * the content's, not a transform. Colour is the gray-900 preset on the
 * block, not here. */
.infinitus-section--video-feature .video-feature__label {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: 300;
	letter-spacing: var(--tracking-wide);
	margin-block-end: var(--video-feature-gap);
}

/* The figure is the player's box: capped at the comp measure, full content
 * width below it, always 16:9 (handoff §5). Radius md = 8px, node 2646:5022.
 * `height: auto` because `size-full` is also a Tailwind utility here
 * (height: 100%), see docs/agents/section-patterns.md. The N900 ground is
 * the node's plate colour; core/image has no colour support, and it is what
 * shows behind a replacement poster that is not 16:9. */
.infinitus-section--video-feature .video-feature__poster {
	position: relative;
	width: 100%;
	max-width: var(--video-feature-player-measure);
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	background-color: var(--wp--preset--color--gray-900);
	line-height: 0;
}

.infinitus-section--video-feature .video-feature__poster > a {
	display: block;
	height: 100%;
}

.infinitus-section--video-feature .video-feature__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play circle: the node's own export, its gradient the `cerulean-cyan`
 * preset's stops baked into the SVG (a baked-glow, CONTEXT.md). Centred
 * over the poster; hidden once the player has replaced the link. */
.infinitus-section--video-feature .video-feature__poster::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--video-feature-play-size);
	aspect-ratio: 1;
	translate: -50% -50%;
	background: url("../../images/about/video/play-circle.svg") center / contain no-repeat;
	pointer-events: none;
}

.infinitus-section--video-feature .video-feature__poster > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--cerulean-400);
	outline-offset: -2px;
	border-radius: var(--wp--custom--radius--md);
}

.infinitus-section--video-feature .video-feature__poster.is-playing::after {
	display: none;
}

.infinitus-section--video-feature .video-feature__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}