/**
 * Pattern: News Article single  (templates/single-post.html + patterns/news-more.php)
 *
 * Styles the post type single template (news articles):
 *   1. kd-news-article__body  — constrained reading column (~1000px) below the hero.
 *   2. kd-news-article__eyebrow — category label above the H1 in the hero.
 *   3. kd-news-more            — "More News" section: centered heading + 3-up card
 *      grid reusing the existing kd-news-grid overrides (news-page.css) so card
 *      appearance (1px border, purple title, flush image, read-more link) is consistent
 *      with the listing page. No card CSS is duplicated here.
 *
 * Figma source: node 23:7799 (News Article Template, 1440×2428).
 *
 * Measurements (1440px frame, content column 1216px at x=112):
 *   Hero:         full-width gradient cover, y=135, h=329px.
 *   Breadcrumb:   y≈200, white text, home icon + "News" + title.
 *   Eyebrow:      node 23:7803, x=110 y=275 — date/category 14px Bold purple uppercase.
 *                 (In the Figma this reads "APRIL 4, 2026" — treated as the date eyebrow
 *                 that already exists in the hero via wp:post-date. No separate category
 *                 label block is needed; the date is the eyebrow here. However, category
 *                 is displayed as eyebrow above the date/title in the hero for
 *                 full editorial context — see hero construction in single-post.html.)
 *   Title:        node 23:7804, 56px Bold white, y=318, up to 957px wide.
 *   Body:         node 23:7815, x=116, w=1006px, 18px body text, top=508px.
 *                 Reading measure: ~1006px (NOT the full 1216px content column).
 *   More News:    heading node 23:7816, centered, 36px Bold purple, y=1254.
 *                 Cards: 3-up, 392×567, 20px gaps, same card anatomy as news listing.
 *                 Section: white background (no purple band).
 *
 * Card gap derivation (Figma 23:7906/7907/7908):
 *   x=112, x=524, x=936 → gap = 524-112-392 = 20px. Cards cap at 24.5rem (392px) per
 *   card-grid.css — gap 20px rounded to --blg-space-sm (16px) is close enough; using
 *   --blg-space-md (24px) keeps consistency with the news listing. The trio is centered.
 *
 * Reading column:
 *   Figma body text is 1006px wide in the 1440px frame. The content column is
 *   1216px (constrained). So reading column = 1006/1216 ≈ 82.7% of content column,
 *   or simply capped at 1000px and left-aligned (Figma is left-aligned, x=116).
 *   We cap at 66ch (~1000px at 18px body) for comfortable reading measure, which
 *   is also the standard prose recommendation.
 *
 * Responsive (derived from desktop + mobile-spec.md rules):
 *   ≥1200px desktop:   reading column capped at 66ch / max 1000px, padding 5rem above/below.
 *   ≤1023.98px tablet: column full width with side padding from theme constrained layout.
 *   ≤767.98px mobile:  column full width; "More News" grid 2-col → card-grid.css handles 1-col.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO OVERRIDES — category eyebrow + date eyebrow + title sizing
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * The post single hero reuses the same kd-hero-interior cover as CPT singles
 * (single.html). For news articles we add:
 *   a) A category eyebrow (wp:post-terms) above the date in the hero.
 *   b) A date eyebrow (wp:post-date) below the category, above the title.
 *   c) The H1 title at 56px bold (Figma: 56px/66px lh white).
 *
 * These are inside the .kd-single__hero cover block; scoped to .single-post
 * (the body class WP adds for post type "post" singles) to avoid bleeding into
 * CPT singles that share single.html.
 */

/* Date in the hero — white, 14px Bold, uppercase (Figma 23:7803). The category
   eyebrow was removed (News is in the breadcrumb), so the date is the first item
   under the breadcrumb — give it a top margin so it isn't cramped against it. */
.kd-news-article__date.wp-block-post-date {
	font-family: var(--blg-font-body);
	font-size: 0.875rem !important; /* 14px */
	font-weight: 700 !important;
	line-height: 1.4;
	color: var(--blg-color-base) !important;
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin: var(--blg-space-md) 0 var(--blg-space-xs); /* 24px ↑ breadcrumb · 8px → title */
	text-decoration: none;
}

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

/*
 * Wraps the wp:post-content block. The theme uses a constrained layout for the
 * post-content inner group, but we need a tighter reading measure than the full
 * 1216px content column. Figma shows ~1006px body text in a 1216px column.
 *
 * We use max-width on the wrapper and left-align to match the Figma (x=116 is
 * the left edge of the content column — the body is NOT centered; it's left-flush
 * within the column). On wide viewports the constrained layout adds side margins,
 * so the body column is naturally left-aligned.
 */
