/*
 * Brightway Consultancy — home.css
 * Homepage sections under the hero. Depends on tokens, layout, typography,
 * components. Section-scoped only — no global selectors.
 *
 * Sections (per front-page.php):
 *   1. .bwc-section-header / .bwc-section-header--centered   — reusable
 *                                                              eyebrow + h2 + lede header
 *   2. .bwc-home-statement                                   — editorial value prop
 *   3. .bwc-home-services + .bwc-service-card                — practice cards
 *      + ::after dot matrix (precision motif, top-right flank)
 *   4. .bwc-home-trust                                       — PECB band, emerald accent
 *   5. .bwc-home-sectors                                     — sectors split (numbered list)
 *  5b. .bwc-hairline--editorial                              — chapter break before Finale
 *   6. .bwc-home-finale                                      — closing CTA
 *
 * Universal contract:
 *   - Hover gated @media (hover: hover) and (pointer: fine).
 *   - Exact transition properties only — no transition: all.
 *   - Logical properties everywhere (inline-size, block-size, inset,
 *     padding-block, padding-inline, margin-block).
 *   - prefers-reduced-motion handled globally in utilities.css.
 *   - No hardcoded hex / rgba in code — tokens only (rare sand alphas
 *     reuse the existing convention from components.css / nav.css).
 */

/* ===========================================================================
 * 1. SECTION HEADER — eyebrow + h2 + optional lede paragraph
 *    Reusable across sections. Default left-aligned; --centered modifier
 *    flips alignment for the trust band. max-inline-size keeps the lede
 *    within an editorial measure regardless of viewport.
 * ========================================================================= */

.bwc-section-header {
	max-inline-size: 56ch;
	margin-block-end: var(--bwc-space-6);
}

.bwc-section-header > * + * {
	margin-block-start: var(--bwc-space-2);
}

.bwc-section-header__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.45;
	margin-block-start: var(--bwc-space-3);
}

.bwc-section-header--centered {
	margin-inline: auto;
	text-align: center;
}

.bwc-section-header--centered .bwc-section-header__lede {
	margin-inline: auto;
}

/* ===========================================================================
 * 2. STATEMENT — editorial value proposition, single column.
 *    Inherits .bwc-section padding-block from --bwc-section-py for a
 *    consistent vertical rhythm with the rest of the homepage.
 *
 *    Ambient layer: a soft gold radial glow anchored upper-right reads
 *    as a single warm light source — the opening "page" feels lit, not
 *    flat. Composited at z-index 0 with pointer-events:none; the inner
 *    container lifts content to z-index 1. overflow:hidden contains the
 *    glow within the section so it doesn't bleed into neighbours.
 * ========================================================================= */

.bwc-home-statement {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-home-statement::before {
	content: '';
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-end: -10rem;
	inline-size: 50rem;
	block-size: 50rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 14%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 4%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-home-statement__inner {
	position: relative; /* lift above the ambient ::before glow */
	z-index: 1;
	max-inline-size: 64ch;
}

.bwc-home-statement__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-home-statement__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

/* ===========================================================================
 * 3. SERVICES — four practice cards in the 12-col grid.
 *    Each card spans 6 cols on md+ (2x2 grid). On mobile they collapse to
 *    single-column rows per layout.css §grid universal collapse rule.
 *
 *    .bwc-service-card extends .bwc-card (Double-Bezel shell). The anchor
 *    is the focusable surface so the entire card is interactive — colour
 *    + transform tweaks signal hover without disturbing the inner card
 *    chrome (handled by components.css).
 * ========================================================================= */

/* Section positioning context for the ambient dot matrix ::after below.
 * isolation: isolate stops any global stacking interaction; overflow:
 * hidden contains the matrix at the section's right edge so it doesn't
 * bleed into the Trust band that follows. */
.bwc-home-services {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-home-services > .bwc-container {
	position: relative;
	z-index: 1;
}

/* Dot matrix — editorial precision motif. 20 columns × 24 rows of sand
 * dots at 16% alpha on a 1.5rem (24px) grid, with 8 gold accent dots at
 * fixed pseudo-random positions. Pure CSS layered radial gradients —
 * nine background layers, eight single-shot accents over one repeating
 * grid. Anchored to the top-right of the Services section. Sized to
 * inhabit the empty right column of the section as a genuine background
 * motif (30rem × 36rem ≈ 480 × 576px on a default root font). Continues
 * behind the cards (z-index:0 vs. cards' z-index:1) — reads as a
 * substrate of precision, never a competing surface. On narrow desktop
 * widths the matrix bleeds left behind the section-header text; sand at
 * 16% alpha is faint enough to read as background texture there, not
 * decoration competing with the copy.
 *
 * Tokens consumed: --bwc-accent-gold. Sand alpha follows the documented
 * inline-rgba convention (nav.css §2, components.css §3) — no sand
 * token at this exact alpha yet.
 *
 * Hidden below md — the section collapses to single-column and the
 * matrix has no breathing room to inhabit. */
.bwc-home-services::after {
	content: '';
	position: absolute;
	inset-block-start: clamp(3rem, 4vw + 1rem, 5rem);
	inset-inline-end: clamp(1rem, 4vw, 4rem);
	inline-size: 30rem;
	block-size: 36rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 6.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 12.75rem 9.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 21.75rem 5.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 18.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 15.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 26.25rem 23.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 29.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 23.25rem 32.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.16) 2px, transparent 3px);
	background-size:
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		1.5rem 1.5rem;
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		repeat;
}

@media (max-width: 767px) {
	.bwc-home-services::after {
		display: none;
	}
}

.bwc-home-services__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bwc-space-4);
}

