/**
 * Hero banner slider.
 *
 * Loaded only on pages that actually contain the slider pattern.
 */

.spring-slider,
.spring-slider *,
.spring-slider *::before,
.spring-slider *::after {
	box-sizing: border-box;
}

.spring-slider {
	background-color: var( --wp--preset--color--ink );
	display: grid;
	overflow: hidden;
	position: relative;
}

/*
 * The slides stack in one cell. min-height is still stated here rather than
 * left to the cover blocks: a client is free to change one cover's height in
 * the editor, and slides of differing heights would make the hero jump on
 * every transition. This keeps the frame steady whatever they set.
 */
.spring-slider > .wp-block-cover {
	min-height: min( 86vh, 800px );
}

/* The controls are the one child that is not a slide. */
.spring-slider > .spring-slider__controls {
	grid-area: 1 / 1;
}

/* Every slide occupies the same grid cell; only the active one is painted. */

/*
 * The arriving slide fades in over the departing one, which holds at full
 * opacity underneath until it is covered and only then cuts away. Fading both
 * at once let the ink backing show through the pair — measured at 23% black at
 * the midpoint — so the hero dipped dark in the middle of every transition.
 */
/*
 * The overlap belongs to the carousel, not to the slides, so it waits for the
 * script. Left unconditional it also applied inside the editor, where nothing
 * ever adds `is-ready` and no slide is `is-active` — every cover collapsed to
 * display:none and the client opened the page to a hero of zero height and
 * nothing to edit. In flow they simply stack, which is what both the editor
 * and a browser without JavaScript should see.
 */
.spring-slider > .wp-block-cover {
	position: relative;
}

.spring-slider.is-ready > .wp-block-cover {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0s ease 0.9s, visibility 0s 0.9s;
	visibility: hidden;
}

.spring-slider.is-ready > .wp-block-cover.is-active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.9s ease;
	visibility: visible;
	z-index: 1;
}

/*
 * On a page that has JavaScript, hold everything but the first slide back until
 * the script boots, so the hero never flashes four heroes tall. The class is
 * set in the document head; the editor never sets it, and neither does a
 * browser with scripting off, so both keep every slide.
 */
.spring-js .spring-slider:not( .is-ready ) > .wp-block-cover:nth-child( n + 2 ) {
	display: none;
}

.spring-slider .wp-block-cover__image-background {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.spring-slider .wp-block-cover__background {
	/*
	 * Core dims a cover by giving this span a flat colour at a fixed opacity.
	 * The gradient below replaces the colour and has its own alpha, so both of
	 * those have to be undone or the scrim comes out uniformly grey and the
	 * left-hand darkening the headline sits on is lost.
	 */
	background-color: transparent;
	opacity: 1;
	background: linear-gradient(
		100deg,
		rgba( 20, 20, 20, 0.78 ) 0%,
		rgba( 20, 20, 20, 0.55 ) 42%,
		rgba( 20, 20, 20, 0.18 ) 78%
	);
	inset: 0;
	position: absolute;
}

/*
 * The gutter is added to the max-width rather than taken out of it, because
 * box-sizing is border-box here and the padding would otherwise be spent inside
 * the wide measure — which put the headline 28px to the right of the wordmark
 * above it. Core's constrained layout keeps the two apart: the gutter lives on
 * the outer group and the wide measure on the .alignwide child, so the child
 * gets the whole 1320px. This element is playing both parts at once, so it has
 * to carry the sum. Past that width the extra is split by the auto margins and
 * lands back as the gutter; below it, width:100% clamps and the padding is the
 * gutter directly. Both cases put the copy on the same line as the header.
 */
.spring-slider .wp-block-cover__inner-container {
	margin-inline: auto;
	max-width: calc( var( --wp--style--global--wide-size, 1320px ) + 2 * var( --wp--preset--spacing--20 ) );
	padding-block: var( --wp--preset--spacing--50 ) calc( var( --wp--preset--spacing--50 ) + 3rem );
	padding-inline: var( --wp--preset--spacing--20 );
	position: relative;
	width: 100%;
}

.spring-slider__eyebrow {
	color: #9DBBA5;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.18em;
	margin: 0 0 0.85rem;
	text-transform: uppercase;
}

.spring-slider__title {
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--display );
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: var( --wp--custom--type--heading-line-height );
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}

.spring-slider__lede {
	color: rgba( 255, 255, 255, 0.82 );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.6;
	margin: 1.4rem 0 0;
	max-width: 46ch;
}

