/* ============================================================
   The About page (template-about.php; About v3 desktop and mobile,
   docs/design-renders/about-desktop-v3, about-mobile-v3). Loaded on
   that template only (inc/enqueue.php). The hero with its photo is
   page-hero.css; the accreditation strip, "Why choose" band, reviews
   and CTA band are their own components.
   - Our Mission / What We Believe (Cream): Navy Koulen H2s (36 phones,
     48 desktop) and Poppins 16/24 text, paragraphs and beliefs a blank
     line apart, each belief's opening words Bold (as drawn). Phones
     stack heading and text; from 768px the heading sits in a column on
     the left (the drawn 350 : 882 split of the container, the text
     column at x 478 at 1440), the two rows 56px apart.
   - Meet The Team (Primary Navy): Secondary Navy cards with a 3px
     Light Orange bottom edge that tapers into the rounded corners (as
     the progression cards). Names in Cream Koulen (30 phones, 36
     desktop), the role in Light Orange SemiBold, qualifications Cream
     SemiBold, photos in circles framed by their focus point.
     - The lead instructor (#sam, the homepage's "Meet Sam" link):
       phones stack a full-width circle (328 at 402), the name, role
       and biography; from 1024px the circle (496 at 1440) sits left,
       centred down the card, the text right. Tablets are not designed:
       a 220px circle beside the name and role, the biography under
       both.
     - Core team and associates: phones show a 133px circle left of the
       text (the drawn cards, one to a row, 20px apart); from 768px
       centred cards, two to a row, the associates four to a row from
       1280px (below that their roles would wrap). One 36px gap
       everywhere, so a core card lines up with two associate cards
       (drawn 37 and 45).
   - Section paddings are the site's shared --section-pad-y (the files
     draw the Cream band about 80 / 92 and the team 70 / 105 at 1440,
     and tighter on phones), as on the other pages.
   ============================================================ */

/* ---------- Our Mission / What We Believe ---------- */

.about-intro__inner {
	display: grid;
	row-gap: 40px;
}

.about-intro__row {
	display: grid;
	row-gap: 20px;
}

.about-intro__title {
	color: var(--color-heading);
	text-wrap: balance;
}

.about-intro__body p + p,
.about-beliefs__item + .about-beliefs__item {
	margin-top: 24px;
}

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

.about-beliefs__lead {
	font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
	.about-intro__inner {
		row-gap: 56px;
	}

	.about-intro__row {
		grid-template-columns: minmax(0, 350fr) minmax(0, 882fr);
		align-items: start;
		column-gap: 48px;
	}

	/* The heading's caps sit level with the text's first line (as drawn). */
	.about-intro__title {
		margin-top: -4px;
	}
}

/* ---------- Meet The Team: shared ---------- */

.team-card {
	display: grid;
	min-width: 0;
	border-bottom: var(--border-accent) solid var(--team-card-edge);
	border-radius: var(--radius-md);
	background-color: var(--team-card-bg);
	color: var(--color-text-on-dark);
}

.team-card[id] {
	scroll-margin-top: 24px;
}

/* While the header floats it would cover the card's top. */
html:has(.site-header.is-floating) .team-card[id] {
	scroll-margin-top: calc(var(--header-bar-h) + var(--header-focus-clearance));
}

.team-card__photo {
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 50%;
}

.team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.team-card__head {
	min-width: 0;
}