.kd-news-article__body {
	padding-block: 3.5rem 5rem; /* 56px top, 80px bottom */
}

/*
 * Wide-screen alignment (systemic finding #1). The interior hero centres its
 * title on the 1512 band (--blg-content-max), but the body and "More News"
 * (__more) anchor to the root gutter (has-global-padding → 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;
 * the inner column stays flush-left via its existing margin-inline. Mirrors the
 * event + story single fix; media queries here only touch padding-block.
 */
.kd-single--post .kd-news-article__body,
.kd-single--post .kd-news-more {
	padding-inline: var(--blg-edge-pad);
}

.kd-news-article__body .wp-block-post-content {
	/* Figma 23:7815: body column ~1006px wide, LEFT-flush to the content edge
	   (x=116) — same left edge as the hero title, not a centred measure. FSE's
	   constrained layout forces margin-inline:auto on the post-content (higher
	   effective precedence than a plain longhand here), so !important is needed
	   to pin it left — consistent with this theme's scoped layout overrides. */
	max-width: var(--blg-measure-reading); /* reading column */
	margin-inline: 0 auto !important; /* left-flush; right side fills to the column edge */
}

/*
 * Prose column — uniform width, left-flush (afternoon-r1). The container above
 * was already pinned left, but its CHILDREN were not: the template asked for
 * `contentSize:"66ch"`, `ch` resolves against each element's own font-size, so
 * the 18px paragraphs computed 749px and the 16px list 666px, and WP's
 * constrained layout then centred each of those different widths inside the
 * 1000px column — a left edge that stair-stepped x=235 / 277 down the article.
 * Same defect and same fix as single-kd-event.css; the template now passes a
 * font-independent 42rem. (Found while fixing the event single — the two
 * templates share the bug.)
 */
.kd-news-article__body .wp-block-post-content > * {
	margin-inline: 0 auto !important;
}

/* Post body typography — 18px body text (Figma 23:7815: 18px/#8d8ba7 but we use
   brand body ink for readability in the real build; the Figma shows body-muted
   which is the wireframe's placeholder style — actual content will use body color) */
.kd-news-article__body .wp-block-post-content p,
.kd-news-article__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-news-article__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-news-article__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. MORE NEWS SECTION
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * White-background section below the article body. Reuses kd-news-grid card
 * overrides (from news-page.css) — same 1px border, purple title, flush image.
 * The section heading and spacing are the only new rules here.
 */
.kd-news-more {
	background: var(--blg-color-base);
	padding-block: var(--blg-space-xl) var(--blg-space-xxl); /* 64px top, 96px bottom */
}

/* Section heading — "Other articles that might interest you"
   Figma 23:7816: centered, 36px Bold, purple (#5d5a88), 743px wide, y=1254. */
.kd-news-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-news-more .kd-card-grid-query.wp-block-query {
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3b. MORE NEWS CARD OVERRIDES
   Applied via .kd-news-grid (shared with news-page.css) + kds-news-more-query scoping.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * "Read More" underlined purple link (Figma 23:7924-7926).
 * Sits inside the card body below the excerpt. The title ::after overlay (z-index 1)
 * covers the whole card — the Read More link needs z-index 2 so it is separately
 * clickable/focusable, giving a visible, labelled tap target on touch devices.
 */
.kd-news-more .kd-news-more__read-more.wp-block-read-more {
	position: relative;
	z-index: 2; /* above the title ::after overlay (z-index 1) */
	display: inline-block;
	margin-top: var(--blg-space-sm); /* 16px — excerpt → link */
	color: var(--blg-color-primary) !important;
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg); /* 18px — Figma 23:7924 */
	font-weight: 700;
	line-height: 1.65;
	text-decoration: underline !important;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
}

.kd-news-more .kd-news-more__read-more.wp-block-read-more:hover,
.kd-news-more .kd-news-more__read-more.wp-block-read-more:focus-visible {
	color: var(--blg-color-secondary) !important;
}

.kd-news-more .kd-news-more__read-more.wp-block-read-more:focus-visible {
	outline: 2px solid var(--blg-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1023.98px) ──────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	.kd-news-article__body .wp-block-post-content {
		max-width: 100%; /* full width on tablet — side margins from constrained layout */
	}

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

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

/* ── Mobile (≤767.98px) ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.kd-news-article__body {
		padding-block: 2.5rem 3.5rem; /* 40px top, 56px bottom */
	}

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

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