.bwc-home-services__item {
	display: flex; /* the anchor inside fills the item — equal-height cards */
}

.bwc-service-card {
	display: block;
	inline-size: 100%;
	color: var(--bwc-text);
	text-decoration: none;
	transition: transform var(--bwc-dur-dropdown) var(--bwc-ease-out);
}

.bwc-service-card .bwc-card__inner {
	position: relative; /* anchor for the editorial trim-mark ::before */
	display: flex;
	flex-direction: column;
	gap: var(--bwc-space-2);
	block-size: 100%;
	padding-block: var(--bwc-space-4);
	padding-inline: var(--bwc-space-4);
	/* Inset highlight intensifies on hover — see the hover block below.
	 * Override of components.css default so the transition has a property
	 * to interpolate. */
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
	transition: box-shadow var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

/* Editorial trim-mark — L-shape in the top-right inner corner. Lifts
 * each card from "generic dark box" to "designed object". Sized at
 * 1rem (16px) at gold-40 alpha so it reads as an intentional detail
 * without becoming graphic chrome. Promotes to full gold on hover,
 * in sync with the icon ring. */
.bwc-service-card .bwc-card__inner::before {
	content: '';
	position: absolute;
	inset-block-start: 0.875rem;
	inset-inline-end: 0.875rem;
	inline-size: 1rem;
	block-size: 1rem;
	border-block-start: 1px solid var(--bwc-accent-gold-40);
	border-inline-end: 1px solid var(--bwc-accent-gold-40);
	pointer-events: none;
	transition: border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--bwc-accent-gold);
	border: 1px solid var(--bwc-accent-gold-30);
	border-radius: 999px;
	margin-block-end: var(--bwc-space-2);
	transition: border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-service-card__icon > svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.bwc-service-card__title {
	font-size: var(--bwc-fs-xl);
	line-height: 1.2;
	margin: 0;
}

.bwc-service-card__body {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
	margin: 0;
}

.bwc-service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: auto; /* pin to bottom — equal-height cards meet at CTA */
	padding-block-start: var(--bwc-space-2);
	color: var(--bwc-accent-gold);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: gap var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-service-card:hover {
		transform: translateY(-2px);
	}

	/* Inset highlight strengthens — gives a physical "lift off the surface"
	 * cue in concert with the translateY. */
	.bwc-service-card:hover .bwc-card__inner {
		box-shadow: inset 0 1px 2px rgba(245, 241, 232, 0.12);
	}

	/* Icon ring + trim-mark snap to full gold — coordinated chrome. */
	.bwc-service-card:hover .bwc-service-card__icon,
	.bwc-service-card:hover .bwc-card__inner::before {
		border-color: var(--bwc-accent-gold);
	}

	.bwc-service-card:hover .bwc-service-card__cta {
		gap: 0.65em;
	}
}

.bwc-service-card:focus-visible {
	outline: 2px solid var(--bwc-accent-gold);
	outline-offset: 4px;
	border-radius: var(--bwc-radius-outer);
}

/* ===========================================================================
 * 4. TRUST — PECB-authorized credentials band.
 *
 *    Single use of --bwc-accent-emerald-tint on the section surface — the
 *    palette's institutional/trust signal, sparingly placed (one section,
 *    not a system color) per BRIEF §3 distribution rule. The wash is faint
 *    (5%) so the warm-dark canvas still reads underneath; an emerald
 *    hairline below the section anchors the colour without flooding it.
 * ========================================================================= */

/* Reinforced trust band — full emerald plate (not the faint 5% tint).
 * Diagonal gradient from the emerald primitive to a darker emerald derived
 * by mixing toward the warm page black (token-driven, no new hardcoded hex).
 * Gold hairline top + bottom reads as a premium plate edge against both the
 * emerald surface and the dark sections above/below. On a full plate the
 * inner type flips to sand/gold for AA contrast (the foreground-emerald used
 * on the old faint tint would be illegible on the saturated plate). */
.bwc-home-trust {
	background-image: linear-gradient(
		150deg,
		var(--bwc-accent-emerald) 0%,
		color-mix(in srgb, var(--bwc-accent-emerald) 60%, var(--bwc-bg)) 100%
	);
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
	border-block-end: 1px solid var(--bwc-accent-gold-hairline);
}

