/* ============================================================================
   WEST COAST ATHLETICS — about.css
   Page-level styles for the About page (page-about.php) ONLY.
   Conditionally enqueued via is_page('about'). No global rules here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SECTION 01 — About Hero (full-bleed, Christian's photo)
   --------------------------------------------------------------------------- */
.about-hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(27, 27, 27,0.78) 0%, rgba(27, 27, 27,0.9) 100%),
		radial-gradient(90% 90% at 50% 0%, rgba(242, 217, 82,0.20) 0%, transparent 55%),
		url(../Images/IMG_9560.PNG) top / cover no-repeat,
		var(--c-black);
	border-bottom: 1px solid var(--c-crimson-dim);
}
.about-hero__inner { max-width: 860px; margin-inline: auto; padding-block: var(--space-xl); text-align: center; }
.about-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--c-crimson); margin-bottom: var(--space-sm);
}
.about-hero__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--c-crimson); }
.about-hero h1 { font-size: clamp(40px, 6.5vw, 76px); line-height: 1; margin-bottom: var(--space-sm); }
.about-hero .subline { max-width: 620px; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   SECTION 02 — The WCA Story (narrative + milestone stats)
   --------------------------------------------------------------------------- */
.story__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}
.story__body p { color: var(--c-silver); }
.story__milestones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}
.milestone {
	background: var(--c-charcoal);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--space-md);
}
.milestone__num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	color: var(--c-crimson);
}
.milestone__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-silver-lt);
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   SECTION 03 — Owner Deep Dive (photo + profile)
   --------------------------------------------------------------------------- */
.owner { background: var(--c-charcoal); }
.owner__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--space-xl);
	align-items: center;
}
.owner__media { position: relative; }
/*.owner__media::before {
	content: '';
	position: absolute;
	inset: -16px 16px 16px -16px;
	border: 1px solid var(--c-crimson);
	border-radius: var(--radius);
	pointer-events: none;
}*/
.owner__media img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius);
	display: block;
}
.owner__title-badge {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-crimson);
	margin-bottom: var(--space-md);
	line-height: 1.8;
}
.owner__body p { color: var(--c-silver); }
.owner__credentials { margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------------
   SECTION 04 — Meet the Coaching Team (placeholder grid)
   --------------------------------------------------------------------------- */
.team__intro { max-width: 640px; }
.team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
}
.coach-card { display: flex; flex-direction: column; gap: var(--space-md); }
.coach-card .media-well { min-height: 240px; }
.coach-card__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius-sm);
	display: block;
}
.coach-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--c-white);
}

/* ---------------------------------------------------------------------------
   SECTION 05 — Community & Recognition (3 columns)
   --------------------------------------------------------------------------- */
.community__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	align-items: start;
}
/* Each column is a card with an even internal rhythm */
.community-col { display: flex; flex-direction: column; gap: var(--space-md); }
.community-col__media {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	object-position: 100% 19%;
	border-radius: var(--radius-sm);
	display: block;
}
.community-col .media-well.community-col__media { min-height: 0; } /* let aspect-ratio size it */
.community-col h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--c-white);
	margin: 0;
}
.community-col p { color: var(--c-silver); font-size: 15px; margin: 0; }

/* ---------------------------------------------------------------------------
   SECTION 06 — Train with Us CTA
   --------------------------------------------------------------------------- */
.about-cta {
	text-align: center;
	background:
		linear-gradient(180deg, rgba(242, 217, 82,0.10) 0%, rgba(27, 27, 27,0.95) 70%),
		var(--c-black);
	border-block: 1px solid var(--c-crimson-dim);
}
.about-cta__inner { max-width: 720px; margin-inline: auto; }
.about-cta h2 { margin-bottom: var(--space-md); }
.about-cta__body { margin: 0 auto var(--space-lg); max-width: 560px; }
.about-cta__buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.story__grid,
	.owner__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
	.owner__media { order: -1; max-width: 420px; }
	.team__grid,
	.community__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.team__grid,
	.community__grid,
	.story__milestones { grid-template-columns: 1fr; }
	.about-cta__buttons .btn { width: 100%; }
}