/* about-home — Figma divider 243:59 + content 243:63.
   Every value from tokens (R8), logical properties (R9), no pinned heights (R4). */

.about-home {
	padding-block-end: var(--space-about-bottom);
}

.about-home__inner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-col-gap);
	margin-block-start: var(--space-about-top);
}

/* ---- Photo card (Figma 243:70): cream→navy gradient, the photo spills past both sides ---- */

.about-home__photo {
	position: relative;
	flex: 0 1 38.1875rem; /* lint-ok: 611px card width from Figma, flex-basis cap */
	aspect-ratio: 611 / 1034; /* the shape lives on the container (R7) */
	border-radius: var(--radius-lg);
	background: linear-gradient(to right, var(--color-surface), var(--color-ink)); /* physical: Figma gradient runs left → right */
	box-shadow: var(--shadow-photo);
}

/* Client request 2026-09-24: the photo stays in view while the long bio
   scrolls past (desktop), just below the fixed header; it releases at the end
   of the section. Needs align-items:flex-start on the row (set above). */
@media (min-width: 768px) { /* bp: --bp-md */
	.about-home__photo {
		position: sticky;
		inset-block-start: calc(var(--header-h, 5rem) + var(--space-fluid-md));
	}
}

/* A measured composition (Figma 243:71): 764px-wide photo placed 57.5px past the
   card's left edge and 1px above it — physical offsets on purpose. */
.about-home__photo img {
	position: absolute;
	top: -0.1%; /* physical: measured composition */
	left: -9.41%; /* physical: measured composition */
	inline-size: 125.04%;
	max-inline-size: none;
	block-size: 100.1%;
	object-fit: cover;
}

.about-home__content {
	flex: 0 1 38.9375rem; /* lint-ok: 623px text column from Figma, flex-basis cap */
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: right edge */
	gap: var(--space-fluid-lg);
	min-inline-size: 0;
}

.about-home__title {
	padding-inline: 0; /* start-aligned: trailing tracking falls outside, nothing to re-centre */
	text-align: start;
}

.about-home__subtitle {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
}

/* Figma trims the bio as ONE text block and separates paragraphs with an
   empty line (and ends with one), so the paragraphs themselves stay untrimmed. */
.about-home__bio {
	margin-block-end: 1lh;
	font-size: var(--fs-400);
	font-weight: var(--fw-light);
	text-box: trim-both cap alphabetic;
}

.about-home__bio p {
	text-box: none;
}

.about-home__bio p + p {
	margin-block-start: 1lh;
}

.about-home__bio strong {
	font-size: var(--fs-500);
	font-weight: var(--fw-regular);
}

/* ---- Phone plan: photo on top ~50% centred (4:5 cap), text below ---- */

@media (max-width: 767px) { /* bp: --bp-md */
	.about-home__inner {
		flex-direction: column;
		align-items: center;
	}
	.about-home__photo {
		flex-basis: auto;
		inline-size: 60%;
	}
	.about-home__content {
		flex-basis: auto;
		align-items: center;
		text-align: center;
	}
	.about-home__title {
		text-align: center;
	}
}