/* =============================================================
   Peak Body Coach · glp1.css
   GLP-1 Coaching page styles. Depends on main.css.
   ============================================================= */

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


/* =============================================================
   PILLARS — 3-col, extra body paragraph per pillar
   ============================================================= */
.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; }
.pillar .type-body + .type-body       { margin-top: var(--rhythm-paragraph); }


/* =============================================================
   APPROACH — 3fr 2fr split with editorial prose
   ============================================================= */
.approach-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	align-items: stretch;
}
@media (min-width: 768px) {
	.approach-grid { grid-template-columns: 3fr 2fr; gap: var(--space-10); }
}
.approach-img {
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	object-position: center 40%;
	filter: saturate(0.55) contrast(1.05) brightness(0.95);
}
@media (max-width: 768px) { .approach-img { display: none; } }

.editorial .type-body            { opacity: 0.82; }
.editorial .type-body + .type-body { margin-top: var(--space-6); }


/* =============================================================
   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); }


/* =============================================================
   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;
}