/*!
 * Section: CTA Band
 *
 * Scoped CSS for inc/sections/cta-band.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.
 * CTA band padding-block anchors to --mw-space-section (120px) max so the
 * "call to action" pause matches the rest of the page rhythm. Headline→
 * subhead spacing wires --mw-space-headline-to-paragraph (24px); subhead→
 * CTA-row wires --mw-space-paragraph-to-cta (36px). H2 ceiling lifted to
 * 2.625rem (42px) per WP-1 type scale. */
.mw-section--cta-band {
	padding-block: clamp(2.5rem, 6vw, var(--mw-space-section, 120px));
	text-align: center;
}

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

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

.mw-section--cta-band .mw-section__subhead {
	font-size: 1rem;
	line-height: 1.5;
	max-width: 40rem;
	margin-inline: auto;
	margin-block-end: var(--mw-space-paragraph-to-cta, 36px);
	opacity: 0.9;
}

.mw-section--cta-band .mw-section__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin: 0;
}

/* -----------------------------------------------------------------------
 * K-World brand variant (Topic 17 RENDER-WP7)
 *
 * Newsletter band painting + QR-greeter variant. Newsletter on hub.php is
 * kw-gold; QR-greeter "Came here from the book?" is kw-sky.
 * ----------------------------------------------------------------------- */
.mw-section--cta-band[data-bg-token="kw-sky"]          { background-color: var(--kw-sky-surface);  color: #040420; }
.mw-section--cta-band[data-bg-token="kw-gold"]         { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--cta-band[data-bg-token="kw-cream"]        { background-color: var(--kw-cream);        color: #040420; }
.mw-section--cta-band[data-bg-token="kw-sunset"]       { background-color: var(--kw-sunset);       color: #ffffff; }
.mw-section--cta-band[data-bg-token="kw-castle-stone"] { background-color: var(--kw-castle-stone); color: #ffffff; }

/* Topic 36 CORR-WP1 Item 2 — `--kw-sky-surface` / `--kw-gold-surface`
 * flipped to white. These two painters are the band itself, not a nested
 * panel — bedtime-stories.php and template-page-coloring-book-product.php
 * each render a raw cta-band section directly against the site's white-ish
 * chrome (no divider precedes an in-page-anchored signup band on either
 * page). 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--cta-band[data-bg-token="kw-sky"],
.mw-section--cta-band[data-bg-token="kw-gold"] {
	box-shadow: inset 0 1px 0 rgba(4, 4, 32, 0.14);
}

/* -----------------------------------------------------------------------
 * Brand-k-world studio-token painters (Topic 36 CORR-WP1 Item 3)
 *
 * `/k-world/`'s closing cta-band moved off `kw-castle-stone` onto
 * `studio-dark` (owner ruling: no gold/yellow/brown on the hub's last two
 * sections — castle-stone reads brown). `is_brand` stays `k-world` so the
 * tier keeps its type treatment, but that means the studio-tier painters in
 * `_studio.css` (scoped to `.mw-section--brand-studio`) never fire here —
 * only the background is missing; text tokens are already brand-agnostic
 * (theme-tokens.css:383). `studio-violet` is included alongside
 * `studio-dark` for symmetry with the gallery painter above, even though no
 * cta-band call uses it today.
 * ----------------------------------------------------------------------- */
.mw-section--cta-band.mw-section--brand-k-world[data-bg-token="studio-dark"]   { background-color: var(--studio-dark, #0E0841);   color: #ffffff; }
.mw-section--cta-band.mw-section--brand-k-world[data-bg-token="studio-violet"] { background-color: var(--studio-violet, #0e0a2a); color: #ffffff; }

/* On light kw-* bands, the outline secondary CTA flips to dark border. */
.mw-section--cta-band[data-bg-token="kw-sky"] .mw-btn--outline,
.mw-section--cta-band[data-bg-token="kw-gold"] .mw-btn--outline,
.mw-section--cta-band[data-bg-token="kw-cream"] .mw-btn--outline {
	color: #040420;
	border-color: #040420;
}

/* -----------------------------------------------------------------------
 * Lore brand variant (Topic 17 RENDER-WP8)
 *
 * Topic 14 per-page accent — verdigris on /kaeros-hub, amethyst on
 * /kaeros-cosmology, gilt on /kaeros-timeline. Each lands on the CTA
 * band at the foot of its respective page. System-serif headline;
 * parchment foreground for legibility on the deep accent colour.
 * ----------------------------------------------------------------------- */
.mw-section--cta-band[data-bg-token="lore-hub"]       { background-color: var(--lore-hub);       color: var(--lore-parchment); }
.mw-section--cta-band[data-bg-token="lore-cosmology"] { background-color: var(--lore-cosmology); color: var(--lore-parchment); }
.mw-section--cta-band[data-bg-token="lore-timeline"]  { background-color: var(--lore-timeline);  color: var(--lore-parchment); }
.mw-section--cta-band[data-bg-token="lore-parchment"] { background-color: var(--lore-parchment); color: var(--lore-ink); }
.mw-section--cta-band[data-bg-token="lore-vellum"]    { background-color: var(--lore-vellum);    color: var(--lore-ink); }

.mw-section--cta-band.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--cta-band.mw-section--brand-lore .mw-section__subhead {
	opacity: 0.95;
}

/* Lore CTA primary button — gilt on the deep accent bands. */
.mw-section--cta-band.mw-section--brand-lore[data-bg-token="lore-hub"] .mw-btn--primary,
.mw-section--cta-band.mw-section--brand-lore[data-bg-token="lore-cosmology"] .mw-btn--primary,
.mw-section--cta-band.mw-section--brand-lore[data-bg-token="lore-timeline"] .mw-btn--primary {
	background-color: var(--lore-parchment);
	color: var(--lore-ink);
	border-color: var(--lore-parchment);
}

.mw-section--cta-band.mw-section--brand-lore[data-bg-token="lore-hub"] .mw-btn--outline,
.mw-section--cta-band.mw-section--brand-lore[data-bg-token="lore-cosmology"] .mw-btn--outline,
.mw-section--cta-band.mw-section--brand-lore[data-bg-token="lore-timeline"] .mw-btn--outline {
	color: var(--lore-parchment);
	border-color: var(--lore-parchment);
}