/* =============================================================
   Peak Body Coach · coaching.css
   1:1 Coaching page styles. Depends on main.css.
   ============================================================= */

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


/* =============================================================
   OVERVIEW — 3fr 2fr split, image stretches to text height
   ============================================================= */
.overview-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	align-items: stretch;
}
@media (min-width: 768px) {
	.overview-grid { grid-template-columns: 3fr 2fr; gap: var(--space-10); }
}
.overview-text .type-body { opacity: 0.82; max-width: 640px; }
.overview-img {
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	object-position: center 20%;
	filter: var(--photo-tier-3);
}
@media (max-width: 768px) { .overview-img { display: none; } }


/* =============================================================
   FEATURE LIST
   ============================================================= */
.feature-list {
	list-style: none;
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.feature-list li {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.55;
	opacity: 0.85;
}
.feature-list li::before {
	content: "—";
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--color-red);
	flex-shrink: 0;
	margin-top: 6px;
}


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


/* =============================================================
   BIO — split grid with portrait
   ============================================================= */
.bio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	align-items: center;
}
@media (min-width: 768px) {
	.bio-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
.bio-img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 15%;
}
.bio-text .type-body                 { margin-top: var(--space-6); opacity: 0.82; max-width: 540px; }
.bio-text .type-body + .type-body    { margin-top: var(--rhythm-paragraph); }
.bio-text .tl                        { display: inline-block; margin-top: var(--space-6); }


/* =============================================================
   WHO IT'S FOR — 2-col fit/unfit
   ============================================================= */
.fit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}
@media (min-width: 768px) {
	.fit-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.fit-block {
	border-top: var(--mark-rule-top) solid var(--color-ink);
	padding-top: var(--space-7);
}
.fit-block .pill               { display: block; margin-bottom: var(--space-6); }
.fit-block .type-body          { opacity: 0.82; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.6; }
.fit-block .type-body + .type-body { margin-top: var(--space-5); }


/* =============================================================
   PRICING TABLE — on slate surface
   ============================================================= */
.pricing-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-9);
}
.pricing-table th {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: var(--weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(236, 230, 215, 0.45);
	text-align: left;
	padding: 0 0 var(--space-6);
	border-bottom: 1px solid rgba(236, 230, 215, 0.15);
}
.pricing-table th:last-child { text-align: right; }
.pricing-table td {
	padding: var(--space-7) 0;
	border-bottom: 1px solid rgba(236, 230, 215, 0.08);
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: clamp(18px, 1.4vw, 22px);
	color: rgba(236, 230, 215, 0.82);
	vertical-align: middle;
}
.pricing-table td:last-child {
	text-align: right;
	font-weight: var(--weight-extrabold);
	font-size: clamp(22px, 2vw, 30px);
	color: var(--color-cream);
	letter-spacing: -0.01em;
}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-note {
	margin-top: var(--space-7);
	font-family: var(--font-body);
	font-size: 16px;
	color: rgba(236, 230, 215, 0.45);
	line-height: 1.65;
	max-width: 560px;
}