/**
 * Hero Carousel — center stage flanked by faded "peek" previews of the
 * neighboring slides. Peeks are also click targets for prev/next.
 */

.zozia-hero-carousel__viewport {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 480px;
}

.zozia-hero-carousel__peek {
	position: relative;
	flex: 0 0 180px;
	width: 180px;
	height: 480px;
	overflow: hidden;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
}

.zozia-hero-carousel__peek-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.zozia-hero-carousel__peek::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.zozia-hero-carousel__peek--prev::after {
	background: linear-gradient(to left, transparent, var(--wp--preset--color--white));
}

.zozia-hero-carousel__peek--next::after {
	background: linear-gradient(to right, transparent, var(--wp--preset--color--white));
}

.zozia-hero-carousel__stage {
	position: relative;
	flex: 1 1 auto;
	height: 480px;
	overflow: hidden;
}

.zozia-hero-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.zozia-hero-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.zozia-hero-carousel__slide-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Replaced a background-image; object-fit reproduces `background-size:
	   cover` now that the slide art is a real <img> (see the pattern for why). */
	object-fit: cover;
}

.zozia-hero-carousel__slide-content {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 48px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
}

.zozia-hero-carousel__slide-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

.zozia-hero-carousel__slide-subtitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--white);
	max-width: 380px;
}

.zozia-hero-carousel__slide-cta {
	align-self: flex-start;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.zozia-hero-carousel__slide-cta:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.zozia-hero-carousel__control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: none;
	background-color: rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.zozia-hero-carousel__control svg {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--white);
	display: block;
}

.zozia-hero-carousel__control--prev {
	left: 16px;
}

.zozia-hero-carousel__control--next {
	right: 16px;
}

.zozia-hero-carousel__control:hover {
	background-color: rgba(0, 0, 0, 0.4);
}

.zozia-hero-carousel__playpause {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: none;
	background-color: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.zozia-hero-carousel__playpause svg {
	width: 14px;
	height: 14px;
	color: var(--wp--preset--color--white);
	display: block;
}

.zozia-hero-carousel__icon-play {
	display: none;
}

.zozia-hero-carousel__playpause.is-paused .zozia-hero-carousel__icon-pause {
	display: none;
}

.zozia-hero-carousel__playpause.is-paused .zozia-hero-carousel__icon-play {
	display: block;
}

.zozia-hero-carousel__badge {
	position: absolute;
	right: 16px;
	bottom: 24px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 2;
	text-decoration: none;
}

.zozia-hero-carousel__badge span {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.zozia-hero-carousel__badge:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* Below this width the peeks no longer have room; stage takes full width. */
@media (max-width: 900px) {
	.zozia-hero-carousel__peek {
		display: none;
	}

	.zozia-hero-carousel__viewport,
	.zozia-hero-carousel__stage {
		height: 400px;
	}
}

@media (max-width: 599px) {
	.zozia-hero-carousel__viewport,
	.zozia-hero-carousel__stage {
		height: 320px;
	}

	.zozia-hero-carousel__slide-content {
		padding: 24px;
		max-width: 100%;
	}

	.zozia-hero-carousel__slide-title {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.zozia-hero-carousel__slide-subtitle {
		max-width: 100%;
	}

	/*
	 * The controls are vertically centred, which works while the stage is tall.
	 * At this size the stage drops to 320px and the bottom-anchored copy grows
	 * to meet the middle, so the arrows land on top of the slide title —
	 * measured at 390px, a 28x34px overlap on each side, clipping the first
	 * word. Pair them in the top-right instead: clear of the copy below and of
	 * the play/pause button in the top-left.
	 */
	.zozia-hero-carousel__control {
		top: 20px;
		transform: none;
		width: 32px;
		height: 32px;
	}

	.zozia-hero-carousel__control--prev {
		left: auto;
		right: 58px;
	}

	.zozia-hero-carousel__control--next {
		right: 16px;
	}
}