/**
 * Variant CSS: about--manifesto-fullbleed-dark
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a full-bleed DARK band carrying ONE oversize, centred manifesto
 *   statement (brand credo) with an em accent, a small kicker above, a single
 *   supporting line below, and a short TEXT-only signature (name + role - no
 *   avatar, which is what sets this apart from manifesto-quote-large). The dark
 *   band gives the statement gravity and breaks the rhythm of a light page.
 *
 * KI-020 safety: on a dark surface foreground is always --text-on-dark (#fff),
 *   never --bg-main. The em accent is lifted toward white via color-mix so it
 *   stays legible on dark (a raw --accent can be too dim on near-black).
 *
 * Centering (A8/A9): every centred block (kicker / statement / deck /
 *   signature lines) is a direct child of the alignfull constrained section, so
 *   each keeps horizontal-auto margins (margin: 0 auto X auto). Zeroing the
 *   side margins would left-pin the narrow block inside the full-width band.
 *
 * Semantic tokens only (--background-dark, --text-on-dark, --accent,
 * --font-display/body, --text-*, --space-*, --tracking-*, --leading-*). Reads
 * premium on every theme: the band supplies its own dark ground so it stays
 * dark even under a light theme, and lighter themes simply get a darker em.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--manifesto-fullbleed-dark
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell - the dark band =======================================
   Owns its dark ground (does not borrow the page --background) so the band
   reads dark under any theme. Generous vertical breathing room frames the
   single statement as an event, not a paragraph. */
body.aibt-universal .universal-about--manifesto-fullbleed-dark {
	background: var(--background-dark, #141414);
	color: var(--text-on-dark, #fff);
	padding-top: calc(clamp(4rem, 9vw, 7.5rem) * var(--density, 1));
	padding-bottom: calc(clamp(4rem, 9vw, 7.5rem) * var(--density, 1));
}

/* === Kicker - small uppercase label above the statement ===================
   Muted-white (mix toward the dark ground) so it whispers under the headline.
   Centred direct child -> horizontal margins auto (A8/A9). */
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.18em) !important;
	text-transform: uppercase !important;
	color: color-mix(in srgb, var(--text-on-dark, #fff) 64%, transparent) !important;
	margin: 0 auto var(--space-md) auto !important;
}

/* === Statement - the oversize manifesto ===================================
   Display face, pure white ink. Size/line-height/weight come from the block
   inline style.typography (clamp(2.3rem, 5.4vw, 4.75rem)). Measure capped so it
   breaks into a confident 2-4 line statement, not one long ribbon. Centred
   direct child -> margin-inline auto. */
body.aibt-universal .universal-about--manifesto-fullbleed-dark h2.universal-about__statement,
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__statement {
	font-family: var(--font-display) !important;
	color: var(--text-on-dark, #fff) !important;
	max-width: 20ch;
	margin: 0 auto !important;
	text-wrap: balance;
}

/* Em accent - lift toward white so the accent stays vivid on near-black
   (KI-020: a raw --accent can read too dim on dark). */
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__statement em {
	font-style: italic;
	font-weight: var(--italic-weight, 500);
	color: color-mix(in srgb, var(--accent) 62%, var(--text-on-dark, #fff));
}

/* === Deck - single supporting line ========================================
   Comfortable reading measure, dimmed white. Centred -> margin-inline auto. */
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: color-mix(in srgb, var(--text-on-dark, #fff) 82%, transparent) !important;
	max-width: 56ch;
	margin: var(--space-lg) auto 0 auto !important;
}

/* === Signature - name + role, text only ===================================
   Set off by a short top hairline drawn in faint white. Centred flex column;
   the group is a centred direct child so it keeps margin-inline auto. */
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__signature {
	margin: var(--space-xl) auto 0 auto;
	padding-top: var(--space-md);
	max-width: 32rem;
	border-top: 1px solid color-mix(in srgb, var(--text-on-dark, #fff) 18%, transparent);
}

/* Name - display italic, full white. Centred -> margin-inline auto. */
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__sign-name {
	font-family: var(--font-display) !important;
	font-style: italic !important;
	font-weight: var(--italic-weight, 500) !important;
	font-size: var(--text-lg) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-on-dark, #fff) !important;
	margin: 0 auto !important;
}

/* Role - small dimmed-white caption. Centred -> margin-inline auto. */
body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__sign-role {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 400 !important;
	letter-spacing: var(--tracking-wide, 0.02em) !important;
	color: color-mix(in srgb, var(--text-on-dark, #fff) 60%, transparent) !important;
	margin: 0 auto !important;
}

/* === Tablet - ease the measure ============================================ */
@media (max-width: 959px) {
	body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__statement {
		max-width: 22ch;
	}
}

/* === Mobile - tighten vertical rhythm, relax measures =====================
   No horizontal element to wrap (everything is centred + auto), so this is
   purely breathing-room + measure relaxation. box-sizing handled by base. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--manifesto-fullbleed-dark {
		padding-top: calc(clamp(3rem, 11vw, 4.5rem) * var(--density, 1));
		padding-bottom: calc(clamp(3rem, 11vw, 4.5rem) * var(--density, 1));
	}

	body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__statement {
		max-width: none;
	}

	body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__deck {
		max-width: none;
	}
}

@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (A5 / KI-003) -
	   wide tracking fragments a 12px label at phone widths. */
	body.aibt-universal .universal-about--manifesto-fullbleed-dark .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Editor wrapper - content stays visible in the block editor ===========
   No entrance animations here, but keep the parity guard so a future motion
   layer never blanks the editor preview. */
.editor-styles-wrapper .universal-about--manifesto-fullbleed-dark .universal-about__statement,
.editor-styles-wrapper .universal-about--manifesto-fullbleed-dark .universal-about__signature {
	opacity: 1 !important;
	transform: none !important;
}