/**
 * VIDEO BLOCK
 *
 * Width measured from the design: 1400 of 1440 at x=20 — the same near-full-bleed
 * width as the next-lounge CTA card. Height is 16:9 rather than the design's
 * 1.897, so real footage fills the frame instead of letterboxing.
 *
 * Rendered as a facade: the poster and play button are all that load until
 * someone clicks. For an embed that means no YouTube/Vimeo script — and no
 * third-party cookies — on a page nobody may watch.
 */

@layer components {
	.video-block {
		background-color: var(--clr-bg-alt);
		padding-block-end: var(--section-space);
	}

	.video-block__container {
		/* 1400 of 1440, matching the CTA card. */
		inline-size: min(100% - 2.5rem, 87.5rem);
		margin-inline: auto;
	}

	.video-block__frame {
		position: relative;
		/*
		 * 16:9 rather than the design's 1400x738 (1.897). Video itself is 16:9,
		 * so the design ratio would letterbox the real footage inside the frame.
		 * The difference is ~40px of height at full width.
		 */
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-card);
		overflow: hidden;
		background-color: var(--clr-bg-inverse);
	}

	.video-block__frame img,
	.video-block__frame video,
	.video-block__frame iframe {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		border: 0;
		display: block;
	}

	/* The whole poster is the control — a small target on a huge image is mean. */
	.video-block__play {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.video-block__play::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgb(0 0 0 / 0);
		transition: background-color var(--transition-fast);
	}
	.video-block__play:hover::after,
	.video-block__play:focus-visible::after { background-color: rgb(0 0 0 / 0.12); }

	.video-block__icon {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 5.5rem;                 /* 88px */
		block-size: 5.5rem;
		border-radius: 50%;
		background-color: var(--clr-accent);
		transition: transform var(--transition-fast);
	}
	.video-block__play:hover .video-block__icon,
	.video-block__play:focus-visible .video-block__icon { transform: scale(1.06); }

	/* Triangle drawn in CSS. */
	.video-block__icon::before {
		content: "";
		inline-size: 0;
		block-size: 0;
		margin-inline-start: 0.35rem;
		border-block-start: 0.85rem solid transparent;
		border-block-end: 0.85rem solid transparent;
		border-inline-start: 1.4rem solid var(--white);
	}

	@media (max-width: 47.999rem) {
		.video-block__icon { inline-size: 4rem; block-size: 4rem; }
		.video-block__icon::before {
			border-block-start-width: 0.6rem;
			border-block-end-width: 0.6rem;
			border-inline-start-width: 1rem;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.video-block__play:hover .video-block__icon { transform: none; }
	}
}