/*!
 * Section: Media + Text
 *
 * Scoped CSS for inc/sections/media-text.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 token applied.
 * Media-text padding-block anchors to --mw-space-section (120px) max. */
.mw-section--media-text {
	padding-block: clamp(2rem, 6vw, var(--mw-space-section, 120px));
}

.mw-section--media-text .mw-section__inner--split {
	max-width: var(--mw-content-width, 72rem);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 48em) {
	.mw-section--media-text .mw-section__inner--split {
		grid-template-columns: 1fr 1fr;
	}

	.mw-section--media-text-reverse .mw-section__inner--split > .mw-section__media {
		order: 2;
	}
}

/* -----------------------------------------------------------------------
 * Stacked editorial variant (Topic 33 FIX-WP2) — wide art on top, copy
 * below, one column at every width (no side-by-side breakpoint of its own;
 * media queries carry zero specificity so this needs no !important there).
 *
 * Every rule below is qualified with `.mw-section__inner--stacked` — the
 * unqualified `.mw-section__inner--split` selector is live on all 10 other
 * media-text callers and must never be touched by this variant.
 *
 * Two competitors live in _studio.css, which loads AFTER this stylesheet
 * (functions.php enqueues `_studio.css` depending on every section partial,
 * so it always wins a specificity tie or a lower-specificity match):
 *   - _studio.css:208-212 `.mw-section--media-text.mw-section--brand-studio
 *     [data-bg-token="studio-dark"], […studio-violet] .mw-section__media`
 *     sets `max-width: 28rem; margin-inline: auto;` at (0,4,0). The stacked
 *     media rule below is written at (0,5,0) — token-agnostic (not scoped to
 *     studio-violet) so a future stacked band on studio-dark is covered too.
 *   - _studio.css:214 `.mw-section--media-text.mw-section--brand-studio
 *     .mw-section__media img` sets `border-radius: 8px` at (0,3,1) — a TIE
 *     with an unweighted stacked img rule. The stacked img rule below is
 *     written at (0,4,1) so the hi-fi 16px radius survives.
 * ----------------------------------------------------------------------- */
.mw-section--media-text .mw-section__inner--split.mw-section__inner--stacked {
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.4rem);
	align-items: start;
}

.mw-section--media-text .mw-section__inner--split.mw-section__inner--stacked > .mw-section__media {
	order: 0;
	margin: 0;
}

.mw-section--media-text.mw-section--brand-studio .mw-section__inner--split.mw-section__inner--stacked > .mw-section__media {
	max-width: none;
	margin-inline: 0;
}

.mw-section--media-text .mw-section__inner--split.mw-section__inner--stacked > .mw-section__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 60px -24px rgba(6, 4, 30, 0.6);
}

.mw-section--media-text .mw-section__inner--split.mw-section__inner--stacked .mw-section__content {
	max-width: 90ch;
}

.mw-section--media-text .mw-section__media img {
	width: 100%;
	height: auto;
	display: block;
}

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

.mw-section--media-text .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--media-text .mw-section__content {
	font-size: 1rem;
	line-height: 1.6;
}

.mw-section--media-text .mw-section__cta {
	margin-block-start: 1.25rem;
}

/* -----------------------------------------------------------------------
 * K-World brand variant (Topic 17 RENDER-WP7)
 *
 * Featured-product band (/coloring-books "Available Now") + Meet-the-Heroes
 * card-row style. Topic 13 KWORLD-WP2 featured-card recolour preserved —
 * inner card sits on cream against a kw-sky band.
 * ----------------------------------------------------------------------- */
