/**
 * Four-season hero carousel (patterns/hero-seasons-carousel.php).
 *
 * Loaded on the front end only, on pages that contain the carousel, together
 * with assets/js/hero-carousel.js. The script marks the active slide; these
 * styles do all of the animating. In the editor the slides simply stack.
 */

.le-hero-carousel {
	position: relative;
	display: grid;
	overflow: hidden;
	isolation: isolate;
	/* The screen below the header (about 100px), less a little, so the whole hero shows. */
	min-height: calc(100svh - var(--le-header-height, 100px) - 20px);
}

/* Every slide, and the brand block, share one grid cell. */
.le-hero-carousel > .le-slide,
.le-hero-carousel > .le-hero-brand {
	grid-area: 1 / 1;
	margin: 0 !important;
}

.le-hero-carousel > .le-slide {
	min-height: 100% !important;
	padding-top: clamp(120px, 18vh, 220px);
	padding-right: clamp(24px, 11vw, 230px);
	opacity: 0;
	visibility: hidden;
	/* Outgoing: fade out, then hide and reset the headline and subject. */
	transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.le-hero-carousel > .le-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 1.1s ease;
}

/* Before the script runs (or without it), show the first slide as it ends up. */
.le-hero-carousel:not(.is-ready) > .le-slide:first-of-type {
	opacity: 1;
	visibility: visible;
}

/* ---------- The tinted photo ---------- */
/* Darkened a little so light skies take a rich tint rather than a pastel one. */
.le-hero-carousel .le-slide > .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.1) brightness(.8);
}

.le-hero-carousel .le-slide > .wp-block-cover__background {
	mix-blend-mode: color;
	opacity: 1;
}

/* A gentle scrim keeps the headline and the brand block readable. */
.le-hero-carousel .le-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgb(12 26 28 / 45%) 0%, rgb(12 26 28 / 0%) 38%),
		linear-gradient(to top, rgb(12 26 28 / 70%) 0%, rgb(12 26 28 / 0%) 45%);
}

/* ---------- The subject: a same-size cut-out over the photo ---------- */
.le-hero-carousel .le-slide-subject {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0 !important;
	max-width: none !important;
	pointer-events: none;
	/* Undo the editor's checkerboard thumbnail (style.css). */
	background: none !important;
	outline: 0 !important;
	opacity: 0;
	/* Outgoing: stay in color while the slide fades, then reset unseen. */
	transition: opacity 0s linear 1.2s;
}

.le-hero-carousel .le-slide-subject img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.le-hero-carousel .le-slide.is-active .le-slide-subject {
	opacity: 1;
	transition: opacity var(--le-subject-fade, 1.4s) ease var(--le-subject-delay, 2.6s);
}

/* Fallback when a slide has no cut-out: a soft oval of color at the focal point. */
.le-hero-carousel .le-slide-spotlight {
	-webkit-mask-image: radial-gradient(ellipse 26% 42% at var(--le-focus, 50% 50%), #000 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 26% 42% at var(--le-focus, 50% 50%), #000 45%, transparent 100%);
}

/* Slow push-in on the photo and its subject together, so they stay aligned. */
@keyframes le-hero-push {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}

.le-hero-carousel .le-slide.is-active > .wp-block-cover__image-background,
.le-hero-carousel .le-slide.is-active .le-slide-subject img {
	transform-origin: var(--le-origin, 50% 60%);
	animation: le-hero-push 9s ease-out both;
}

/* ---------- Headline: typed in, letter by letter ---------- */
/* Text always sits above the cut-out subject (z-index 2). */
.le-hero-carousel .le-slide > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3 !important; /* Core's cover styles set z-index: 1 with higher specificity. */
}

/*
 * The column is narrow enough that long headlines wrap into short lines,
 * keeping them clear of subjects near the middle (such as the summer slide's
 * Big Red) and above the brand block.
 */
.le-hero-carousel .le-slide-label,
.le-hero-carousel .le-slide-headline {
	margin-left: auto !important;
	margin-right: 0 !important;
	max-width: min(28rem, 30vw);
	text-align: right;
	text-shadow: 0 1px 18px rgb(0 0 0 / 30%);
}

