/* Balerfornia Guest Stories — marquee of real guest quotes under a centred
   star + headline block. Modeled on the Lavender Shore reference's
   `.stories-home-a`.

   SPECIFICITY NOTE — the same trap as every other widget here; do not collapse
   these selectors into single-class rules. CozyStay's main.min.css styles bare
   tags via `.elementor-section h2 / p / blockquote` (0,1,1), which outranks a
   naive 0,1,0 rule. Everything below is scoped under `.bfgs` (0,2,0) at
   minimum. There are no anchors in this widget; if one is ever added it needs
   0,4,0 to beat
   `.elementor-element a:not([class*="button"]):not(:hover) { color: inherit }`.

   BAND NOTE — the reference's explore + stories sections form ONE continuous
   band, rounded at the top of explore and the bottom of stories, and both use
   a background GRADIENT while their background-color stays transparent. This
   picks up the Experience Grid's flat sage and fades it to cream. */

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

.bfgs {
	--bfgs-from: #C8D1BC;
	--bfgs-to: #F6F1E7;
	--bfgs-card-bg: #FFFFFF;
	--bfgs-text: #053932;
	--bfgs-accent: #7DA086;
	--bfgs-speed: 72s;
	--bfgs-gap: 8px;
	--bfgs-card-w: clamp(280px, 44vw, 558px);

	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: linear-gradient(var(--bfgs-from), var(--bfgs-to));

	/* Closes the band the Experience Grid opens. The -24px pulls the rounded
	   bottom over the section beneath it, exactly as the reference does. */
	border-radius: 0 0 24px 24px;
	margin-bottom: -24px;
	/* The reference's section reads `padding: 0 0 160px`, but it opens with a
	   `.section-divider` carrying `margin-bottom: 160px` — so it really does
	   have ~160px of top space. Taking the padding at face value and dropping
	   the divider as decorative leaves the star row jammed against the band's
	   top edge. Match the same rhythm the Experience Grid uses. */
	padding: clamp(72px, 11vh, 160px) 0;
	position: relative;
	z-index: 3;
	overflow: clip;
}

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

/* ---- Head ---------------------------------------------------------------- */

.bfgs .bfgs__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 32px;
	max-width: 560px;
	margin: 0 auto clamp(40px, 6vw, 80px);
}

/* ---- Stars --------------------------------------------------------------- */

.bfgs .bfgs__stars {
	position: relative;
	display: inline-flex;
	color: var(--bfgs-accent);
}

.bfgs .bfgs__stars-row {
	display: flex;
	align-items: center;
	gap: 4px;
	width: max-content;
}

/* The track is the same row at low opacity; the clip above it reveals the
   true fraction of the rating. 4.84 must not render as five solid stars. */
.bfgs .bfgs__stars-row--track {
	opacity: 0.28;
}

.bfgs .bfgs__stars-clip {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
}

.bfgs .bfgs__star {
	display: block;
	flex: 0 0 auto;
}

/* ---- Headline ------------------------------------------------------------ */

.bfgs .bfgs__headline {
	margin: 0;
	padding: 0;
	font-family: 'Playfair Display', Georgia, serif;
	/* Weight 400 is the point — the same restraint as the Statement section.
	   Bold makes it shout. Do not "fix" this to 700. */
	font-weight: 400;
	font-size: clamp(2.5rem, 5.5vw, 5.5rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--bfgs-text);
	text-align: center;
}

.bfgs .bfgs__headline em {
	font-style: italic;
}

.bfgs .bfgs__subtitle {
	margin: 0;
	padding: 0;
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: var(--bfgs-text);
	text-align: center;
}

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

.bfgs .bfgs__marquee {
	/* `clip` not `hidden`: hidden would make this a scroll container and let
	   the animation nudge the page's scroll position. */
	overflow: clip;
}

.bfgs .bfgs__track {
	display: flex;
	align-items: stretch;
	gap: var(--bfgs-gap);
	width: max-content;
	margin: 0;
	padding: 0 clamp(20px, 4vw, 56px);
	list-style: none;
	animation: bfgs-scroll var(--bfgs-speed) linear infinite;
	will-change: transform;
}

/* Advances by exactly one set width, so the duplicate set lands where the
   original started and the loop is seamless. --bfgs-advance is set inline
   from PHP because only it knows the card count. */
@keyframes bfgs-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--bfgs-advance)), 0, 0); }
}

.bfgs--pause-hover:hover .bfgs__track,
.bfgs--pause-hover:focus-within .bfgs__track {
	animation-play-state: paused;
}

/* ---- Card ---------------------------------------------------------------- */

.bfgs .bfgs__card {
	flex: 0 0 var(--bfgs-card-w);
	/* CENTRED as one group, not pinned top-and-bottom. The reference uses
	   `justify-content: space-between` on a fixed 440px card — but its top tile
	   carries a source logo, which anchors the quote. With no logo (Tiara
	   dropped the idea), space-between just stranded the quote at the top and
	   the attribution at the very bottom with a void between them; they read as
	   two unrelated things. Centring them with a tight gap makes the card one
	   coherent block, which is what she asked for.
	   Height comes down to suit: the old 360 existed to fill a space-between
	   card, and centred content doesn't need it. */
	min-height: clamp(240px, 20vw, 300px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	/* 20, not 40 — the attribution belongs WITH the quote it attributes. */
	gap: 20px;
	padding: 32px;
	margin: 0;
	border-radius: 16px;
	background: var(--bfgs-card-bg);
	list-style: none;
}

.bfgs .bfgs__card-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 32px;
}

.bfgs .bfgs__logo {
	height: 32px;
	width: auto;
	max-width: 100%;
	display: block;
}

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

.bfgs .bfgs__card .bfgs__quote::before,
.bfgs .bfgs__card .bfgs__quote::after {
	content: none;
}

.bfgs .bfgs__card .bfgs__quote-text {
	margin: 0;
	padding: 0;
	/* Sans on purpose. The reference reserves the serif for the section
	   headline alone — a serif quote here flattens the hierarchy. */
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: var(--bfgs-text);
	text-align: left;
}

.bfgs .bfgs__card-bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.bfgs .bfgs__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(--bfgs-text);
}

.bfgs .bfgs__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(--bfgs-text);
	opacity: 0.48;
}

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

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

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

@media (max-width: 767px) {
	.bfgs .bfgs__card {
		padding: 24px;
		gap: 24px;
	}

	.bfgs .bfgs__card-top {
		gap: 24px;
	}

	.bfgs .bfgs__head {
		gap: 24px;
	}
}