/* tv-feature.css — tv-feature + tv-feature-carousel ("As Seen on TV"), split out
   of homepage-blocks.css (perf: only the homepages that place them load it).
   Verbatim WP block CSS. */

/* ============ tv-feature/style.css ============ */
/* As Seen on TV - Feature — mobile-first */

.tv-feature {
	--tv-green: #44b175;
	--tv-navy: #004c8d;
	--tv-black: #111111;

	background: #ffffff;
}

.tv-feature__container.grid-container {
	display: block;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.tv-feature__header {
	text-align: center;
	max-width: 66.25rem; /* ~1060px @16px, the Figma headline block width */
	margin: 0 auto 1.5rem;
}

/* Eyebrow — green, Inter Bold, uppercase, ~2.8px tracking (0.2em @14px) */
.tv-feature__eyebrow {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 0.875rem; /* 14px */
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--tv-green);
	margin: 0 0 1rem;
}

/* Headline — black, Inter Bold, centered */
.tv-feature__headline {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.5rem; /* mobile */
	line-height: 1.15;
	color: var(--tv-black);
	margin: 0 0 1rem;
}

/* Subhead — navy, Inter Bold, centered */
.tv-feature__subhead {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.125rem; /* mobile */
	line-height: 1.4;
	color: var(--tv-navy);
	margin: 0 auto;
}

/* Video card — 16:9, rounded, clipped */
.tv-feature__player {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 53.25rem; /* 852px @16px, the Figma card width */
	margin: 0 auto;
	background: #000;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.tv-feature__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

/* White company-logo overlay, top-left. The source logo is full-color, so we
   render it white with a filter to sit over the video. */
.tv-feature__logo {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 10.625rem; /* 170px @16px */
	max-width: 40%;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.tv-feature__logo-img {
	display: block;
	width: 100%;
	height: auto;
}

.tv-feature__player.is-playing .tv-feature__logo {
	opacity: 0;
}

/* Play button — image supplied per design */
.tv-feature__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 3;
	line-height: 0;
	filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.52));
	transition: transform 0.2s ease;
}

.tv-feature__play:hover,
.tv-feature__play:focus {
	transform: translate(-50%, -50%) scale(1.05);
}

.tv-feature__player.is-playing .tv-feature__play {
	display: none;
}

.tv-feature__play-icon {
	display: block;
	width: 5rem; /* ~80px mobile */
	height: auto;
}

/* Tablet / desktop */
@media (min-width: 769px) {
	.tv-feature__container.grid-container {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.tv-feature__headline {
		font-size: 2rem; /* 32px @16px */
	}

	.tv-feature__subhead {
		font-size: 1.5rem; /* 24px @16px */
	}

	.tv-feature__play-icon {
		width: 8.4375rem; /* 135px @16px, the Figma play-button width */
	}
}

/* ============ tv-feature-carousel/style.css ============ */

/* As Seen on TV - Video Carousel — mobile-first */

.tv-feature-carousel {
	--tvc-green: #44b175;
	--tvc-navy: #004c8d;
	--tvc-black: #111111;
	--tvc-bg: #d2e2f2;

	background: var(--tvc-bg);
}

.tv-feature-carousel__container.grid-container {
	display: block;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.tv-feature-carousel__header {
	text-align: center;
	max-width: 66.25rem; /* ~1060px @16px, the Figma headline block width */
	margin: 0 auto 1.5rem;
}

/* Eyebrow — green, Inter Bold, uppercase, ~2.8px tracking (0.2em @14px) */
.tv-feature-carousel__eyebrow {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 0.875rem; /* 14px */
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--tvc-green);
	margin: 0 0 1rem;
}

/* Headline — black, Inter Bold, centered */
.tv-feature-carousel__headline {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.5rem; /* mobile */
	line-height: 1.15;
	color: var(--tvc-black);
	margin: 0 0 1rem;
}

/* Subhead — navy, Inter Bold, centered */
.tv-feature-carousel__subhead {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.125rem; /* mobile */
	line-height: 1.4;
	color: var(--tvc-navy);
	margin: 0 auto;
}

/* Stage holds the swiper + nav row below it */
.tv-feature-carousel__stage {
	position: relative;
	max-width: 53.25rem; /* 852px card @16px */
	margin: 0 auto;
}

.tv-feature-carousel__swiper.swiper {
	overflow: hidden;
}

.tv-feature-carousel__slide {
	width: 100%;
	flex-shrink: 0;
	height: auto;
}

/* Video card — 16:9, rounded, clipped */
.tv-feature-carousel__player {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #000;
	overflow: hidden;
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.28);
}

