/**
 * SAV Form Section presentation.
 *
 * The original `panel` mode keeps heading, introduction, and form in one white
 * card. `content-form` adapts the BOH content-and-form composition: authored
 * content sits in a readable left column and the interaction stays in a white
 * right-hand panel. The shared SAV Gravity Forms skin owns form internals.
 */
.sav-form-section {
	/*
	 * Page Sections live outside .sav-service-content, so keep a local copy of
	 * SAV's canonical Beaver row + content gutter tokens. The section colour
	 * remains full-bleed while its complete content/form shell follows the site.
	 */
	--sav-site-content-max-width: 1240px;
	--sav-site-content-gutter: 20px;
	--sav-site-row-gutter: 20px;

	background: #ee192b;
	color: #111111;
	font-family: "Proxima Nova", Arial, sans-serif;
	padding: 72px var(--sav-site-row-gutter);
}

.sav-form-section *,
.sav-form-section *::before,
.sav-form-section *::after {
	box-sizing: border-box;
}

.sav-form-section__shell {
	display: flex;
	margin: 0 auto;
	max-width: var(--sav-site-content-max-width);
	padding: 0 var(--sav-site-content-gutter);
	width: 100%;
}

.sav-form-section--panel-right .sav-form-section__shell {
	justify-content: flex-end;
}

.sav-form-section--panel-left .sav-form-section__shell {
	justify-content: flex-start;
}

.sav-form-section__panel {
	background: #ffffff;
	max-width: 720px;
	padding: 52px;
	width: 100%;
}

.sav-form-section__header {
	margin-bottom: 32px;
}

/* Keep Page Section headings in SAV's current sans-serif type system. */
.sav-form-section__heading {
	color: #222d61;
	font-family: "Proxima Nova", Arial, sans-serif;
	font-size: clamp(32px, 3vw, 48px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

.sav-form-section__intro {
	color: #111111;
	font-size: 18px;
	line-height: 1.65;
}

.sav-form-section__intro > :first-child {
	margin-top: 0;
}

.sav-form-section__intro > :last-child {
	margin-bottom: 0;
}

/*
 * Split content and form mode. A darker SAV red improves white-text contrast
 * while retaining the established red-band visual language.
 */
.sav-form-section--display-content-form {
	background: #c81020;
}

.sav-form-section--display-content-form .sav-form-section__shell {
	align-items: start;
	display: grid;
	gap: clamp(48px, 6vw, 88px);
	/* BOH-inspired desktop composition: equal content and form tracks. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: normal;
}

.sav-form-section--display-content-form .sav-form-section__content {
	max-width: none;
	padding-top: 32px;
}

/*
 * Keep the shorter context column available while the longer form scrolls.
 * Sticky is desktop-only: the 1100px breakpoint below returns the content to
 * normal flow as soon as the two-column composition stacks.
 */
@media (min-width: 1101px) {
	.sav-form-section--display-content-form .sav-form-section__content {
		align-self: start;
		position: sticky;
		top: 0;
	}

	/* Keep the sticky heading visible below WordPress' logged-in admin bar. */
	body.admin-bar .sav-form-section--display-content-form .sav-form-section__content {
		top: 32px;
	}
}

.sav-form-section--display-content-form .sav-form-section__header {
	margin: 0;
}

.sav-form-section--display-content-form .sav-form-section__heading,
.sav-form-section--display-content-form .sav-form-section__intro {
	color: #ffffff;
}

.sav-form-section--display-content-form .sav-form-section__panel {
	max-width: none;
	padding: 48px;
}

@media (max-width: 1100px) {
	.sav-form-section {
		padding-bottom: 56px;
		padding-top: 56px;
	}

	.sav-form-section__panel {
		max-width: 680px;
		padding: 40px;
	}

	.sav-form-section--display-content-form .sav-form-section__shell {
		display: grid;
		gap: 32px;
		grid-template-columns: minmax(0, 1fr);
	}

	.sav-form-section--display-content-form .sav-form-section__content,
	.sav-form-section--display-content-form .sav-form-section__panel {
		margin: 0;
		max-width: none;
		width: 100%;
	}

	.sav-form-section--display-content-form .sav-form-section__content {
		padding-top: 0;
	}
}

@media (max-width: 768px) {
	.sav-form-section {
		/* BB removes its outer row gutter at this breakpoint. */
		--sav-site-row-gutter: 0px;
	}
}

@media (max-width: 600px) {
	.sav-form-section {
		padding-bottom: 32px;
		padding-top: 32px;
	}

	.sav-form-section__shell,
	.sav-form-section--panel-right .sav-form-section__shell,
	.sav-form-section--panel-left .sav-form-section__shell {
		display: block;
	}

	.sav-form-section__panel,
	.sav-form-section--display-content-form .sav-form-section__panel {
		max-width: none;
		padding: 32px 24px;
	}

	.sav-form-section--display-content-form .sav-form-section__content {
		margin-bottom: 28px;
	}

	.sav-form-section__heading {
		font-size: 32px;
	}

	.sav-form-section__intro {
		font-size: 16px;
	}
}