/* ============================================================================
 * BRIEFLY — PROCESS SHAPE PACK. Four ordered shapes and one unordered.
 *
 * ── WHAT THE AUDIT ACTUALLY FOUND, HAVING CHECKED PROPERLY ──────────────────
 * 25 process-family renderers across 22 themes, 7 distinct skeletons. 13 of
 * them stamp an index numeral on every item. ZERO of the 25 use an <ol>; they
 * emit 94 <div>.
 *
 * I previously wrote that several of these are unordered benefit lists wearing
 * 01/02/03. On inspecting the actual item titles that is NOT true of the
 * defaults — "Consultation / Design & quote / Build", "Cleanse / Treat / Seal",
 * "Discovery / Design / Delivery" are genuine sequences. That claim was based
 * on a keyword heuristic looking for "first / then / next", and real process
 * copy almost never uses those words. The heuristic was wrong.
 *
 * The real defect is narrower and worse. Those defaults are DEAD CODE — the
 * v1.0.6 demo-copy kill switch in Briefly_Pro_Sections::s() unsets every trait
 * literal and resolves through neutral_default(). The content that actually
 * renders is written by the planner at build time. So the section numbers its
 * items UNCONDITIONALLY, and nothing anywhere ever checks whether the numbering
 * is true. Give the same renderer a "Why choose us" list and it ships
 * 01 / 02 / 03 over three parallel reasons, asserting an order the business
 * never claimed.
 *
 * ── SO THE PACK IS SPLIT AT THAT LINE ───────────────────────────────────────
 * Four shapes are for genuine sequences and use a real <ol>, which is what
 * tells a screen reader the order carries meaning. One shape — pillars — is the
 * explicit answer for content that is NOT a sequence: no numerals, a <ul>, and
 * a registry entry that tells the planner to send unordered content here
 * instead of numbering it. Having somewhere correct to put it is the fix; a
 * warning in a docblock is not.
 * ========================================================================== */

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

.bfy-proc { padding: var(--bfy-sect, clamp(3rem, 5vw, 4.5rem)) var(--bfy-gut, clamp(1.5rem, 4vw, 3rem)); box-sizing: border-box; }
.bfy-proc__inner { max-width: var(--bfy-head-measure-wide, 1160px); margin: 0 auto; }
.bfy-proc__list { list-style: none; margin: 0; padding: 0; }
.bfy-proc__item { min-width: 0; }

