/* =============================================================
   Coach Profile Styles  —  Layer 4 of 4
   Named after the template it is bound to (page-templates/coach-profile.php),
   not the /coaches/ URL: the gate is is_page_template(), so a future
   /coaches/ index page would get its own file rather than share this one.
   Depends on: tokens.css, base.css, layout.css

   Scoping: file is only enqueued on pages using the Coach Profile
   template (is_page_template() gate in functions.php). Selectors do
   not rely on a body class — file scope is the guard.

   Everything reusable already comes from Layers 1–3: .container,
   .section, .card, .card-dark, .btn*, .btn-row, .eyebrow, .stack,
   .checklist, .testimonial. Only genuinely coach-specific composition
   lives here.

   Breakpoints — Tailwind standard (see tokens.css):
     Desktop @media (max-width: 1024px)  ← Tailwind lg
     Tablet  @media (max-width: 768px)   ← Tailwind md
     Mobile  @media (max-width: 640px)   ← Tailwind sm
   ============================================================= */


/* ─── Astra content-area overrides ──────────────────────────── */

/*
 * The template owns the full width inside <main>, and .ast-container is the
 * only wrapper that actually constrains it: Astra's per-page dynamic CSS caps
 * it at 1140px. That CSS is emitted inline in <head> when uncached, i.e. after
 * this file, so a plain .ast-container rule ties on specificity and loses —
 * hence the #content prefix. Our own content width is --max-w-screen-xl in
 * tokens.css, applied by .container; nothing here sets a width.
 *
 * Deliberately NOT repeating home.css's #primary / .site-main / .entry-content /
 * .ast-article-post reset or its .entry-header / breadcrumb hiding: none of
 * those elements exist on Astra's plain-container + no-sidebar layout (verified
 * on both pages), so the rules would be dead weight. Astra's boxed and
 * with-sidebar layouts do add those wrappers — if a coach page is ever switched
 * to one, this is the block that will need extending.
 */
#content .ast-container {
	max-width: none;
	padding-inline: 0;
}


/* ─── Breadcrumb + share row ────────────────────────────────── */

/*
 * Astra's breadcrumb trail and the share icons, on one line below the pull
 * quote. The plugin's own #pmax-header row is unhooked on this template (see
 * the template comment), so nothing here has to fight its layout; both pieces
 * bring their own styling and this only places them.
 *
 * The row also hands the section below it the top spacing that section would
 * otherwise own, so breadcrumb → heading reads as one unit.
 */
.coach-meta {
	padding-top: var(--space-12);
}

.coach-meta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/*
 * Both children need an explicit role. Astra's breadcrumb wrapper is a plain
 * block, so as a flex item with width:auto it takes the container's full width
 * (measured: 1184px of 1184) and pushes the icons onto a second line — the wrap
 * has nothing to do with the viewport, it happens at every size. Let the trail
 * take the leftover space instead, with min-width:0 so a long trail wraps its
 * own text rather than overflowing, and keep the icons at intrinsic width.
 */
.coach-meta-inner > .ast-breadcrumbs-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/* flow-root: Sassy floats its icons, and a BFC gives the wrapper its height
 * back — the plugin gets that for free from the table cell it uses. */
.coach-meta-share {
	flex: 0 0 auto;
	display: flow-root;
}

/* #coach-profile prefix: the section-rhythm rule below is id-scoped, so a plain
 * sibling selector would lose to it. */
#coach-profile .coach-meta + .section {
	padding-top: var(--space-8);
}


/* ─── Section rhythm ────────────────────────────────────────── */

/*
 * Slightly tighter than the sitewide .section default: this page stacks seven
 * bands, and two consecutive light ones read as one large void at 80px each.
 * Scoped to the template's <main> — never restyle the bare primitive.
 */
#coach-profile .section {
	padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

/* Zebra striping between sections comes from .section-alt (layout.css). */

/* Standfirst under a section h2 */
.coach-section-sub {
	max-width: var(--max-w-prose);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-8) !important;
	/* Astra's .entry-content p (0,1,1) beats a class-only rule */
}


/* ─── Hero ──────────────────────────────────────────────────── */

/* Gradient runs full-bleed; .container constrains the content */
.coach-hero {
	background: var(--gradient-downward);
	color: var(--color-text-extra-light);
	padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}

/* Portrait column is fixed; text takes the rest.
 * When the photo is missing (empty() guard in the template), the text child
 * is alone — :only-child collapses to a single centred column so the hero
 * doesn't render a 280px phantom gutter on the left. */
.coach-hero-inner {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(var(--space-8), 5vw, var(--space-16));
	align-items: center;
}

.coach-hero-inner > :only-child {
	grid-column: 1 / -1;
}

.coach-hero-photo img {
	width: 280px;
	height: 280px;
	border-radius: 50%;
	object-fit: cover;
	border: 6px solid var(--color-border-light);
}

.coach-hero-title {
	color: inherit;
	margin: 0 0 var(--space-2);
}

.coach-hero-tagline {
	font-size: var(--text-base);
	line-height: var(--lineheight-text-lg);
	max-width: var(--max-w-prose);
	margin: 0 0 var(--space-12) !important;
	/* Same breathing room home.css gives .hero-desc before its button row */
}

/* Proof points — gold dot markers, wrapping inline row.
 * Sits between the name and the tagline, so the bottom margin is one step
 * tighter than the tagline's own gap before the buttons. */
.coach-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	list-style: none;
	margin: var(--space-5) 0 var(--space-5);
	padding: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-heading);
}

.coach-facts li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

