/*
 * Brightway Consultancy — pecb-training.css
 * PECB Training page — full emerald-accented authority page.
 *
 * Emerald scope on this page (deeper than home / services):
 *   - Catalog numbers AND "Certifies" value          → --bwc-accent-emerald-text
 *   - Trust band frame (deepened)                    → --bwc-accent-emerald-tint + emerald-border
 *   - Trust badges (scoped pecb variant)             → --bwc-accent-emerald-text
 *   - Trust eyebrow (scoped pecb variant)            → --bwc-accent-emerald-text
 *
 * Gold remains the primary accent (eyebrows, hairlines, CTAs, glows,
 * trim-marks, dot matrix). Emerald appears ONLY at PECB-explicit
 * moments above — never on Hero / Why Brightway / Modalities / Finale.
 *
 * Scope:
 *   1. .bwc-training-hero          — page opener, glow + matrix
 *   2. .bwc-training-why           — 4 reason cards (.bwc-training-reason-card)
 *   3. .bwc-training-catalog       — editorial numbered list of 5 trainings
 *   4. .bwc-training-modes         — 3 delivery mode tiles (.bwc-training-mode)
 *   5. .bwc-pecb-trust             — emerald frame, deepened tint (+ scoped badge)
 *   6. .bwc-training-finale        — closing CTA
 *
 * Universal contract:
 *   - Hover gated @media (hover: hover) and (pointer: fine).
 *   - Exact transition properties only — no transition: all.
 *   - Logical properties everywhere.
 *   - Tokens only. Sand alpha follows the rgba convention.
 *   - prefers-reduced-motion handled globally (utilities.css §4).
 */

/* ===========================================================================
 * 1. HERO — gold glow top-right + dot matrix left flank, content right-aligned.
 *    Same composition language as the Services hero so the two B2B pages
 *    feel like siblings; the matrix sits on the LEFT here too.
 * ========================================================================= */

.bwc-training-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block-start: clamp(8rem, 6rem + 8vw, 14rem);
	padding-block-end: clamp(4rem, 3rem + 5vw, 7rem);
}

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

.bwc-training-hero::after {
	content: '';
	position: absolute;
	inset-block-start: clamp(4rem, 4vw + 2rem, 7rem);
	inset-inline-start: clamp(1rem, 4vw, 4rem);
	inline-size: 21rem;
	block-size: 33rem;
	pointer-events: none;
	z-index: 0;

	background-image:
		radial-gradient(circle at 3.75rem 5.25rem,  var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 9.75rem 12.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 15.75rem 8.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 6.75rem 20.25rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 17.25rem 24.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at 11.25rem 30.75rem, var(--bwc-accent-gold) 3px, transparent 4px),
		radial-gradient(circle at center, rgba(245, 241, 232, 0.14) 2px, transparent 3px);
	background-size:
		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,
		repeat;
}

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

.bwc-training-hero > .bwc-container {
	position: relative;
	z-index: 1;
}

.bwc-training-hero__inner {
	max-inline-size: 64ch;
	margin-inline-start: auto;
}

@media (min-width: 1024px) {
	.bwc-training-hero__inner {
		margin-inline-start: 38%;
	}
}

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

.bwc-training-hero h1 {
	margin-block-start: var(--bwc-space-1);
}

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

.bwc-training-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bwc-space-2);
	margin-block-start: var(--bwc-space-5);
}

/* ===========================================================================
 * 2. WHY TRAIN — 4 reason cards (Double-Bezel + trim-mark + number prefix).
 *    No icons (these are reasons, not service categories). Number + heading
 *    + body is enough at this density.
 * ========================================================================= */

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

.bwc-training-why__item {
	display: flex;
}

.bwc-training-reason-card {
	inline-size: 100%;
}

.bwc-training-reason-card .bwc-card__inner {
	position: relative;
	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);
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
}

.bwc-training-reason-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;
}

.bwc-training-reason-card__num {
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0.18em;
	color: var(--bwc-accent-gold);
}

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

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

/* ===========================================================================
 * 3. CATALOG — editorial numbered list of the 5 PECB trainings.
 *
 *    Emerald accent moment #1: number + "Certifies" value carry the
 *    emerald foreground colour, distinguishing them from the gold-on-
 *    warm-dark default. This is the page where emerald reads
 *    "PECB-authorized credential", not "trust band background tint".
 *
 *    Layout per item: a top "heading row" with the large number flanked
 *    by the title; below, a 2-column metadata grid (label → value) with
 *    "For" and "Certifies" pairs. Hairline gold between items.
 * ========================================================================= */

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

.bwc-training-catalog__item {
	padding-block: var(--bwc-space-5);
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-training-catalog__item:last-child {
	border-block-end: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-training-catalog__heading {
	display: flex;
	align-items: baseline;
	gap: var(--bwc-space-3);
	flex-wrap: wrap;
}

.bwc-training-catalog__num {
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xl);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--bwc-accent-emerald-text);
	min-inline-size: 2.5ch;
}

