/**
 * Homepage sections.
 *
 * Each section uses the shared --ff-* tokens from main.css and is fully
 * scoped under `.ff-section--{name}` so we can prune or reorder sections
 * without one bleeding into another.
 *
 * @package FlanFudge
 */

/* =========================================================================
 * Generic section shell
 * ========================================================================= */

.ff-section {
	position: relative;
	padding-block: clamp(40px, 6vw, 96px);
}

/* Tighter top spacing right after the sticky header (hero specifically). */
.ff-section--hero { padding-block: clamp(16px, 2vw, 24px) clamp(40px, 5vw, 80px); }

/* Tints used to differentiate sections (mirrors Lovable's subtle bg shifts). */
.ff-section--mist { background: var(--ff-mist); }
.ff-section--cream { background: var(--ff-cream); }

.ff-section__header {
	max-width: 720px;
	margin: 0 0 var(--ff-space-12);
}

.ff-section__header--center {
	margin-inline: auto;
	text-align: center;
}

/* Two-column header (title block + right-aligned CTA) used on
   "Signature picks → View all", "Why FlanFudge → See Reviews", etc.
   Matches the Lovable layout where the secondary action sits in line
   with the section's body intro at desktop widths. */
.ff-section__header--with-cta {
	max-width: none;
	display: block;
}

.ff-section__header--with-cta .ff-section__header-text {
	max-width: 720px;
}

@media (min-width: 1024px) {
	.ff-section__header--with-cta {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		column-gap: var(--ff-space-10);
	}
	.ff-section__header--with-cta .ff-section__cta-link {
		margin: 0;
		align-self: end;
		white-space: nowrap;
	}
}

.ff-section__intro {
	font-size: var(--ff-text-lg);
	color: var(--ff-muted-fg);
	line-height: var(--ff-leading-relaxed);
	max-width: 64ch;
	margin: var(--ff-space-3) 0 0;
}

body.flanfudge .ff-section__title {
	margin: var(--ff-space-3) 0 0;
	color: var(--ff-foreground);
}

.ff-eyebrow {
	display: inline-block;
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-semibold);
	letter-spacing: var(--ff-tracking-widest);
	text-transform: uppercase;
	color: var(--ff-accent);
	margin: 0;
}

/* =========================================================================
 * 1. Hero — full-bleed image with centered overlay text
 * ========================================================================= */

.ff-hero {
	position: relative;
	border-radius: var(--ff-radius-xl);
	overflow: hidden;
	min-height: clamp(420px, 70vh, 720px);
	color: var(--ff-cream);
	display: grid;
	place-items: end center;
	isolation: isolate;
}

.ff-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--ff-mist);
}

.ff-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Background video layer (native MP4 or YouTube fallback). */
.ff-hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

/* Self-hosted MP4 — zero player chrome. */
.ff-hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
	pointer-events: none;
}

/* YouTube fallback — oversized crop hides controls, title, and channel bar. */
.ff-hero__video--youtube .ff-hero__video-crop {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ff-hero__video--youtube .ff-hero__video-player {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 320%;
	height: 320%;
	max-width: none;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ff-hero__video--youtube .ff-hero__video-player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

/* Blocks taps from surfacing YouTube UI on touch devices. */
.ff-hero__video-shield {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: transparent;
	pointer-events: auto;
}

.ff-hero__media--video-youtube::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		var(--ff-mist) 0%,
		rgba(237, 239, 232, 0.35) 12%,
		transparent 28%,
		transparent 72%,
		rgba(0, 0, 0, 0.28) 100%
	);
}

.ff-hero__media--video img {
	z-index: -1;
}

.ff-hero__media--video-native > img {
	display: none;
}

.ff-hero__media--video-native .ff-hero__bg-video {
	z-index: 0;
}

/* Mobile: portrait frame; image must edge-to-edge cover the media box.
   Desktop keeps the tall cinematic height below. */
