/* ============================================================================
 * BRIEFLY — HERO SHAPE PACK.  Six structurally distinct heroes.
 *
 * ── THE DEFECT THIS ANSWERS ─────────────────────────────────────────────────
 * Measured across the 28 shipped themes: eight hero pairs are 100% structurally
 * identical, token for token. ascend/as_hero_transform, impact/im_hero_mission,
 * meridian/md_hero_trust and paws/pw_hero_care are ONE hero — a coaching
 * business, a children's charity, a dental practice and a pet groomer, wearing
 * the same skeleton in different colours. forge/torque and gather/savor are two
 * more pairs. 28 of 351 cross-theme hero pairs sit above 80% similarity.
 *
 * The hero is the screenshot. It is what a reviewer sees before they read a
 * word, and it is the frame every "let's try this WordPress plugin" video
 * opens on. Nothing else in the suite repays structural variety as directly.
 *
 * ── WHAT MAKES THESE DIFFERENT, AND WHY IT IS NOT DECORATION ────────────────
 * The existing "signature" for each theme is a palette, a font pair, and two to
 * five accent classes on otherwise-identical cards. That is the SURFACE layer.
 * These six differ at the STRUCTURAL layer: where the eye lands first, whether
 * text and image overlap or sit in tracks, whether the section is contained or
 * full-bleed, whether content scrolls sideways. A viewer registers that from
 * three feet away, before any corner detail resolves.
 *
 * Suite-wide today there are ZERO uses of grid-template-areas, ZERO of
 * position:sticky, four negative margins and six scroll-snap declarations (all
 * in one theme). Three of the six shapes below are built on exactly those
 * primitives, deliberately.
 *
 * ── CONTRACTS ───────────────────────────────────────────────────────────────
 * Every var() carries a literal fallback — the page survives a missing scope
 * class, and a bare var() is invisible to the contrast auditor. No inline
 * track lists: every grid is declared here where a media query can reach it,
 * because there is no !important in the suite and an inline declaration could
 * never be overridden. One breakpoint, 760px, matching .ewpk-grid. No shape
 * animates itself; each inherits the theme's reveal class.
 * ========================================================================== */

/* ── SHARED HERO GROUND ──────────────────────────────────────────────────── */

.bfy-hero {
	position: relative;
	padding: var(--bfy-hero-pad, clamp(3rem, 7vw, 5.5rem)) var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	box-sizing: border-box;
}
.bfy-hero__inner { max-width: var(--bfy-hero-w, var(--bfy-head-measure-wide, 1160px)); margin: 0 auto; }

.bfy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bfy-hero-action-gap, 0.85rem);
	margin-top: var(--bfy-hero-action-mt, 1.75rem);
}

/* Images fill their frame. The frame decides the shape, never the photograph —
   a hero that changes proportion when someone swaps the picture is the single
   most common way a template build falls apart after handover. */
/* Same fallback box as the core sections: ignored wherever a hero plate,
   rail or bento tile already declares its own ratio. */
.bfy-hero img { display: block; width: 100%; height: 100%; aspect-ratio: var(--bfy-hero-ratio, 4/3); object-fit: cover; }

/* A proof chip: rating, years trading, accreditation. Small, factual, and
   positioned by the shape rather than floated arbitrarily. */
