/*
 * Pitru Theme v2 — pages/about.css
 *
 * Page-specific CSS for the About page (templates/page-about.php).
 * Five visual zones, ORG-verbatim from Pitrupaksha ORG/about.html
 * lines 34-126:
 *
 *   .pps-page-about-hero            (lines 34-44)   ← eyebrow + H1 + intro
 *   .pps-page-about-founders-photo  (lines 46-55)   ← placeholder + Lotus
 *   .pps-page-about-values          (lines 57-77)   ← 3-card grid
 *   .pps-page-about-team            (lines 79-112)  ← 8 pandit cards + CTA
 *   .pps-page-about-stats           (lines 114-126) ← dark band, 4 stats
 *
 * Wave: C.11 (single-agent build for the About page).
 *
 * Class-prefix discipline: every class begins with .pps-page-about-{section}
 * then __{element} then --{modifier}. Tokens-only; literal px from ORG.
 * Avatar gradient uses tokens (--gold-soft → --gold-deep) which match
 * ORG's literal #D9BE82/#8C6623 exactly.
 *
 * @package PitruThemeV2
 * @since   2.0.0
 */

/* ============================================================
 * HERO (ORG lines 34-44)
 * Section padding 60px 0 40px. Inner wrap capped at 960, centred.
 * Intro <p> has its own narrower 640 cap — two width caps, both
 * expressed here so neither escapes its scope.
 * ============================================================ */
.pps-page-about-hero {
	padding: 60px 0 40px;
}

.pps-page-about-hero__inner {
	max-width: 960px;
	text-align: center;
}

.pps-page-about-hero__title {
	font-size: clamp(56px, 6vw, 88px);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 14px 0 0;
}

.pps-page-about-hero__title em {
	font-style: italic;
	color: var(--gold-deep);
}

.pps-page-about-hero__intro {
	max-width: 640px;
	margin: 28px auto 0;
	font-size: 19px;
	color: var(--ink-soft);
	line-height: 1.6;
}

/* ============================================================
 * FOUNDERS PHOTO (ORG lines 46-55)
 * Section padding 40px 0 80px. Box height 440, --r-xl override
 * (default .placeholder is --r-md). Lotus motif gold-deep, label
 * mt 18.
 * ============================================================ */
.pps-page-about-founders-photo {
	padding: 40px 0 80px;
}

.pps-page-about-founders-photo__box {
	height: 440px;
	border-radius: var(--r-xl);
}

.pps-page-about-founders-photo__inner {
	text-align: center;
}

.pps-page-about-founders-photo__motif {
	color: var(--gold-deep);
}

.pps-page-about-founders-photo__label {
	margin-top: 18px;
}

/* ============================================================
 * VALUES (ORG lines 57-77)
 * Section padding 80px 0, --ivory-2 background, --line-2 borders
 * top + bottom. Centred header h2 (48px, -0.02em, mb 56). Then
 * 3-col grid gap 24 of .card panels.
 * ============================================================ */
.pps-page-about-values {
	padding: 80px 0;
	background: var(--ivory-2);
	border-top: 1px solid var(--line-2);
	border-bottom: 1px solid var(--line-2);
}

.pps-page-about-values__head {
	text-align: center;
	margin-bottom: 56px;
}

.pps-page-about-values__title {
	font-size: 48px;
	letter-spacing: -0.02em;
}

.pps-page-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pps-page-about-values__card {
	padding: 32px;
}

.pps-page-about-values__motif {
	color: var(--gold-deep);
}

.pps-page-about-values__card-title {
	font-size: 26px;
	letter-spacing: -0.01em;
	margin-top: 16px;
}

.pps-page-about-values__card-body {
	margin-top: 12px;
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.65;
}

/* ============================================================
 * TEAM (ORG lines 79-112)
 * Section padding 100px 0. Header row flex space-between flex-end
 * mb 48 (left = eyebrow + h2 48px lh 1.05; right = description
 * 14px ink-soft max 320 lh 1.6). Then 4-col grid gap 16 of cards.
 * Avatar gradient via tokens (matches ORG literal hex exactly).
 * Bottom CTA centred, mt 40.
 * ============================================================ */
.pps-page-about-team {
	padding: 100px 0;
}

.pps-page-about-team__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 48px;
	gap: 32px;
}

.pps-page-about-team__head-left {
	min-width: 0;
}

.pps-page-about-team__title {
	font-size: 48px;
	letter-spacing: -0.02em;
	margin-top: 8px;
	line-height: 1.05;
}

.pps-page-about-team__head-right {
	font-size: 14px;
	color: var(--ink-soft);
	max-width: 320px;
	line-height: 1.6;
}

.pps-page-about-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.pps-page-about-team__card {
	padding: 20px;
}

.pps-page-about-team__card-head {
	display: flex;
	gap: 12px;
	align-items: center;
}

.pps-page-about-team__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pps-page-about-team__id {
	min-width: 0;
}

.pps-page-about-team__name {
	font-size: 17px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.pps-page-about-team__city {
	font-size: 11px;
	color: var(--gold-deep);
	margin-top: 2px;
}

.pps-page-about-team__lineage {
	margin-top: 16px;
	font-size: 12px;
	color: var(--ink-soft);
	line-height: 1.55;
	font-style: italic;
}

.pps-page-about-team__meta {
	margin-top: 6px;
	font-size: 12px;
	color: var(--stone);
}

.pps-page-about-team__cta-wrap {
	text-align: center;
	margin-top: 40px;
}

.pps-page-about-team__cta {
	padding: 14px 24px;
}

/* ============================================================
 * STATS BAND (ORG lines 114-126)
 * Section padding 60px 0. Dark band: bg --ink, color --ivory.
 * 4-col grid gap 40. Value display-serif 64px gold-soft. Label
 * mono 11px uppercase 0.16em — colour kept literal rgba per ORG
 * (rgba of --ivory at 60% opacity, ORG used the literal value).
 * ============================================================ */
.pps-page-about-stats {
	padding: 60px 0;
	background: var(--ink);
	color: var(--ivory);
}

.pps-page-about-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.pps-page-about-stats__value {
	font-family: var(--font-display);
	font-size: 64px;
	letter-spacing: -0.03em;
	font-weight: 500;
	color: var(--gold-soft);
}

.pps-page-about-stats__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: rgba(246, 241, 230, 0.6);
	text-transform: uppercase;
	margin-top: 6px;
}

/* ============================================================
 * RESPONSIVE — tablet (≤1024) and mobile (≤720, ≤640)
 *
 * Class-based grids do NOT inherit the global inline-style
 * collapsers in tokens.css (those match [style*="grid-template-columns"]
 * only). Explicit rules required. Global h1/h2/h3 clamp + section
 * padding floor at ≤720 still applies via tokens.css — let it ride.
 * ============================================================ */

/* Tablet — 4-col → 2-col, stack team header */
@media (max-width: 1024px) {
	.pps-page-about-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pps-page-about-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.pps-page-about-team__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.pps-page-about-team__head-right {
		max-width: none;
	}
}

/* Mobile (tablet-portrait) — values 3→1; team 2→2 still ok */
@media (max-width: 900px) {
	.pps-page-about-values__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Mobile — everything single-col */
@media (max-width: 640px) {
	.pps-page-about-team__grid {
		grid-template-columns: 1fr;
	}

	.pps-page-about-stats__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.pps-page-about-founders-photo__box {
		height: 280px;
	}

	.pps-page-about-stats__value {
		font-size: 48px;
	}
}