/* =============================================================
   Peak Body Coach · testimonials.css
   Testimonials 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); }


/* =============================================================
   TESTIMONIALS — page has 3-col grid (from main.css)
   plus a 2-col variant for the athletes section
   ============================================================= */
.test-grid--2col {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--space-8);
	row-gap: var(--space-11);
}
@media (min-width: 768px) {
	.test-grid--2col {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-10);
		row-gap: var(--space-11);
	}
}


/* =============================================================
   PULL QUOTES — large highlighted quote after each grid
   ============================================================= */
.pq {
	margin-top: var(--space-11);
	padding-top: var(--space-8);
	border-top: 1px solid rgba(23, 23, 23, 0.12);
}
.surface-cream .pq  { border-top-color: rgba(23, 23, 23, 0.10); }
.surface-slate .pq,
.surface-ink   .pq  { border-top-color: rgba(236, 230, 215, 0.15); }

.pq-text {
	font-family: var(--font-body);
	font-weight: var(--weight-extrabold);
	font-size: clamp(28px, 3.5vw, 48px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.pq-attr {
	display: block;
	margin-top: var(--space-5);
	font-family: var(--font-mono);
	font-weight: var(--weight-medium);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(23, 23, 23, 0.45);
}
.surface-slate .pq-attr,
.surface-ink   .pq-attr { color: rgba(236, 230, 215, 0.5); }


/* =============================================================
   CTA ACTIONS — two-button layout (unique to testimonials CTA)
   ============================================================= */
.cta-actions {
	margin-top: var(--rhythm-subhead-body);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	align-items: center;
}