.bwc-training-catalog__title {
	margin: 0;
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-2xl);
	font-weight: 480;
	line-height: 1.15;
	color: var(--bwc-text);
}

.bwc-training-catalog__meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bwc-space-2) var(--bwc-space-4);
	margin: var(--bwc-space-3) 0 0;
	padding-inline-start: 0;
}

@media (min-width: 640px) {
	.bwc-training-catalog__meta {
		grid-template-columns: max-content 1fr;
		row-gap: var(--bwc-space-1);
	}
}

.bwc-training-catalog__meta dt {
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwc-text-muted);
	margin-block-start: var(--bwc-space-2);
}

@media (min-width: 640px) {
	.bwc-training-catalog__meta dt {
		margin-block-start: 0;
		padding-block-start: 0.2em; /* baseline alignment with dd */
	}
}

.bwc-training-catalog__meta dd {
	margin: 0;
	color: var(--bwc-text);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	line-height: 1.5;
}

.bwc-training-catalog__cert {
	color: var(--bwc-accent-emerald-text);
	font-weight: 500;
}

/* ===========================================================================
 * 4. MODALITIES — 3 delivery tiles in a row (col-span-4 each, md+).
 *    Plain tiles (no Double-Bezel card chrome) — simpler than reason
 *    cards in §2 so the page doesn't read as "two card grids stacked".
 *    Each tile: emerald-free number + display title + muted body, with
 *    a gold hairline at the top to anchor the tile.
 *    A gold glow sits in the background top-right of the section.
 * ========================================================================= */

.bwc-training-modes {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

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

.bwc-training-modes > .bwc-container {
	position: relative;
	z-index: 1;
}

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

.bwc-training-modes__item {
	display: flex;
}

.bwc-training-mode {
	inline-size: 100%;
	padding-block-start: var(--bwc-space-3);
	border-block-start: 1px solid var(--bwc-accent-gold-hairline);
}

.bwc-training-mode__num {
	display: block;
	font-family: var(--bwc-font-mono);
	font-size: var(--bwc-fs-xs);
	letter-spacing: 0.18em;
	color: var(--bwc-accent-gold);
}

.bwc-training-mode__title {
	margin-block-start: var(--bwc-space-2);
	font-family: var(--bwc-font-display);
	font-size: var(--bwc-fs-xl);
	font-weight: 480;
	line-height: 1.2;
	color: var(--bwc-text);
}

.bwc-training-mode__body {
	margin-block-start: var(--bwc-space-2);
	color: var(--bwc-text-muted);
	font-size: var(--bwc-fs-base);
	line-height: 1.55;
}

/* ===========================================================================
 * 5. PECB TRUST — deepened emerald frame.
 *
 *    Emerald scope on this page is its widest. Compared to the home Trust
 *    band, here:
 *      - Background tint is darker (10% vs 5%) — the section reads as a
 *        distinct emerald plate, not just a faint wash.
 *      - Top + bottom borders use the foreground emerald (not the dark
 *        rgba border alpha), giving the frame more definition.
 *      - Eyebrow + badge text/border use --bwc-accent-emerald-text for
 *        readability on the now-stronger tinted surface.
 * ========================================================================= */

/* Reinforced trust band — full emerald plate, mirroring .bwc-home-trust.
 * Diagonal gradient from the emerald primitive to a darker emerald derived
 * by mixing toward the warm page black (token-driven). Gold hairline edges +
 * sand/gold inner type for AA contrast on the saturated plate (the old
 * foreground-emerald type is illegible on a full plate). */
.bwc-pecb-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 (engrave
 * gradient degrades below AA on the plate; gold lives in the border). */
.bwc-pecb-trust__eyebrow {
	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-pecb-trust .bwc-section-header__lede {
	color: var(--bwc-text);
}

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

/* Scoped badge variant on the emerald plate — sand label + gold-hairline
 * outline. Geometry inherited from components.css §6; colour flips for
 * legibility on the saturated surface (matches .bwc-home-trust badges). */
.bwc-pecb-trust .bwc-badge-trust--pecb {
	color: var(--bwc-text);
	border-color: var(--bwc-accent-gold-hairline);
}

/* ===========================================================================
 * 6. FINALE — closing CTA. Centered editorial composition with a soft
 *    gold glow centered behind. Mirror of the homepage Finale pattern.
 * ========================================================================= */

.bwc-training-finale {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.bwc-training-finale::before {
	content: '';
	position: absolute;
	inset-block-start: -8rem;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: 56rem;
	block-size: 44rem;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--bwc-accent-gold) 12%, transparent) 0%,
		color-mix(in srgb, var(--bwc-accent-gold) 3%, transparent) 40%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 0;
}

.bwc-training-finale > .bwc-container {
	position: relative;
	z-index: 1;
}

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

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

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

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