/*!
 * Section: Key Facts
 *
 * Scoped CSS for inc/sections/key-facts.php. Stub partial — visual composition
 * lands during page-migration / lore-template WPs (RENDER-WP5–WP9).
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1
 */

.mw-section--key-facts {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.mw-section--key-facts .mw-section__inner {
	max-width: 56rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--key-facts .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.2;
	margin-block: 0 1rem;
}

/* Topic 36 CORR-WP1 Item 5 — additive `align="center"` centres the eyebrow +
 * headline, mirroring `.mw-section--body.mw-section--center` exactly. The
 * `<dl>`/CTA below stay left-aligned — only the heading block moves. */
.mw-section--key-facts.mw-section--center .mw-section__eyebrow,
.mw-section--key-facts.mw-section--center .mw-section__headline {
	text-align: center;
}

.mw-key-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.mw-key-facts__row {
	padding-block: 0.5rem;
	border-block-end: 1px solid var(--mw-color-rule, rgba(0, 0, 0, 0.08));
}

/* ⚠️ Above 32em the row is `display: contents`, which generates NO BOX — so the
 * padding and border declared on it above stop painting entirely. The
 * declarations still *compute* (`border-bottom-width` reads `1px` on the row at
 * any width), they simply have nothing to paint on, which is why no
 * computed-style check catches this. It only shows in a screenshot.
 *
 * Restated here on the dt/dd, the boxes that do exist once the row dissolves
 * into the parent grid.
 *
 * History: FIX-WP33 hit this on the K-World variant and fixed it scoped to that
 * brand, noting the base had the same gap. The FIX-WP9 sweep measured the rest —
 * the gilt rules the Topic 14 lore identity declares have never painted above
 * 32em on any of the ~169 lore entry routes — and folded the fix down here so
 * every caller gets it and the variants only override the colour. */
@media (min-width: 32em) {
	.mw-key-facts {
		grid-template-columns: max-content 1fr;
	}

	.mw-key-facts__row {
		display: contents;
	}

	.mw-key-facts__label,
	.mw-key-facts__value {
		padding-block: 0.5rem;
		border-block-end: 1px solid var(--mw-color-rule, rgba(0, 0, 0, 0.08));
	}
}

.mw-key-facts__label {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.8;
	margin: 0;
}

.mw-key-facts__value {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

/* -----------------------------------------------------------------------
 * Studio brand variant — rule colour only (Topic 33 FIX-WP9 sweep)
 *
 * The base `--mw-color-rule` fallback is `rgba(0, 0, 0, 0.08)`: a black hairline
 * sized for a light surface. Every studio caller of this partial — /about/,
 * /press/, /press-kit/ — sits on `studio-violet` `rgb(14, 10, 42)`, where that
 * line measures **1.10:1** and is invisible. (`--mw-color-rule` is never defined
 * anywhere in the theme, so the fallback is always what renders.)
 *
 * Not a new decision: Topic 30 CORR-WP6 hit exactly this on /contact/'s routing
 * rows and Claude Design's answer was `rgba(255, 255, 255, 0.12)` — see the
 * matching block in _split.css. Reused verbatim rather than re-derived, so the
 * two dark-band key-facts surfaces cannot drift apart.
 *
 * Until the sweep's `display: contents` fix above, this was moot on all three
 * pages: the rule did not paint at desktop width regardless of its colour.
 * ----------------------------------------------------------------------- */
.mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-violet"] .mw-key-facts__row,
.mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-violet"] .mw-key-facts__label,
.mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-violet"] .mw-key-facts__value,
.mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__row,
.mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__label,
.mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__value {
	border-block-end-color: rgba(255, 255, 255, 0.12);
}

/* -----------------------------------------------------------------------
 * Lore brand variant (Topic 17 RENDER-WP8)
 *
 * Topic 14 manuscript/codex identity — key-facts strip on parchment/vellum
 * for the /kaeros-cosmology page (Six Celestials at-a-glance). Gilt rule
 * between rows; system-serif label.
 * ----------------------------------------------------------------------- */
.mw-section--key-facts[data-bg-token="lore-parchment"] { background-color: var(--lore-parchment); color: var(--lore-ink); }
.mw-section--key-facts[data-bg-token="lore-vellum"]    { background-color: var(--lore-vellum);    color: var(--lore-ink); }

.mw-section--key-facts.mw-section--brand-lore .mw-section__headline {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	letter-spacing: -0.005em;
}

/* Both the row (stacked, below 32em) and the dt/dd (grid, above it) — see the
 * `display: contents` note in the base rules. Colour only; the base layer owns
 * whether a rule exists at all. */
.mw-section--key-facts.mw-section--brand-lore .mw-key-facts__row,
.mw-section--key-facts.mw-section--brand-lore .mw-key-facts__label,
.mw-section--key-facts.mw-section--brand-lore .mw-key-facts__value {
	border-block-end-color: rgba(168, 125, 50, 0.3); /* gilt rule */
}

.mw-section--key-facts.mw-section--brand-lore .mw-key-facts__label {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	font-style: italic;
	color: var(--lore-oxblood);
	opacity: 1;
}

/* -----------------------------------------------------------------------
 * K-World brand variant + band painters (Topic 33 FIX-WP33)
 *
 * ⚠️ THIS PARTIAL HAD NO kw-* BACKGROUND RULES AT ALL.
 *
 * Every other section stylesheet paints its own `[data-bg-token]` values —
 * see the matching lines in _body.css, _card-grid.css, _cta-band.css,
 * _faq.css, _gallery.css, _hero.css and _media-text.css. This one only ever
 * painted the two `lore-*` tokens, because until now its only K-World caller
 * (`k-world/book-product.php`) sat on a page that was trashed in Topic 27.
 *
 * The consequence is worth writing down: `bg_token => 'kw-cream'` was accepted,
 * written into the markup as a data attribute, and then painted by nothing.
 * Grepped to confirm there is no generic `.mw-section[data-bg-token]` fallback
 * anywhere in the CSS — every painter is section-scoped — so the band would
 * have shown the dark page background through a section that declares itself
 * cream, breaking the band rhythm this whole topic has been repairing.
 *
 * The lesson generalises: a `bg_token` value only exists if the receiving
 * section's stylesheet paints it. Passing one is a request, not a guarantee.
 *
 * Ink is #040420 on all three light K-World tones, matching the value every
 * sibling section stylesheet uses, so the product facts read identically to
 * the gallery and card-grid bands above them.
 * ----------------------------------------------------------------------- */
/* FIX-WP40: these two paint the FIX-WP6 *surface* siblings, not the accents.
 * `--kw-sky` / `--kw-gold` are Kaya's and Adam's rider accents (#7EB7E8 /
 * #F4C430) and stayed untouched by the Option C palette ruling precisely
 * because FIX-3 consumes them as accents. Every other section painter and
 * every divider in `_divider.css` moved to the surface tokens; this file was
 * missed, so a `bg_token => 'kw-gold'` band would have painted #F4C430
 * between seams painting #F2D072 — the band/seam tone mismatch `_divider.css`
 * calls the most visible seam bug this system can produce. Caught by review,
 * never live: the only caller is `k-world/book-product.php`, whose page was
 * trashed in Topic 27. `kw-cream` is correct as-is — that token has no
 * surface sibling. */
.mw-section--key-facts[data-bg-token="kw-sky"]    { background-color: var(--kw-sky-surface);  color: #040420; }
.mw-section--key-facts[data-bg-token="kw-gold"]   { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--key-facts[data-bg-token="kw-cream"]  { background-color: var(--kw-cream);        color: #040420; }

/* Topic 36 CORR-WP1 Item 2 — `--kw-sky-surface` / `--kw-gold-surface`
 * flipped to white. Same defect class as the `_cta-band.css` painters: this
 * is the band itself, not a nested panel, and `/coloring-book-product/`'s
 * key-facts band can sit directly under a divider whose own outgoing-tone
 * fill is now this same white. A thin ink hairline gives the band a top edge
 * to end on rather than relying on whatever precedes it happening to differ. */
.mw-section--key-facts[data-bg-token="kw-sky"],
.mw-section--key-facts[data-bg-token="kw-gold"] {
	box-shadow: inset 0 1px 0 rgba(4, 4, 32, 0.14);
}

/* The strip carries more weight as a product specification than as a lore
 * sidebar, so the K-World variant gets the display face and real breathing
 * room rather than the compact lore rhythm. */
.mw-section--key-facts.mw-section--brand-k-world {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.mw-section--key-facts.mw-section--brand-k-world .mw-section__headline {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-block: 0 0.5rem;
}

.mw-section--key-facts.mw-section--brand-k-world .mw-section__intro {
	max-width: 46rem;
	margin-block: 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* A warm rule at ~22% ink reads clearly on cream and gold without turning the
 * table into a grid of hard lines.
 *
 * Colour only — the base layer now owns whether the rule paints at all, on both
 * sides of 32em (FIX-WP9 sweep). This block used to restate `1px solid` for the
 * dt/dd because the base layer's version was swallowed by `display: contents`;
 * that is fixed upstream, so the restatement is gone and there is one definition
 * of the rule's existence again. */
.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__row,
.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__label,
.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__value {
	border-block-end-color: rgba(58, 44, 20, 0.22);
}

/* Padding cannot be collapsed the same way: below 32em the row is the box and
 * the dt/dd sit inside it, so declaring it on both would double the rhythm. */
.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__row {
	padding-block: 0.75rem;
}

@media (min-width: 32em) {
	.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__label,
	.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__value {
		padding-block: 0.75rem;
	}
}

.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__label {
	color: #3A2C14;
	opacity: 1;
}

.mw-section--key-facts.mw-section--brand-k-world .mw-key-facts__value {
	font-size: 1.0625rem;
	font-weight: 500;
}

/* -----------------------------------------------------------------------
 * The buy CTA and its note (Topic 33 FIX-WP33)
 *
 * `margin-inline: 0` and `text-align: start` are explicit because the button
 * sits below a `<dl>` that is start-aligned at every breakpoint — a centred
 * button under a left-aligned table reads as belonging to neither.
 * ----------------------------------------------------------------------- */
.mw-key-facts__cta {
	margin-block: 1.75rem 0;
	margin-inline: 0;
	text-align: start;
}

.mw-key-facts__note {
	margin-block: 0.75rem 0;
	margin-inline: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	max-width: 42rem;
	opacity: 0.85;
}