/* blocks/video-section
 *
 * One large video. The frame is sized by aspect-ratio rather than a fixed
 * height, so it scales with the width setting and never letterboxes:
 *   .width-container — 900px, centred
 *   .width-wide      — up to 1180px, still inside the 1388px container
 *   .width-full      — edge to edge
 * and .ratio-16-9 / .ratio-21-9 / .ratio-4-3 pick the shape.
 */

.section-video {
	--ratio: 16 / 9;
	padding: 80px var(--container-gutter);
}

/* Full Width is meant to reach the screen edge, so it opts out of the gutter
 * the other widths keep. */
.section-video.width-full {
	padding-inline: 0;
}

.section-video .section-head {
	margin-bottom: 34px;
	text-align: center;
}

.section-video .section-head .content {
	max-width: 900px;
	margin: 14px auto 0;
}

/* --- Ratios ------------------------------------------------------------- */
.section-video.ratio-16-9 { --ratio: 16 / 9; }
.section-video.ratio-21-9 { --ratio: 21 / 9; }
.section-video.ratio-4-3  { --ratio: 4 / 3; }

/* --- Widths ------------------------------------------------------------- */
.section-video .video-wrap {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 12px;
	background-color: #000;
	aspect-ratio: var(--ratio);
}

/* Wider than the Container setting, but still short of the 1388px container so
 * the video reads as a feature rather than filling the screen. */
.section-video.width-wide .video-wrap {
	max-width: 1180px;
}

/* Full bleed by relaxing the container rather than sizing the frame to 100vw:
 * 100vw includes the scrollbar on desktop, which pushes a horizontal scrollbar
 * onto the whole page. Widening .container has no such side effect. */
.section-video.width-full .container {
	max-width: none;
	padding-inline: 0;
}

.section-video.width-full .video-wrap {
	max-width: none;
	border-radius: 0;
}

/* The heading shares that now-unpadded container, so give it its own gutter
 * instead of letting the text run to the screen edge. */
.section-video.width-full .section-head {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* --- Players ------------------------------------------------------------ */
.section-video .video-player,
.section-video .video-embed,
.section-video .video-embed iframe,
.section-video .video-facade {
	display: block;
	width: 100%;
	height: 100%;
}

.section-video .video-player {
	object-fit: cover;
	background-color: #000;
}

.section-video .video-embed iframe {
	border: 0;
}

/* --- Click-to-play facade ----------------------------------------------
 * A real <button> so it's keyboard reachable; the script replaces it with the
 * player on click (assets/custom.js → "Video section facade").
 */
.section-video .video-facade {
	position: relative;
	padding: 0;
	border: 0;
	/* Dark fill so the play button still reads when no poster is set. */
	background-color: var(--primary-color);
	cursor: pointer;
	appearance: none;
}

/* Label under the button in the no-poster case, where an unexplained circle on
 * a flat panel is ambiguous. */
.section-video .video-hint {
	position: absolute;
	top: calc(50% + 66px);
	left: 50%;
	transform: translateX(-50%);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 17px;
	letter-spacing: .04em;
	white-space: nowrap;
}

.section-video .video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease, opacity .3s ease;
}

.section-video .video-facade:hover .video-poster,
.section-video .video-facade:focus-visible .video-poster {
	transform: scale(1.03);
	opacity: .88;
}

.section-video .video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background-color: rgba(60, 82, 33, .82);
	color: var(--white);
	transition: background-color .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.section-video .video-facade:hover .video-play,
.section-video .video-facade:focus-visible .video-play {
	background-color: var(--secondary-color);
	transform: translate(-50%, -50%) scale(1.08);
}

/* Autoplay/background mode: no controls to click, so no pointer either. */
.section-video.is-autoplay .video-player {
	pointer-events: none;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	.section-video {
		padding: 60px var(--container-gutter);
	}

	.section-video .section-head {
		margin-bottom: 26px;
	}

	/* Container gutter already inset it — nothing extra to do for Wide here. */
}

@media (max-width: 767px) {
	.section-video {
		padding: 50px var(--container-gutter);
	}

	/* A 21:9 crop is unwatchable on a phone — fall back to 16:9. */
	.section-video.ratio-21-9 {
		--ratio: 16 / 9;
	}

	.section-video .video-play {
		width: 64px;
		height: 64px;
	}

	.section-video .video-play svg {
		width: 26px;
		height: 26px;
	}

	.section-video .video-hint {
		top: calc(50% + 50px);
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section-video .video-poster,
	.section-video .video-play {
		transition: background-color .3s ease;
	}

	.section-video .video-facade:hover .video-poster,
	.section-video .video-facade:focus-visible .video-poster,
	.section-video .video-facade:hover .video-play,
	.section-video .video-facade:focus-visible .video-play {
		transform: translate(-50%, -50%);
	}

	.section-video .video-facade:hover .video-poster,
	.section-video .video-facade:focus-visible .video-poster {
		transform: none;
	}
}