/*
 * Hero, v-3 layout: copy on the left, quote form on the right, over the
 * showroom photograph.
 *
 * The scrim is heavier on the left where the type sits and lighter on the
 * right, so the building stays visible behind the form card.
 */

.pi-hero--split {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(92vh, 860px);
	overflow: hidden;
}

.pi-hero--split .pi-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pi-hero--split .pi-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}

/*
 * Two scrims instead of one heavy wash: a light overall veil so the building
 * stays bright, plus a soft pool behind the left column where the type sits.
 * This keeps the photograph open while holding text contrast.
 */
/*
 * components.css paints its own fixed scrim on ::before at .92 alpha. The
 * split hero carries exactly one scrim, the adjustable one below, so that
 * second layer is switched off — otherwise the slider appears to do nothing.
 */
/* Three classes, because components.css declares its scrim at (0,1,0) and is
   enqueued after this file — an equal-weight rule here would lose. */
.pi-page .pi-hero.pi-hero--split::before,
.pi-hero.pi-hero--split::before {
	content: none;
	background: none;
	display: none;
}

/*
 * Every stop is scaled by --pi-scrim, which the widget's "Darkening" slider
 * writes. The default is 0: the photograph ships untouched and the darkening
 * is dialled in from the panel when a particular photo needs it.
 */
.pi-hero--split::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.62 * var(--pi-scrim, 1))) 0%,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.44 * var(--pi-scrim, 1))) 30%,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.16 * var(--pi-scrim, 1))) 56%,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.06 * var(--pi-scrim, 1))) 100%),
		linear-gradient(180deg,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.18 * var(--pi-scrim, 1))) 0%,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.10 * var(--pi-scrim, 1))) 45%,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.26 * var(--pi-scrim, 1))) 100%);
}

.pi-hero--split .pi-hero__inner {
	position: relative;
	z-index: 1;
	width: min(1280px, calc(100% - 36px));
	/* components.css caps every hero inner at --pi-shell (1200px); the split
	   hero has to match the 1280px capsule instead, so that cap is released. */
	max-width: none;
	margin-inline: auto;
	/* 27px matches the capsule's own left padding, so the headline starts on
	   the same vertical as the logo above it. */
	padding-inline: 27px;
	/* The capsule floats over the hero and ends at 82px, so the copy has to
	   start well below that or the two read as one collided block. */
	padding-top: clamp(8rem, 11vw, 10.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

/* ---- Left column ------------------------------------------------------ */

/*
 * The form card is roughly twice the height of the copy, so it sets the row
 * height. Left at `start` the headline hangs at the top with a large void
 * beneath it; centring it against the card balances the two columns.
 */
.pi-hero--split .pi-hero__copy {
	max-width: 62ch;
	align-self: center;
}

.pi-hero--split .pi-hero__copy .pi-hero__title,
.pi-hero--split .pi-hero__sub,
.pi-hero--split .pi-hero__support,
.pi-hero--split .pi-hero__rating {
	text-shadow: 0 1px 14px rgba(10, 8, 6, .55);
}

.pi-hero--split .pi-hero__copy .pi-hero__title {
	font-family: var(--pi-font-display, inherit);
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	line-height: 1.06;
	letter-spacing: -.028em;
	color: #fff;
	margin: 0 0 1rem;
}

.pi-hero--split .pi-hero__sub {
	font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 .6rem;
	max-width: 54ch;
}

.pi-hero--split .pi-hero__support {
	font-size: .9375rem;
	color: rgba(255, 255, 255, .68);
	margin: 0 0 1.6rem;
}

.pi-hero--split .pi-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.5rem;
}

.pi-hero--split .pi-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: .9rem;
}
.pi-hero--split .pi-hero__badge {
	font-size: .8125rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	padding: .45rem .85rem;
}

.pi-hero--split .pi-hero__rating {
	font-size: .9375rem;
	color: rgba(255, 255, 255, .9);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.pi-hero--split .pi-hero__stars { color: #e8a33d; letter-spacing: 2px; }

/* ---- Right column: the form card -------------------------------------- */

/*
 * The PiSuite booking embed draws its own white card with a red rule on top,
 * so this wrapper stays bare: a second surface behind it shows as a white
 * frame around the card, and a radius here crops the card's corners. Add a
 * card back from the Style tab if a plainer embed is ever used instead.
 */
.pi-hero__form {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.pi-hero__formhead { padding: 20px 22px 6px; }
.pi-hero__formhead h2 {
	font-family: var(--pi-font-display, inherit);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--pi-ink, #1e1b16);
	margin: 0 0 .3rem;
}
.pi-hero__formhead p {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--pi-muted, #6b6459);
	margin: 0;
}

.pi-hero__frame {
	width: 100%;
	border: 0;
	display: block;
	background: #fff;
	overflow: hidden;
}

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

@media (max-width: 1023px) {
	.pi-hero--split .pi-hero__inner {
		grid-template-columns: 1fr;
		padding-inline: 20px;
		padding-top: 104px;          /* clears the 72px mobile capsule */
	}
	.pi-hero--split { min-height: 0; }
	.pi-hero--split::after {
		background: linear-gradient(180deg,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.62 * var(--pi-scrim, 1))) 0%,
			rgba(var(--pi-scrim-rgb, 14, 12, 10), calc(.70 * var(--pi-scrim, 1))) 100%);
	}
	.pi-hero__form { margin-top: .5rem; }
}

@media (max-width: 600px) {
	.pi-hero--split .pi-hero__actions .pi-btn { width: 100%; justify-content: center; }
}