/*
 * About us (HANDOFF §4 A.2–A.4; Figma 12:41, 12:57 / 68:879, 68:889). Loaded on /about-us/ only.
 * The hero is hero.css (.hero--page); What we do is the split layout in theme.css.
 */

/* ---------- A.2 BIBGroup EAD ---------- */

/* The H2, then the Lead across columns 1–10, then the text across columns 1–6, 48 apart. */
.about-intro__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-48) var(--gutter);
}

.about-intro__grid > * {
	grid-column: 1 / -1;
}

.about-intro__lead {
	grid-column: 1 / span 10;
}

.about-intro__text {
	grid-column: 1 / span 6;
}

/* The organizations' logos under the text (the owner's addition, not in Figma): one row, 64 high and
   48 apart, left-aligned, each linking to the organization's site. On phones 48 high and 16 apart, which
   still fits one row at 375; narrower screens wrap. */
.about-intro__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-32) var(--space-48);
	margin: 0;
	padding: 0;
	list-style: none;
}

.org-logo {
	display: block;
	line-height: 0;
}

.org-logo__image {
	width: auto;
	height: var(--space-64);
}

@media (max-width: 1023px) {
	.about-intro__lead,
	.about-intro__text {
		grid-column: 1 / -1;
	}

	.about-intro__text {
		max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	}
}

@media (max-width: 767px) {
	.about-intro__logos {
		gap: var(--space-24) var(--space-16);
	}

	.org-logo__image {
		height: var(--space-48);
	}
}

/* ---------- A.3 What we do ---------- */

/* From 1024 the image is as tall as the text beside it (about 3:2 at 1440), not 4:5, which left a tall
   empty space under the text (the owner's note of 2026-10-11). The crop keeps the people at the table. */
@media (min-width: 1024px) {
	.what-we-do .split {
		align-items: stretch;
	}

	.what-we-do .split__media {
		position: relative;
	}

	.what-we-do .split__image {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
		object-position: 50% 75%;
	}
}

/* ---------- A.4 Principles (HANDOFF §5.10) ---------- */

/* No heading: an oxide rule, then 64 down, 01–04 in columns 1–6 and 05–08 in columns 7–12. From 1024 the
   two columns share their rows (the owner's request of 2026-10-12; Figma ran them independently), so 01 and
   05, 02 and 06 … sit on one line and their rules align; below 1024 one column, 01–08 in order. */
.principles__rule {
	margin-bottom: var(--space-64);
}

.principles__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--gutter);
	align-items: start;
}

/* The rows share the list's number column (subgrid), so every text starts at the same x although the
   digits are proportional; Figma sizes each number to its digits and the text edge wanders by 1–3 px. */
.principles__list {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-48) var(--space-24);
}

/* The right column continues the reveal stagger after 04. */
.principles__list + .principles__list {
	--reveal-offset: 4;
}

.principle {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: start;
	padding-block: var(--space-24);
	border-bottom: 1px solid var(--color-concrete-mid);
}

@media (min-width: 1024px) {
	.principles__grid {
		grid-template-rows: repeat(4, auto);
		row-gap: var(--space-48);
		align-items: stretch;
	}

	.principles__list {
		grid-row: span 4;
		grid-template-rows: subgrid;
	}
}

@media (max-width: 1023px) {
	.principles__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.principles__list {
		row-gap: 0;
	}

	.principles__list + .principles__list {
		--reveal-offset: 0;
	}
}