/* =========================================================================
   About — template-about.php (Figma "Page Services", 40000668:148040 — the
   frame name is a leftover; the header's Services points elsewhere).

   Same conventions as main.css and pages.css: one banner-comment block per
   section, tokens and container measures from main.css's :root, BEM names.

   One new block, the team grid. The rest of the file is the small set of
   deltas the shared components need for their instances on this page.

   Enqueued after pages.css (inc/setup.php) so the .practice deltas win.

   ponytail: a separate file only because main.css and pages.css are being
   written concurrently by other agents; fold it in once those land.
   ========================================================================= */

:root {
	/* Figma's grey field behind a team member with no photo yet. */
	--c-team-empty: #ececec;
}

/* ---- Hero (Figma 40000668:148043) --------------------------------------- */
/* The shared hero component paints its accent phrase rose for Platform; this
   instance, like Services', uses accent blue. Same body-class override as
   pages.css:824 rather than a colour arg on the partial. */
.page-template-template-about .phero__title-accent { color: var(--c-accent); }

/* ---- What we believe (Figma 40000668:153017) ---------------------------- */
/* The home page's challenge component: ice band instead of cream, a centred
   head, roomier cards and no card icon. */
.challenge--believe { background: var(--c-ice); }

.challenge--believe .challenge__head {
	align-items: center;
	max-width: none;
	text-align: center;
}

.challenge--believe .challenge__title {
	max-width: 700px;
	margin-inline: auto;
}

.challenge--believe .challenge__lead {
	max-width: 768px;
	margin: 30px auto 0;
}

/* Figma's instance carries no icon, and the card is padded 52 rather than 32.
   display:none takes the icon out of the flex flow, so the 32px gap above the
   body goes with it. */
.challenge--believe .challenge__icon { display: none; }
.challenge--believe .challenge__card { padding: 52px; }

/* ---- The Team (Figma 40000668:153218) ----------------------------------- */
/* Figma sits this on a 1368px measure with 180px gutters — 8px wider than
   .container's 1360. Using .container keeps it aligned with every other
   section on the page instead. */
.team { padding-block: var(--s-120); background: var(--c-ice); }

.team__inner {
	display: flex;
	flex-direction: column;
	gap: 70px;
}

.team__intro { max-width: 1360px; }

.team__title {
	margin: 0;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);    /* 52px @1728 */
	line-height: 1.16;                                /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;                          /* -1.04px @52px */
	color: var(--c-ink);
}

/* Figma runs this at half the measure, beside an invisible second column. */
.team__lead {
	max-width: 680px;
	margin: 40px 0 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.6;                                 /* 32px @20px */
	font-weight: 500;
	color: var(--c-body);
}

.team__group {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.team__group-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.852vw, 2rem);         /* 32px @1728 */
	line-height: 1.24;                                /* 39.68px @32px */
	font-weight: 700;
	letter-spacing: -0.03em;                          /* -0.96px @32px */
	color: var(--c-ink);
}

.team__grid {
	display: grid;
	gap: var(--s-48);
}

.team__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards in a row stretch to the tallest, which is what puts every bio on the
   same baseline — the same job Figma does with a fixed card height. */
.team__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--c-white);
	border-radius: 20px;
}

.team__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.team__photo--empty { background: var(--c-team-empty); }

/* space-between is what pins the bio to the card's bottom edge. */
.team__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s-32);
	padding: var(--s-48);
}

.team__head { display: flex; flex-direction: column; gap: 10px; }

.team__name {
	margin: 0;
	font-size: clamp(1.375rem, 1.736vw, 1.875rem);   /* 30px @1728 */
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -0.03em;                          /* -0.9px @30px */
	color: var(--c-ink);
}

/* Figma sets the role and the bio in ink, not the body grey the rest of the
   page uses for supporting copy. */
.team__role,
.team__bio {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);       /* 18px @1728 */
	line-height: 1.6;
	font-weight: 400;
	color: var(--c-ink);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1300px) {
	.team__body { padding: var(--s-32); }
	.challenge--believe .challenge__card { padding: var(--s-32); }
}

@media (max-width: 1120px) {
	.team__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team__inner { gap: var(--s-48); }
}

@media (max-width: 900px) {
	.team { padding-block: var(--s-64); }
	.team__grid--2,
	.team__grid--3 { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
	.team__lead { margin-top: var(--s-24); }
	.team__group { gap: var(--s-24); }
}