/* =============================================================
   Peak Body Coach · home.css
   Homepage-specific styles. Ported from pbc-homepage-v5.html.
   Depends on tokens-colours.css, tokens-type.css,
   tokens-spacing.css, and main.css.
   ============================================================= */

/* ---------- Type variant: web-hero ---------- */
/* Smaller than the social/canvas .type-hero (140–380px).
   Used only for the homepage headline lockup. */
.type-web-hero {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: clamp(64px, 10vw, 160px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}


/* =============================================================
   HERO
   ============================================================= */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 95vh;
	display: flex;
	align-items: flex-end;
}
.hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(23, 23, 23, 0.00)  0%,
		rgba(23, 23, 23, 0.20) 35%,
		rgba(23, 23, 23, 0.82) 100%
	);
}
.hero-content {
	position: relative;
	z-index: 2;
	padding-top: var(--space-13);
	padding-bottom: var(--space-13);
}
.hero-content .type-mono-label { color: rgba(236, 230, 215, 0.85); }
.hero-content .type-web-hero {
	color: var(--color-cream);
	margin-top: var(--rhythm-eyebrow-h1);
	max-width: 65%;
}
.hero-content .type-subhead {
	color: rgba(236, 230, 215, 0.85);
	margin-top: var(--rhythm-h1-subhead);
	max-width: 520px;
}
.hero-content .btn { margin-top: var(--rhythm-subhead-body); }

@media (max-width: 768px) {
	.hero { min-height: 80vh; }
	.hero-content { padding-bottom: var(--space-11); }
	.hero-content .type-web-hero { max-width: 90%; }
	.hero-content .type-subhead { font-size: 18px; }
}


/* =============================================================
   TRUST LOGOS
   ============================================================= */
.trust {
	background: var(--color-ink);
	border-top: 1px solid rgba(236, 230, 215, 0.08);
	padding: var(--space-7) 0;
}
.trust-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	flex-wrap: wrap;
}
.trust-inner img {
	height: 52px;
	width: auto;
	opacity: 0.92;
	flex-shrink: 0;
}
@media (max-width: 640px) {
	.trust-inner { gap: var(--space-8); justify-content: space-between; }
	.trust-inner img { height: 42px; }
}


/* =============================================================
   PROBLEM / SOLUTION
   ============================================================= */
.ps-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}
@media (min-width: 768px) {
	.ps-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.ps-block .type-mono-label { color: var(--color-red); }
.ps-block .type-h2         { margin-top: var(--rhythm-eyebrow-h1); }
.ps-block .type-body       { margin-top: var(--space-6); opacity: 0.82; }
.ps-block .type-body + .type-body { margin-top: var(--rhythm-paragraph); }


/* =============================================================
   COACHING SPLIT
   ============================================================= */
.coach-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
}
@media (min-width: 768px) {
	.coach-grid { grid-template-columns: 1fr 1fr; }
}
.coach-img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	filter: var(--photo-tier-3);
}


/* =============================================================
   SERVICE CARDS
   ============================================================= */
.svc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
@media (min-width: 768px) {
	.svc-grid { grid-template-columns: 1fr 1fr; }
}
.svc {
	border-top: var(--mark-rule-top) solid var(--color-ink);
	padding-top: var(--space-7);
}
.svc .type-mono-label { color: var(--color-red); }
.svc .type-h3         { margin-top: var(--rhythm-eyebrow-h1); }
.svc .type-body       { margin-top: var(--space-5); opacity: 0.82; }
.svc .tl              { display: inline-block; margin-top: var(--space-5); }


/* =============================================================
   ARTICLES
   ============================================================= */
.art-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-8);
}
.art-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
@media (min-width: 640px) {
	.art-grid { grid-template-columns: repeat(3, 1fr); }
}
.art-card { display: block; text-decoration: none; color: inherit; }
.art-card a { display: block; text-decoration: none; color: inherit; }
.art-card-img-wrap {
	width: 100%;
}
.art-card-img {
	width: 100%;
	height: auto;
	display: block;
}
.art-card-title {
	font-family: var(--font-body);
	font-weight: var(--weight-bold);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.3;
	margin-top: var(--space-4);
}
.art-card .type-mono-label {
	margin-top: var(--space-3);
	color: rgba(23, 23, 23, 0.45);
	font-size: 10px;
}
.art-card .type-mono-label .sep { margin: 0 8px; opacity: 0.5; }
.art-card a:hover .art-card-title { text-decoration: underline; }


/* =============================================================
   TESTIMONIALS
   ============================================================= */
.test-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}
@media (min-width: 768px) {
	.test-grid { grid-template-columns: repeat(3, 1fr); }
}
.test {
	border-left: var(--mark-rule-side) solid var(--color-red);
	padding-left: var(--space-7);
}
.test-q {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1.5;
}
.test-a {
	margin-top: var(--space-4);
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(23, 23, 23, 0.55);
}


/* =============================================================
   CTA — gym photo background
   ============================================================= */
.cta {
	position: relative;
	overflow: hidden;
	padding: var(--space-13) 0;
}
.cta-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(0.15) contrast(1.1) brightness(0.7);
}
.cta-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(23, 23, 23, 0.92)  0%,
		rgba(23, 23, 23, 0.78) 40%,
		rgba(23, 23, 23, 0.45) 100%
	);
}
.cta .container-content { position: relative; z-index: 2; }
.cta .type-mono-label   { color: rgba(236, 230, 215, 0.85); }
.cta .type-h1 {
	color: var(--color-cream);
	margin-top: var(--rhythm-eyebrow-h1);
}
.cta .type-body {
	color: rgba(236, 230, 215, 0.78);
	margin-top: var(--rhythm-h1-subhead);
	max-width: 600px;
}
.cta .btn    { margin-top: var(--rhythm-subhead-body); }
.cta-sec {
	margin-top: var(--space-4);
	font-size: 14px;
	color: rgba(236, 230, 215, 0.45);
}
.cta-sec a {
	color: rgba(236, 230, 215, 0.65);
	text-decoration: underline;
	text-underline-offset: 2px;
}
@media (max-width: 640px) {
	.cta { padding: var(--space-11) 0; }
}