/* Balerfornia About Hero — a full-bleed dark band with one serif-400 statement
   over an auto-scrolling marquee of square property photos. Models the Lavender
   Shore reference's `.hero-about` + `.marquee-images`.

   SPECIFICITY NOTE — same trap as every widget here. CozyStay's main.min.css
   styles bare tags via `.elementor h1 { font-size: 2.25rem }` (0,1,1) and
   `.elementor-section h1 { color: var(--text-color) }` (0,1,1), which silently
   clamp/recolor a naive 0,1,0 rule. Everything below is scoped under `.bfah`
   (0,2,0 minimum) so it wins. No anchors in this widget.

   MARQUEE — identical seamless mechanism to Guest Stories: the set renders
   three times in one flat track, and the track translates by exactly one set
   width (--bfah-advance, set inline from PHP), so the duplicate lands where the
   original started and the loop is seamless. No JS. */

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

.bfah {
	--bfah-bg: #053932;
	--bfah-text: #F6F1E7;
	--bfah-accent: #7DA086;
	--bfah-speed: 64s;
	/* Sized to match the Lavender Shore reference marquee — 448px square cards
	   with a 32px gap at 1280px (measured). 35vw hits 448 at 1280 and scales with
	   the viewport, capped so it doesn't run away on very wide screens. */
	--bfah-gap: clamp(20px, 2.5vw, 32px);
	--bfah-item-w: clamp(300px, 35vw, 480px);

	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bfah-bg);
	/* Generous top padding lets the statement breathe below the header. NO bottom
	   padding — the marquee runs to the section edge and bleeds past it (below). */
	padding: clamp(130px, 18vh, 240px) 0 0;
	/* Clip the horizontal axis (the 100vw break-out + the marquee track mask) but
	   leave the vertical axis VISIBLE so the marquee can bleed down into the next
	   section. overflow-x:clip + overflow-y:visible is a valid pair — neither is a
	   scrolling value — so the horizontal mask survives while vertical overflow
	   shows. */
	overflow-x: clip;
	overflow-y: visible;
	position: relative;
	/* Above the next section so the bleeding marquee paints over its forest band. */
	z-index: 1;
}

/* ---- Background media (optional) ----------------------------------------- */

/* When a drone clip is set it plays behind everything, with a scrim over it so
   the cream statement stays legible. The marquee photos are opaque and sit ABOVE
   the scrim, so the video mostly reads behind the statement and in the gaps —
   the same arrangement as the reference's `.video-about` hero. */
.bfah .bfah__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.bfah .bfah__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.bfah .bfah__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: 0;
}

/* bg-video.js strips the source on mobile / reduced-motion; the poster stays. */
.bfah .bfah__video.is-off {
	display: none;
}

.bfah .bfah__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--bfah-scrim, rgba(5, 57, 50, 0.72));
}

/* Fades the BOTTOM of the hero from the (teal) video to solid forest, so the
   band the marquee's lower rows sit on matches the forest Story section below.
   That is what makes the seam disappear — same trick Lavender relies on with its
   dark-on-dark sections. It sits above the video + scrim (z0/z1) but below the
   marquee and statement (z2), so it only tints behind and between the cards,
   never over them. --bfah-bg is the forest fallback, identical to the Story. */
.bfah::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(240px, 38vh, 460px);
	background: linear-gradient(to bottom, transparent, var(--bfah-bg) 85%);
	z-index: 1;
	pointer-events: none;
}

/* ---- Statement ----------------------------------------------------------- */

.bfah .bfah__inner {
	position: relative;
	z-index: 2;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
	text-align: center;
}

/* A soft forest halo so the statement holds up over the brightest video frames
   (sun glint / foam). Invisible on the flat-forest fallback. */
.bfah--has-media .bfah__statement {
	text-shadow: 0 2px 30px rgba(5, 57, 50, 0.45);
}

.bfah .bfah__statement {
	/* Space below the statement (before the marquee) — the "breath" under the
	   text, tuned up alongside the top padding above. The marquee's downward
	   translate adds to this visible gap, so this is a touch tighter than the top
	   padding to keep the two beats balanced. */
	margin: 0 auto clamp(56px, 8vh, 112px);
	padding: 0;
	max-width: 20ch;
	font-family: 'Playfair Display', Georgia, serif;
	/* Weight 400 is the whole effect — the same restraint as the Statement and
	   Guest Stories headlines. Do not "fix" this to 700. */
	font-weight: 400;
	font-size: clamp(2.25rem, 5.2vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--bfah-text);
	text-align: center;
}

.bfah .bfah__statement em {
	font-style: italic;
}

.bfah .bfah__statement .lvh-underline-wave {
	text-decoration: underline wavy var(--bfah-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* ---- Marquee ------------------------------------------------------------- */

.bfah .bfah__marquee {
	position: relative;
	z-index: 2;
	/* Push the strip DOWN so its bottom rows physically cross past the hero into
	   the next (forest) section. A transform, not a margin — it overflows without
	   reflowing anything (the hero keeps its height, the Story keeps its place),
	   which is exactly what a margin failed to do (that just tucked the Story up
	   behind the hero's video). overflow-y:visible on .bfah shows it; z-index 2
	   keeps it above the Story so the cards paint over that band. Small enough
	   that the card bottoms land in the Story's top padding, above the eyebrow. */
	transform: translateY(clamp(28px, 5vh, 72px));
	/* `clip`, not `hidden`: hidden would make this a scroll container and let
	   the animation nudge the page's scroll position. */
	overflow: clip;
}

.bfah .bfah__track {
	display: flex;
	align-items: stretch;
	gap: var(--bfah-gap);
	width: max-content;
	margin: 0;
	padding: 0 calc(var(--bfah-gap) / 2);
	list-style: none;
	animation: bfah-scroll var(--bfah-speed) linear infinite;
	will-change: transform;
}

@keyframes bfah-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--bfah-advance)), 0, 0); }
}

.bfah--pause-hover:hover .bfah__track,
.bfah--pause-hover:focus-within .bfah__track {
	animation-play-state: paused;
}

/* ---- Item ---------------------------------------------------------------- */

.bfah .bfah__item {
	flex: 0 0 var(--bfah-item-w);
	width: var(--bfah-item-w);
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(246, 241, 231, 0.06);
}

.bfah .bfah__item .bfah__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---- Motion / a11y ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bfah .bfah__track {
		animation: none;
	}

	/* With no animation the duplicate sets are unreachable dead weight, so hand
	   scrolling back to the reader instead. */
	.bfah .bfah__marquee {
		overflow-x: auto;
	}
}

@media (max-width: 767px) {
	.bfah {
		--bfah-item-w: clamp(220px, 72vw, 360px);
		padding-top: clamp(96px, 14vh, 150px);
	}

	.bfah .bfah__statement {
		font-size: clamp(2rem, 8.5vw, 3rem);
		max-width: 16ch;
	}
}