/**
 * Variant CSS: about--founder-portrait-quote
 * Layer 2 - Path B universal about variant (new 2026-05-29).
 *
 * Concept: founder / personal intro. Portrait + a large editorial mission
 * quote, founder name + role signature, one CTA. Human, trust-building.
 * Semantic tokens only (theme-agnostic). Every selector scoped to
 * `body.aibt-universal .universal-about--founder-portrait-quote`.
 */

body.aibt-universal .universal-about--founder-portrait-quote {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* Grid - vertically centered portrait + text. Reasonable reading cap on the
   text column so the quote never stretches into an awkward measure on ultra-wide
   viewports (the constrained layout caps the section, ch caps the line). */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__grid {
	align-items: center;
}

/* === Portrait === */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__media {
	position: relative;
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__photo {
	margin: 0;
	position: relative;
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__photo img {
	display: block;
	width: 100%;
	border-radius: var(--decor-radius-photo);
	box-shadow: var(--decor-shadow-elevated);
}

/* Editorial accent frame - a thin offset rule behind the portrait that reads
   "considered", not "boxed". Uses the accent at graphic strength (>=3:1) and is
   purely decorative, so it is hidden from a11y by being a pseudo-element. */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__photo::before {
	content: "";
	position: absolute;
	inset: auto auto -0.85rem -0.85rem;
	width: 42%;
	height: 42%;
	border-left: 2px solid var(--divider-accent);
	border-bottom: 2px solid var(--divider-accent);
	border-bottom-left-radius: var(--decor-radius-photo);
	pointer-events: none;
	z-index: 0;
}

/* === Text column === */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__body {
	max-width: 40ch;
}

/* Kicker - small uppercase label. Kept in --text-secondary (small text -> AA on
   every theme background); the accent identity comes from the quote-mark + rule,
   not from low-contrast small accent text. */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* === The quote === */
/* Strip WP's default blockquote chrome (left border + indent) so the statement
   reads as editorial display type, not a generic pull-quote. */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__quote {
	position: relative;
	margin: 0 0 var(--space-lg) 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* Oversized opening quote-mark - decorative graphic in --accent (>=3:1). Sits
   above the statement as a quiet editorial flourish. aria-hidden by nature
   (CSS content), so it adds no noise for screen readers. */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__quote::before {
	content: "\201C";
	display: block;
	font-family: var(--font-display);
	font-size: clamp(3rem, 6vw, 4.75rem);
	font-weight: 600;
	line-height: 0.7;
	color: var(--accent);
	margin: 0 0 0.1em -0.04em;
	opacity: 0.85;
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__quote-text {
	font-family: var(--font-display) !important;
	font-size: clamp(1.55rem, 2.9vw, 2.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.18 !important;
	letter-spacing: -0.015em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* Accent emphasis inside the statement (theme italic treatment). */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__quote-text em {
	font-style: italic;
	color: var(--italic-color);
	font-weight: var(--italic-weight);
}

/* === Signature block (name + role) with a short accent rule lead-in === */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__signature {
	position: relative;
	margin: 0 0 var(--space-lg) 0;
	padding-top: var(--space-md);
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__signature::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background: var(--accent);
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__name {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 500 !important;
	letter-spacing: var(--tracking-wide) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary) !important;
	margin: 0.35rem 0 0 0 !important;
}

/* === CTA - outline secondary, fills with accent-fade on hover === */
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__actions {
	margin: 0;
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--cta-text-secondary);
	background: var(--cta-bg-secondary);
	border: var(--decor-border-width) solid var(--cta-border-secondary);
	border-radius: var(--decor-radius);
	padding: 0.85rem 1.75rem;
	min-height: var(--target-min);
	display: inline-flex;
	align-items: center;
	transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-about--founder-portrait-quote .universal-about__cta .wp-block-button__link:hover,
body.aibt-universal .universal-about--founder-portrait-quote .universal-about__cta .wp-block-button__link:focus-visible {
	background: var(--accent-fade);
}

/* === Responsive: stack portrait on top, statement below === */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--founder-portrait-quote .universal-about__grid {
		flex-direction: column !important;
	}
	body.aibt-universal .universal-about--founder-portrait-quote .wp-block-column {
		flex-basis: 100% !important;
	}
	body.aibt-universal .universal-about--founder-portrait-quote .universal-about__body {
		max-width: none;
	}
}

/* Tighten the wide kicker / role tracking on small screens: wide tracking on a
   12px uppercase label fragments words at phone widths. Cap to 0 <=640px. */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--founder-portrait-quote .universal-about__kicker,
	body.aibt-universal .universal-about--founder-portrait-quote .universal-about__role {
		letter-spacing: 0 !important;
	}
}

/* Editor parity - the variant CSS sets no hidden/transform state, but keep the
   portrait + decorative pseudo-elements visible regardless of motion JS. */
.editor-styles-wrapper .universal-about--founder-portrait-quote .universal-about__photo,
.editor-styles-wrapper .universal-about--founder-portrait-quote .universal-about__quote {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--founder-portrait-quote .universal-about__cta .wp-block-button__link {
		transition: none;
	}
}