/*
 * About page composition.
 *
 * Gutenberg owns the copy and people cards; this sheet only owns rhythm,
 * offer tiles, split media pairs, statement imagery, and denser people
 * grids so the page stops reading as a stack of identical centered photos.
 */

/*
 * Closing CTA band — dark gradient. Listed in buttons.css dark-surface
 * ancestors as `.isjac-about .cta` so primary = paper knockout without
 * authors picking on-dark class names. Keep surface paint here so the
 * page HTML can stay a plain `.cta` section.
 */
.entry-content .isjac-about .cta {
	background: linear-gradient(
		135deg,
		var(--isjac-color-ink) 0%,
		var(--isjac-color-brand-deep) 100%
	);
	color: var(--isjac-color-paper);
	padding: var(--isjac-section-xl) 0;
	text-align: center;
}

.entry-content .isjac-about .cta h2 {
	font-weight: var(--isjac-font-weight-black);
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--isjac-color-paper);
	margin-bottom: var(--isjac-space-4);
}

.entry-content .isjac-about .cta p {
	color: color-mix(in oklch, var(--isjac-color-paper) 85%, transparent);
	max-width: 56ch;
	margin: 0 auto var(--isjac-space-6);
}

.entry-content .isjac-about .cta .isjac-btn-row {
	justify-content: center;
}

/*
 * Mission measure — outer constrained group owns the shared 72rem column
 * (same left edge as other sections). Cap reading width on *inner* children so
 * core does not re-center a narrower constrained child.
 */
.entry-content .isjac-about-mission__measure > :where(.wp-block-heading, p) {
	max-width: min(68ch, 100%);
}

/*
 * Offer program tiles — brand wash surfaces, deep ink labels (not mid-blue
 * body links in generic white chips). Dogfoods brand-guide button/card tokens.
 */
.entry-content .isjac-offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	gap: var(--isjac-space-4, 1rem);
	margin-block: var(--isjac-space-6, 1.5rem);
}

.entry-content .isjac-offer-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--isjac-button-min-height, 44px);
	padding: var(--isjac-space-4, 1rem) var(--isjac-space-5, 1.25rem);
	border: 1px solid var(--isjac-border-default);
	border-radius: var(--isjac-radius-md);
	background: var(--isjac-surface-tinted, var(--isjac-color-brand-wash));
	font-family: var(--isjac-font-family);
	text-decoration: none;
	transition:
		border-color 150ms ease-out,
		background-color 150ms ease-out,
		box-shadow 150ms ease-out;
}

.entry-content .isjac-offer-tile:hover,
.entry-content .isjac-offer-tile:focus-within {
	border-color: var(--isjac-color-brand-deep);
	background: var(--isjac-color-paper);
	box-shadow: var(--isjac-shadow-card, 0 4px 16px rgb(21 82 111 / 10%));
}

.entry-content .isjac-offer-tile .wp-block-heading {
	margin: 0;
	font-family: var(--isjac-font-family);
	font-size: var(--isjac-font-size-body, 1rem);
	font-weight: var(--isjac-font-weight-semibold, 600);
	line-height: 1.3;
}

/*
 * Whole-tile labels: brand-deep, not default body-link mid.
 * Tile labels are navigation chips, not body prose links — pin deep and
 * kill underline so they read as brand surfaces (matches brand-guide UI).
 */
/* Quotes the typography link rule's own :not() chain — that rule weighs
 * (0,6,3) and would otherwise repaint these chips brand-mid; matching its
 * exclusions lifts this selector past it on specificity alone. */
.entry-content .isjac-offer-grid .isjac-offer-tile .wp-block-heading a:not(.wp-block-button__link):not(.page-numbers):not(.wp-element-button):not(.isjac-btn):not(.button):not(.kb-button) {
	color: var(--isjac-color-brand-deep);
	text-decoration: none;
}

.entry-content .isjac-offer-tile p {
	margin: 0.35rem 0 0;
	font-size: var(--isjac-font-size-small, 0.875rem);
	color: var(--isjac-text-muted);
}