@media (max-width: 639.99px) {
	.ff-hero {
		min-height: 0;
		aspect-ratio: 4 / 5;
		width: 100%;
	}

	.ff-hero__media {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	body.flanfudge .ff-hero__media--video-youtube .ff-hero__video-player {
		width: 420%;
		height: 420%;
	}

	/* Higher specificity + beats body.flanfudge img and WP
	   inline width/height attributes on uploaded hero assets. */
	body.flanfudge .ff-hero__media img,
	body.flanfudge .ff-hero__bg-video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		min-width: 100%;
		min-height: 100%;
		object-fit: cover;
		object-position: center center;
		display: block;
	}
}

.ff-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0.18) 60%,
		rgba(0, 0, 0, 0.42) 100%);
	z-index: -1;
}

.ff-hero__inner {
	width: 100%;
	max-width: 720px;
	padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ff-space-6);
}

.ff-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-2);
	padding: 8px 16px;
	border-radius: var(--ff-radius-pill);
	background: rgb(31 42 36 / 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--ff-cream);
	font-size: var(--ff-text-sm);
	font-weight: var(--ff-weight-semibold);
	letter-spacing: var(--ff-tracking-widest);
	text-transform: uppercase;
}

.ff-hero__eyebrow svg {
	width: 16px;
	height: 16px;
	fill: var(--ff-cream);
}

/* `body.flanfudge` prefix wins over `body.flanfudge h1 { color: ... }`
   in main.css and over Elementor's `.elementor-kit-N h1` resets without
   needing here — compat.css already handles plugin edge
   cases. */
body.flanfudge .ff-hero__title {
	font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
	font-weight: var(--ff-weight-medium);
	letter-spacing: var(--ff-tracking-tight);
	line-height: 1.05;
	color: var(--ff-cream);
	margin: 0;
	text-shadow: 0 2px 18px rgb(0 0 0 / 0.25);
}

/* Italic emphasis for the trailing phrase in the hero title — matches
   Lovable's "Desserts _worth craving._" typesetting. The em renders on
   its own line at >=480px, then collapses inline on very small screens
   so the headline still fits. */
body.flanfudge .ff-hero__title-em {
	font-style: italic;
	font-weight: var(--ff-weight-medium);
	color: inherit;
	display: inline;
}

@media (min-width: 480px) {
	body.flanfudge .ff-hero__title-em {
		display: block;
		margin-top: 0.1em;
	}
}

.ff-hero__cta {
	background: var(--ff-cream);
	color: var(--ff-foreground);
	border-color: var(--ff-cream);
	padding: 0.9rem 1.6rem;
	font-size: var(--ff-text-base);
}

.ff-hero__cta:hover {
	background: var(--ff-foreground);
	color: var(--ff-cream);
	border-color: var(--ff-foreground);
}

.ff-hero__cta svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =========================================================================
 * 2. Signature picks — product cards
 * ========================================================================= */

.ff-products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-6);
}
/* Brand-wide grid contract: 1 / 2 / 4 columns. Matches the
   "You might also love" related row on the PDP and applies to every
   product-listing surface (Menu page, Shop, signature picks). */
@media (min-width: 640px)  { .ff-products { grid-template-columns: repeat(2, 1fr); gap: var(--ff-space-6); } }
@media (min-width: 1024px) { .ff-products { grid-template-columns: repeat(4, 1fr); gap: var(--ff-space-6); } }

/* Menu page width guard: stabilizes card widths on /menu/. */
body.post-type-archive-product.flanfudge-shop .ff-products {
	width: min(100%, 1240px);
	margin-inline: auto;
}

.ff-product {
	background: var(--ff-card);
	border-radius: var(--ff-radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgb(31 42 36 / 0.04),
	            0 4px 16px rgb(31 42 36 / 0.04);
	transition: transform var(--ff-dur-base) var(--ff-ease-out),
	            box-shadow var(--ff-dur-base) var(--ff-ease-out);
}

.ff-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgb(31 42 36 / 0.10);
}

.ff-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.ff-product__media-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ff-product__media-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ff-dur-slow) var(--ff-ease-out);
}

.ff-product:hover .ff-product__media-link img {
	transform: scale(1.04);
}

