/* ==========================================================================
   ALQIMA — About ("We are ALQIMA")

   Mobile  : head → statement → image → overlapping detail → copy
   Tablet  : statement full width; image 7/8; copy + overlapping detail below
   Desktop : statement 11/12; image 1–7 | copy 9–12; detail 6–8 overlapping
             the main image (faster parallax = foreground layer)
   ========================================================================== */

.about {
	position: relative;
	z-index: 1;
	padding-block: clamp(2.5rem, 6vw, 5rem) var(--s-section);
	background: var(--c-canvas);
}

.about__grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	column-gap: var(--gutter);
	margin-block-start: clamp(3rem, 8vw, 8rem);
}

/* --------------------------------------------------------------- Statement */
.about__title {
	grid-column: 1 / -1;
	grid-row: 1;
	max-width: 14ch;
	margin-block-end: clamp(2.5rem, 7vw, 7.5rem);
	font-size: clamp(3rem, 1.1rem + 8vw, 10rem);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.05em;
	line-height: 0.92;
	text-wrap: balance;
}

/* Words are wrapped by motion.js for the scroll-scrubbed reveal. */
.about__title .word {
	display: inline-block;
	white-space: pre;
}

/* ----------------------------------------------------------------- Media */
/* The visual block holds two planes: the main image and a detail image that
   overlaps its lower edge. The block reserves the overhang with padding
   (% padding resolves against the block's width, so it scales exactly). */
.about__visual {
	--main-w: 100%;
	--detail-w: 52%;
	--overlap: 22vw;
	position: relative;
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: start;    /* never stretch to the copy column's height */
	padding-block-end: calc(var(--detail-w) * 1.25 - var(--overlap));
}

.about__media {
	position: relative;
	margin: 0;
}

.about__wipe {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: var(--c-surface-1);
}

.about__parallax {
	position: absolute;
	inset-inline: 0;
	inset-block: -9%;               /* travel room for the parallax */
	will-change: transform;
}

.about__parallax picture,
.about__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about__media--main {
	width: var(--main-w);
	aspect-ratio: 3 / 2;
}

.about__media--detail {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
	width: var(--detail-w);
	aspect-ratio: 4 / 5;
	z-index: 2;
	box-shadow: 0 0 0 1px var(--c-canvas);   /* crisp edge against the image below */
}

.about__media--detail .about__parallax {
	inset-block: -14%;
}

/* ------------------------------------------------------------------ Copy */
.about__body {
	grid-column: 1 / -1;
	grid-row: 3;
	padding-block-start: var(--s-7);
}

.about__lead {
	font-size: clamp(1.25rem, 1.02rem + 0.85vw, 1.875rem);
	font-weight: var(--fw-regular);
	line-height: 1.38;
	letter-spacing: -0.018em;
	color: var(--c-text);
	max-width: 30ch;
}

.about__support {
	margin-block-start: var(--s-5);
	max-width: 40ch;
	color: var(--c-text-2);
}

.about__disciplines {
	margin-block-start: var(--s-7);
}

.about__label {
	margin-block-end: var(--s-4);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--c-text-3);
	line-height: 1.4;
}

.about__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.about__list-item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--s-4);
	padding-block: 0.875rem;
}

/* hairlines are pseudo-elements so they can be drawn independently */
.about__list-item::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 1px;
	background: var(--c-hairline);
	transform-origin: left center;
	transform: scaleX(var(--line, 1));
}

[dir="rtl"] .about__list-item::before {
	transform-origin: right center;
}

.about__list-item:last-child {
	border-block-end: 1px solid var(--c-hairline);
}

.about__list-index {
	min-width: 1.75rem;
	font-family: var(--f-latin);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	color: var(--c-text-3);
}

.about__list-name {
	font-size: 1.0625rem;
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
}

/* v1.1: disciplines that are service categories link to their pages. */
.about__list-link {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--dur-2) var(--ease-soft);
}

.about__list-link:hover,
.about__list-link:focus-visible {
	text-decoration-color: currentColor;
}

.about__cta {
	margin-block-start: var(--s-7);
}

/* ============================================================ Tablet 768+ */
@media (min-width: 48em) {
	.about__visual {
		--main-w: 87.5%;     /* 7 of 8 columns */
		--detail-w: 37.5%;   /* 3 of 8 columns */
		--overlap: 13vw;
	}

	.about__body {
		grid-column: 1 / span 5;
		padding-block-start: var(--s-8);
	}
}

/* ========================================================= Desktop 1200+ */
@media (min-width: 75em) {
	.about__title {
		grid-column: 1 / span 11;
	}

	.about__visual {
		grid-column: 1 / span 8;
		--overlap: clamp(8rem, 12vw, 15rem);
	}

	.about__body {
		grid-column: 9 / span 4;
		grid-row: 2;
		align-self: start;
		padding-block-start: 0;
	}
}

@media (min-width: 90em) {
	.about__body {
		grid-column: 10 / span 3;
	}
}