/* ============================================================
   Hero Video block
   ============================================================ */

.hero-video {
	background-color: var( --wp--preset--color--marine, #1a2a48 );
}

.hero-video__media {
	position: relative;
	isolation: isolate; /* contain internal z-index layers so they can't outrank content stacked outside this block (e.g. the overlapping cards row) */
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 80vh;
	width: 100%;
}

.hero-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-video__iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 100%;
	height: 56.25vw; /* 16 / 9 based on width */
	min-height: 100%;
	min-width: 177.78vh; /* 16 / 9 based on height */
	border: 0;
	pointer-events: none; /* decorative — all interaction goes through the toggle button */
}

.hero-video__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba( 26, 42, 72, 0.2 ) 0%,
		rgba( 26, 42, 72, 0.9 ) 100%
	);
}

.hero-video__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-inline: 1.5rem;
	color: var( --wp--preset--color--white, #fff );
	pointer-events: none; /* decorative title/subtitle only — never intercept clicks on content behind or overlapping it */
}

.hero-video__title {
	color: var(--wp--preset--color--white, #fff);
	font-size: clamp( 1.75rem, 3.5vw, 2.75rem );
	font-weight: 700;
	margin: 0 0 0.5rem; /* widened at 600px — see breakpoints */
	line-height: 1.2;
}

.hero-video__subtitle {
	font-size: clamp( 1rem, 1.5vw, 1.25rem );
	margin: 0;
	max-width: 60ch;
}

/* Pause / play toggle */
.hero-video__toggle {
	position: absolute;
	z-index: 2;
	bottom: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border: 0;
	border-radius: var( --mooijer-radius-circle, 999rem );
	background: rgba( 26, 42, 72, 0.6 );
	color: var( --wp--preset--color--white, #fff );
	cursor: pointer;
	transition: background var( --mooijer-transition, 0.2s ease );
}

.hero-video__toggle:hover {
	background: rgba( 26, 42, 72, 0.85 );
}

.hero-video__toggle:focus-visible {
	outline: var( --mooijer-focus-width, 3px ) solid var( --mooijer-focus-color, #006da0 );
	outline-offset: var( --mooijer-focus-offset, 2px );
}

.hero-video__toggle-icon {
	display: block;
	width: 0.9rem;
	height: 0.9rem;
	flex-shrink: 0;
	background-color: currentColor;
	/* Pause icon (two bars) by default; JS toggles .is-playing for a play triangle */
	-webkit-mask: linear-gradient( currentColor, currentColor ) center / 30% 100% no-repeat,
		linear-gradient( currentColor, currentColor ) right center / 30% 100% no-repeat;
	mask: linear-gradient( currentColor, currentColor ) center / 30% 100% no-repeat,
		linear-gradient( currentColor, currentColor ) right center / 30% 100% no-repeat;
}

.hero-video__toggle.is-playing .hero-video__toggle-icon {
	-webkit-mask: none;
	mask: none;
	width: 0;
	height: 0;
	background: transparent;
	border-style: solid;
	border-width: 0.5rem 0 0.5rem 0.8rem;
	border-color: transparent transparent transparent currentColor;
}

.hero-video__toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Cards row (adapted from hero-cards — no teaser, no accordion)
   ============================================================ */

.hero-video__cards-wrapper {
	max-width: var( --wp--style--global--wide-size, 1280px );
	margin-inline: auto;
	padding: 1rem; /* widened at 600px — see breakpoints */
}

.hero-video__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; /* switches to row at 600px — see breakpoints */
	gap: 0.75rem;
}

.hero-video__card-item {
	flex: 1 1 0;
	min-width: 0;
}

.hero-video__card {
	display: block;
	position: relative;
	height: 180px; /* grows at 600px and 900px — see breakpoints */
	overflow: hidden;
	border-radius: 8px; /* widened at 600px — see breakpoints */
	text-decoration: none;
	color: var( --wp--preset--color--white, #fff );
}

.hero-video__card:focus-visible {
	outline: var( --mooijer-focus-width, 3px ) solid var( --mooijer-focus-color, #006da0 );
	outline-offset: 2px;
}

.hero-video__card-image {
	position: absolute;
	inset: 0;
}

.hero-video__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.hero-video__card-item:hover .hero-video__card-image img,
.hero-video__card-item:focus-within .hero-video__card-image img {
	transform: scale( 1.04 );
}

.hero-video__card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	padding: 1rem;
	background: linear-gradient( to bottom, rgba(0, 0, 0, 0.72) 0%, transparent 50% );
}

.hero-video__card-title {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
	transition: color var(--mooijer-transition, 0.2s ease),
		font-size var(--mooijer-transition, 0.3s ease);
}

.hero-video__card-item:hover .hero-video__card-title,
.hero-video__card-item:focus-within .hero-video__card-title {
	font-size: clamp(1.5rem, 2.1vw, 1.75rem);
	color: var( --mooijer-blue );
}

/* ============================================================
   Responsive tiers — mobile-first, min-width only.
   600px: row layout for the cards, tablet card height.
   900px: hero switches to a white background and the cards row
          overlaps the video (see 5c-style overlap in theme.css).
   ============================================================ */

@media ( min-width: 600px ) {
	.hero-video__title {
		margin-block-end: 0.75rem;
	}

	.hero-video__cards-wrapper {
		padding: 1.5rem;
	}

	.hero-video__cards {
		flex-direction: row;
		gap: 12px;
	}

	.hero-video__card {
		height: 200px;
		border-radius: 12px;
	}
}

@media ( min-width: 900px ) {
	.hero-video {
		background-color: #ffffff;
	}

	.hero-video__card {
		height: 320px;
	}

	.hero-video__cards-wrapper {
		/* pulls the row up over the video; negative margin (not transform)
		   so the flow height shrinks too and no gap is left underneath */
		margin-block-start: calc(-160px - 1.5rem); /* half of .hero-video__card's 320px height at this breakpoint plus padding */
	}
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media ( prefers-reduced-motion: reduce ) {
	.hero-video__card-image img,
	.hero-video__toggle {
		transition: none;
	}

	.hero-video__card-item:hover .hero-video__card-image img,
	.hero-video__card-item:focus-within .hero-video__card-image img {
		transform: none;
	}
}