.mw-section--media-text[data-bg-token="kw-sky"]          { background-color: var(--kw-sky-surface);  color: #040420; }
.mw-section--media-text[data-bg-token="kw-gold"]         { background-color: var(--kw-gold-surface); color: #040420; }
.mw-section--media-text[data-bg-token="kw-cream"]        { background-color: var(--kw-cream);        color: #040420; }
.mw-section--media-text[data-bg-token="kw-sunset"]       { background-color: var(--kw-sunset);       color: #ffffff; }
.mw-section--media-text[data-bg-token="kw-castle-stone"] { background-color: var(--kw-castle-stone); color: #ffffff; }

/* On a kw-sky band, the media-text inner shell becomes a cream card for the
 * Topic 13 KWORLD-WP2 "featured product" pattern (/coloring-books). */
.mw-section--media-text.mw-section--brand-k-world[data-bg-token="kw-sky"] .mw-section__inner--split {
	background-color: var(--kw-cream);
	color: #040420;
	border-radius: var(--mw-radius-soft, 8px);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	/* Topic 36 CORR-WP1 Item 2 — `--kw-sky-surface` flipped to white, so this
	 * cream (#FFF1D6) card lost the periwinkle field it was tuned against; a
	 * boundary ring restores a visible edge, matching the card-grid Task E
	 * treatment for the same defect class. */
	box-shadow: 0 0 0 1px rgba(4, 4, 32, 0.5), var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}

/* -----------------------------------------------------------------------
 * Studio brand variant — homepage book-promo band (Topic 17 RENDER-WP11)
 *
 * The pre-WP-2 baseline (`5497f28:patterns/page-home.php`) used an
 * `accent-violet-soft` (#e1e8f9 lavender) background for the "Discover the
 * Comfort of the Coloring world" band, sandwiched between dark studio
 * sections via the torn-paper-down + scallop-down dividers. The homepage
 * is the only studio-tier surface that needs a painted band today (all
 * other studio pages live on the body's bg-dark inherit) — declaring this
 * one painter here, scoped to `data-bg-token="studio-light"`, keeps the
 * section library closed while restoring visual byte-stability.
 *
 * Background pulls from `--studio-light` (declared in theme-tokens.css,
 * RENDER-WP11 fixup iter 43) — short-form palette token matches the
 * WP-7 K-World (`--kw-*`) and WP-8 Lore (`--lore-*`) convention.
 * Foreground colour is `#040420` (bg-dark token) so the prose reads dark
 * on lavender, matching the baseline `textColor:bg-dark` declaration.
 * Microcopy paragraph (`.mw-section__microcopy`) renders italic + small
 * per the baseline's "coming soon!" footnote.
 * ----------------------------------------------------------------------- */
.mw-section--media-text[data-bg-token="studio-light"] {
	background-color: var(--studio-light, #e1e8f9);
	color: #040420;
}

.mw-section--media-text[data-bg-token="studio-light"] .mw-section__microcopy {
	font-size: 0.875rem;
	font-style: italic;
	opacity: 0.85;
	margin-block-start: 0.75rem;
}

/* -----------------------------------------------------------------------
 * Book-cover plate (Topic 27 BRAND-WP4 Iter 3) — front + back covers side by
 * side in the media column via the media-text `images[]` arg. Mirrors the
 * Claude Design ColoringBookPage "The book" split (flex 1 1 200px, max 290px,
 * uppercase caption). Only paints when `images` is passed.
 * ----------------------------------------------------------------------- */
.mw-media-text__covers {
	display: flex;
	gap: 1.1rem;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.mw-media-text__cover {
	margin: 0;
	flex: 1 1 200px;
	max-width: 290px;
}

.mw-media-text__cover img {
	width: 100%;
	display: block;
	border-radius: var(--mw-radius-soft, 8px);
	box-shadow: var(--mw-shadow-elevation-1, 0 2px 8px rgba(0, 0, 0, 0.12));
}

.mw-media-text__cover-caption {
	text-align: center;
	margin-block-start: 0.55rem;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}

/* -----------------------------------------------------------------------
 * About-band rotating pixel-hero reel (Topic 30 CORR-WP9 — supersedes CORR-WP2)
 *
 * The About band's right column rotates five animated pixel heroes on a Kaeros
 * pedestal, crossfading every 4800ms (assets/js/about-reel.js). This SUPERSEDES
 * the WP-2 single Adam+Solara key-art: the `.showcase__img` rule + showcaseDrift
 * keyframes were removed (no cover-up leftover). The `.showcase` frame, glow and
 * motes are reused; roster/pedestal values are VERBATIM from the v2 design
 * handoff `design_handoff_pixel_hero_showcase/showcase.css`.
 *
 * Layout: the `.showcase` frame's height comes from its `aspect-ratio` (4/3
 * desktop, 16/10 mobile) since every reel layer is absolutely positioned; the
 * sprites sit in a `.roster` grid, one per cell, only the active one visible.
 *
 * Specificity: the shared
 * `.mw-section--media-text .mw-section__media img { height: auto }` rule
 * (0,2,1) would otherwise force `.roster__sprite` to height:auto — the sprite
 * rule below is scoped at (0,3,0) so its height:76% wins.
 *
 * Mote position/delay are expressed as classes (`.showcase__mote--1..6`),
 * never inline styles — the `media_html` arg runs through `wp_kses_post()`
 * and `safecss_filter_attr()` strips `transform` / `animation-delay` from
 * inline style attributes, so any inline value would silently be dropped.
 * ----------------------------------------------------------------------- */
.showcase {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	isolation: isolate;
	box-shadow: 0 34px 80px -34px rgba(4, 3, 26, .85), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* CORR-WP9 media-cell sizing. The rotating reel's layers are ALL absolutely
 * positioned, so `.showcase` contributes 0 in-flow size; on the 2-up desktop
 * grid the media cell collapses to 0 (WP-2's in-flow `<img>` used to size the
 * column, and grid `justify-self: stretch` does NOT break the aspect-ratio
 * circular-collapse here). Give the frame a DEFINITE width so its aspect-ratio
 * yields the height: mobile's single-column cell is already definite (fill it);
 * the desktop frame sizes to the column via vw, never depending on the collapsed
 * cell width. Centered in case the column is a touch wider. */
.mw-section--media-text-reverse .mw-section__media .showcase {
	width: 100%;
	margin-inline: auto;
}

@media (min-width: 48em) {
	.mw-section--media-text-reverse .mw-section__media .showcase {
		width: clamp(18rem, 40vw, 34rem);
	}
}

/* CORR-WP9 rotating pixel-hero roster (supersedes the WP-2 single-image
 * .showcase__img + showcaseDrift, removed here). Values VERBATIM from the v2
 * handoff showcase.css. `.roster__sprite` is scoped through
 * .mw-section--media-text .mw-section__media (0,3,0) so its height:76% beats the
 * shared `... img { height:auto }` (0,2,1) rule — same precedent as WP-2. */
.showcase__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(125% 95% at 50% 8%, #2c2568 0%, #191552 42%, #0c0a34 100%);
}

.showcase__floor {
	position: absolute;
	left: 50%;
	bottom: 15%;
	z-index: 1;
	width: 62%;
	height: 20%;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, rgba(158, 148, 255, .5), rgba(158, 148, 255, 0) 70%);
	filter: blur(7px);
	animation: showcaseGlow 7.5s ease-in-out infinite;
}

.roster {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
}

.mw-section--media-text .mw-section__media .roster__sprite {
	grid-area: 1 / 1;
	height: 76%;
	width: auto;
	max-width: 84%;
	object-fit: contain;
	image-rendering: pixelated;
	opacity: 0;
	transition: opacity .85s ease;
	filter: drop-shadow(0 16px 18px rgba(4, 3, 26, .55));
}

.mw-section--media-text .mw-section__media .roster__sprite.is-on {
	opacity: 1;
	animation: rosterBob 4.6s ease-in-out infinite;
}

@keyframes rosterBob {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-2.6%);
	}
}

.roster__plate {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	pointer-events: none;
	animation: plateIn .6s ease both;
}

@keyframes plateIn {
	from {
		opacity: 0;
		transform: translateY(7px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.roster__name {
	font-family: var(--mw-font-display);
	font-size: 1.08rem;
	letter-spacing: .02em;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}

.roster__role {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(226, 221, 255, .82);
}

/* Reel position indicator. Topic 33 FIX-WP11 Task D (item 3).
 *
 * These were 7px circles, evenly spaced — visually indistinguishable from
 * carousel pagination. The designer reported exactly that: readers try to click
 * them and nothing happens, because the reel auto-advances and the dots are
 * decorative (`aria-hidden`, plain `<i>`, no handlers). An affordance bug, not
 * an accessibility one.
 *
 * Owner ruled 2026-07-29 to remove the affordance rather than make them
 * interactive. Removing it means changing what they LOOK like: round, equal,
 * separated dots read as buttons; short connected bars read as progress. A
 * `cursor: default` or a `pointer-events: none` would leave them still looking
 * clickable and only suppress the symptom — G11 forbids exactly that, and the
 * WP names both by name.
 *
 * So: circles → a segmented track, tighter gap, and the active segment no
 * longer scales (a size change on hover-sized elements is itself button-ish).
 * Colour and glow still mark the position, so nothing is lost but the false
 * promise.
 *
 * Deliberate divergence from the Claude Design reference
 * (`.claude/skills/mystwood-design/reference/pixel-hero-showcase/showcase.css:21-23`),
 * which still specifies circles. The owner's ruling supersedes it here; noted so
 * FIX-WP9's design-sync reports this as intended, not drift.
 */
.roster__dots {
	position: absolute;
	right: 14px;
	bottom: 16px;
	z-index: 5;
	display: flex;
	gap: 3px;
}

.roster__dots i {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .28);
	transition: background .3s ease, box-shadow .3s ease;
}

.roster__dots i.is-on {
	background: #fff;
	box-shadow: 0 0 8px rgba(180, 170, 255, .8);
}

.showcase__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(58% 52% at 62% 30%, rgba(168, 167, 255, .30), transparent 70%);
	animation: showcaseGlow 7.5s ease-in-out infinite;
}

@keyframes showcaseGlow {
	0%, 100% {
		opacity: .45;
	}

	50% {
		opacity: .95;
	}
}

.showcase__motes {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.showcase__mote {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff5d6;
	box-shadow: 0 0 8px 2px rgba(255, 240, 190, .8);
	opacity: .14;
	animation: showcaseMote 5s ease-in-out infinite;
}

@keyframes showcaseMote {
	0%, 100% {
		opacity: .12;
		transform: translateY(3px) scale(.85);
	}

	50% {
		opacity: .9;
		transform: translateY(-5px) scale(1.12);
	}
}

.showcase__mote--1 { left: 17%; top: 32%; animation-delay: 0s; }
.showcase__mote--2 { left: 71%; top: 20%; animation-delay: 1.1s; }
.showcase__mote--3 { left: 52%; top: 63%; animation-delay: 2.2s; }
.showcase__mote--4 { left: 33%; top: 76%; animation-delay: .6s; }
.showcase__mote--5 { left: 85%; top: 55%; animation-delay: 1.7s; }
.showcase__mote--6 { left: 60%; top: 40%; animation-delay: 2.8s; }

.showcase__badge {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 5;
	font-family: var(--mw-font-display);
	font-size: .82rem;
	letter-spacing: .05em;
	color: #fff;
	background: rgba(10, 7, 40, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .16);
	padding: 6px 13px;
	border-radius: 999px;
}

@media (max-width: 720px) {
	.showcase {
		aspect-ratio: 16 / 10;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-section--media-text .mw-section__media .roster__sprite.is-on,
	.showcase__floor {
		animation: none;
	}

	.showcase__glow {
		animation: none;
		opacity: .45;
	}

	.showcase__mote {
		animation: none;
		transform: none;
	}
}

/* -----------------------------------------------------------------------
 * Book-promo 3D hardcover mockup + flip-through slot (Topic 30 CORR-WP3)
 *
 * Replaces the flat cover <img> with a hardcover mockup (stage/book/cover/
 * pages/spine/gloss) that tilts on hover and floats gently at rest. The
 * play pill is a real disabled <button> — a labeled coming-soon slot, never
 * a dead link. Values copied VERBATIM from the design handoff
 * `design-corrections/corrections.css` §3, with four amendments from the
 * WP-3 plan review:
 *
 *  1) SPECIFICITY — .bookshot__cover is scoped through
 *     .mw-section--media-text .mw-section__media (0,3,0) so it beats the
 *     existing .mw-section--media-text .mw-section__media img { height:auto }
 *     rule (0,2,1) — same precedent as the WP-2 showcase.
 *  2) TEASER PILL — the disabled pill never fakes an enabled affordance
 *     (cursor stays `default`; the handoff's own `.bookshot__play:hover`
 *     rule is dropped). The lift/glow teaser is driven by the FIGURE's hover
 *     state instead (`.bookshot:hover .bookshot__play:disabled`), because
 *     Firefox/Safari suppress `:hover` on disabled controls but not on their
 *     ancestor — same technique as the WP-2 tilt trigger. Background stays
 *     unchanged on the teaser lift.
 *  3) NARROW-WIDTH FIT — a <=380px query tightens the stage width and pages
 *     offset so nothing overflows at 320/360/375px. `overflow: hidden|clip`
 *     on `.bookshot`/`.bookshot__stage` is intentionally never used — it
 *     would decapitate the pages' -15px protrusion and the cover's 44px
 *     shadow (a cover-up fix, not a real one).
 *  4) CONTRAST — `.bookshot__cap`'s alpha is raised from the handoff's
 *     rgba(4,4,32,.5) (~3.5:1) to rgba(4,4,32,.72) (~7.7:1) against the
 *     rendered studio-light lavender band, clearing the 4.5:1 AA floor with
 *     margin.
 *
 * prefers-reduced-motion freezes bookFloat, the hover tilt transition, AND
 * the teaser lift.
 * ----------------------------------------------------------------------- */
.bookshot {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.bookshot__stage {
	position: relative;
	perspective: 1500px;
	width: min(330px, 78%);
}

.bookshot__book {
	position: relative;
	aspect-ratio: 1 / 1.28;
	transform-style: preserve-3d;
	transform: rotateY(-24deg) rotateX(5deg);
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
	animation: bookFloat 6.5s ease-in-out infinite;
}

.bookshot:hover .bookshot__book {
	transform: rotateY(-11deg) rotateX(2deg);
}

@keyframes bookFloat {
	0%, 100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -12px;
	}
}

.mw-section--media-text .mw-section__media .bookshot__cover {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 3px 9px 9px 3px;
	box-shadow: 0 44px 64px -30px rgba(4, 3, 26, .6);
}

.bookshot__pages {
	position: absolute;
	z-index: 1;
	top: 1.5%;
	right: -15px;
	width: 19px;
	height: 97%;
	background: repeating-linear-gradient(90deg, #fdfbf5 0 2px, #e6e1d2 2px 4px);
	border-radius: 0 3px 3px 0;
	box-shadow: inset -3px 0 5px rgba(0, 0, 0, .18);
	transform: translateZ(-1px);
}

.bookshot__spine {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	width: 16px;
	height: 100%;
	background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 92%);
	border-radius: 3px 0 0 3px;
}

.bookshot__gloss {
	position: absolute;
	z-index: 4;
	inset: 0;
	pointer-events: none;
	border-radius: 3px 9px 9px 3px;
	background: linear-gradient(118deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 32%);
}

.bookshot__play {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	cursor: pointer;
	font-family: var(--mw-font-display);
	font-size: 1rem;
	color: #fff;
	background: var(--mw-color-primary);
	border: 0;
	padding: 11px 20px 11px 17px;
	border-radius: 999px;
	box-shadow: 0 12px 28px -8px rgba(103, 101, 232, .7);
	transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.bookshot__play:disabled {
	cursor: default;
}

.bookshot:hover .bookshot__play:disabled {
	transform: translateY(-1px);
	box-shadow: 0 16px 34px -8px rgba(103, 101, 232, .8);
}

.bookshot__cap {
	font-family: ui-monospace, Menlo, monospace;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(4, 4, 32, .72);
}

@media (max-width: 380px) {
	.bookshot__stage {
		width: min(230px, 68%);
	}

	.bookshot__pages {
		right: -9px;
		width: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bookshot__book {
		animation: none;
		transform: rotateY(-24deg) rotateX(5deg);
	}

	.bookshot:hover .bookshot__book {
		transition: none;
	}

	.bookshot:hover .bookshot__play:disabled {
		transform: none;
		box-shadow: 0 12px 28px -8px rgba(103, 101, 232, .7);
	}
}