.bfy-proc__name {
	margin: 0;
	font-family: var(--bfy-title-font, inherit);
	font-size: var(--bfy-proc-name, 1.14rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--bfy-title-ink, var(--wp--preset--color--foreground, #16181D));
}
.bfy-proc__desc {
	margin: 0.5rem 0 0;
	font-size: var(--bfy-proc-desc, 0.95rem);
	line-height: 1.55;
	color: var(--bfy-lede-ink, var(--wp--preset--color--foreground, #55606B));
	text-wrap: pretty;
}

/* The numeral is DECORATION OF AN ORDER THE <ol> ALREADY CARRIES. It is
   aria-hidden in the markup: a screen reader announcing "zero one, Consultation"
   inside a list it has already announced as ordered is noise. It appears only
   in the four ordered shapes — never on pillars. */
.bfy-proc__num {
	display: block;
	font-size: var(--bfy-proc-num, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--bfy-proc-num-ink, var(--wp--preset--color--primary, #0F4C5C));
}


/* ── 1. STEPS ────────────────────────────────────────────────────────────────
 * Numbered cards in a row. The shape that exists, kept — it is the right answer
 * for 3-5 short steps that each need a line of explanation.
 * -------------------------------------------------------------------------- */

.bfy-proc--steps .bfy-proc__list {
	display: grid;
	grid-template-columns: var(--bfy-proc-cols, repeat(auto-fit, minmax(min(100%, 240px), 1fr)));
	gap: var(--bfy-proc-gap, clamp(1rem, 2vw, 1.5rem));
}
.bfy-proc--steps .bfy-proc__item {
	padding: var(--bfy-proc-pad, clamp(1.25rem, 2.2vw, 1.75rem));
	background: var(--bfy-proc-bg, var(--wp--preset--color--background-alt, #FFFFFF));
	border: 1px solid var(--bfy-proc-border, rgba(18, 24, 28, 0.10));
	border-radius: var(--bfy-proc-radius, 14px);
}
.bfy-proc--steps .bfy-proc__num { margin-bottom: 0.85rem; }


/* ── 2. TIMELINE ─────────────────────────────────────────────────────────────
 * A connecting line running through the steps, horizontal on a wide screen and
 * vertical on a narrow one.
 *
 * The line is the point: it draws the sequence rather than asserting it with a
 * numeral, which is why this shape works where the numbers would look
 * bureaucratic — a build schedule, a treatment plan, a trip itinerary.
 *
 * Drawn with a pseudo-element on the list rather than borders on each item, so
 * it does not break when one step wraps to a different height.
 * -------------------------------------------------------------------------- */

.bfy-proc--timeline .bfy-proc__list {
	position: relative;
	display: grid;
	gap: var(--bfy-proc-gap, clamp(1.25rem, 2.5vw, 2rem));
	padding-left: var(--bfy-proc-tl-pad, 2.25rem);
}
.bfy-proc--timeline .bfy-proc__list::before {
	content: "";
	position: absolute;
	left: var(--bfy-proc-tl-line, 0.5rem);
	top: 0.4rem;
	bottom: 0.4rem;
	width: 2px;
	background: var(--bfy-proc-tl-ink, var(--wp--preset--color--border, rgba(18, 24, 28, 0.16)));
}
.bfy-proc--timeline .bfy-proc__item { position: relative; }
.bfy-proc--timeline .bfy-proc__item::before {
	content: "";
	position: absolute;
	left: calc(var(--bfy-proc-tl-pad, 2.25rem) * -1 + var(--bfy-proc-tl-line, 0.5rem) - 4px);
	top: 0.45rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bfy-proc-num-ink, var(--wp--preset--color--primary, #0F4C5C));
	box-shadow: 0 0 0 4px var(--bfy-proc-tl-halo, var(--wp--preset--color--background, #FFFFFF));
}

@media (min-width: 900px) {
	.bfy-proc--timeline .bfy-proc__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		padding-left: 0;
		padding-top: var(--bfy-proc-tl-pad, 2.25rem);
	}
	.bfy-proc--timeline .bfy-proc__list::before {
		left: 0.4rem;
		right: 0.4rem;
		top: var(--bfy-proc-tl-line, 0.5rem);
		bottom: auto;
		width: auto;
		height: 2px;
	}
	.bfy-proc--timeline .bfy-proc__item::before {
		left: 0;
		top: calc(var(--bfy-proc-tl-pad, 2.25rem) * -1 + var(--bfy-proc-tl-line, 0.5rem) - 4px);
	}
}


/* ── 3. STICKY ───────────────────────────────────────────────────────────────
 * A media panel that holds while the steps scroll past it.
 *
 * Pure CSS position:sticky — no scroll listener, no IntersectionObserver, no
 * step-swapping. The panel simply stays; the reading does the moving. A JS
 * version that swaps the image per step is the obvious upgrade and it is the
 * one that breaks, and when it breaks the page shows one image and a column of
 * text, which is exactly this shape with nothing lost.
 *
 * That is the test worth applying to any scroll effect: what does it look like
 * when the script never runs?
 * -------------------------------------------------------------------------- */

.bfy-proc--sticky .bfy-proc__inner {
	display: grid;
	grid-template-columns: var(--bfy-proc-sticky-cols, minmax(0, 0.9fr) minmax(0, 1fr));
	gap: var(--bfy-proc-sticky-gap, clamp(1.5rem, 4vw, 3.5rem));
	align-items: start;
}
.bfy-proc--sticky .bfy-proc__media {
	position: sticky;
	top: var(--bfy-anchor-offset, 6rem);
	aspect-ratio: var(--bfy-proc-media-ratio, 4 / 5);
	overflow: hidden;
	border-radius: var(--bfy-proc-radius, 14px);
	background: var(--bfy-proc-frame, rgba(18, 24, 28, 0.05));
}
.bfy-proc--sticky .bfy-proc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bfy-proc--sticky .bfy-proc__list { display: grid; gap: var(--bfy-proc-sticky-run, clamp(2rem, 5vw, 3.5rem)); }
.bfy-proc--sticky .bfy-proc__name { font-size: var(--bfy-proc-sticky-name, clamp(1.25rem, 2vw, 1.6rem)); }
.bfy-proc--sticky .bfy-proc__desc { max-width: 56ch; }
.bfy-proc--sticky .bfy-proc__num { margin-bottom: 0.6rem; }


/* ── 4. RUNS ─────────────────────────────────────────────────────────────────
 * Hanging numerals beside real paragraphs. No cards.
 *
 * The numeral hangs in the left margin at display size, which is where an
 * editorial designer puts it — it becomes typography rather than a badge. This
 * is the shape for a process that deserves 40-80 words per step: a legal
 * matter, a build, a treatment plan.
 * -------------------------------------------------------------------------- */

.bfy-proc--runs .bfy-proc__list { display: grid; gap: 0; }
.bfy-proc--runs .bfy-proc__item {
	display: grid;
	grid-template-columns: var(--bfy-proc-runs-cols, var(--bfy-proc-runs-num-w, 5rem) minmax(0, 1fr));
	column-gap: var(--bfy-proc-runs-gap, clamp(1rem, 2.5vw, 2rem));
	padding: var(--bfy-proc-runs-pad, clamp(1.5rem, 3vw, 2.25rem)) 0;
	border-top: 1px solid var(--bfy-proc-border, rgba(18, 24, 28, 0.14));
}
.bfy-proc--runs .bfy-proc__item:last-child { border-bottom: 1px solid var(--bfy-proc-border, rgba(18, 24, 28, 0.14)); }
.bfy-proc--runs .bfy-proc__num {
	grid-row: span 2;
	font-size: var(--bfy-proc-runs-num, clamp(2rem, 4vw, 3rem));
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.9;
	color: var(--bfy-proc-runs-num-ink, var(--bfy-proc-border, rgba(18, 24, 28, 0.22)));
}
.bfy-proc--runs .bfy-proc__name { font-size: var(--bfy-proc-runs-name, clamp(1.15rem, 2vw, 1.45rem)); }
.bfy-proc--runs .bfy-proc__desc { max-width: 62ch; }


/* ── 5. PILLARS — THE UNORDERED SHAPE ────────────────────────────────────────
 * No numerals. No connecting line. No sequence of any kind.
 *
 * This exists because the alternative to numbering unordered content is not
 * "number it more carefully", it is HAVING SOMEWHERE ELSE TO PUT IT. Three
 * reasons to choose a business, four principles, five inclusions — none of
 * those have a first, and 01/02/03 over them invents a ranking nobody stated.
 *
 * A leading rule carries the same structural weight the numeral would have
 * carried, without making a claim.
 * -------------------------------------------------------------------------- */

.bfy-proc--pillars .bfy-proc__list {
	display: grid;
	grid-template-columns: var(--bfy-proc-cols, repeat(auto-fit, minmax(min(100%, 240px), 1fr)));
	gap: var(--bfy-proc-pillar-gap, clamp(1.5rem, 3vw, 2.5rem));
}
.bfy-proc--pillars .bfy-proc__item {
	padding-top: var(--bfy-proc-pillar-pad, 1.1rem);
	border-top: 2px solid var(--bfy-proc-pillar-rule, var(--wp--preset--color--primary, #0F4C5C));
}
.bfy-proc--pillars .bfy-proc__icon {
	width: var(--bfy-proc-icon, 30px);
	height: var(--bfy-proc-icon, 30px);
	margin-bottom: 0.8rem;
	color: var(--bfy-proc-num-ink, var(--wp--preset--color--primary, #0F4C5C));
}
.bfy-proc--pillars .bfy-proc__icon svg { width: 100%; height: 100%; display: block; }


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
	.bfy-proc--sticky .bfy-proc__inner { grid-template-columns: 1fr; }
	/* A sticky panel on a phone pins an image over half the viewport for the
	   whole section. It becomes an ordinary image above the steps. */
	.bfy-proc--sticky .bfy-proc__media { position: static; aspect-ratio: 4 / 3; }

	.bfy-proc--runs .bfy-proc__item {
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
	}
	.bfy-proc--runs .bfy-proc__num { grid-row: auto; font-size: 1.5rem; }
}


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

@media (prefers-reduced-motion: reduce) {
	.bfy-proc, .bfy-proc * { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
	.bfy-proc--steps .bfy-proc__item { border-color: CanvasText; }
	.bfy-proc--timeline .bfy-proc__list::before { background: CanvasText; }
	.bfy-proc--timeline .bfy-proc__item::before { background: CanvasText; box-shadow: 0 0 0 4px Canvas; }
	.bfy-proc--runs .bfy-proc__item { border-top-color: CanvasText; }
	.bfy-proc--pillars .bfy-proc__item { border-top-color: CanvasText; }
	.bfy-proc__icon { color: CanvasText; }
}

@media print {
	.bfy-proc--sticky .bfy-proc__media { position: static; }
	.bfy-proc--timeline .bfy-proc__list { grid-auto-flow: row; }
}