/* Balerfornia Closing CTA — headline + button over a background video, in a
   rounded inset card. Models the reference's `.cta-section.home-a`.

   SPECIFICITY NOTE — do not collapse these selectors. CozyStay styles bare tags
   via `.elementor-section h2` (0,1,1). The CTA is an ANCHOR, so it needs 0,4,0
   to beat `.elementor-element a:not([class*="button"]):not(:hover)` (0,3,1) —
   the rule that once made a cream button's label invisible. */

.elementor-widget-balerfornia-closing-cta,
.elementor-widget-balerfornia-closing-cta > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

.bfc {
	--bfc-band: #F6F1E7;
	/* 0.70, not the reference's ~32%: the surf footage has bright white foam,
	   and cream text over it needs this much to clear AA even on the worst
	   frame (measured 4.56:1 over pure white). Lower it and re-check the worst
	   frame, not the calm one. */
	--bfc-scrim: rgba(5, 57, 50, 0.7);
	--bfc-text: #F6F1E7;
	--bfc-accent: #7DA086;
	--bfc-cta-bg: #F6F1E7;
	--bfc-cta-color: #053932;
	--bfc-font-display: 'Playfair Display', Georgia, serif;
	--bfc-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bfc-band);
	/* Reference is `48px 0 0`. A little bottom room too, since a footer band
	   follows rather than butting straight up. */
	padding: clamp(32px, 6vh, 64px) 0;
}

/* Straddle mode: split the band dark-over-light at the card's vertical
   centre, so the inset card sits HALF on the (dark) section above and HALF on
   the band below — the reference's closing-CTA treatment. The card is
   vertically centred by the section's symmetric padding, so the 50% stop
   lands on its middle. --bfc-band-top should match the section directly above
   so the upper half reads as one with it; --bfc-band is the lower half. */
.bfc.bfc--straddle {
	background: linear-gradient(
		to bottom,
		var(--bfc-band-top, #053932) 0,
		var(--bfc-band-top, #053932) 50%,
		var(--bfc-band) 50%,
		var(--bfc-band) 100%
	);
}

.bfc .bfc__inner {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 56px);
}

/* The INSET rounded card — the whole point of this section vs the full-bleed
   hero. The cream section shows around it. */
.bfc .bfc__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 62vh, 640px);
	padding: clamp(64px, 10vh, 100px) clamp(20px, 4vw, 40px);
	border-radius: 16px;
	overflow: clip;
	isolation: isolate;
	/* Shows through until the poster/video paints, instead of a white flash. */
	background: #0a2b25;
}

/* ---- Background video ---------------------------------------------------- */

.bfc .bfc__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bfc .bfc__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.bfc .bfc__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bfc .bfc__video.is-off {
	display: none;
}

.bfc .bfc__scrim {
	position: absolute;
	inset: 0;
	background: var(--bfc-scrim);
	z-index: 1;
	pointer-events: none;
}

/* ---- Content ------------------------------------------------------------- */

.bfc .bfc__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 32px;
	max-width: 636px;
}

.bfc .bfc__headline {
	margin: 0;
	padding: 0;
	font-family: var(--bfc-font-display);
	/* 400 — consistent with every headline on the page. */
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.96;
	letter-spacing: -0.02em;
	color: var(--bfc-text);
	text-align: center;
}

.bfc .bfc__headline em {
	font-style: italic;
}

.bfc .bfc__headline .lvh-underline-wave {
	font-style: normal;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--bfc-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

/* 0,4,0 — see the note at the top. */
.bfc .bfc__content .bfc__cta,
.bfc .bfc__content .bfc__cta:not(:hover) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 999px;
	background: #CD9A85;
	color: #fff;
	font-family: var(--bfc-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}

/* Dark video band: lighten to teal on hover (not #053932) so the pill stays visible.
   `color !important` beats CozyStay's `.no-touch .entry-content a:hover` gold (0,4,1). */
.bfc .bfc__content .bfc__cta:hover {
	background: #B77E62;
	color: #fff !important;
	transform: scale(1.02);
}

.bfc .bfc__content .bfc__cta:focus-visible {
	outline: 2px solid var(--bfc-cta-bg);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.bfc .bfc__content {
		gap: 24px;
	}
}