/* =============================================================
   Peak Body Coach · deptford.css
   Deptford / SE London local page styles. Depends on main.css.
   ============================================================= */

/* Hero photo overrides */
.hero-img {
	object-position: 50% 40%;
	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-text .type-body + .type-body { margin-top: var(--rhythm-paragraph); }
.overview-img {
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
	object-position: center 30%;
	filter: var(--photo-tier-3);
}
@media (max-width: 768px) { .overview-img { display: none; } }


/* =============================================================
   DETAIL LIST — transit / parking / space items
   ============================================================= */
.detail-list {
	margin-top: var(--space-9);
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}
.detail-item {
	border-top: var(--mark-rule-top) solid rgba(23, 23, 23, 0.2);
	padding-top: var(--space-6);
}
.detail-item .type-mono-label { color: var(--color-red); }
.detail-item .type-body        { margin-top: var(--space-3); opacity: 0.82; max-width: 640px; }


/* =============================================================
   ADDRESS BLOCK
   ============================================================= */
.address-block {
	margin-top: var(--space-9);
	padding: var(--space-7);
	background: rgba(23, 23, 23, 0.04);
	max-width: 400px;
}
.address-block .type-mono-label { color: var(--color-red); margin-bottom: var(--space-4); display: block; }
.address-block address {
	font-family: var(--font-body);
	font-style: normal;
	font-size: 16px;
	line-height: 1.65;
	opacity: 0.72;
}


/* =============================================================
   PILLARS — 3-col on page 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); }


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