.bfy-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--bfy-eyebrow-size, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.55rem 0.9rem;
	background: var(--bfy-hero-chip-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	color: var(--bfy-hero-chip-ink, var(--wp--preset--color--foreground, #16181D));
	border: 1px solid var(--bfy-hero-chip-border, rgba(18, 24, 28, 0.12));
	border-radius: var(--bfy-hero-chip-radius, 999px);
	box-shadow: var(--bfy-hero-chip-shadow, 0 8px 24px rgba(18, 24, 28, 0.10));
}


/* ── 1. SPLIT-OVERLAP ────────────────────────────────────────────────────────
 * Text panel, and an image card that breaks OUT of its track and sits over the
 * panel's edge. The proof chip pins to the seam where they cross.
 *
 * The overlap is the whole point. Two tidy columns side by side is what all 28
 * themes already do; a deliberate collision between them is what a designer
 * does and a generator does not. It is also the cheapest way to make a page
 * feel composed rather than assembled, because it says the two elements were
 * placed in relation to each other.
 * -------------------------------------------------------------------------- */

.bfy-hero--split-overlap .bfy-hero__inner {
	display: grid;
	grid-template-columns: var(--bfy-hero-cols, minmax(0, 1.05fr) minmax(0, 0.95fr));
	align-items: center;
	gap: var(--bfy-hero-gap, clamp(1.5rem, 3vw, 2.5rem));
}
.bfy-hero--split-overlap .bfy-hero__panel {
	position: relative;
	z-index: 2;
	padding: var(--bfy-hero-panel-pad, clamp(1.75rem, 3vw, 2.75rem));
	background: var(--bfy-hero-panel-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	border: 1px solid var(--bfy-hero-panel-border, rgba(18, 24, 28, 0.10));
	border-radius: var(--bfy-hero-radius, 16px);
	box-shadow: var(--bfy-hero-panel-shadow, 0 24px 60px rgba(18, 24, 28, 0.10));
}
.bfy-hero--split-overlap .bfy-hero__media {
	position: relative;
	z-index: 1;
	/* The break-out. Pulls left under the panel, and wider than its track. */
	margin-left: var(--bfy-hero-overlap, -12%);
	width: calc(100% + var(--bfy-hero-overshoot, 8%));
	aspect-ratio: var(--bfy-hero-ratio, 4 / 5);
	overflow: hidden;
	border-radius: var(--bfy-hero-radius, 16px);
}
.bfy-hero--split-overlap .bfy-hero__chip {
	position: absolute;
	z-index: 3;
	left: var(--bfy-hero-chip-x, 6%);
	/* v3.35.5 — was -1.1rem: the media box clips its overflow, so the chip was
	   always cut in half. It now sits on the photo, just above its bottom edge. */
	bottom: var(--bfy-hero-chip-y, 1.1rem);
}


/* ── 2. FULL-BLEED SCRIM ─────────────────────────────────────────────────────
 * Edge-to-edge photograph, content sitting on a scrim at the bottom-left.
 *
 * The scrim is a legibility device, not a mood filter. It is opaque enough at
 * the text end to hold contrast against ANY photograph the owner uploads,
 * because we do not get to choose their photograph. That is why the gradient
 * is weighted rather than symmetrical, and why the text sits in the heaviest
 * part of it rather than centred over the middle of the image.
 * -------------------------------------------------------------------------- */

.bfy-hero--full-bleed {
	padding: 0;
	/* Escape the content container without a wrapper. 100vw includes the
	   scrollbar on some engines, so the width is clamped to the viewport the
	   document actually has. */
	width: 100%;
	max-width: 100vw;
	margin-inline: var(--bfy-hero-bleed, calc(50% - 50vw));
	min-height: var(--bfy-hero-min, min(78vh, 720px));
	display: grid;
	overflow: hidden;
	isolation: isolate;
}
.bfy-hero--full-bleed > * { grid-area: 1 / 1; }
.bfy-hero--full-bleed .bfy-hero__media { width: 100%; height: 100%; }
.bfy-hero--full-bleed .bfy-hero__scrim {
	background: var(--bfy-hero-scrim,
		linear-gradient(to top,
			rgba(8, 10, 14, 0.88) 0%,
			rgba(8, 10, 14, 0.62) 34%,
			rgba(8, 10, 14, 0.18) 68%,
			rgba(8, 10, 14, 0.04) 100%));
}
.bfy-hero--full-bleed .bfy-hero__inner {
	align-self: end;
	width: 100%;
	padding: var(--bfy-hero-bleed-pad, clamp(2.5rem, 6vw, 4.5rem)) var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	box-sizing: border-box;
}
.bfy-hero--full-bleed .bfy-hero__copy { max-width: var(--bfy-hero-copy-w, 46ch); }
/* Text on a scrim is light regardless of the theme's canvas. */
.bfy-hero--full-bleed .bfy-head__title,
.bfy-hero--full-bleed .bfy-head__lede,
.bfy-hero--full-bleed .bfy-head__eyebrow { color: var(--bfy-hero-onmedia, #FFFFFF); }
.bfy-hero--full-bleed .bfy-head__lede { color: var(--bfy-hero-onmedia-muted, rgba(255, 255, 255, 0.84)); }

/* A scroll cue, because a hero this tall hides the fact that a page follows. */
.bfy-hero__cue {
	position: absolute;
	right: var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	bottom: 1.75rem;
	width: 1px;
	height: 2.75rem;
	background: linear-gradient(to bottom, transparent, var(--bfy-hero-onmedia, #FFFFFF));
	opacity: 0.7;
}


/* ── 3. EDITORIAL MASTHEAD ───────────────────────────────────────────────────
 * No photograph. A display line that turns, a rule, a standfirst held to one
 * side, and a meta row. Built on grid-template-areas — of which the entire
 * suite currently contains zero.
 *
 * Not every business is improved by a stock photograph at the top of the page.
 * Publishing, law, consulting and luxury all read as MORE credible without one,
 * and a template suite that cannot produce a page without a hero image cannot
 * serve them. This is the shape that lets typography carry the whole opening.
 * -------------------------------------------------------------------------- */

.bfy-hero--masthead .bfy-hero__inner {
	display: grid;
	grid-template-columns: var(--bfy-hero-mast-cols, minmax(0, 1.35fr) minmax(0, 1fr));
	grid-template-areas:
		"kicker  kicker"
		"title   stand"
		"rule    rule"
		"meta    actions";
	column-gap: var(--bfy-hero-gap, clamp(1.5rem, 4vw, 3rem));
	row-gap: var(--bfy-hero-mast-rows, clamp(1rem, 2vw, 1.5rem));
	align-items: end;
	max-width: var(--bfy-hero-mast-w, var(--bfy-head-measure-wide, 1160px));
}
.bfy-hero--masthead .bfy-hero__kicker  { grid-area: kicker; }
.bfy-hero--masthead .bfy-hero__title   { grid-area: title; margin: 0; }
.bfy-hero--masthead .bfy-hero__stand   { grid-area: stand; margin: 0; }
.bfy-hero--masthead .bfy-hero__rule    { grid-area: rule; height: 1px; background: var(--bfy-rule-ink, rgba(18, 24, 28, 0.16)); }
.bfy-hero--masthead .bfy-hero__meta    { grid-area: meta; }
.bfy-hero--masthead .bfy-hero__actions { grid-area: actions; margin-top: 0; justify-content: flex-end; }

.bfy-hero--masthead .bfy-hero__title {
	font-family: var(--bfy-title-font, inherit);
	font-size: var(--bfy-hero-mast-size, clamp(2.5rem, 6.5vw, 4.6rem));
	font-weight: var(--bfy-title-weight, 700);
	line-height: var(--bfy-hero-mast-lh, 1.02);
	letter-spacing: var(--bfy-hero-mast-track, -0.03em);
	color: var(--bfy-title-ink, var(--wp--preset--color--foreground, #16181D));
	text-wrap: balance;
}
/* The turn: a second line held in from the first. A masthead that simply wraps
   reads as text that ran out of room; an indented turn reads as set type. */
.bfy-hero--masthead .bfy-hero__turn {
	display: block;
	padding-left: var(--bfy-hero-turn, 2.5ch);
	color: var(--bfy-hero-turn-ink, var(--wp--preset--color--primary, #0F4C5C));
}
.bfy-hero--masthead .bfy-hero__stand {
	font-size: var(--bfy-lede-size, clamp(1.06rem, 1.4vw, 1.2rem));
	line-height: 1.55;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
	max-width: 42ch;
	text-wrap: pretty;
}
.bfy-hero--masthead .bfy-hero__meta {
	font-size: var(--bfy-eyebrow-size, 0.75rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
}


/* ── 4. BENTO ────────────────────────────────────────────────────────────────
 * A fixed named grid of unequal tiles: the headline, a product plate, a figure,
 * a proof strip. Nothing here is a row of equal cards.
 *
 * Software and hardware pages are the ones reviewers compare hardest against
 * real products, because they have the real products open in another tab. An
 * equal three-up card row is what a page builder produces; a considered tile
 * mix is what Linear, Vercel and Apple actually ship.
 * -------------------------------------------------------------------------- */

.bfy-hero--bento .bfy-hero__inner {
	display: grid;
	grid-template-columns: var(--bfy-hero-bento-cols, repeat(3, minmax(0, 1fr)));
	grid-template-areas:
		"lead lead plate"
		"stat logo plate";
	gap: var(--bfy-hero-bento-gap, clamp(0.75rem, 1.4vw, 1.15rem));
}
.bfy-hero--bento .bfy-tile {
	padding: var(--bfy-hero-tile-pad, clamp(1.25rem, 2.2vw, 2rem));
	background: var(--bfy-hero-tile-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	border: 1px solid var(--bfy-hero-tile-border, rgba(18, 24, 28, 0.10));
	border-radius: var(--bfy-hero-radius, 16px);
	box-sizing: border-box;
	min-width: 0;
}
.bfy-hero--bento .bfy-tile--lead  { grid-area: lead; display: flex; flex-direction: column; justify-content: center; }
.bfy-hero--bento .bfy-tile--plate { grid-area: plate; padding: 0; overflow: hidden; display: grid; }
.bfy-hero--bento .bfy-tile--stat  { grid-area: stat; display: flex; flex-direction: column; justify-content: flex-end; }
.bfy-hero--bento .bfy-tile--logo  { grid-area: logo; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

/* v3.8.32 — THE BENTO HERO BLEW UP ON TERRACE. Two faults, one symptom:
   (1) logo images inherited `.bfy-hero img { width:100%; height:100% }`, so a
       logo (or a photo wrongly placed in a logo slot) rendered at full tile
       width and natural height — four tall pictures stacked in a tile meant
       for a row of small marks;
   (2) the plate's photograph was IN FLOW, so its natural height set the row
       height instead of the grid setting the photo's size, and the whole
       hero grew to the tallest image.
   Logos are now small, contained marks. The plate photo is taken out of flow
   and fills whatever box the grid gives the tile — the frame decides the
   shape, never the photograph, which is this file's own stated rule. */
.bfy-hero--bento .bfy-tile--logo img {
	width: auto;
	max-width: 42%;
	height: var(--bfy-hero-logo-h, clamp(1.4rem, 2.4vw, 2rem));
	aspect-ratio: auto;
	object-fit: contain;
	flex: 0 1 auto;
}
.bfy-hero--bento .bfy-tile--plate { position: relative; min-height: var(--bfy-hero-plate-min, clamp(260px, 32vw, 440px)); }
.bfy-hero--bento .bfy-tile--plate img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
/* No logos (the usual case for a trade): the stat tile takes the whole row
   rather than leaving a hole where the logo tile would have been. */
.bfy-hero--bento .bfy-hero__inner:not(:has(.bfy-tile--logo)) {
	grid-template-areas:
		"lead lead plate"
		"stat stat plate";
}
.bfy-hero--bento .bfy-hero__inner:not(:has(.bfy-tile--stat)):not(:has(.bfy-tile--logo)) {
	grid-template-areas: "lead lead plate";
}

.bfy-hero--bento .bfy-tile--stat .bfy-figure {
	font-size: var(--bfy-hero-figure, clamp(2rem, 4vw, 3rem));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--bfy-hero-figure-ink, var(--wp--preset--color--primary, #0F4C5C));
}
.bfy-hero--bento .bfy-tile--stat .bfy-figure-label {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--bfy-eyebrow-size, 0.75rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
}


/* ── 5. RAIL PREVIEW ─────────────────────────────────────────────────────────
 * A short headline block, then a horizontal scroll-snap strip that previews the
 * work: rooms, dishes, garments, routes, treatments, projects.
 *
 * For a visual business the portfolio IS the pitch, and burying it below three
 * card grids wastes the only thing the visitor came to see. A rail also solves
 * a real content problem the card grid cannot: it does not care whether there
 * are four items or forty, so it never orphans one on a last row.
 * -------------------------------------------------------------------------- */

.bfy-hero--rail .bfy-hero__inner { display: block; }
.bfy-hero--rail .bfy-hero__copy { max-width: var(--bfy-hero-copy-w, 52ch); }

.bfy-hero__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--bfy-hero-rail-w, clamp(210px, 26vw, 300px));
	gap: var(--bfy-hero-rail-gap, clamp(0.75rem, 1.5vw, 1.15rem));
	margin-top: var(--bfy-hero-rail-mt, clamp(1.75rem, 3vw, 2.5rem));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	/* The strip runs to the viewport edge so it reads as continuing rather than
	   stopping — a rail that ends inside the container looks like a broken grid. */
	padding-inline: 0 var(--bfy-hero-gut, clamp(1.5rem, 4vw, 3rem));
	margin-right: var(--bfy-hero-bleed, calc(50% - 50vw));
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.bfy-hero__rail-item {
	scroll-snap-align: start;
	aspect-ratio: var(--bfy-hero-rail-ratio, 3 / 4);
	overflow: hidden;
	border-radius: var(--bfy-hero-radius, 16px);
	position: relative;
	background: var(--bfy-hero-tile-bg, var(--wp--preset--color--background-alt, #FFFFFF));
}
.bfy-hero__rail-cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.85rem 1rem;
	font-size: var(--bfy-eyebrow-size, 0.78rem);
	letter-spacing: 0.04em;
	color: var(--bfy-hero-onmedia, #FFFFFF);
	background: linear-gradient(to top, rgba(8, 10, 14, 0.78), transparent);
}


/* ── 6. STAT ANCHOR ──────────────────────────────────────────────────────────
 * One very large figure, a small label, a supporting row.
 *
 * DELIBERATELY LISTED LAST, AND FLAGGED IN THE REGISTRY. A big number with a
 * small label and a gradient accent is the default answer a generator reaches
 * for, and it appears in AI-built pages regardless of subject. It is genuinely
 * right for a charity, a fundraising campaign or a results-led practice, where
 * the number IS the argument. It is wrong everywhere else, and the planner is
 * told so rather than left to discover it.
 * -------------------------------------------------------------------------- */

.bfy-hero--stat .bfy-hero__inner { max-width: var(--bfy-hero-stat-w, 900px); text-align: center; }
.bfy-hero--stat .bfy-hero__figure {
	display: block;
	font-size: var(--bfy-hero-stat-size, clamp(4rem, 14vw, 9rem));
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var(--bfy-hero-figure-ink, var(--wp--preset--color--primary, #0F4C5C));
	font-variant-numeric: tabular-nums;
}
.bfy-hero--stat .bfy-hero__figure-label {
	display: block;
	margin-top: 0.9rem;
	font-size: var(--bfy-eyebrow-size, 0.8rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
}
.bfy-hero--stat .bfy-hero__support {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--bfy-rule-ink, rgba(18, 24, 28, 0.14));
}
.bfy-hero--stat .bfy-hero__actions { justify-content: center; }


/* ── RESPONSIVE ──────────────────────────────────────────────────────────────
 * 760px, matching .ewpk-grid in render-guards.css, so a page never reflows at
 * two different widths.
 *
 * The overlap and the bento UNDO their structure rather than compress it. A
 * -12% overlap on a 360px screen is a photograph sitting on top of a paragraph,
 * and a three-track bento is four unreadable slivers. A shape that only works
 * wide should stop being that shape, not become a smaller broken version of it.
 * -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.bfy-hero--split-overlap .bfy-hero__inner { grid-template-columns: 1fr; }
	.bfy-hero--split-overlap .bfy-hero__media {
		margin-left: 0;
		width: 100%;
		aspect-ratio: var(--bfy-hero-ratio-sm, 4 / 3);
		order: -1;
	}
	.bfy-hero--split-overlap .bfy-hero__panel { box-shadow: none; }
	.bfy-hero--split-overlap .bfy-hero__chip { position: static; margin-bottom: 1rem; }

	.bfy-hero--masthead .bfy-hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas: "kicker" "title" "stand" "rule" "meta" "actions";
	}
	.bfy-hero--masthead .bfy-hero__actions { justify-content: flex-start; }
	.bfy-hero--masthead .bfy-hero__turn { padding-left: 0; }

	.bfy-hero--bento .bfy-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "lead" "plate" "stat" "logo";
	}
	.bfy-hero--bento .bfy-hero__inner:not(:has(.bfy-tile--logo)) { grid-template-areas: "lead" "plate" "stat"; }
	.bfy-hero--bento .bfy-hero__inner:not(:has(.bfy-tile--stat)):not(:has(.bfy-tile--logo)) { grid-template-areas: "lead" "plate"; }
	.bfy-hero--bento .bfy-tile--plate { aspect-ratio: 4 / 3; }

	.bfy-hero--full-bleed { min-height: var(--bfy-hero-min-sm, min(72vh, 560px)); }
	.bfy-hero__cue { display: none; }
}


/* ── QUALITY FLOOR ───────────────────────────────────────────────────────── */

/* The rail is scrollable, so it is focusable, so it needs a focus ring and an
   accessible name. Both are set in the markup; this makes the ring visible. */
.bfy-hero__rail:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bfy-hero__rail { scroll-behavior: auto; }
	.bfy-hero, .bfy-hero * { animation: none !important; transition: none !important; }
}

/* Forced colours: the scrim disappears, so the text needs its own backing. */
@media (forced-colors: active) {
	.bfy-hero--full-bleed .bfy-hero__inner { background: Canvas; }
	.bfy-hero--full-bleed .bfy-head__title,
	.bfy-hero--full-bleed .bfy-head__lede { color: CanvasText; }
	.bfy-hero__rail-cap { background: Canvas; color: CanvasText; }
}


/* ── SHARED ACTIONS ──────────────────────────────────────────────────────────
 * Every hero shape emits .bfy-btn / .bfy-btn-ghost, so they are defined once
 * here rather than depending on each theme's own .{p}-btn. A shape that only
 * looks right in the themes that happen to have a matching button class is not
 * a shared shape — it is twenty-eight shapes that resemble each other.
 *
 * The 44px minimum is the touch-target floor. It is the most commonly failed
 * item on a mobile accessibility audit and the cheapest possible thing to get
 * right, and a reviewer testing on a phone finds it by missing the button.
 * -------------------------------------------------------------------------- */

.bfy-btn,
.bfy-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--bfy-btn-min, 44px);
	padding: var(--bfy-btn-pad, 0.7rem 1.5rem);
	font-family: var(--bfy-btn-font, inherit);
	font-size: var(--bfy-btn-size, 1rem);
	font-weight: var(--bfy-btn-weight, 600);
	line-height: 1.2;
	letter-spacing: var(--bfy-btn-track, 0.01em);
	text-decoration: none;
	border-radius: var(--bfy-btn-radius, 8px);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.18s var(--bfy-ease, cubic-bezier(0.16, 1, 0.3, 1)),
	            box-shadow 0.18s var(--bfy-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Solid. The ink token is resolved separately from the fill because 13 pairs in
   this suite are white on a mid-tone brand fill where NO lighter text can ever
   clear AA — summit #FF6B2C is 2.84 — while dark ink on the same fill clears it
   at 7.39. Gather already ships dark on-brand, so the pattern is in the Suite's
   own design language rather than an imposition. */
.bfy-btn {
	background: var(--bfy-btn-fill, var(--wp--preset--color--primary, #0F4C5C));
	color: var(--bfy-btn-ink, var(--wp--preset--color--on-primary, #FFFFFF));
}
.bfy-btn:hover { transform: translateY(-1px); box-shadow: var(--bfy-btn-shadow, 0 10px 24px rgba(18, 24, 28, 0.16)); }

/* Ghost. Border-led, so it survives on a photograph as well as on a canvas. */
.bfy-btn-ghost {
	background: transparent;
	color: var(--bfy-btn-ghost-ink, var(--wp--preset--color--foreground, #16181D));
	border-color: var(--bfy-btn-ghost-border, rgba(18, 24, 28, 0.22));
}
.bfy-btn-ghost:hover { border-color: var(--bfy-btn-fill, var(--wp--preset--color--primary, #0F4C5C)); }

/* On a scrim both buttons sit on a photograph, so both need light treatment. */
.bfy-hero--full-bleed .bfy-btn-ghost {
	color: var(--bfy-hero-onmedia, #FFFFFF);
	border-color: var(--bfy-hero-onmedia-border, rgba(255, 255, 255, 0.5));
}

.bfy-btn:focus-visible,
.bfy-btn-ghost:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, currentColor);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bfy-btn, .bfy-btn-ghost { transition: none; }
	.bfy-btn:hover { transform: none; }
}

@media (forced-colors: active) {
	.bfy-btn, .bfy-btn-ghost { border-color: ButtonText; }
}

/* --------------------------------------------------------------------------
 * v3.22.0: A SPLIT HERO WITH NO PHOTO YET IS ONE PANEL, NOT A PANEL BESIDE A BLANK.
 *
 * A site built before the owner has uploaded any photos has an empty picture
 * slot in its hero. The slot is kept in the page on purpose (it is where the
 * owner's photo goes, and the page's image controls find slots by position),
 * but it was also kept in the LAYOUT: half the first screen of a new website
 * was a blank box, and on a phone, where the picture sits above the words,
 * the page opened on an empty space about a third of a screen tall.
 *
 * For visitors, an empty slot now takes no room and the panel sits in the
 * middle at a readable width. The owner, signed in, still sees the slot, marked
 * as the place to add a photo (class-briefly-page-image-editor.php). The
 * moment a photo is added this rule stops matching and the split returns.
 * -------------------------------------------------------------------------- */
.bfy-hero--split-overlap .bfy-hero__media:has(> .bfy-img-empty:only-child) { display: none; }
.bfy-hero--split-overlap .bfy-hero__inner:has(> .bfy-hero__media > .bfy-img-empty:only-child) { grid-template-columns: minmax(0, 1fr); }
.bfy-hero--split-overlap .bfy-hero__inner:has(> .bfy-hero__media > .bfy-img-empty:only-child) > .bfy-hero__panel { box-sizing: border-box; width: 100%; max-width: 48rem; margin-inline: auto; }