/*!
 * Section: Body
 *
 * Scoped CSS for inc/sections/body.php. Stub partial — visual composition
 * lands during page-migration WPs (RENDER-WP5–WP11).
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 17 RENDER-WP1
 */

/* Topic 23 REDESIGN-WP7 — section rhythm tokens applied.
 * Body padding-block anchors to --mw-space-section (120px) max; headline→
 * paragraph gap wires --mw-space-headline-to-paragraph (24px). H2 clamp
 * ceiling lifted to 2.625rem (42px) per WP-1 type scale (H2 section
 * headline = 42px). */
.mw-section--body {
	padding-block: clamp(2rem, 6vw, var(--mw-space-section, 120px));
}

.mw-section--body .mw-section__inner {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mw-section--body .mw-section__eyebrow {
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block-end: 0.5rem;
}

.mw-section--body .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: clamp(1.75rem, 3.5vw, 2.625rem);
	line-height: 1.2;
	margin-block: 0 var(--mw-space-headline-to-paragraph, 24px);
}

.mw-section--body .mw-section__content {
	font-size: 1rem;
	line-height: 1.6;
	max-width: 48rem;
}

.mw-section--body .mw-section__content > * + * {
	margin-block-start: 1em;
}

/* -----------------------------------------------------------------------
 * K-World brand variant (Topic 17 RENDER-WP7)
 *
 * Body section background painting by data-bg-token. Foreground colour is
 * tone-locked from Topic 13 KWORLD-WP1/WP2/WP3 — dark text on light kw-*,
 * white text on dark kw-castle-stone / kw-sunset.
 * ----------------------------------------------------------------------- */
/* VERIFIED, no change needed — Topic 36 CORR-WP1 Item 2. `--kw-sky-surface` /
 * `--kw-gold-surface` flipped to white; dark ink (#040420) on white is still
 * well above AA (21:1), and this partial paints no nested light panel that
 * would need its own boundary ring. */
.mw-section--body[data-bg-token="kw-sky"]          { background-color: var(--kw-sky-surface);  color: #040420; }
.mw-section--body[data-bg-token="kw-gold"]         { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--body[data-bg-token="kw-cream"]        { background-color: var(--kw-cream);        color: #040420; }
.mw-section--body[data-bg-token="kw-sunset"]       { background-color: var(--kw-sunset);       color: #ffffff; }
.mw-section--body[data-bg-token="kw-castle-stone"] { background-color: var(--kw-castle-stone); color: #ffffff; }

/* "What is K-World?" 2-col explainer — text-only, no illustration column.
 * Topic 13 KWORLD-WP1-G dropped the right-hand illustration; this rule
 * lays the body content out as two text columns on the hub page. */
.mw-section--body.mw-section--brand-k-world .mw-section__content--2col {
	max-width: 64rem;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.mw-section--body.mw-section--brand-k-world .mw-section__content--2col {
		grid-template-columns: 1fr 1fr;
	}
}

.mw-section--body.mw-section--brand-k-world .mw-section__content--2col h3 {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 1.375rem;
	line-height: 1.2;
	margin-block: 0 0.5rem;
}

/* -----------------------------------------------------------------------
 * Lore brand variant (Topic 17 RENDER-WP8)
 *
 * Topic 14 manuscript/codex identity — alternating parchment / vellum
 * body bands carry long-read prose for /kaeros-cosmology and /kaeros-hub.
 * System-serif H2 (Georgia stack); prose constrained to ~60–80ch for
 * comfortable reading.
 * ----------------------------------------------------------------------- */
.mw-section--body[data-bg-token="lore-parchment"] { background-color: var(--lore-parchment); color: var(--lore-ink); }
.mw-section--body[data-bg-token="lore-vellum"]    { background-color: var(--lore-vellum);    color: var(--lore-ink); }

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

.mw-section--body.mw-section--brand-lore .mw-section__content {
	max-width: 44rem; /* ~60–80 characters comfortable reading length */
	font-size: 1.0625rem;
	line-height: 1.7;
}

.mw-section--body.mw-section--brand-lore .mw-section__content h3 {
	font-family: var(--mw-font-lore-serif, Georgia, "Times New Roman", serif);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.3;
	margin-block: 1.5em 0.5em;
}

.mw-section--body.mw-section--brand-lore .mw-section__content strong {
	color: var(--lore-oxblood);
}

.mw-section--body.mw-section--brand-lore .mw-section__content ul.mw-lore-celestials {
	list-style: none;
	padding: 0;
	margin-block: 1em 0;
	display: grid;
	gap: 0.5rem;
}

.mw-section--body.mw-section--brand-lore .mw-section__content ul.mw-lore-celestials li {
	padding-block: 0.5rem;
	border-block-end: 1px solid rgba(168, 125, 50, 0.25); /* gilt rule, dim */
}

.mw-section--body.mw-section--brand-lore .mw-section__content ul.mw-lore-celestials li:last-child {
	border-block-end: none;
}

/* Narrow variant (Topic 27 BRAND-WP4, S8) — DS `Section narrow` prop; a tighter
 * prose column for intros / short-read bands (e.g. Roadmap "how to read",
 * "Our story"). Additive — only applies when the caller passes narrow=true. */
.mw-section--body.mw-section--narrow .mw-section__inner {
	max-width: 44rem;
}

/* -----------------------------------------------------------------------
 * Centred heading + wide banner image (Topic 27 BRAND-WP4 Iter 3b) — the
 * Claude Design "What is K-World / Where the adventure begins" band: a
 * centred SectionHeading over a full-width 2/1 rounded image. Additive —
 * only fires for callers that pass align="center" and/or an image.
 * ----------------------------------------------------------------------- */
.mw-section--body.mw-section--center .mw-section__inner {
	text-align: center;
}

.mw-section--body.mw-section--center .mw-section__content {
	max-width: 46rem;
	margin-inline: auto;
}

.mw-section--body .mw-section__banner {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.mw-section--body .mw-section__banner img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: var(--mw-shadow-elevation-1, 0 10px 30px rgba(0, 0, 0, 0.12));
}