/**
 * Variant CSS: hero--centered-minimal-no-photo
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Pure typographic hero - NO photo. Confidence through type + space:
 * a small accent mark + short accent rule, an uppercase tracked kicker,
 * a very large CENTERED display H1 (the focal point) with an italic accent
 * word, a one/two-line deck, then TWO CTAs (primary fill + ghost outline).
 *
 * Atmosphere is built ENTIRELY from semantic tokens so it re-tunes per theme:
 *   - a soft radial halo of --accent-fade behind the headline (the "glow")
 *   - a gentle vertical wash of --background-alt at the top (light from above)
 *   - a hairline frame of --divider-accent so the composition reads intentional
 * On light themes this stays whisper-quiet and premium; on dark themes the
 * accent halo + alt wash give real depth without ever turning muddy.
 *
 * Best for: law, consultancy, finance, SaaS - type-led, no-image, minimal.
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library - 20-hero expansion)
 */

/* === Section shell + token-driven atmosphere ============================== */
body.aibt-universal .universal-hero--centered-minimal-no-photo {
	position: relative;
	isolation: isolate;
	background: var(--background, #fff);
	padding-block: calc(clamp(var(--space-2xl, 6rem), 16vh, 12rem) * var(--density, 1));
	padding-inline: clamp(var(--space-md, 1.5rem), 5vw, var(--space-xl, 4rem));
	overflow: hidden;
}

/* Atmosphere layer 1 - soft accent halo behind the headline (top-center).
   Large radius so the low-alpha --accent-fade reads as a deliberate glow,
   never a hard spot. Sits BELOW content via z-index. */
body.aibt-universal .universal-hero--centered-minimal-no-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(
			ellipse 70% 58% at 50% 6%,
			var(--accent-fade, rgba(0, 0, 0, 0.06)) 0%,
			transparent 62%
		);
	pointer-events: none;
}

/* Atmosphere layer 2 - gentle vertical wash of --background-alt at the top,
   fading into the base background. Gives a "light from above" page feel that
   is subtle on light themes and adds depth on dark themes (alt sits ~7-15%
   off the base). Kept under 60% height so it never becomes a hard band. */
body.aibt-universal .universal-hero--centered-minimal-no-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			180deg,
			var(--background-alt, transparent) 0%,
			transparent 52%
		);
	opacity: 0.55;
	pointer-events: none;
}

/* === Inner column - centered, capped for a tight confident type block ===== */
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 56rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* hairline frame so the open composition reads intentional, not empty */
	border-block: var(--decor-border-width, 1px) solid var(--divider-accent, var(--line, rgba(0, 0, 0, 0.1)));
	padding-block: calc(clamp(var(--space-xl, 4rem), 9vh, var(--space-2xl, 6rem)) * var(--density, 1));
}

/* === Decorative mark (SVG diamond) - small craft signal ==================== */
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__mark {
	display: block;
	line-height: 0;
	color: var(--accent, var(--text-secondary));
	margin-bottom: var(--space-md, 1.5rem);
	opacity: 0;
	transform: translateY(12px);
	animation: hero-ctrmin-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) 80ms forwards;
}

body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__mark svg {
	width: 22px;
	height: 22px;
	display: inline-block;
}

/* === Short accent rule under the mark ===================================== */
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__rule.wp-block-separator {
	width: 64px;
	max-width: 64px;
	height: 0;
	border: 0;
	border-top: 2px solid var(--accent, var(--text-primary));
	margin: 0 auto var(--space-lg, 2.5rem);
	background: transparent;
	color: var(--accent, var(--text-primary));
	opacity: 0;
	transform: translateY(12px);
	animation: hero-ctrmin-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) 160ms forwards;
}

/* === Kicker ===============================================================
   Colour = --text-secondary (NOT --accent): the accent identity is already
   carried right above by the diamond mark + short accent rule, and a small
   uppercase accent kicker drops below WCAG AA on the two mid-tone light themes
   (paper-color-blocks ~4.45, light-industrial-orange ~3.52). --text-secondary
   clears AA in all 9 themes (≥6.6:1) while the mark/rule keep the accent pop. */
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs, 0.78rem) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.24em) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary, var(--ink-soft)) !important;
	margin: 0 0 var(--space-md, 1.5rem) 0 !important;
	opacity: 0;
	transform: translateY(14px);
	animation: hero-ctrmin-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) 240ms forwards;
}

/* === Headline - the focal point =========================================== */
body.aibt-universal .universal-hero--centered-minimal-no-photo h1.universal-hero__headline,
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, var(--ink)) !important;
	margin: 0 !important;
	max-width: 18ch;
	text-wrap: balance;
	opacity: 0;
	transform: translateY(16px);
	animation: hero-ctrmin-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) 340ms forwards;
	/* font-size + line-height + weight inherited from block inline style.typography */
}

