/*
 * Home Hero -- Figma 5832:33828.
 *
 * Fidelity notes:
 *  - Figma rounds the banner 20px; the phase 1 radius scale carries 16px
 *    (radius--2xl), which is what ships. The finder card is 24px, which is
 *    radius--3xl exactly.
 *  - The banner scrim is Figma's rgba(0,0,0,0.24), derived from ink with
 *    color-mix so no literal colour appears here.
 *  - The pass finder is ported booking-engine UI, so ui-border and ui-muted --
 *    the shadcn ramp -- are correct here. Every other block in this theme uses
 *    the marketing ramp.
 *  - Figma puts a decorative chevron beside one trust-bar item. It reads as a
 *    dropdown affordance on a static bar, so the bar is text only. Same rule
 *    inside the finder: only the row that really opens keeps its chevron.
 */

.afters-home-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding-block: var(--wp--preset--spacing--10);
}

/* ---- trust bar ---- */

.afters-home-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--ink);
	list-style: none;
}

.afters-home-hero__trust-item {
	color: var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	line-height: 1.375;
	text-align: center;
	text-transform: uppercase;
}

/* ---- banner ---- */

.afters-home-hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.afters-home-hero__banner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	min-height: 60vh;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--2-xl);
	background-color: var(--wp--preset--color--ink);
}

.afters-home-hero__banner-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.afters-home-hero__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 24%, transparent);
}

.afters-home-hero__promo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
	width: 100%;
	max-width: 62%;
	text-align: center;
}

.afters-home-hero__promo-badge {
	display: block;
	width: auto;
	max-height: var(--wp--preset--spacing--7);
}

.afters-home-hero__lockup {
	width: 100%;
	margin: 0;
}

.afters-home-hero__lockup-img {
	display: block;
	width: 58%;
	height: auto;
	margin-inline: auto;
}

.afters-home-hero__headline {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--tight);
	line-height: 1;
}

.afters-home-hero__description {
	max-width: 44%;
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1.5;
}

/* ---- pass finder ---- */

/* The card overlaps the banner by design (Figma 5788:7508, negative margin
   below). The banner is positioned and this card was not, so the banner painted
   over the overlap and clipped both filter labels -- positioned siblings paint
   after non-positioned ones regardless of source order. */
.afters-home-hero__finder {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	box-sizing: border-box;
	max-width: 100%;
	margin-top: calc(var(--wp--preset--spacing--8) * -1);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--ui-border);
	border-radius: var(--wp--custom--radius--3-xl);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--main);
}

.afters-home-hero__finder-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--5);
}

.afters-home-hero__filter {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--5);
	padding-inline: var(--wp--preset--spacing--4);
	border-inline-start: 1px solid var(--wp--preset--color--ui-border);
	/* Drives the chevron size: .afters-icon is 1em wide. */
	font-size: var(--wp--preset--font-size--title-lg);
}

/* Divider between rows only, never leading -- the select row is a <label> and
   the static rows are <div>s, so this cannot key off :first-child alone. */
.afters-home-hero__finder-row > .afters-home-hero__filter:first-child {
	border-inline-start: 0;
}

.afters-home-hero__filter-text {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
}

.afters-home-hero__filter-label {
	color: var(--wp--preset--color--mute);
	font-weight: 500;
}

.afters-home-hero__filter-value {
	color: var(--wp--preset--color--ink);
	font-weight: 800;
}

/* The live destination row. It has to read as the same lockup as the static
   rows, so the native select is stripped back to text -- the Figma chevron
   beside it is the only affordance drawn, and the whole row is the label, so
   clicking anywhere in it opens the menu. */
.afters-home-hero__filter--select {
	cursor: pointer;
}

.afters-home-hero__select {
	appearance: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* The menu itself is painted by the OS, which does not inherit the card. */
.afters-home-hero__select option {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}


.afters-home-hero__filter-chevron {
	color: var(--wp--preset--color--ink);
}

.afters-home-hero__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.afters-home-hero__fact {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1-5);
	color: var(--wp--preset--color--ui-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.375;
}

.afters-home-hero__fact-icon {
	display: block;
	width: auto;
	max-height: var(--wp--preset--spacing--4);
}

@media (max-width: 26.875rem) {
	.afters-home-hero__promo,
	.afters-home-hero__description {
		max-width: 100%;
	}

	.afters-home-hero__lockup-img {
		width: 100%;
	}

	.afters-home-hero__finder {
		margin-top: var(--wp--preset--spacing--5);
	}

	.afters-home-hero__filter {
		padding-inline: 0;
		border-inline-start: 0;
	}

	/* One row per line at 430px, so the finder does not squeeze to nothing. */
	.afters-home-hero__finder-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--3);
	}

	.afters-home-hero__filter {
		justify-content: space-between;
	}
}