/* (Two classes: .section--navy h3 would make it White.) */
.team-card .team-card__name {
	color: var(--team-name);
	font-size: var(--fs-h3);
	line-height: 1.15;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.team-card__role {
	margin-top: 8px;
	color: var(--team-role);
	font-size: var(--fs-team-role);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

.team-card__quals {
	margin-top: 4px;
	font-size: var(--fs-team-quals);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
}

.team-card__bio p + p {
	margin-top: 24px;
}

.team-grid {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.team-grid__item {
	display: flex;
	min-width: 0;
}

.team-grid__item > .team-card {
	flex: 1;
}

.team-card--lead + .team-card--lead {
	margin-top: 20px;
}

.team-card--lead + .team-grid {
	margin-top: 40px;
}

.team-grid + .team-grid {
	margin-top: 20px;
}

/* ---------- The lead instructor ---------- */

/* Phones: everything stacked, the circle as wide as the card allows. */
.team-card--lead {
	padding: 40px 20px;
}

.team-card--lead .team-card__photo {
	justify-self: center;
	width: 100%;
	max-width: 496px;
}

.team-card--lead .team-card__head {
	margin-top: 40px;
}

.team-card--lead .team-card__role {
	margin-top: 6px;
	font-size: var(--fs-intro);
}

.team-card--lead .team-card__bio {
	margin-top: 24px;
}

/* Tablets (not designed): the circle beside the name and role, the
   biography under both. */
@media (min-width: 768px) {
	.team-card--lead {
		grid-template-columns: 220px minmax(0, 1fr);
		grid-template-areas:
			"photo head"
			"bio bio";
		align-items: center;
		column-gap: 32px;
		padding: 40px;
	}

	.team-card--lead .team-card__photo {
		grid-area: photo;
	}

	.team-card--lead .team-card__head {
		grid-area: head;
		margin-top: 0;
	}

	.team-card--lead .team-card__bio {
		grid-area: bio;
		margin-top: 32px;
	}
}

/* Desktop: the circle left, centred down the card; the text right
   (the drawn 53 / 496 / 83 / 593 / 40 across the card at 1440). */
@media (min-width: 1024px) {
	.team-card--lead {
		grid-template-columns: minmax(0, 496fr) minmax(0, 600fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"photo head"
			"photo bio";
		align-items: start;
		column-gap: 80px;
		padding: 48px 40px 54px 53px;
	}

	.team-card--lead .team-card__photo {
		align-self: center;
	}

	.team-card--lead .team-card__role {
		margin-top: 8px;
	}

	.team-card--lead .team-card__bio {
		margin-top: 16px;
	}
}

/* ---------- Core team and associates ---------- */

/* Phones: the circle on the left, the text beside it (narrower circles
   on the narrowest phones, so long names keep their words whole). */
.team-card--core,
.team-card--associate {
	grid-template-columns: clamp(96px, 33vw, 133px) minmax(0, 1fr);
	align-items: center;
	column-gap: 24px;
	padding: 26px 16px 26px 12px;
}

@media (min-width: 768px) {
	.team-card--core,
	.team-card--associate {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		justify-items: center;
		padding: 28px 24px 24px;
		text-align: center;
	}

	.team-card--core .team-card__photo {
		width: min(287px, 100%);
	}

	.team-card--associate .team-card__photo {
		width: min(158px, 100%);
	}

	.team-card--core .team-card__head,
	.team-card--associate .team-card__head {
		margin-top: 16px;
	}

	.team-card--core .team-card__quals,
	.team-card--associate .team-card__quals {
		margin-top: 0;
	}

	.team-card {
		border-radius: var(--radius-lg);
	}

	.team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
	}

	.team-card--lead + .team-card--lead,
	.team-card--lead + .team-grid {
		margin-top: 24px;
	}

	.team-grid + .team-grid {
		margin-top: 64px;
	}
}

/* Four to a row: 16px sides keep "- Associate Instructor" on one line
   from 1280 (258px cards there). */
@media (min-width: 1280px) {
	.team-grid--associate {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.team-card--associate {
		padding-inline: 16px;
	}
}

/* ---------- A member without a photo ----------
   (None chosen yet, or the photo deleted: template-about.php adds
   .team-card--no-photo.) The text takes the whole card at every width,
   instead of sitting in the photo's column. After the tier rules above. */

.team-card--no-photo {
	grid-template-columns: minmax(0, 1fr);
}

.team-card--no-photo .team-card__head {
	margin-top: 0;
}

@media (min-width: 768px) {
	/* Stretched to its row's photo cards: the text in the middle. */
	.team-card--no-photo {
		align-content: center;
	}

	.team-card--lead.team-card--no-photo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"bio";
	}

	/* Lines of a readable length across the whole card. */
	.team-card--lead.team-card--no-photo .team-card__bio {
		max-width: 48rem;
	}
}

/* ---------- The "Why choose" band on this page ---------- */

/* This page's reasons are longer than the other pages' (two lines each,
   as drawn): the block keeps to about the heading's width (976px at
   1440), so it stays centred instead of filling the container. */
@media (min-width: 1024px) {
	.about-page .why-band__content {
		max-width: 62rem;
	}
}

/* Windows High Contrast drops the card fills: outline each card. */
@media (forced-colors: active) {
	.team-card {
		border: 1px solid var(--color-forced-line);
	}
}