/**
 * Variant CSS: about--dual-image-story
 *
 * An "about us" told with two layered photos — narrative + signature on the
 * left, a primary frame plus a smaller offset frame (white border, shadow) on
 * the right. Richer than a single split, quieter than a manifesto or values
 * grid. Text stays --ink (polarity-aware); the inset frame is white (a photo
 * frame, the correct text/edge-on-photo pattern). On mobile the overlap relaxes.
 */

body.aibt-universal .universal-about--dual-image-story {
	padding-block: calc(clamp(3rem, 7vw, 5.5rem) * var(--density, 1));
}

/* Text column. */
body.aibt-universal .universal-about--dual-image-story .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(--accent) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__body {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.82;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 52ch;
}

/* Signature. */
body.aibt-universal .universal-about--dual-image-story .universal-about__sign {
	gap: 0.1rem !important;
	margin-top: var(--space-sm);
}

body.aibt-universal .universal-about--dual-image-story .universal-about__name {
	font-family: var(--font-display) !important;
	font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__role {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	color: var(--accent) !important;
	margin: 0 !important;
}

/* Layered images. */
body.aibt-universal .universal-about--dual-image-story .universal-about__images {
	position: relative;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__photo {
	margin: 0 !important;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__photo--primary {
	border-radius: var(--decor-radius, 14px);
	overflow: hidden;
}

body.aibt-universal .universal-about--dual-image-story .universal-about__photo--primary img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: var(--photo-filter, none);
}

body.aibt-universal .universal-about--dual-image-story .universal-about__photo--inset {
	width: 54%;
	margin: -22% 0 0 auto !important;
	position: relative;
	z-index: 2;
	border: 5px solid #ffffff;
	border-radius: calc(var(--decor-radius, 14px) * 0.7);
	overflow: hidden;
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

body.aibt-universal .universal-about--dual-image-story .universal-about__photo--inset img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: var(--photo-filter, none);
}

/* Mobile: text stacks above, overlap relaxes a touch. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--dual-image-story .universal-about__textcol {
		margin-bottom: var(--space-lg, 2rem);
	}
	body.aibt-universal .universal-about--dual-image-story .universal-about__photo--inset {
		width: 50%;
		margin-top: -16% !important;
		border-width: 4px;
	}
}