/* Film strip carousel (Splide) */
.film {
	--hole: #f4f1e8; /* set to your page background so holes look punched out */
	--holes: repeating-linear-gradient(
		90deg,
		transparent 0 8px,
		var(--hole) 8px 22px,
		transparent 22px 30px
	);
	position: relative;
	padding: 0; /* strip fills the full container width */
	margin: 0;
}

/* Vertical padding only. Horizontal inset is set in JS (Splide's padding option)
   so the slide widths are calculated correctly. */
.film .splide__track {
	padding-top: 38px;
	padding-bottom: 38px;
	border-radius: 4px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
	background: var(--holes) left 0 top 12px / 100% 14px no-repeat,
	var(--holes) left 0 bottom 12px / 100% 14px no-repeat,
	#141414;
}

.film .splide__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* each slide is a frame */
.film .splide__slide {
	border: 3px solid #050505;
	outline: 1px solid #2a2a2a;
	overflow: hidden;
	filter: sepia(0.25) contrast(1.05) saturate(0.9);
	transition: filter 0.2s;
}

.film .splide__slide:hover {
	filter: none;
}

.film .splide__slide:has(.film-youtube-card) {
	border: 0;
	outline: 0;
}

.film .splide__slide iframe,
.film .splide__slide > * {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* block-editor group + embed cleanup */
.film.wp-block-group {
	display: block;
}

.film .wp-block-embed,
.film .wp-block-embed__wrapper {
	margin: 0;
	height: auto;
	aspect-ratio: 16 / 9;
}

.film .wp-block-embed:has(.film-youtube-card),
.film .wp-block-embed__wrapper:has(.film-youtube-card) {
	display: contents;
}

.film .wp-block-embed__wrapper:has(.film-youtube-card)::before {
	display: none !important;
	content: none !important;
	padding-top: 0 !important;
}

/* Captions: overlay the caption on top of the video frame */
.film .wp-block-embed:has(> figcaption) {
	display: block;
	position: relative;
	overflow: hidden;
}

.film .wp-block-embed:has(> figcaption) .wp-block-embed__wrapper {
	display: block;
	margin: 0;
}

.film .wp-block-embed > figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	margin: 0;
	padding: 0.9rem 0.6rem 0.35rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92), transparent);
	color: #fff;
	font-weight: 700;
	font-size: clamp(0.65rem, 1.2vw, 0.85rem);
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
	text-align: left;
	pointer-events: none;
}

/* Use a simple thumbnail card instead of YouTube's embedded player controls. */
.film .film-youtube-card {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #050505;
	color: #f4f1e8;
	text-decoration: none;
}

.film .film-youtube-card img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.film .film-youtube-card span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.6rem 0.75rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
	font-size: clamp(0.65rem, 1.2vw, 0.85rem);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.film-video-modal {
	width: min(90vw, 1100px, calc((100vh - 2rem) * 16 / 9));
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	background: #050505;
}

.film-video-modal::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.film-video-modal__frame {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.film-video-modal iframe {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.film-video-modal__close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #f4f1e8;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

/* Arrows: sit OUTSIDE the strip, in the page margin */
.film.splide .splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: none;
	opacity: 1 !important;
	cursor: pointer;
	transition: background 0.2s;
	z-index: 2;
}

.film.splide .splide__arrow--prev {
	left: -53px;
}

.film.splide .splide__arrow--next {
	right: -53px;
}

.film.splide .splide__arrow svg {
	fill: #141414; /* dark icon by default */
	width: 30px; /* icon size */
	height: 30px;
	transition: fill 0.2s;
}

/* Splide's default arrow points right; flip it for "previous" */
.film.splide .splide__arrow--prev svg {
	transform: scaleX(-1);
}

/* background only appears on hover */
.film.splide .splide__arrow:hover:not(:disabled) {
	background: #c8102e !important;
}

.film.splide .splide__arrow:hover:not(:disabled) svg {
	fill: #f4f1e8;
}

.film.splide .splide__arrow:disabled {
	display: none;
}

/* Keep arrows outside the strip, bringing them closer on narrower screens. */
@media (max-width: 1000px) {
	.film.splide .splide__arrow {
		width: 40px;
		height: 40px;
	}

	.film.splide .splide__arrow svg {
		width: 24px;
		height: 24px;
		fill: #141414;
	}

	.film.splide .splide__arrow--prev {
		left: -41px;
	}

	.film.splide .splide__arrow--next {
		right: -41px;
	}
}

@media (max-width: 781px) {
	.film.splide .splide__arrow {
		width: 36px;
		height: 36px;
	}

	.film.splide .splide__arrow--prev {
		left: -36px;
	}

	.film.splide .splide__arrow--next {
		right: -36px;
	}
}

@media (max-width: 600px) {
	.film.splide .splide__arrow {
		width: 28px;
		height: 28px;
	}

	.film.splide .splide__arrow svg {
		width: 20px;
		height: 20px;
	}

	.film.splide .splide__arrow--prev {
		left: -28px;
	}

	.film.splide .splide__arrow--next {
		right: -28px;
	}
}