/**
 * Pattern: Story single  (templates/single-blg_story.html + patterns/stories-more.php)
 *
 * Styles the blg_story CPT single template:
 *   1. kd-story-single__body  — constrained reading column (~1000px, left-flush).
 *   2. kd-story-single__eyebrow — month label above the H1 in the hero.
 *   3. kd-story-single__attribution — "Story by [name]" block below the post body.
 *   4. kd-stories-more        — "Past Stories" section: centered heading + 3-up story
 *      card grid reusing the existing .kd-story-card classes (story-card.css) so
 *      card appearance (purple border, image, month, title, "Read the story" link)
 *      is consistent with the listing page. No card CSS is duplicated here.
 *
 * Figma source: node 23:7081 ("Stories — Story", 1440×2428).
 *
 * Measurements (1440px frame, content column 1216px at x=112):
 *   Hero:         full-width purple band, y=135, h=329px.
 *   Breadcrumb:   y≈200 — 🏠 / Stories / title.
 *   Eyebrow:      node 23:7260, x=110, y=239 — "FEBRUARY" 14px Bold white uppercase.
 *   Title:        node 23:7261, x=110, y=267 — 56px Bold white, up to 957px.
 *   Body:         node 23:7272, x=116, w=1006px, 18px/28px body text, y=538.
 *                 Identical geometry to news-article body — same left-flush constraint.
 *   Attribution:  node 23:7271, "Story by Sharon F" — image thumbnail left + name right.
 *                 x=244, y=1169.66, 24px Bold purple.
 *   Past Stories: heading node 23:7273, centered, 36px Bold purple, y=1325.
 *                 Cards: 3-up, 392×413, gaps ~20px. Reuse .kd-story-card classes.
 *
 * Reading column (same derivation as news-article.css):
 *   Figma body text is 1006px wide in a 1216px content column (x=116). Left-flush.
 *   Capped at 62.5rem (~1000px). FSE constrained layout forces margin-inline:auto on
 *   post-content, so !important is required to pin it left — identical scoped override
 *   to news-article.css's reading column fix.
 *
 * Responsive (derived from desktop + mobile-spec.md):
 *   ≥1200px:      reading column ≤62.5rem, left-flush.
 *   ≤1023.98px:   reading column full-width; attribution stacks to 1-col.
 *   ≤767.98px:    attribution image shrinks; "Past Stories" grid handled by story-card.css.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO OVERRIDES — month eyebrow + title
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Month eyebrow — "FEBRUARY" — 14px Bold white uppercase, above the H1.
 * Figma node 23:7260: DM Sans Bold 14px/34px, white, uppercase, x=110, y=239.
 * Scoped to the story single template via .kd-single--story.
 */
.kd-story-single__eyebrow {
	font-family: var(--blg-font-body);
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	line-height: 1.4;
	color: var(--blg-color-base); /* white */
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin: var(--blg-space-md) 0 var(--blg-space-xs); /* 24px ↑ breadcrumb · 8px → title */
}

/* Hero pull-quote subtitle — white 18px body text below the H1 in the hero.
   Figma 23:7262: DM Sans Regular 18px/30px, white, x=110, y=346.5, w=574px.
   Injected by blg_story_single_hero_subtitle() in inc/stories.php. */
.kd-story-single__hero-subtitle {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg); /* 18px */
	font-weight: 400;
	line-height: 1.65;
	color: var(--blg-color-base); /* white */
	max-width: var(
		--blg-measure-intro
	); /* ~574px intro — Figma node 23:7262 width */
	margin: var(--blg-space-sm) 0 0; /* 16px top gap from H1 */
}

