.bpt-hero {
	position: relative;
	display: grid;
	min-height: var(--hero-min-height, clamp(32rem, 70svh, 48rem));
	align-items: center;
	isolation: isolate;
}

.bpt-hero picture {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.bpt-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-media-position, center center);
}

.bpt-hero picture .bpt-hero__media {
	z-index: 0;
}

/* The host's image optimiser rewrites
       <img class="bpt-hero__media">
   into
       <picture class="bpt-hero__media"><source ...><img></picture>
   moving the class onto the WRAPPER. object-fit does nothing on a <picture>, and the
   inner <img> then matches no rule at all, so the hero photo renders at its intrinsic
   size in the corner instead of covering the hero. Size the inner image directly, so it
   works whichever element ends up carrying the class. */
.bpt-hero picture > img,
.bpt-hero img.bpt-hero__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-media-position, center center);
}

/* Only paint the overlay when the hero actually has a background image.
   It exists to keep text legible over a photo. With no photo it just dims the palette:
   on the brand palette it dragged #FFC20E down to ~#664E06, taking black heading text
   to 2.51:1 — a WCAG failure created by the theme rather than by the content. */
.bpt-hero--has-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hero-overlay, linear-gradient(90deg, var(--bpt-hero-overlay-start), var(--bpt-hero-overlay-end)));
}

.bpt-hero__content {
	width: min(calc(100% - (var(--bpt-gutter) * 2)), var(--bpt-container-default));
	margin-inline: auto;
	padding-block: var(--bpt-space-4xl);
}

/* Text-only heroes are page introductions, not empty image canvases. Their height is
   content-driven so the selected media-height preset cannot add a large blank band. */
.bpt-hero--no-media {
	min-height: auto;
}

.bpt-hero--no-media .bpt-hero__content {
	padding-block: var(--bpt-space-2xl);
}

.bpt-hero.bpt-hero--no-media h1 {
	font-size: var(--bpt-text-3xl);
}

.bpt-hero .bpt-section-intro {
	max-width: var(--hero-content-width, var(--bpt-container-narrow));
}

.bpt-hero .bpt-section-ctas {
	max-width: var(--hero-content-width, var(--bpt-container-narrow));
}

.bpt-hero--center .bpt-hero__content {
	margin-inline: auto;
	text-align: center;
}

.bpt-hero--right .bpt-hero__content {
	margin-left: auto;
}

.bpt-hero h1 {
	font-size: var(--bpt-text-4xl);
}

.bpt-hero__assurance {
	margin-top: var(--bpt-space-md);
	max-width: var(--hero-content-width, var(--bpt-container-narrow));
	color: var(--bpt-color-text-subtle);
	font-size: var(--bpt-text-sm);
}

.bpt-hero--center .bpt-hero__assurance {
	margin-inline: auto;
}

.bpt-hero__badge-card {
	position: absolute;
	right: var(--bpt-space-lg);
	bottom: var(--bpt-space-lg);
	z-index: 1;
	display: inline-flex;
	gap: var(--bpt-space-sm);
	align-items: center;
	max-width: min(20rem, calc(100% - var(--bpt-space-2xl)));
	padding: var(--bpt-space-md) var(--bpt-space-lg);
	background: var(--bpt-color-surface);
	color: var(--bpt-color-text);
	border-radius: var(--bpt-btn-radius, var(--bpt-radius-md));
	box-shadow: var(--bpt-shadow-lg);
}

.bpt-hero__badge-icon {
	display: inline-flex;
	font-size: var(--bpt-text-xl);
	color: var(--bpt-color-primary);
}

.bpt-hero__badge-text {
	display: grid;
	gap: var(--bpt-space-2xs);
	line-height: var(--bpt-leading-snug);
}

.bpt-hero__badge-value {
	font-size: var(--bpt-text-lg);
}

.bpt-hero__badge-label {
	color: var(--bpt-color-text-subtle);
	font-size: var(--bpt-text-sm);
}

.bpt-hero__highlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bpt-space-lg);
	max-width: var(--hero-content-width, var(--bpt-container-narrow));
	margin-top: var(--bpt-space-xl);
	padding-top: var(--bpt-space-lg);
	border-top: var(--bpt-border-thin) solid var(--section-border);
}

.bpt-hero__highlight {
	display: grid;
	gap: var(--bpt-space-2xs);
}

.bpt-hero__highlight strong {
	font-family: var(--bpt-font-display);
	font-size: var(--bpt-text-lg);
	line-height: var(--bpt-leading-tight);
}

.bpt-hero__highlight span {
	color: var(--section-fg-muted);
	font-size: var(--bpt-text-xs);
	line-height: var(--bpt-leading-snug);
}

.bpt-hero--center .bpt-hero__highlights {
	margin-inline: auto;
}

