/* =============================================================
   Peak Body Coach · about.css
   About page styles. Depends on main.css.
   ============================================================= */

/* Hero photo overrides */
.hero-img {
	object-position: 50% 65%;
	filter: brightness(0.85) saturate(0.9);
}
.hero-content .type-h1 { font-size: clamp(56px, 7vw, 120px); }


/* =============================================================
   EXPERIENCE — split grid
   ============================================================= */
.exp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	align-items: start;
}
@media (min-width: 768px) {
	.exp-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
.exp-img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 25%;
	filter: var(--photo-tier-3);
}
@media (max-width: 768px) { .exp-img { max-height: 480px; } }
.exp-text .type-body                { opacity: 0.82; max-width: 540px; }
.exp-text .type-body + .type-body   { margin-top: var(--rhythm-paragraph); }


/* =============================================================
   PRINCIPLES — 2x2 grid on cream surface
   ============================================================= */
.principles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
}
@media (min-width: 768px) {
	.principles-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-10); }
}
.principle {
	border-top: var(--mark-rule-top) solid rgba(23, 23, 23, 0.2);
	padding-top: var(--space-7);
}
.principle .type-mono-label { color: var(--color-red); }
.principle .type-h3         { margin-top: var(--rhythm-eyebrow-h1); margin-bottom: var(--space-5); }
.principle .type-body       { opacity: 0.82; }


/* =============================================================
   QUALIFICATIONS — 2x2 grid on slate surface
   ============================================================= */
.quals-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
}
@media (min-width: 768px) {
	.quals-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
}
.qual-group .type-mono-label {
	color: var(--color-teal);
	margin-bottom: var(--space-5);
}
.qual-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.qual-list li {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.5;
	color: rgba(236, 230, 215, 0.75);
}
.notable-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.notable-list li {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.55;
	color: rgba(236, 230, 215, 0.75);
}
.notable-list li strong {
	font-weight: var(--weight-medium);
	color: var(--color-cream);
}