/* Balerfornia Featured Story — one big guest pull-quote beside one photo, on a
   full-bleed band. Models the Lavender Shore reference's `.see-section`.

   SPECIFICITY NOTE — CozyStay's main.min.css styles bare `blockquote`, `p`, and
   `figure` via `.elementor-section …` (0,1,1) and adds a rule + indent +
   decorative quote marks to blockquotes. Everything is scoped under `.bff`
   (0,2,0 minimum) and the blockquote's own theme treatment is explicitly reset
   below. No anchors in this widget.

   Unlike Guest Stories (sans, many small cards), the serif IS used here: it is
   ONE quote given the whole section, so it reads as an editorial pull-quote,
   not a shouting headline. */

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

.bff {
	--bff-bg: #053932;
	--bff-text: #F6F1E7;
	--bff-accent: #7DA086;
	--bff-ratio: 4 / 5;

	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bff-bg);
	padding: clamp(72px, 12vh, 140px) 0;
}

.bff .bff__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

.bff .bff__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

/* Photo side. Default markup order is text then media (media on the right);
   swap the columns for image-left. */
.bff--img-left .bff__text {
	order: 2;
}

.bff--img-left .bff__media {
	order: 1;
}

/* ---- Text ---------------------------------------------------------------- */

.bff .bff__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 40px);
}

.bff .bff__eyebrow {
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bff-accent);
}

/* Reset the theme's blockquote treatment — CozyStay gives it a rule, an
   indent, and decorative quote marks, none of which belong here. */
.bff .bff__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
}

.bff .bff__quote::before,
.bff .bff__quote::after {
	content: none;
}

.bff .bff__quote .bff__quote-text {
	margin: 0;
	padding: 0;
	font-family: 'Playfair Display', Georgia, serif;
	/* Weight 400 — the restraint is the point, even on the serif. */
	font-weight: 400;
	font-size: clamp(1.6rem, 3.4vw, 3rem);
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--bff-text);
	text-align: left;
}

.bff .bff__quote .bff__quote-text em {
	font-style: italic;
}

.bff .bff__attr {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.bff .bff__name {
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bff-text);
}

.bff .bff__meta {
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bff-text);
	opacity: 0.55;
}

/* ---- Media --------------------------------------------------------------- */

.bff .bff__media {
	margin: 0;
	padding: 0;
}

.bff .bff__media .bff__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--bff-ratio);
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
}

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

@media (max-width: 899px) {
	.bff .bff__grid {
		grid-template-columns: 1fr;
		gap: clamp(28px, 6vw, 44px);
	}

	/* Lead with the photo on narrow screens regardless of the desktop side. */
	.bff .bff__text {
		order: 2;
	}

	.bff .bff__media {
		order: 1;
	}

	.bff--img-left .bff__text,
	.bff--img-left .bff__media {
		order: unset;
	}

	.bff .bff__media .bff__img {
		/* A tall portrait crop eats the screen on mobile; cap it to landscape-ish. */
		aspect-ratio: 3 / 2;
	}
}