/* Editorial split hero used by the AAFS home page. The media remains a real
   section field and collapses cleanly below the content on smaller screens. */
.bpt-hero--layout-split {
	width: min(calc(100% - (var(--bpt-gutter) * 2)), var(--bpt-container-default));
	margin-inline: auto;
	padding-block: clamp(3rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
	gap: clamp(2rem, 5vw, 5rem);
}

.bpt-hero--layout-split .bpt-hero__content {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 1;
	width: auto;
	margin: 0;
	padding-block: 0;
	align-self: center;
}

.bpt-hero--layout-split > picture,
.bpt-hero--layout-split > .bpt-hero__media {
	position: relative;
	inset: auto;
	z-index: 0;
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	width: 100%;
	height: 100%;
	min-height: min(30rem, var(--hero-min-height));
	overflow: hidden;
	border-radius: var(--bpt-radius-md);
}

.bpt-hero--layout-split > picture > img,
.bpt-hero--layout-split > img.bpt-hero__media,
.bpt-hero--layout-split > video.bpt-hero__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bpt-hero--layout-split.bpt-hero--has-media::after {
	position: relative;
	inset: auto;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	background: linear-gradient(180deg, transparent 48%, rgb(10 10 10 / 72%));
	pointer-events: none;
}

.bpt-hero--layout-split .bpt-hero__media-overlay {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: center;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bpt-space-md);
	width: calc(100% - (var(--bpt-space-lg) * 2));
	margin-bottom: var(--bpt-space-lg);
	color: var(--bpt-color-text-inverse);
	pointer-events: none;
}