/* Eyebrow on the emerald plate — sand text + gold-hairline pill. The gold
 * engrave gradient was evaluated here (Sami's authority-signal request) but
 * its dark stops fall to 2.63:1 on the plate (< AA 4.5:1 at 10px), so it
 * degrades to flat sand (8.8:1). The gold lives in the pill border instead. */
.bwc-home-trust__eyebrow {
	color: var(--bwc-text);
	border-color: var(--bwc-accent-gold-hairline);
}

/* Badges on the emerald plate — sand label + gold-hairline outline. Geometry
 * (4px radius, uppercase, tracking) is inherited from components.css §6;
 * only colour flips for legibility on the saturated surface. */
.bwc-home-trust .bwc-badge-trust {
	color: var(--bwc-text);
	border-color: var(--bwc-accent-gold-hairline);
}

/* Lede on the plate — promote from muted (4.0:1, fails AA) to full sand. */
.bwc-home-trust .bwc-section-header__lede {
	color: var(--bwc-text);
}

.bwc-home-trust__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bwc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Inline text CTA under the badge row — drives the "Authorized PECB Training"
 * signal to /pecb-training/. Sand text (8.8:1, AA-safe on the emerald plate)
 * with a gold-hairline underline so the gold accent stays in the border, not
 * the glyphs (same legibility decision as the eyebrow/badges above). */
.bwc-home-trust__cta {
	margin: var(--bwc-space-5) 0 0;
	text-align: center;
}

.bwc-home-trust__cta a {
	color: var(--bwc-text);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-block-end: 1px solid var(--bwc-accent-gold-hairline);
	padding-block-end: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.bwc-home-trust__cta a:hover {
		border-block-end-color: var(--bwc-accent-gold);
	}
}

/* ===========================================================================
 * 5. SECTORS — two-column split (5/7 on md+).
 *    Asymmetric split is the editorial cue: narrower intro column reads
 *    as the lede; wider list column carries the catalog. Mobile collapses
 *    both to single-column (layout.css universal collapse).
 *
 *    Ambient layer: a lower-intensity gold radial anchored bottom-right
 *    (off-frame) — a "second light source" different from Statement's
 *    upper-right glow. Together they read as two distinct times of day
 *    rather than a repeated effect.
 * ========================================================================= */

.bwc-home-sectors {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-home-sectors::before {
	content: '';
	position: absolute;
	inset-block-end: -14rem;
	inset-inline-end: -10rem;
	inline-size: 54rem;
	block-size: 54rem;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--bwc-accent-gold) 10%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 35%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-home-sectors > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-home-sectors__grid {
	align-items: start;
	row-gap: var(--bwc-space-6);
}

.bwc-home-sectors__intro > * + * {
	margin-block-start: var(--bwc-space-2);
}

.bwc-home-sectors__intro p {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
	margin-block-start: var(--bwc-space-3);
}

.bwc-home-sectors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.bwc-home-sectors__item {
	display: flex;
	align-items: baseline;
	gap: var(--bwc-space-3);
	padding-block: var(--bwc-space-3);
	border-block-end: 1px solid rgba(245, 241, 232, 0.08);
}

.bwc-home-sectors__item:first-child {
	border-block-start: 1px solid rgba(245, 241, 232, 0.08);
}

.bwc-home-sectors__num {
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	color: var(--bwc-accent-gold);
	letter-spacing: 0.08em;
	min-inline-size: 2.5ch;
}

.bwc-home-sectors__label {
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-lg);
	font-weight: 480;
	line-height: 1.2;
	color: var(--bwc-text);
}

/* ===========================================================================
 * 5b. EDITORIAL DIVIDER — placed between Sectors and Finale.
 *     Modifier on the shared .bwc-hairline (components.css §5). The base
 *     class is a full-width centre-fade gold hairline; here we constrain
 *     it to ~30% width centred, and zero its margin-block so the section
 *     padding (already tight) carries the rhythm. Reads as a chapter
 *     break before the closing CTA — pacing cue, not a section frame.
 * ========================================================================= */

.bwc-hairline--editorial {
	inline-size: 30%;
	max-inline-size: 16rem;
	margin-inline: auto;
	margin-block: 0;
}

/* ===========================================================================
 * 6. FINALE — closing CTA, large editorial typography.
 *    Centered composition, max-inline-size keeps the H2 from sprawling
 *    on ultra-wide viewports. Inherits .bwc-section padding-block from
 *    --bwc-section-py — no bespoke override (keeps the rhythm uniform).
 * ========================================================================= */

.bwc-home-finale__inner {
	max-inline-size: 56ch;
	margin-inline: auto;
	text-align: center;
}

.bwc-home-finale__inner > * + * {
	margin-block-start: var(--bwc-space-3);
}

.bwc-home-finale__lede {
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-lg);
	line-height: 1.5;
}

.bwc-home-finale__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bwc-space-2);
	margin-block-start: var(--bwc-space-5);
}