/* Hide Astra's list markers, then draw our own dot */
.coach-facts li::before {
	content: "" !important;
	display: inline-block !important;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
}

/* Buttons align left here rather than .btn-row's centered default */
.coach-hero-actions {
	justify-content: flex-start;
}


/* ─── Pull quote band ───────────────────────────────────────── */

/* Teal band with light-teal text — the same pairing as the site footer, so the
 * quote reads as part of the furniture rather than a gold surface (gold is an
 * accent here, never a background). */
.coach-quote {
	background: var(--color-primary);
	color: var(--color-text-light);
	padding-block: var(--space-8);
	text-align: center;
}

/* Beats Astra's element-level blockquote border / padding / margin.
 * color: inherit is load-bearing — Astra's per-page dynamic CSS sets
 * `blockquote { color: #000 }`, which overrides inheritance from the band and
 * would leave near-black text on the teal. A class selector wins on specificity. */
.coach-quote-text {
	max-width: var(--max-w-4xl);
	margin: 0 auto;
	padding: 0;
	border: 0;
	color: inherit;
	quotes: "“" "”" "‘" "’";
}

.coach-quote-text p {
	font-size: var(--text-lg);
	line-height: var(--lineheight-text-lg);
	font-style: italic;
	margin: 0 !important;
}

.coach-quote-text p::before {
	content: open-quote;
}

.coach-quote-text p::after {
	content: close-quote;
}


/* ─── About + credentials ───────────────────────────────────── */

/* Body copy gets the wider column; the credentials card sits beside it.
 * Either child may be absent (both are empty()-guarded); :only-child lets
 * the remaining one span the full width instead of floating in one track. */
.coach-about {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(var(--space-8), 5vw, var(--space-16));
	align-items: start;
}

.coach-about > :only-child {
	grid-column: 1 / -1;
}

/* Astra's .entry-content p margin does not reach this layout (plain container
 * has no .entry-content wrapper), so heading and paragraph rhythm are set
 * explicitly — without this the h2 sits almost on top of the first line. */
.coach-about-text h2 {
	margin-bottom: var(--space-5);
}

.coach-about-text p {
	margin: 0 0 var(--space-5);
}

.coach-about-text p:last-child {
	margin-bottom: 0;
}

.coach-credentials {
	--card-padding: var(--space-8);
	/* Tighter than the global card default — token-override pattern */
}

.coach-credentials .eyebrow {
	color: var(--color-primary) !important;
	/* .eyebrow forces color: inherit; this card wants the primary tint */
}


/* ─── Offer cards ───────────────────────────────────────────── */

/*
 * One column per offer. auto-fit drops to 2 then 1 column as space runs out,
 * so a fourth offer needs no code change.
 * Full container width rather than --max-w-4xl: at 896px three cards squeeze to
 * ~280px each, which wraps both the titles and the CTA labels.
 */
.coach-offers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-6);
}

/* Column layout so the CTA can sit flush at the bottom of every card,
 * keeping buttons on one line when descriptions differ in length. */
.coach-offer {
	display: flex;
	flex-direction: column;
	text-align: center;
	--card-padding: clamp(var(--space-6), 4vw, var(--space-8));
}

.coach-offer-price {
	font-size: var(--title-section);
	font-weight: var(--weight-title);
	letter-spacing: var(--ls-title);
	color: var(--color-primary);
	margin: var(--space-2) 0 var(--space-4) !important;
}

/* Per-unit suffix reads as secondary next to the number */
.coach-offer-price span {
	font-size: var(--text-base);
	font-weight: var(--weight-heading);
	color: var(--color-text-muted);
}

.coach-offer-desc {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-6) !important;
}

.coach-offer .btn {
	margin-top: auto;
	align-self: center;
}


/* ─── Resource cards ────────────────────────────────────────── */

/* Same auto-fit pattern as the offers row: 3 up on desktop, 1 on mobile,
 * and a fourth resource needs no code change. */
.coach-resources {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-6);
}

/* Column layout so the CTA sits flush at the bottom of every card */
.coach-resource {
	display: flex;
	flex-direction: column;
	--card-padding: clamp(var(--space-6), 4vw, var(--space-8));
}

.coach-resource-icon {
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.coach-resource-icon svg {
	width: 2rem;
	height: 2rem;
}

.coach-resource-desc {
	color: var(--color-text-muted);
	margin: var(--space-2) 0 var(--space-6) !important;
}

.coach-resource .btn {
	margin-top: auto;
	align-self: flex-start;
}


/* ─── Tablet: stack the two-column sections ─────────────────── */

/*
 * Card rows go straight from three columns to one at the tablet breakpoint.
 * A 200px track minimum keeps all three fitting down to 769px; letting
 * auto-fit find two columns instead would leave a half-width orphan on row two.
 * TODO(chore): three card grids now share this shape (offers, resources,
 * .testimonial-grid); fold them into one primitive when home.css's .grid-3 is
 * promoted to layout.css.
 */
@media (max-width: 768px) {

	.coach-offers,
	.coach-resources {
		grid-template-columns: 1fr;
	}

	/* Portrait centers above the text */
	.coach-hero-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.coach-facts,
	.coach-hero-actions {
		justify-content: center;
	}

	.coach-hero-tagline {
		margin-inline: auto !important;
	}

	.coach-about {
		grid-template-columns: 1fr;
	}
}


/* ─── Mobile: shrink the portrait ───────────────────────────── */

@media (max-width: 640px) {
	.coach-hero-photo img {
		width: 200px;
		height: 200px;
	}
}