@media (max-width: 767.98px) {
	.kd-story-single__hero-subtitle {
		font-size: var(--blg-size-body); /* 16px on mobile */
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. STORY BODY — constrained reading column
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Wraps wp:post-content. Mirrors .kd-news-article__body exactly:
 * Figma x=116, w=1006px → cap at 62.5rem (~1000px), left-flush.
 * The !important on margin-inline is needed to override FSE constrained layout's
 * margin:auto — same scoped override used in news-article.css.
 */
.kd-story-single__body {
	padding-block: 3.5rem 3rem; /* 56px top, 48px bottom (less than news — attribution follows) */
}

/*
 * Wide-screen alignment (systemic finding #1). The interior hero centres its
 * title on the 1512 band (--blg-content-max), but the body, attribution (__meta)
 * and Past Stories (__stories-more) anchor to the root gutter (has-global-padding
 * / root-padding-inline → 144px max) — so on monitors wider than the band they
 * drift left of the hero + header logo (144 vs 517 @2560). --blg-edge-pad =
 * max(gutter, (100%−1512)/2): gutter on narrow screens, centred band on wide.
 * Scoped (0,2,0) beats has-global-padding and the __meta root-padding rule; the
 * inner columns stay flush-left via their existing margin-inline. Mirrors the
 * event single fix; media queries here only touch padding-block, so no conflict.
 */
.kd-single--story .kd-story-single__body,
.kd-single--story .kd-story-single__meta,
.kd-single--story .kd-stories-more {
	padding-inline: var(--blg-edge-pad);
}

.kd-story-single__body .wp-block-post-content {
	/* Figma 23:7272: body column 1006px, LEFT-flush (x=116 = same content edge as
	   the hero title x=110). Pin left with !important to beat FSE constrained layout. */
	max-width: var(--blg-measure-reading); /* reading column */
	margin-inline: 0 auto !important;
}

/* Post body typography — 18px/28px (Figma 23:7272) */
.kd-story-single__body .wp-block-post-content p,
.kd-story-single__body .wp-block-post-content li {
	font-size: var(--blg-size-body-lg); /* 18px / 1.15rem */
	line-height: 1.65;
	color: var(--blg-color-body);
}

.kd-story-single__body .wp-block-post-content h2 {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.5vw, 1.75rem); /* 22px → 28px */
	color: var(--blg-color-contrast);
	margin-block: var(--blg-space-lg) var(--blg-space-sm);
}

.kd-story-single__body .wp-block-post-content h3 {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px → 22px */
	color: var(--blg-color-contrast);
	margin-block: var(--blg-space-md) var(--blg-space-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ATTRIBUTION BLOCK — "Story by [name]"
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * The story-attribution pattern was retired 2026-08-20 (renamed to blg/quote); if single-blg_story is ever rebuilt, quote logic belongs in that template/pattern.
 * Figma 23:7263/7271: a small image thumbnail (left) + "Story by Sharon F" label (right).
 * Layout: horizontal flex row, constrained to the same reading column width (62.5rem).
 *
 * The pull-quote (if set) appears as a styled blockquote ABOVE the attribution line,
 * derived from the story's _blg_story_quote meta. It is NOT in the post body — it's
 * a separate PHP block that reads the meta at render time.
 */

/* Outer wrapper — mirrors the FSE constrained group's side padding so the reading
   column aligns with the hero title (x=110 at 1440px). The FSE constrained layout
   adds padding-inline via has-global-padding which uses --wp--style--root--padding-*
   (theme.json useRootPaddingAwareAlignments). We replicate it here since this block
   is rendered by a PHP pattern outside the FSE constrained group. */
.kd-story-single__meta {
	padding-block: 0 3.5rem; /* 0 top (follows body padding-bottom), 56px bottom */
	padding-inline: var(
			--wp--style--root--padding-left,
			clamp(1.25rem, 7.64vw, 9rem)
		)
		var(--wp--style--root--padding-right, clamp(1.25rem, 7.64vw, 9rem));
}

/* Inner — constrained to same reading column */
.kd-story-single__meta-inner {
	max-width: var(--blg-measure-reading); /* reading column */
	margin-inline: 0 auto; /* left-flush — no !important needed here (not post-content) */
}

/* Pull-quote — italic, 18px, slightly inset with a left border accent */
.kd-story-single__quote {
	margin: 0 0 var(--blg-space-lg); /* 40px → attribution */
	padding: var(--blg-space-md) 0 var(--blg-space-md) var(--blg-space-lg); /* left 40px inset */
	border-left: 4px solid var(--blg-color-primary); /* purple left accent */
}

.kd-story-single__quote p {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg); /* 18px */
	font-weight: 400;
	font-style: italic;
	line-height: 1.75;
	color: var(--blg-color-body);
	margin: 0 0 var(--blg-space-sm); /* 16px → attribution line */
}

.kd-story-single__quote cite {
	display: block;
	font-style: normal;
	font-size: var(--blg-size-body); /* 16px */
	font-weight: 600;
	color: var(--blg-color-primary); /* purple */
}

/* "Story by [name]" attribution row — Figma 23:7263+7271 */
.kd-story-single__byline {
	display: flex;
	align-items: center;
	gap: var(--blg-space-md); /* 24px between thumbnail + name */
	padding-top: var(--blg-space-sm); /* 16px border from body */
	border-top: 1px solid var(--blg-color-neutral-200);
}

/* Thumbnail placeholder (Figma: rounded square, ~108px, light purple-grey bg) */
.kd-story-single__byline-thumb {
	flex-shrink: 0;
	width: 4.5rem; /* 72px — scaled from Figma 108px */
	height: 4.5rem;
	border-radius: var(--blg-radius-md); /* 12px */
	background-color: var(--blg-color-neutral-100);
	overflow: hidden;
}

.kd-story-single__byline-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* "Story by [Name]" label — Figma: 24px Bold purple, DM Sans */
.kd-story-single__byline-name {
	font-family: var(--blg-font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.5rem); /* 18px → 24px */
	font-weight: 700;
	line-height: 1.4;
	color: var(--blg-color-primary); /* purple */
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. PAST STORIES SECTION
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * White-background section. Reuses .kd-story-grid + .kd-story-card classes
 * (from story-card.css) — no card CSS is duplicated here. Only the section
 * heading and wrapper spacing are new rules.
 *
 * Figma 23:7273: heading "Past Stories", centered, 36px Bold purple, y=1325.
 * Cards: 3-up, 392×413, same anatomy as the listing grid.
 */
.kd-stories-more {
	background: var(--blg-color-base); /* white */
	padding-block: var(--blg-space-xl) var(--blg-space-xxl); /* 64px top, 96px bottom */
}

/* Section heading — "Past Stories", centered, 36px Bold purple */
.kd-stories-more__heading {
	font-family: var(--blg-font-heading) !important;
	font-weight: 700 !important;
	font-size: clamp(1.5rem, 3vw, 2.25rem) !important; /* 24px → 36px */
	line-height: 1.28 !important; /* 46/36 */
	color: var(--blg-color-primary) !important;
	text-align: center !important;
	/* `auto` on the inline axis, NOT 0. A `margin: 0 0 X` shorthand also sets
	   margin-left/right:0, which with !important beats WP's constrained-layout
	   `margin-inline:auto` and pins a CENTRED element to the padding edge
	   instead of centring it in the content band. Invisible at <=1440, where
	   the band fills the available width and 0 and auto land in the same place
	   — it only shows on a viewport wider than the band. That is why an
	   earlier "Member Stories isn't centred" report was measured at
	   1440/1024/375 and closed as not-reproduced; at 1920 the eyebrow sat
	   197px left of centre. */
	margin: 0 auto var(--blg-space-xl) !important; /* 64px → grid */
	letter-spacing: 0.15px;
}

/* The query wrapper — reset default block margins */
.kd-stories-more .kd-card-grid-query.wp-block-query {
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1023.98px) ──────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	.kd-story-single__body .wp-block-post-content {
		max-width: 100%;
	}

	.kd-story-single__meta-inner {
		max-width: 100%;
	}

	.kd-stories-more {
		padding-block: var(--blg-space-xxl) var(--blg-space-xxl);
	}

	.kd-stories-more__heading {
		font-size: clamp(1.375rem, 3vw, 2rem) !important;
	}
}

/* ── Mobile (≤767.98px) ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.kd-story-single__body {
		padding-block: 2.5rem 2rem; /* 40px top, 32px bottom */
	}

	.kd-story-single__meta {
		padding-block: 0 2.5rem; /* 40px bottom */
	}

	.kd-story-single__quote {
		padding-left: var(--blg-space-md); /* 24px on mobile */
		margin-bottom: var(--blg-space-md); /* 24px */
	}

	.kd-story-single__byline {
		gap: var(--blg-space-sm); /* 16px */
	}

	.kd-story-single__byline-thumb {
		width: 3.5rem; /* 56px on mobile */
		height: 3.5rem;
	}

	.kd-stories-more {
		padding-block: var(--blg-space-xl) var(--blg-space-xl); /* 64px */
	}

	.kd-stories-more__heading {
		font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
		margin-bottom: var(--blg-space-lg) !important; /* 40px → grid */
	}
}