.ff-product__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 14px;
	border-radius: var(--ff-radius-pill);
	background: rgb(247 241 225 / 0.96);
	color: var(--ff-foreground);
	font-size: 10px;
	font-weight: var(--ff-weight-bold);
	letter-spacing: var(--ff-tracking-widest);
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ff-product__added-notice {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	margin: 0;
	padding: 0.65rem var(--ff-space-4);
	font-size: 0.8125rem;
	font-weight: var(--ff-weight-semibold);
	color: var(--ff-foreground);
	text-align: center;
	background: color-mix(in oklch, var(--ff-olive-soft) 72%, var(--ff-cream));
	border-bottom: 1px solid var(--ff-border);
	border-radius: var(--ff-radius-xl) var(--ff-radius-xl) 0 0;
	box-shadow: 0 4px 12px rgb(31 42 36 / 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--ff-dur-fast) var(--ff-ease),
		visibility var(--ff-dur-fast) var(--ff-ease),
		transform var(--ff-dur-fast) var(--ff-ease);
	pointer-events: none;
}

.ff-product__added-notice.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ff-product__body {
	padding: var(--ff-space-6) var(--ff-space-6) var(--ff-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-2);
	flex-grow: 1;
}

body.flanfudge .ff-product__title {
	font-size: 1.125rem;
	font-weight: var(--ff-weight-medium);
	color: var(--ff-foreground);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}

/* Homepage signature grid — clamp long WC titles on small screens */
.ff-section--signature-picks .ff-product__title,
.ff-section--signature-picks .ff-product__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ff-product__title a {
	color: inherit;
}

.ff-product__desc {
	color: var(--ff-muted-fg);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
	min-height: 2.6em;
}

.ff-product__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-space-3);
	margin-top: auto;
	padding-top: var(--ff-space-5);
}

.ff-product__price {
	font-size: 1.0625rem;
	font-weight: var(--ff-weight-bold);
	color: var(--ff-foreground);
	letter-spacing: -0.01em;
}

.ff-product__add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Visual padding stays intentionally slim to match Lovable, but
	   `min-height: 40px` guarantees an accessible touch-target size
	   on mobile without inflating the pill on desktop. */
	padding: 0.55rem 1.15rem;
	min-height: 40px;
	border-radius: var(--ff-radius-pill);
	background: var(--ff-primary);
	color: var(--ff-primary-foreground);
	border: 1px solid var(--ff-primary);
	font-size: 0.875rem;
	font-weight: var(--ff-weight-semibold);
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--ff-dur-fast) var(--ff-ease),
	            transform var(--ff-dur-fast) var(--ff-ease),
	            box-shadow var(--ff-dur-fast) var(--ff-ease);
}

.ff-product__add:hover,
.ff-product__add:focus-visible {
	background: var(--ff-olive-soft);
	color: var(--ff-primary-foreground);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgb(31 42 36 / 0.18);
}

.ff-product__add:active {
	transform: scale(0.97);
}

.ff-product__add svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* =========================================================================
 * 3. Categories — image cards with overlay text
 * ========================================================================= */

/* Categories — single row of 5 cards at desktop, gracefully stepping down
   to 3 / 2 / 1 columns on smaller breakpoints. The aspect on the cards
   tightens at single-row widths so the image still feels like a portrait
   tile rather than a thin strip. */
.ff-categories {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-5);
}
@media (min-width: 560px)  { .ff-categories { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ff-categories { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ff-categories { grid-template-columns: repeat(5, 1fr); gap: var(--ff-space-4); } }

.ff-cat {
	position: relative;
	border-radius: var(--ff-radius-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: block;
	color: var(--ff-cream);
	transition: transform var(--ff-dur-base) var(--ff-ease-out),
	            box-shadow var(--ff-dur-base) var(--ff-ease-out);
	box-shadow: 0 1px 2px rgb(31 42 36 / 0.04);
}

/* Tablet: slightly taller tiles in the 2–3 column grid */
@media (min-width: 560px) and (max-width: 1279.99px) {
	.ff-cat {
		aspect-ratio: 4 / 5;
	}
}

.ff-cat:hover,
.ff-cat:focus-visible {
	transform: translateY(-4px);
	color: var(--ff-cream);
	box-shadow: 0 14px 36px rgb(31 42 36 / 0.16);
}

.ff-cat img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ff-dur-slow) var(--ff-ease-out);
}

.ff-cat:hover img { transform: scale(1.05); }

.ff-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.20) 65%,
		rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.ff-cat__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--ff-space-5) var(--ff-space-5) var(--ff-space-4);
	z-index: 1;
}

