/* Balerfornia Statement — the quiet typographic beat after the hero.
   Modeled on the Lavender Shore reference's `home-a-about-section`.

   SPECIFICITY NOTE — same trap as the hero, do not collapse these selectors.
   CozyStay's main.min.css styles bare tags through descendant selectors like
   `.elementor-section h2` and `.elementor h2 { font-size: ... }` at 0,1,1.
   A lone `.bfs-statement__body` (0,1,0) LOSES and the statement silently
   renders in the theme's colour and size. Scoping under `.bfs-statement`
   makes these 0,2,0, which wins without !important. */

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

.bfs-statement {
	--bfs-bg: #F6F1E7;
	--bfs-text: #053932;
	--bfs-accent: #7DA086;
	--bfs-font-display: 'Playfair Display', Georgia, serif;
	--bfs-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	/* Break out to full viewport width so the band of colour runs edge to edge,
	   regardless of the section/column max-width Elementor wraps us in. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bfs-bg);
	/* Bottom padding is deliberately tighter than the top. The section below
	   ("Four Private Stays, One Jungle Escape") carries its own generous top
	   padding, and the two stacked left ~190px between the icon row and that
	   heading — enough to read as a disconnect rather than a breath. Tuned
	   together with that section's padding; changing one without the other
	   reopens the gap. */
	padding: clamp(64px, 10vh, 120px) 0 clamp(32px, 4.5vh, 52px);
}

.bfs-statement .bfs-statement__inner {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

/* CENTRED AND STACKED — measured off the reference at 1600px. The 64px is the
   VERTICAL gap between the statement and the icon row. This is deliberately
   not a two-column layout; an earlier build misread the reference as
   text-beside-labels and it looked wrong. */
.bfs-statement .bfs-statement__master {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(40px, 4.5vw, 64px);
}

.bfs-statement .bfs-statement__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	/* Deliberately wide — the reference runs to 846px. A narrow measure makes
	   this read like body copy instead of a statement. */
	max-width: 846px;
	margin: 0 auto;
}

.bfs-statement .bfs-statement__eyebrow {
	font-family: var(--bfs-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	color: var(--bfs-accent);
}

/* 0,2,0 — must outrank CozyStay's `.elementor-section h2` / `.elementor h2`. */
.bfs-statement .bfs-statement__body {
	margin: 0;
	font-family: var(--bfs-font-display);
	/* 400, not 700: the reference's statement is a light editorial serif. Bold
	   here makes it shout, which is the opposite of the intended effect. */
	font-weight: 400;
	font-size: clamp(1.6rem, 3.2vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--bfs-text);
	text-transform: none;
	text-align: center;
}

.bfs-statement .bfs-statement__body em {
	font-style: italic;
}

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

.bfs-statement .bfs-statement__features {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	/* It's a <ul> for semantics; strip the list chrome. */
	list-style: none;
	margin: 0;
	padding: 0;
}

.bfs-statement .bfs-statement__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* 160px is the reference's cap — it's what forces each label onto two tidy
	   centred lines instead of one long run. */
	max-width: 160px;
	margin: 0;
	padding: 0;
	text-align: center;
}

.bfs-statement .bfs-statement__feature::before,
.bfs-statement .bfs-statement__feature::marker {
	content: none;
}

.bfs-statement .bfs-statement__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--bfs-accent);
}

/* Covers both shapes Icons_Manager can emit: an inline <svg> (uploaded SVG)
   or an <i> icon font (Font Awesome). */
.bfs-statement .bfs-statement__feature-icon svg {
	width: 40px;
	height: 40px;
	fill: currentColor;
}

/* Our own line icons are stroke-only. The rule above sets `fill: currentColor`
   on the <svg>, and CSS BEATS the `fill="none"` presentation attribute on the
   markup — so without this override the paths inherit the fill and every icon
   renders as a solid blob. Needs to outrank 0,2,1 above; this is 0,3,1. */
.bfs-statement .bfs-statement__feature-icon svg.bfs-icon,
.bfs-statement .bfs-statement__feature-icon svg.bfs-icon path,
.bfs-statement .bfs-statement__feature-icon svg.bfs-icon circle {
	fill: none;
	stroke: currentColor;
}

/* Deliberately NOT `vector-effect: non-scaling-stroke` — that pins the stroke
   to screen pixels, so a 1.4 stroke in a 24 viewBox drawn at 40px renders at
   1.4px instead of ~2.3px and the whole row goes spindly. Any icon that scales
   a group internally compensates with its own stroke-width instead (see the
   surf icon in BCW_Icons). */

.bfs-statement .bfs-statement__feature-icon i {
	font-size: 32px;
	line-height: 1;
	color: currentColor;
}

.bfs-statement .bfs-statement__feature-label {
	font-family: var(--bfs-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bfs-accent);
}

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

@media (max-width: 640px) {
	.bfs-statement .bfs-statement__features {
		flex-wrap: wrap;
		gap: 32px 24px;
	}
}