.spring-slider__actions {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/*
 * The slider's two buttons used to restate the theme's button values by hand
 * (1rem 2.4rem, 2px, x-small, 0.1em), which is how they drifted from the header
 * CTA. Their box, colours and hover now come from the shared button contract in
 * app.css; the slider only says where they sit.
 */
/*
 * The buttons are core/button blocks now, so their own styling carries colour
 * and shape; what stays here is only the behaviour the hero needs from them.
 */
.spring-slider__actions .wp-block-button {
	flex: none;
}

/* -------------------------------------------------- Controls */

/*
 * Controls sit bottom-left, inside the same column as the copy: edge-anchored
 * arrows would overlap the headline, and bottom-right ones would sit underneath
 * the floating call/Zalo bar.
 */

.spring-slider__controls {
	display: none;
}

.spring-slider.is-ready .spring-slider__controls {
	align-items: center;
	bottom: clamp( 1.5rem, 3vw, 2.75rem );
	display: flex;
	gap: clamp( 1.25rem, 3vw, 2.25rem );
	inset-inline: 0;
	justify-content: flex-start;
	margin-inline: auto;
	/* Same sum as .spring-slider .wp-block-cover__inner-container — the dots start the copy's line. */
	max-width: calc( var( --wp--style--global--wide-size, 1320px ) + 2 * var( --wp--preset--spacing--20 ) );
	padding-inline: var( --wp--preset--spacing--20 );
	position: absolute;
	z-index: 2;
}

.spring-slider__dots {
	display: flex;
	gap: 0.6rem;
}

.spring-slider__dot {
	background-color: rgba( 255, 255, 255, 0.35 );
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 3px;
	padding: 0;
	transition: background-color 0.2s ease, width 0.3s ease;
	width: 2.25rem;
}

.spring-slider__dot:hover {
	background-color: rgba( 255, 255, 255, 0.65 );
}

.spring-slider__dot.is-active {
	background-color: var( --wp--preset--color--gold );
	width: 3.5rem;
}


.spring-slider__arrows {
	display: flex;
	gap: 0.6rem;
}

.spring-slider__arrow {
	align-items: center;
	background-color: rgba( 20, 20, 20, 0.3 );
	border: 1px solid rgba( 255, 255, 255, 0.34 );
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 2.85rem;
	justify-content: center;
	padding: 0;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	width: 2.85rem;
}

.spring-slider__arrow:hover,
.spring-slider__arrow:focus-visible {
	background-color: var( --wp--preset--color--gold );
	border-color: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--base );
}

/* -------------------------------------------------- Responsive */

@media ( max-width: 781px ) {

	.spring-slider {
		min-height: min( 78vh, 620px );
	}

	.spring-slider .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba( 20, 20, 20, 0.5 ) 0%,
			rgba( 20, 20, 20, 0.72 ) 100%
		);
	}

	.spring-slider__title {
		font-size: clamp( 1.9rem, 8.2vw, 2.6rem );
		max-width: none;
	}

	.spring-slider__lede {
		font-size: var( --wp--preset--font-size--medium );
		max-width: none;
	}

	/* Clear the floating call/Zalo bar that is pinned to the bottom on mobile. */
	.spring-slider.is-ready .spring-slider__controls {
		bottom: 5.5rem;
	}

	.spring-slider__actions {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Full width on a phone, as the hand-written CTAs were. */
	.spring-slider__actions,
	.spring-slider__actions .wp-block-button {
		width: 100%;
	}

	.spring-slider__actions .wp-block-button__link {
		display: block;
		text-align: center;
		width: 100%;
	}

	/* Swiping is the primary gesture here, so only the dots need to show. */
	.spring-slider__arrows {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.spring-slider.is-ready > .wp-block-cover,
	.spring-slider.is-ready > .wp-block-cover.is-active {
		transition: none;
	}

	.spring-slider__dot {
		transition: none;
	}
}

/* -------------------------------------------------- Under the sheer header */

/*
 * On the home page the header is drawn over this slider rather than above it,
 * so the hero grows by exactly the height it is now covering and pays the same
 * height back as top padding. The copy therefore starts where it always did,
 * and the room in the photograph reaches the top of the window.
 */
.spring-overlay-header .spring-slider {
	min-height: calc( min( 86vh, 800px ) + var( --spring-header-height ) );
}

.spring-overlay-header .spring-slider .wp-block-cover__inner-container {
	padding-block-start: calc( var( --wp--preset--spacing--50 ) + var( --spring-header-height ) );
}

@media ( max-width: 781px ) {

	.spring-overlay-header .spring-slider {
		min-height: calc( min( 78vh, 620px ) + var( --spring-header-height ) );
	}
}