@media (min-width: 1280px) {
	.ff-cat__body { padding: var(--ff-space-4); }
}

body.flanfudge .ff-cat__title {
	font-size: clamp(1.25rem, 1vw + 0.6rem, 1.625rem);
	font-weight: var(--ff-weight-medium);
	color: var(--ff-cream);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.40);
}

@media (min-width: 1280px) {
	body.flanfudge .ff-cat__title {
		font-size: 1.0625rem;
	}
}

.ff-cat__sub {
	font-size: var(--ff-text-sm);
	color: rgb(247 241 225 / 0.92);
	margin: 0;
	font-weight: var(--ff-weight-medium);
	line-height: 1.35;
}

@media (min-width: 1280px) {
	.ff-cat__sub {
		font-size: 0.78rem;
	}
}

/* =========================================================================
 * 4. Our Story — image LEFT, content RIGHT at desktop (>=960px), stacked
 *    image-then-content on mobile so the image still leads visually.
 * ========================================================================= */

.ff-section--story .flanfudge-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-10);
	align-items: center;
}

@media (min-width: 960px) {
	.ff-section--story .flanfudge-container {
		grid-template-columns: 1fr 1fr;
		gap: clamp(48px, 6vw, 96px);
	}
}

.ff-story__media {
	border-radius: var(--ff-radius-xl);
	overflow: hidden;
	margin-bottom: 0;
	aspect-ratio: 4 / 5;
	box-shadow: 0 16px 48px rgb(31 42 36 / 0.10);
}

@media (max-width: 959.99px) {
	.ff-story__media { aspect-ratio: 16 / 10; }
}

.ff-story__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.ff-story__content {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-4);
	align-items: flex-start;
}

.ff-story__content .ff-eyebrow {
	margin-bottom: 0;
}

.ff-story__content .ff-section__title {
	margin: 0;
}

.ff-story__content .ff-section__intro {
	margin: 0;
}

.ff-story__pull {
	font-style: italic;
	color: var(--ff-muted-fg);
	font-size: var(--ff-text-lg);
	margin: var(--ff-space-2) 0 var(--ff-space-3);
	line-height: var(--ff-leading-relaxed);
}

/* =========================================================================
 * 5. How it works — 4 numbered steps in a row, calm cream cards on the
 *    mist section bg. Numbers are large + light to match Lovable: no
 *    border on the cards, soft two-layer shadow, generous padding so the
 *    grid reads airy at desktop and breathes at mobile.
 * ========================================================================= */

.ff-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-5);
	counter-reset: step;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px)  { .ff-steps { grid-template-columns: repeat(2, 1fr); gap: var(--ff-space-6); } }
@media (min-width: 1024px) { .ff-steps { grid-template-columns: repeat(4, 1fr); gap: var(--ff-space-6); } }

.ff-section--how-it-works .ff-step {
	background-color: color-mix(in oklab, var(--ff-cream) 60%, transparent);
	border: 1px solid color-mix(in oklab, var(--ff-olive) 15%, transparent);
}

.ff-step {
	background: var(--ff-card);
	border: 0;
	border-radius: var(--ff-radius-lg);
	padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-3);
	box-shadow: 0 1px 2px rgb(31 42 36 / 0.04),
	            0 4px 16px rgb(31 42 36 / 0.04);
	transition: transform var(--ff-dur-base) var(--ff-ease-out),
	            box-shadow var(--ff-dur-base) var(--ff-ease-out);
}

.ff-step:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgb(31 42 36 / 0.10);
}

.ff-step__num {
	font-size: 1.2rem;
	font-weight: var(--ff-weight-medium);
	color: var(--ff-accent);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--ff-space-1);
}