.le-hero-carousel .le-slide-label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0s linear 1.2s;
}

.le-hero-carousel .le-slide.is-active .le-slide-label {
	opacity: .9;
	transition: opacity .8s ease .5s;
}

.le-hero-carousel .le-slide-headline {
	margin-top: .6rem !important;
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: clamp(1.75rem, 3.2vw, 3.3rem);
	font-weight: 300;
	letter-spacing: .05em;
	line-height: 1.12;
	text-transform: uppercase;
}

.le-hero-carousel .le-word {
	display: inline-block;
	white-space: nowrap;
}

.le-hero-carousel .le-char {
	opacity: 0;
	transition: opacity 0s linear 1.2s;
}

.le-hero-carousel .le-slide.is-active .le-char {
	opacity: 1;
	transition: opacity var(--le-char-fade, 350ms) ease calc(var(--le-type-start, 900ms) + var(--le-i, 0) * var(--le-char-step, 42ms));
}

/* ---------- Brand block: fixed over every slide ---------- */
.le-hero-carousel > .le-hero-brand {
	z-index: 4;
	align-self: end;
	pointer-events: none;
}

.le-hero-carousel > .le-hero-brand * {
	pointer-events: auto;
}

.le-hero-carousel > .le-hero-brand h1 {
	text-shadow: 0 1px 24px rgb(0 0 0 / 25%);
}

.le-hero-carousel > .le-hero-brand .is-style-eyebrow:not(.has-text-color) {
	color: inherit;
}

/* ---------- Controls: dots and pause, down the left edge ---------- */
.le-hero-controls {
	position: absolute;
	z-index: 5;
	left: clamp(10px, 2.2vw, 34px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.le-hero-controls button {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.le-hero-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
	transition: opacity .3s ease, transform .3s ease;
}

.le-hero-dot:hover::before,
.le-hero-dot[aria-current="true"]::before {
	opacity: 1;
	transform: scale(1.35);
}

.le-hero-pause {
	margin-top: 10px;
}

/* Pause icon (two bars); becomes a play triangle when paused. */
.le-hero-pause::before {
	content: "";
	width: 10px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
	box-sizing: border-box;
	opacity: .8;
}

.le-hero-carousel.is-paused .le-hero-pause::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent currentColor;
}

.le-hero-controls button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.le-hero-carousel {
		min-height: calc(100svh - 64px);
	}

	.le-hero-carousel > .le-slide {
		padding-top: 72px;
		padding-left: 52px;
		padding-right: 20px;
	}

	.le-hero-carousel .le-slide > .wp-block-cover__inner-container {
		padding-left: 8px;
	}

	/*
	 * The headline spans the screen here and often crosses a light tower, so a
	 * scrim sits above the cut-out (z-index 2) and below the text.
	 */
	.le-hero-carousel .le-slide::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		background: linear-gradient(to bottom, rgb(12 26 28 / 62%) 0%, rgb(12 26 28 / 32%) 28%, rgb(12 26 28 / 0%) 46%);
	}

	.le-hero-carousel .le-slide > .wp-block-cover__inner-container {
		z-index: 4 !important;
	}

	.le-hero-carousel .le-slide-label,
	.le-hero-carousel .le-slide-headline {
		max-width: none;
		margin-left: 0 !important;
		text-align: left;
	}

	.le-hero-carousel .le-slide-headline {
		font-size: 1.6rem;
	}

	.le-hero-carousel > .le-hero-brand {
		padding-left: 52px !important;
	}

	.le-hero-carousel > .le-hero-brand .alignwide {
		margin-left: 0 !important;
	}

	.le-hero-carousel > .le-hero-brand :is(.has-text-align-right, .wp-block-buttons) {
		text-align: left;
		justify-content: flex-start;
	}

	.le-hero-controls {
		top: 72px;
		transform: none;
	}
}

/* ---------- Reduced motion: no typing, fades or push-in ---------- */
.le-hero-carousel.is-reduced *,
.le-hero-carousel.is-reduced > .le-slide {
	animation: none !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
}