.tv-feature-carousel__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

/* Black horizontal company logo overlay, top-left */
.tv-feature-carousel__logo {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	width: 8rem;
	max-width: 34%;
	z-index: 2;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.tv-feature-carousel__logo-img {
	display: block;
	width: 100%;
	height: auto;
}

.tv-feature-carousel__player.is-playing .tv-feature-carousel__logo {
	opacity: 0;
}

/* Play button — supplied image */
.tv-feature-carousel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 3;
	line-height: 0;
	filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.52));
	transition: transform 0.2s ease;
}

.tv-feature-carousel__play:hover,
.tv-feature-carousel__play:focus {
	transform: translate(-50%, -50%) scale(1.05);
}

.tv-feature-carousel__player.is-playing .tv-feature-carousel__play {
	display: none;
}

.tv-feature-carousel__play-icon {
	display: block;
	width: 4.5rem; /* mobile */
	height: auto;
}

/* Nav row (prev arrow / pagination dots / next arrow) — cwu-testimonials
   convention. Mobile: a centered flow row below the video. */
.tv-feature-carousel .swiper-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.25rem;
}

.tv-feature-carousel .swiper-nav .swiper-pagination {
	position: static;
	transform: none;
	display: flex;
	align-items: center;
	width: max-content;
	max-width: 100%;
	margin: 0 0.75rem;
}

.tv-feature-carousel .swiper-nav .swiper-pagination > .swiper-pagination-bullet {
	--swiper-pagination-bullet-horizontal-gap: 4px;
	--swiper-pagination-bullet-size: 0.75rem;
	--swiper-pagination-bullet-inactive-color: #fff;
	--swiper-pagination-bullet-inactive-opacity: 1;
	border: 1px solid var(--tvc-navy);
	transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out,
		height 0.3s ease-in-out;
}

.tv-feature-carousel .swiper-nav .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
	--swiper-pagination-color: #004c8d;
	--swiper-pagination-bullet-size: 0.875rem;
}

/* Prev/next arrows — filled navy circle with white chevron (cwu-testimonials) */
.tv-feature-carousel .swiper-arrow {
	position: relative;
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--tvc-navy);
	border-radius: 50%;
	outline: none !important;
	background: var(--tvc-navy);
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.tv-feature-carousel .swiper-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.75rem;
	height: 0.75rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('data:image/svg+xml,%3Csvg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.125 3.89062L0.734375 3.89063L0.734375 3.10938L1.125 3.10938L1.125 3.89062ZM10.2995 3.22379C10.4521 3.37633 10.4521 3.62366 10.2995 3.77621L7.8136 6.26214C7.66105 6.41468 7.41372 6.41468 7.26117 6.26214C7.10862 6.10959 7.10862 5.86226 7.26117 5.70971L9.47088 3.5L7.26117 1.29029C7.10862 1.13774 7.10862 0.890412 7.26117 0.737863C7.41372 0.585315 7.66105 0.585315 7.8136 0.737863L10.2995 3.22379ZM1.125 3.10938L10.0233 3.10937L10.0233 3.89062L1.125 3.89062L1.125 3.10938Z" fill="white" /%3E%3C/svg%3E');
	transition: opacity 0.3s ease-in-out;
}

.tv-feature-carousel .swiper-arrow:first-child {
	transform: rotate(180deg);
}

.tv-feature-carousel .swiper-arrow[disabled] {
	background-color: #fff;
	cursor: default;
}