/* Text + image pairs (history / offer moment). */
.entry-content .isjac-about-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--isjac-space-7, 2rem);
	align-items: center;
	margin-block: var(--isjac-space-6, 1.5rem);
}

.entry-content .isjac-about-split--reverse {
	direction: rtl;
}

.entry-content .isjac-about-split--reverse > * {
	direction: ltr;
}

.entry-content .isjac-about-split .wp-block-image,
.entry-content .isjac-about-split figure {
	margin: 0;
}

.entry-content .isjac-about-split img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(28rem, 52vh);
	object-fit: cover;
	object-position: center 30%;
	border-radius: var(--isjac-radius-md, 0.5rem);
}

/*
 * Statement imagery — wider than postcard. Editorial session shots may crop
 * gently; group / board photos must show every face (no max-height crop).
 */
.entry-content .isjac-statement-figure {
	margin-block: var(--isjac-space-6, 1.5rem);
}

.entry-content .isjac-statement-figure.alignwide,
.entry-content .isjac-statement-figure {
	max-width: min(56rem, 100%);
	margin-inline: auto;
}

.entry-content .isjac-statement-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(26rem, 48vh);
	object-fit: cover;
	object-position: center 35%;
	border-radius: var(--isjac-radius-md);
}

/* Board / group portrait: full frame, no crop. */
.entry-content .isjac-about-board .isjac-statement-figure,
.entry-content .isjac-statement-figure--full {
	max-width: min(72rem, 100%);
}

.entry-content .isjac-about-board .isjac-statement-figure img,
.entry-content .isjac-statement-figure--full img {
	max-height: none;
	height: auto;
	object-fit: contain;
	object-position: center center;
}

.entry-content .isjac-statement-figure figcaption {
	margin-top: var(--isjac-space-3, 0.75rem);
	text-align: center;
	font-size: var(--isjac-font-size-small, 0.875rem);
	color: var(--isjac-text-muted);
}

/* People grids — larger cards, wrap at 3–4 across instead of 7 stamps. */
.entry-content .isjac-person-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	gap: var(--isjac-space-5, 1.25rem) var(--isjac-space-4, 1rem);
	margin-block-start: var(--isjac-space-6, 1.5rem);
}

.entry-content .isjac-person-grid--board {
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.entry-content .isjac-person-card {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-2, 0.5rem);
	min-width: 0;
}

/* Designed web-cards already compose name + portrait — don't re-crop them. */
.entry-content .isjac-person-card .wp-block-image,
.entry-content .isjac-person-card figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--isjac-radius-sm, 0.375rem);
	background: var(--isjac-surface-tinted, var(--isjac-color-brand-wash));
}

.entry-content .isjac-person-card img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center center;
}

.entry-content .isjac-person-card .wp-block-heading {
	margin: 0;
	font-size: var(--isjac-font-size-body, 1rem);
	line-height: 1.25;
}

.entry-content .isjac-person-card .isjac-eyebrow {
	margin: 0;
}

.entry-content .isjac-person-card .isjac-person-bio {
	margin: 0;
	font-size: var(--isjac-font-size-small, 0.875rem);
	line-height: 1.4;
	color: var(--isjac-text-muted);
	max-width: 36ch;
}

/* Soft brand wash for board band — not a generic gray slab. */
.entry-content .isjac-about-board {
	background: var(--isjac-surface-tinted, var(--isjac-color-brand-wash));
}

@media (max-width: 781px) {
	.entry-content .isjac-about-split,
	.entry-content .isjac-about-split--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
	}

	.entry-content .isjac-about-split img {
		max-height: min(20rem, 42vh);
	}

	/* History session shot only — board stays uncropped on mobile too. */
	.entry-content .isjac-statement-figure:not(.isjac-statement-figure--full) img {
		max-height: min(20rem, 42vh);
	}

	.entry-content .isjac-about-board .isjac-statement-figure img {
		max-height: none;
	}

	.entry-content .isjac-person-grid,
	.entry-content .isjac-person-grid--board {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}