body.flanfudge .ff-step__title {
	font-size: 1.125rem;
	font-weight: var(--ff-weight-semibold);
	color: var(--ff-foreground);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.ff-step__desc {
	color: var(--ff-muted-fg);
	margin: 0;
	line-height: 1.55;
	font-size: 0.9375rem;
}

.ff-section--how-it-works .ff-section__cta {
	margin-top: var(--ff-space-10);
	display: flex;
	justify-content: flex-start;
}

/* =========================================================================
 * 6. Why FlanFudge — 4 reason cards in a single row at desktop. Renders on
 *    the default cream body bg (no mist) so the cards keep a soft floating
 *    feel via shadow rather than fighting a tinted background.
 * ========================================================================= */

.ff-reasons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px)  { .ff-reasons { grid-template-columns: repeat(2, 1fr); gap: var(--ff-space-6); } }
@media (min-width: 1024px) { .ff-reasons { grid-template-columns: repeat(4, 1fr); gap: var(--ff-space-6); } }

.ff-reason {
	background: var(--ff-card);
	border-radius: var(--ff-radius-lg);
	padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-3);
	box-shadow: 0 1px 2px rgb(31 42 36 / 0.04),
	            0 4px 16px rgb(31 42 36 / 0.04);
	transition: transform var(--ff-dur-base) var(--ff-ease-out),
	            box-shadow var(--ff-dur-base) var(--ff-ease-out);
}

.ff-reason:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgb(31 42 36 / 0.10);
}

body.flanfudge .ff-reason__title {
	font-size: 1.125rem;
	font-weight: var(--ff-weight-semibold);
	color: var(--ff-foreground);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.ff-reason__desc {
	color: var(--ff-muted-fg);
	margin: 0;
	line-height: 1.55;
	font-size: 0.9375rem;
}

.ff-section--why .ff-section__cta-link {
	margin-top: var(--ff-space-10);
}

/* =========================================================================
 * 7. Seen on feeds — 4 creator image cards with a clean white quote pill
 *    pinned to the bottom of each tile. Cards use a portrait 4:5 crop and
 *    a larger radius (xl) to match Lovable's softer card silhouette in
 *    this section. Pill goes solid (no transparency) for crisper legibility.
 * ========================================================================= */

.ff-creators {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px)  { .ff-creators { grid-template-columns: repeat(2, 1fr); gap: var(--ff-space-6); } }
@media (min-width: 1024px) { .ff-creators { grid-template-columns: repeat(4, 1fr); gap: var(--ff-space-6); } }

.ff-creator {
	position: relative;
	border-radius: var(--ff-radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--ff-mist);
	box-shadow: 0 1px 2px rgb(31 42 36 / 0.04),
	            0 4px 16px rgb(31 42 36 / 0.05);
	transition: transform var(--ff-dur-base) var(--ff-ease-out),
	            box-shadow var(--ff-dur-base) var(--ff-ease-out);
}

.ff-creator:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgb(31 42 36 / 0.14);
}

.ff-creator__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ff-dur-slow) var(--ff-ease-out);
}

.ff-creator:hover .ff-creator__media { transform: scale(1.04); }

.ff-creator__media--youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}

.ff-creator__quote {
	position: absolute;
	left: var(--ff-space-4);
	right: var(--ff-space-4);
	bottom: var(--ff-space-4);
	background: #f9f5e8;
	border-radius: var(--ff-radius-lg);
	padding: clamp(14px, 1.4vw, 18px) clamp(14px, 1.4vw, 18px);
	margin: 0;
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.12);
}

.ff-creator__quote blockquote {
	border: 0;
	border-left: 0;
	padding: 0;
	margin: 0;
}

.ff-creator__handle {
	font-size: 0.8125rem;
	font-weight: var(--ff-weight-bold);
	color: var(--ff-foreground);
	margin: 0 0 4px;
	letter-spacing: -0.005em;
}

.ff-creator__handle-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--ff-dur-fast) var(--ff-ease), opacity var(--ff-dur-fast) var(--ff-ease);
}