/* Keep the chevron visible on the white disabled background — swap it to navy. */
.tv-feature-carousel .swiper-arrow[disabled]::after {
	opacity: 0.4;
	background-image: url('data:image/svg+xml,%3Csvg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.125 3.89062L0.734375 3.89063L0.734375 3.10938L1.125 3.10938L1.125 3.89062ZM10.2995 3.22379C10.4521 3.37633 10.4521 3.62366 10.2995 3.77621L7.8136 6.26214C7.66105 6.41468 7.41372 6.41468 7.26117 6.26214C7.10862 6.10959 7.10862 5.86226 7.26117 5.70971L9.47088 3.5L7.26117 1.29029C7.10862 1.13774 7.10862 0.890412 7.26117 0.737863C7.41372 0.585315 7.66105 0.585315 7.8136 0.737863L10.2995 3.22379ZM1.125 3.10938L10.0233 3.10937L10.0233 3.89062L1.125 3.89062L1.125 3.10938Z" fill="%23004C8D" /%3E%3C/svg%3E');
}

/* Tablet / desktop */
@media (min-width: 769px) {
	.tv-feature-carousel__container.grid-container {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.tv-feature-carousel__headline {
		font-size: 2rem; /* 32px @16px */
	}

	.tv-feature-carousel__subhead {
		font-size: 1.5rem; /* 24px @16px */
	}

	.tv-feature-carousel__logo {
		width: 13.4375rem; /* 215px @16px, the Figma logo width */
	}

	.tv-feature-carousel__play-icon {
		width: 8.4375rem; /* 135px @16px */
	}

	.tv-feature-carousel .swiper-arrow {
		width: 2.75rem;
		height: 2.75rem;
	}

	.tv-feature-carousel .swiper-arrow::after {
		width: 0.9rem;
		height: 0.9rem;
	}

	/* Desktop: the stage gets side gutters wide enough to hold an arrow on each
	   side; the video (swiper) fills the space between them. Arrows are pulled
	   out of the nav row and pinned in the gutters, vertically centered on the
	   video. Only the pagination dots remain in the row below. */
	.tv-feature-carousel__stage {
		padding-left: 4.75rem;
		padding-right: 4.75rem;
	}

	/* Center the arrows on the video (not the whole stage): pin each to the
	   video region — top:0 down to the nav strip below — and vertically center
	   with margin:auto. Tracks the video regardless of the dots' size, so no
	   brittle height math. The nav row is ~1.75rem (dots) + 1.25rem margin. */
	.tv-feature-carousel .swiper-arrow {
		position: absolute;
		top: 0;
		bottom: 2.125rem; /* height of the nav row + its top margin */
		margin-top: auto;
		margin-bottom: auto;
		z-index: 4;
	}

	.tv-feature-carousel .swiper-arrow:first-child {
		left: 0;
		transform: rotate(180deg);
	}

	.tv-feature-carousel .swiper-arrow:last-child {
		right: 0;
	}
}

/* Swiper shim (tv-feature-carousel) — WP CDN-loads Swiper 11, whose bundle CSS
 * supplies the track/slide layout and the bullet base styles the rules above
 * only tune via custom properties. The port drives the carousel from React
 * state (TvFeatureCarouselTrack), so those base styles live here. Same approach
 * as the cwu-testimonials shim further up. */
.tv-feature-carousel .swiper-wrapper {
	display: flex;
	transition: transform 0.5s ease; /* Swiper's speed: 500 */
}
.tv-feature-carousel .swiper-slide {
	width: 100%;
	flex-shrink: 0;
}
.tv-feature-carousel .swiper-pagination-bullet {
	width: var(--swiper-pagination-bullet-size, 8px);
	height: var(--swiper-pagination-bullet-size, 8px);
	border-radius: 50%;
	display: inline-block;
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
	background: var(--swiper-pagination-bullet-inactive-color, #000);
	opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
	padding: 0;
	cursor: pointer;
}
.tv-feature-carousel .swiper-pagination-bullet-active {
	background: var(--swiper-pagination-color, #007aff);
	opacity: 1;
}