body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 600);
}

/* === Deck ================================================================= */
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg, 1.25rem) !important;
	line-height: 1.6 !important;
	color: var(--text-secondary, var(--ink-soft)) !important;
	max-width: 48ch;
	margin: var(--space-lg, 2.5rem) auto 0 !important;
	opacity: 0;
	transform: translateY(16px);
	animation: hero-ctrmin-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) 440ms forwards;
}

/* === CTA pair ============================================================= */
body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__cta-wrap {
	margin-top: clamp(var(--space-lg, 2.5rem), 5vh, var(--space-xl, 4rem));
	gap: var(--space-sm, 1rem) var(--space-md, 1.5rem);
	opacity: 0;
	transform: translateY(16px);
	animation: hero-ctrmin-rise var(--duration-slow, 900ms) var(--ease-elegant, ease) 540ms forwards;
}

/* Shared button geometry */
body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base, 1.05rem);
	letter-spacing: var(--tracking-wide, 0.04em);
	padding: 1.05rem 2.4rem;
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background var(--duration-fast, 240ms) var(--ease-default, ease),
		color var(--duration-fast, 240ms) var(--ease-default, ease),
		border-color var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
}

/* Primary - solid fill, dominant */
body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta:not(.universal-hero__cta--ghost) .wp-block-button__link {
	color: var(--cta-text-primary, var(--on-accent, #fff));
	background: var(--cta-bg-primary, var(--accent));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--accent));
}

body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta:not(.universal-hero__cta--ghost) .wp-block-button__link:hover {
	background: var(--accent-hover, var(--text-primary));
	border-color: var(--accent-hover, var(--text-primary));
	color: var(--cta-text-primary, var(--on-accent, #fff));
	transform: translateY(-2px);
}

/* Ghost / secondary - transparent fill, ink border + ink text (AA in every
   theme: --cta-text-secondary / --cta-border-secondary resolve to the body ink
   tone over the background, the highest-contrast pair available). The primary
   stays clearly dominant because the ghost has no fill. */
body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta--ghost .wp-block-button__link,
body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta--ghost.is-style-outline .wp-block-button__link {
	color: var(--cta-text-secondary, var(--text-primary)) !important;
	background: var(--cta-bg-secondary, transparent) !important;
	border: var(--decor-border-width, 1px) solid var(--cta-border-secondary, var(--text-primary)) !important;
}

body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta--ghost .wp-block-button__link:hover,
body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta--ghost.is-style-outline .wp-block-button__link:hover {
	color: var(--background, #fff) !important;
	background: var(--text-primary, var(--ink)) !important;
	border-color: var(--text-primary, var(--ink)) !important;
	transform: translateY(-2px);
}

/* === Entrance keyframes =================================================== */
@keyframes hero-ctrmin-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* === Tablet =============================================================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--centered-minimal-no-photo {
		padding-block: calc(clamp(var(--space-xl, 4rem), 11vh, var(--space-2xl, 6rem)) * var(--density, 1));
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__inner {
		max-width: 40rem;
	}
}

/* === Mobile =============================================================== */
@media (max-width: 640px) {
	/* Cap uppercase tracking to 0 on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__headline {
		font-size: clamp(2.2rem, 10vw, 3.2rem) !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__deck {
		font-size: var(--text-base, 1.05rem) !important;
	}

	/* Stack CTAs full-width for comfortable tap targets. */
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__cta-wrap {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta {
		width: 100%;
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
	}
}

/* === Reduced motion ======================================================= */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__mark,
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__rule.wp-block-separator,
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__kicker,
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__headline,
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__deck,
	body.aibt-universal .universal-hero--centered-minimal-no-photo .universal-hero__cta-wrap {
		animation: none;
		opacity: 1;
		transform: none;
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--centered-minimal-no-photo .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper override (block editor doesn't run entrance JS, but the
   animations are CSS-keyframe so they DO play in the editor; still, force the
   final visible state so a paused/long-delay frame never hides content). === */
.editor-styles-wrapper .universal-hero--centered-minimal-no-photo .universal-hero__mark,
.editor-styles-wrapper .universal-hero--centered-minimal-no-photo .universal-hero__rule.wp-block-separator,
.editor-styles-wrapper .universal-hero--centered-minimal-no-photo .universal-hero__kicker,
.editor-styles-wrapper .universal-hero--centered-minimal-no-photo .universal-hero__headline,
.editor-styles-wrapper .universal-hero--centered-minimal-no-photo .universal-hero__deck,
.editor-styles-wrapper .universal-hero--centered-minimal-no-photo .universal-hero__cta-wrap {
	opacity: 1 !important;
	transform: none !important;
}