.ff-creator__handle-link:hover,
.ff-creator__handle-link:focus-visible {
	color: var(--ff-foreground);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ff-creator__handle-link:focus-visible {
	outline: 2px solid var(--ff-foreground);
	outline-offset: 2px;
}

.ff-creator__text {
	font-size: 0.9375rem;
	color: var(--ff-muted-fg);
	margin: 0;
	line-height: 1.5;
}

.ff-section--social .ff-section__cta-link {
	margin-top: var(--ff-space-10);
}

.ff-section__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--ff-space-12);
	color: var(--ff-foreground);
	font-weight: var(--ff-weight-bold);
}

.ff-section__cta-link svg {
	width: 16px; height: 16px;
	stroke: currentColor; fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--ff-dur-fast) var(--ff-ease);
}

.ff-section__cta-link:hover svg { transform: translateX(3px); }

/* =========================================================================
 * 8. Feed to checkout — eyebrow + h2 + body, then a CTA pair, then a
 *    4-up image gallery (mobile collapses to 2-up).
 * ========================================================================= */

.ff-feed__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff-space-3);
	margin-top: var(--ff-space-6);
	margin-bottom: var(--ff-space-10);
}

.ff-feed__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ff-space-4);
}

@media (min-width: 720px) {
	.ff-feed__gallery {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--ff-space-5);
	}
}

.ff-feed__gallery-item {
	margin: 0;
	border-radius: var(--ff-radius-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--ff-mist);
	box-shadow: 0 1px 2px rgb(31 42 36 / 0.04);
	transition: transform var(--ff-dur-base) var(--ff-ease-out),
	            box-shadow var(--ff-dur-base) var(--ff-ease-out);
}

.ff-feed__gallery-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgb(31 42 36 / 0.14);
}

.ff-feed__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ff-dur-slow) var(--ff-ease-out);
}

.ff-feed__gallery-item:hover img { transform: scale(1.05); }

/* =========================================================================
 * 9. Final CTA — dark olive band
 * ========================================================================= */

.ff-final {
	background: var(--ff-foreground);
	color: var(--ff-cream);
	border-radius: var(--ff-radius-xl);
	padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
	text-align: center;
}

body.flanfudge .ff-final__title {
	color: var(--ff-cream);
	font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
	font-weight: var(--ff-weight-medium);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 var(--ff-space-4);
}

/* Restore paragraph spacing here — global `body.flanfudge p { margin: 0 }`
   would otherwise win over this class alone. */
body.flanfudge .ff-section--final-cta p {
	margin: 0 0 var(--ff-space-4);
}

body.flanfudge .ff-section--final-cta .ff-final__body {
	max-width: 60ch;
	margin: 0 auto var(--ff-space-8);
	color: rgb(247 241 225 / 0.78);
	font-size: var(--ff-text-lg);
	line-height: var(--ff-leading-relaxed);
}

.ff-final__ctas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ff-space-3);
	justify-content: center;
}

.ff-final__cta--primary {
	background: var(--ff-cream);
	color: var(--ff-foreground);
	border-color: var(--ff-cream);
}

.ff-final__cta--primary:hover {
	background: rgb(247 241 225 / 0.85);
	color: var(--ff-foreground);
	border-color: rgb(247 241 225 / 0.85);
}

.ff-final__cta--secondary {
	background: transparent;
	color: var(--ff-cream);
	border-color: rgb(247 241 225 / 0.45);
}

.ff-final__cta--secondary:hover {
	background: rgb(247 241 225 / 0.08);
	color: var(--ff-cream);
}

.ff-final__cta svg {
	width: 18px; height: 18px;
	stroke: currentColor; fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =========================================================================
 * Shared CTA "ghost arrow" pill used on Read Our Story etc.
 * ========================================================================= */

.ff-arrow-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-2);
	padding: 0.7rem 1.3rem;
	border-radius: var(--ff-radius-pill);
	border: 1px solid var(--ff-border);
	background: transparent;
	color: var(--ff-foreground);
	font-weight: var(--ff-weight-bold);
}

.ff-arrow-cta:hover {
	background: var(--ff-mist);
	color: var(--ff-foreground);
}

.ff-arrow-cta svg {
	width: 16px; height: 16px;
	stroke: currentColor; fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--ff-dur-fast) var(--ff-ease);
}

.ff-arrow-cta:hover svg { transform: translateX(3px); }