/* POM Showreels — responsive hover-to-play carousel */

.pom-showreels {
	--sr-accent: var(--color-green-800, #006838);
	--sr-accent-hover: var(--color-green-700, #00994d);
	--sr-surface: var(--color-white, #ffffff);
	--sr-text: var(--color-text, #1d2b23);
	--sr-muted: var(--color-text-muted, #5c6b63);
	--sr-radius: clamp(12px, 1.2vw, 18px);
	--sr-gap: clamp(0.75rem, 2vw, 1.35rem);
	--sr-aspect: 9 / 16;
	--sr-per-view: 4;

	position: relative;
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.pom-showreels *,
.pom-showreels *::before,
.pom-showreels *::after {
	box-sizing: border-box;
}

.pom-showreels__heading {
	text-align: center;
	font-family: var(--font-heading, inherit);
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
	color: var(--sr-accent);
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

/* --- Viewport (nav buttons + track) --- */
.pom-showreels__viewport {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sr-gap);
	width: 100%;
}

.pom-showreels__track {
	display: flex;
	align-items: flex-start;
	gap: var(--sr-gap);
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0;
}

.pom-showreels__track::-webkit-scrollbar {
	display: none;
}

.pom-showreels__slide {
	flex: 0 0 calc((100% - (var(--sr-per-view) - 1) * var(--sr-gap)) / var(--sr-per-view));
	min-width: 0;
	align-self: flex-start;
	scroll-snap-align: start;
}

/* --- Card --- */
.pom-showreels__card {
	display: flex;
	flex-direction: column;
	height: auto;
	background: var(--sr-surface);
	border-radius: var(--sr-radius);
	overflow: hidden;
	box-shadow: none;
}

.pom-showreels__card:hover,
.pom-showreels__card:focus-within {
	box-shadow: none;
}

/* --- Media / video --- */
.pom-showreels__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sr-aspect);
	background: #0c1410;
	overflow: hidden;
	cursor: pointer;
	isolation: isolate;
}

/* Neutralize theme-wide img { height:auto } rules inside reels. */
.pom-showreels img,
.pom-showreels video {
	max-width: none;
}

.pom-showreels__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pom-showreels__poster-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: blur(18px) saturate(1.08);
	transform: scale(1.12);
	opacity: 0.72;
	z-index: 0;
	pointer-events: none;
}

.pom-showreels__video {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
	background: transparent;
}

/* Poster image (YouTube reels; hidden once the frame plays). */
.pom-showreels__poster-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.pom-showreels__card.is-playing .pom-showreels__poster-img,
.pom-showreels__card.is-playing .pom-showreels__poster-bg {
	opacity: 0;
	visibility: hidden;
}

/* YouTube iframe layer — revealed only while playing. */
.pom-showreels__yt {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
	background: #0c1410;
	overflow: hidden;
}

.pom-showreels__card.is-playing .pom-showreels__yt {
	opacity: 1;
}

.pom-showreels__yt-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* YouTube iframe — cover-crop the 16:9 player inside the portrait frame. */
.pom-showreels__card--youtube .pom-showreels__yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 316%;
	height: 100%;
	max-width: none;
	border: 0;
	display: block;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pom-showreels__card.is-playing .pom-showreels__yt iframe {
	pointer-events: auto;
}

.pom-showreels__yt-frame,
.pom-showreels__yt iframe {
	border: 0;
	display: block;
}

.pom-showreels__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%) scale(1);
	--sr-play-size: clamp(3rem, 3.25rem, 4rem);
	width: var(--sr-play-size);
	height: var(--sr-play-size);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--sr-accent);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.pom-showreels__play svg {
	display: block;
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	margin-left: 3px;
}

.pom-showreels__card:hover .pom-showreels__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.pom-showreels__card.is-playing .pom-showreels__play {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
}

/* Loading spinner */
.pom-showreels__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 3px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: pom-sr-spin 0.8s linear infinite;
}

.pom-showreels__card.is-loading .pom-showreels__spinner {
	opacity: 1;
}

.pom-showreels__card.is-loading .pom-showreels__play {
	opacity: 0;
}

@keyframes pom-sr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Playback progress */
.pom-showreels__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 4px;
	background: rgba(255, 255, 255, 0.25);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pom-showreels__card.is-playing .pom-showreels__progress {
	opacity: 1;
}

.pom-showreels__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--sr-accent-hover);
	transition: width 0.15s linear;
}

/* --- Body: title + links --- */
.pom-showreels__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(0.85rem, 1.5vw, 1.15rem);
	flex: 1;
}

.pom-showreels__title {
	font-family: var(--font-heading, inherit);
	font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--sr-accent);
	margin: 0;
}

.pom-showreels__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: auto;
}

.pom-showreels__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: clamp(0.75rem, 0.68rem + 0.2vw, 0.85rem);
	font-weight: 600;
	color: var(--sr-muted);
	text-decoration: none;
	transition: color 0.25s ease, gap 0.25s ease;
}

.pom-showreels__link svg {
	flex: 0 0 auto;
	opacity: 0.6;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.pom-showreels__link:hover {
	color: var(--sr-accent);
	gap: 0.5rem;
}

.pom-showreels__link:hover svg {
	opacity: 1;
	transform: translate(2px, -2px);
}

/* --- Nav buttons --- */
.pom-showreels__nav {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--sr-accent);
	background: var(--sr-surface);
	color: var(--sr-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.pom-showreels__nav:hover {
	background: var(--sr-accent);
	color: var(--sr-surface);
}

.pom-showreels__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.pom-showreels__nav:disabled:hover {
	background: var(--sr-surface);
	color: var(--sr-accent);
}

/* --- Responsive --- */
@media (max-width: 1199.98px) {
	.pom-showreels {
		--sr-per-view: 3;
	}
}

@media (max-width: 991.98px) {
	.pom-showreels {
		--sr-per-view: 2.4;
	}
}

@media (max-width: 767.98px) {
	.pom-showreels {
		--sr-per-view: 1.8;
	}

	.pom-showreels__nav {
		display: none;
	}
}

@media (max-width: 479.98px) {
	.pom-showreels {
		--sr-per-view: 1.15;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pom-showreels__track {
		scroll-behavior: auto;
	}

	.pom-showreels__card,
	.pom-showreels__play,
	.pom-showreels__link,
	.pom-showreels__link svg {
		transition: none;
	}
}