.bpt-hero--layout-split .bpt-hero__media-overlay p {
	max-width: 18rem;
	margin: 0;
	font-size: var(--bpt-text-sm);
	font-weight: var(--bpt-weight-semibold);
	line-height: var(--bpt-leading-snug);
	text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

.bpt-hero--layout-split .bpt-hero__media-overlay span {
	flex: none;
	padding: var(--bpt-space-xs) var(--bpt-space-sm);
	background: var(--bpt-color-primary);
	color: var(--bpt-color-on-primary);
	border-radius: var(--bpt-radius-sm);
	font-size: var(--bpt-text-sm);
	font-weight: var(--bpt-weight-semibold);
	line-height: 1;
}

.bpt-hero--layout-split h1 {
	font-size: clamp(2.5rem, 4.6vw, 4rem);
}

@media (max-width: 767px) {
	.bpt-hero--no-media .bpt-hero__content {
		padding-block: var(--bpt-space-xl);
	}

	.bpt-hero--layout-split {
		width: 100%;
		padding-block: 0;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bpt-hero--layout-split .bpt-hero__content {
		grid-column: 1;
		grid-row: 1;
		width: min(calc(100% - (var(--bpt-gutter) * 2)), var(--bpt-container-default));
		margin-inline: auto;
		padding-block: var(--bpt-space-3xl);
	}

	.bpt-hero--layout-split > picture,
	.bpt-hero--layout-split > .bpt-hero__media {
		grid-column: 1;
		grid-row: 2;
		min-height: 19rem;
		border-radius: 0;
	}

	.bpt-hero--layout-split.bpt-hero--has-media::after {
		grid-column: 1;
		grid-row: 2;
	}

	.bpt-hero--layout-split .bpt-hero__media-overlay {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 640px) {
	.bpt-hero__highlights {
		gap: var(--bpt-space-sm);
		margin-top: var(--bpt-space-lg);
		padding-top: var(--bpt-space-md);
	}

	.bpt-hero__badge-card {
		position: static;
		margin-top: var(--bpt-space-lg);
		max-width: none;
	}
}

/* Content + form card hero (hero_layout: form). Mirrors the AA Warranties quote landing page:
   the media stays full-bleed behind everything; the intro and a ticked checklist sit on the
   left and the lead form sits in a white card on the right. Below 1024px the card drops under
   the content. The card resets to the light surface so the form reads the same on any palette. */
.bpt-hero--layout-form {
	min-height: auto;
}

.bpt-hero__inner {
	display: grid;
	gap: var(--bpt-space-2xl);
	width: min(calc(100% - (var(--bpt-gutter) * 2)), var(--bpt-container-default));
	margin-inline: auto;
	padding-block: var(--bpt-space-2xl) var(--bpt-space-3xl);
	align-items: start;
}

.bpt-hero--layout-form .bpt-hero__content {
	width: auto;
	margin: 0;
	padding-block: 0;
}

.bpt-hero .bpt-checklist {
	display: grid;
	gap: var(--bpt-space-sm);
	max-width: var(--hero-content-width, var(--bpt-container-narrow));
	margin: var(--bpt-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.bpt-hero .bpt-checklist__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--bpt-space-sm);
	align-items: center;
}

.bpt-hero .bpt-checklist__icon {
	display: inline-flex;
	font-size: 1.35em;
	color: var(--section-accent, var(--bpt-color-primary));
}

.bpt-hero--layout-form .bpt-checklist__text {
	font-weight: var(--bpt-weight-display, 700);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.bpt-hero--center .bpt-checklist {
	margin-inline: auto;
	justify-items: center;
}

/* .bpt-palette--light on the card resets every section variable (text, accent, buttons) to the
   light palette, whatever palette the hero itself uses. */
.bpt-hero__form-card {
	--section-card-bg: var(--bpt-color-surface);
	position: relative;
	z-index: 2;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--bpt-color-surface);
	color: var(--bpt-color-text);
	border-radius: var(--bpt-radius-md);
	box-shadow: var(--bpt-shadow-lg);
	text-align: left;
}

.bpt-hero__form-heading {
	margin: 0;
	color: var(--bpt-color-text);
	font-size: var(--bpt-text-xl);
	line-height: var(--bpt-leading-tight);
}

.bpt-hero__form-intro {
	margin: var(--bpt-space-2xs) 0 0;
	color: var(--bpt-color-text-subtle);
	font-size: var(--bpt-text-sm);
}

.bpt-hero__form {
	margin-top: var(--bpt-space-lg);
	/* The shared .bpt-form-section__form class brings its own card padding/border; the hero
	   card already provides the frame. */
	padding: 0;
	background: none;
	border: 0;
}

.bpt-hero__form .wpcf7-form {
	--cf7-control-bg: var(--bpt-color-surface-alt);
	--cf7-control-border: var(--bpt-color-surface-alt);
}

.bpt-hero__form .wpcf7-form label {
	font-size: var(--bpt-text-sm);
}

.bpt-hero__form .wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select) {
	min-height: 2.875rem;
}

/* CF7's spinner is invisible until a submit but still takes a grid row (plus a row gap) under
   the button. Take it out of the flow and show it inside the right end of the button instead. */
.bpt-hero__form :is(.wpcf7-form, .uacf7-form-wrapper-container) {
	position: relative;
}

.bpt-hero__form .wpcf7-spinner {
	position: absolute;
	right: 0.75rem;
	bottom: calc((2.875rem - 24px) / 2);
	margin: 0;
}

.bpt-hero__form-actions {
	margin-top: var(--bpt-space-xs);
}

.bpt-hero__form-actions .bpt-btn,
.bpt-hero__form .wpcf7-submit {
	width: 100%;
}

.bpt-hero__form-note {
	margin: var(--bpt-space-sm) 0 0;
	color: var(--bpt-color-text-subtle);
	font-size: var(--bpt-text-xs);
	text-align: right;
}

@media (min-width: 600px) {
	/* Two fields per row inside the card; the submit row, notices and anything without a
	   label keep the full width. Ultimate Addons for CF7 nests the fields one level deeper
	   (.uacf7-form-wrapper-container), so the grid is applied to whichever element holds them. */
	.bpt-hero__form .wpcf7-form:not(:has(.uacf7-form-wrapper-container)),
	.bpt-hero__form .uacf7-form-wrapper-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--bpt-space-md);
		row-gap: 0;
		/* A label that wraps to two lines must not push its input below its neighbour's. */
		align-items: end;
	}

	.bpt-hero__form :is(.wpcf7-form, .uacf7-form-wrapper-container) > * {
		grid-column: 1 / -1;
	}

	/* Fields arrive either as bare <label> elements (CF7 auto-paragraphs off, as on AAFS) or
	   wrapped in <p>. */
	.bpt-hero__form :is(.wpcf7-form, .uacf7-form-wrapper-container) > :is(label, p:has(> label)) {
		grid-column: auto;
	}

	/* Message boxes, radio/checkbox groups and consent text read better across the full card. */
	.bpt-hero__form :is(.wpcf7-form, .uacf7-form-wrapper-container) > :is(label, p):has(textarea, .wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
		grid-column: 1 / -1;
	}

	/* Calculator-style forms (range sliders) stay single column. */
	.bpt-hero__form .wpcf7-form:has(input[type="range"]),
	.bpt-hero__form .wpcf7-form:has(input[type="range"]) .uacf7-form-wrapper-container {
		display: block;
	}
}

@media (min-width: 1024px) {
	/* Content and form card share the hero width 50/50 (Aidan, 2026-09-30). */
	.bpt-hero__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(2rem, 5vw, 5rem);
		padding-block: var(--bpt-space-3xl);
	}

	.bpt-hero--layout-form .bpt-hero__content {
		padding-top: var(--bpt-space-lg);
	}
}