/*!
 * Page: Coloring Book Vol. 1 (templates/template-page-coloring-book-product.php)
 *
 * Topic 42 COPY-WP17, the coloring book page redesign (owner 2026-10-19). Built
 * to sections 2 to 5 of wireframes/pages/coloring-book-product-v2/index.html
 * (measurements at 1440 wide) from the existing section partials; section 1 is
 * the product-hero partial (assets/css/sections/_product-hero.css). Colours come
 * from tokens (theme-tokens.css).
 *
 * Loaded on this one template only (functions.php, the games.css / lore.css
 * pattern), after the tokens, the section files and _studio.css, so a rule here
 * that matches the same element with equal weight wins by order. Everything is
 * scoped under .mw-page-coloring-book-product. No new bg_token, no new brand.
 *
 * Bands, top to bottom:
 *   1. product-hero (own file); its headline is in capitals here, with the
 *      last word in gold (COPY-WP20)
 *   2. Peek inside: white (media-text on studio-light, painted white here). It
 *      is the band the hero's jagged edge slides up over (_product-hero.css),
 *      so nothing may sit between the two.
 *   3. The four boxes (card-grid, columns 4), the book + video (media-text)
 *      and the cover heroes (card-grid, columns 2) share ONE midnight band; the
 *      violet glow sits behind the boxes. All three sections are painted here;
 *      the two grids are told apart by their data-columns.
 *   4. Closing card (key-facts on studio-dark) and 5. Get in touch (the Home
 *      wrapper, studio-dark): the same dark, so they read as one band.
 *
 * Breakpoints from the mockup: 1100 / 900 / 600.
 */

.mw-page-coloring-book-product {
	--mw-cbp-gutter: clamp(20px, 6vw, 88px);
}

/* The width every band's content shares: the mockup's wrap. */
.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio .mw-section__inner--split,
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-section__inner {
	width: min(var(--mw-wide-size, 1264px), 100% - 2 * var(--mw-cbp-gutter));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Shared type: the section headings of this page. */
.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio .mw-section__headline,
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-section__headline,
.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-section__headline {
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(36px, 4.45vw, 64px);
	line-height: 1.25;
	margin-block: 0;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio .mw-section__eyebrow,
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-section__eyebrow,
.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-section__eyebrow {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* 1. The headline: "THE MAGIC BEGINS", the last word in gold (owner
 * 2026-10-20, COPY-WP20). Short again, so it gets the mockup's size back. */
.mw-page-coloring-book-product .mw-product-hero__title {
	font-size: clamp(40px, 4.45vw, 64px);
	text-transform: uppercase;
}

/* 2. Peek inside: the white band ------------------------------------------- */

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] {
	background-color: #fff;
	color: var(--mw-color-text-dark);
	/* The hero's slide-under rule adds the rest of the top padding on the inner. */
	padding-block: 78px 71px;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__inner--split {
	grid-template-columns: minmax(0, 510fr) minmax(0, 724fr);
	gap: 44px;
	align-items: center;
}

/* Text left, picture right at every width where there are two columns; the
 * partial's `reverse` flag moves the picture, and below 900px the text comes
 * first (the mockup's order). */
.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__inner--split > .mw-section__media {
	order: 2;
	max-width: none;
	margin-inline: 0;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__media img {
	border-radius: 0;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__eyebrow {
	color: var(--mw-color-primary);
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__content {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.5;
	color: rgba(4, 4, 25, 0.8);
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__cta {
	margin: 0;
}

/* 3. One midnight band: the four boxes, the book + video, the cover heroes */

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"],
.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] {
	background-color: var(--mw-color-bg-midnight);
	color: var(--mw-color-text-light);
}

/* Each card band opens the space above itself; the book band between them has
 * its own top space and none at the bottom; the heroes close the midnight band
 * with the space below them (owner 2026-10-20: "leave padding below"). */
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] {
	padding-block: 119px 0;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"][data-columns="2"] {
	padding-block-end: 120px;
}

/* The violet glow starts behind the boxes and fades on down over the book band,
 * so it lights the whole midnight band rather than stopping at the boxes'
 * edge (owner 2026-10-20). Clipped sideways only (no sideways scroll). It is
 * painted after the plain band backgrounds below it, so the text and the video
 * of those bands sit on positioned wrappers above it. */
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"][data-columns="4"] {
	position: relative;
	overflow-x: clip;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"][data-columns="4"]::before {
	content: "";
	position: absolute;
	top: 40px;
	right: -22px;
	width: 329px;
	height: 813px;
	border-radius: 50%;
	background: var(--mw-color-primary);
	opacity: 0.5;
	filter: blur(200px);
	pointer-events: none;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-section__inner {
	position: relative;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-section__eyebrow {
	color: var(--mw-color-primary-glow);
	margin-block-end: 12px;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card-grid {
	margin-block: 64px 0;
	gap: 29px;
}

/* The four boxes have no heading above them; four across, two at 1100px, one
 * on phones (the mockup's grid). */
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-columns="4"] .mw-card-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: 0;
}

/* The cards: 18px radius, 5% violet fill, 20% violet border. A box has its
 * emoji at the top; a hero card has the hero's round picture there
 * (COPY-WP18). They are not links, so no hover lift. */
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-card,
.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-card:hover {
	background-color: rgba(103, 101, 232, 0.05);
	border: 1px solid rgba(103, 101, 232, 0.2);
	border-radius: 18px;
	padding: 36px 24px;
	gap: 10px;
	min-height: 253px;
	text-align: start;
	transform: none;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card__media {
	flex: none;
	width: 88px;
	height: 88px;
	margin: 0 0 6px;
	border: 2px solid rgba(103, 101, 232, 0.5);
	border-radius: 50%;
	overflow: hidden;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card__icon {
	margin: 0;
	font-size: 35px;
	line-height: 1.25;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card__title {
	font-size: clamp(26px, 2.2vw, 32px);
	line-height: 1.25;
}

.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card__body {
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.4;
	color: var(--mw-color-text-light);
}

/* The book and its video. The video fills a box as tall as the text beside it
 * (owner 2026-10-20, COPY-WP19; `object-fit: cover` trims the clip's top and
 * bottom); on one column it is a square. The text column is wider than the
 * mockup's 973 / 266 split (about 60 / 40 at 1440) because the real pitch is
 * about three times the mockup's text. The words are never cut. */
.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] {
	padding-block: 98px 0;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__inner--split {
	position: relative;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	gap: 37px;
	align-items: start;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__media {
	max-width: none;
	margin-inline: 0;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(103, 101, 232, 0.2);
	background: var(--mw-color-pill-surface);
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__media--video {
	align-self: stretch;
	min-height: 320px;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__media--video .mw-video {
	position: absolute;
	inset: 0;
	height: 100%;
	border-radius: 0;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__eyebrow {
	color: var(--mw-color-primary-glow);
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__headline {
	font-size: clamp(30px, 3vw, 44px);
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__content {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.5;
	color: var(--mw-color-text-light);
}

.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__content > :first-child {
	margin-block-start: 0;
}

/* 4. Closing card ----------------------------------------------------------- */

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] {
	padding-block: 84px 0;
	scroll-margin-top: calc(var(--mw-header-h, 5rem) + 1rem);
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: min(1062px, 100% - 2 * var(--mw-cbp-gutter));
	max-width: none;
	margin-inline: auto;
	padding: 60px 24px;
	background: rgba(103, 101, 232, 0.1);
	border: 1px solid var(--mw-color-primary);
	border-radius: 18px;
	text-align: center;
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-section__eyebrow {
	color: var(--mw-color-text-light);
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-section__intro {
	margin: 0;
	max-width: 40rem;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

/* The facts: a two-column list of name / value rows with a thin line between
 * rows (owner 2026-10-20, COPY-WP18: "create some structure"). The rows run
 * left to right in the fact sheet's order; one column on phones. */
.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-key-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	width: 100%;
	max-width: 880px;
	margin: 8px 0 0;
	text-align: start;
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__row {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-block-end: 1px solid rgba(103, 101, 232, 0.3);
	font-size: 15px;
	line-height: 1.5;
}

/* The first row of each column also gets a line above it. */
.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__row:nth-child(-n+2) {
	border-block-start: 1px solid rgba(103, 101, 232, 0.3);
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__label,
.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__value {
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-key-facts__label {
	opacity: 1;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-key-facts__value {
	margin: 0;
	font-weight: 500;
	color: var(--mw-color-text-light);
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-key-facts__cta {
	margin: 0;
	text-align: center;
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-edition-flags {
	justify-content: center;
}

.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-key-facts__note {
	margin: 0;
	max-width: 40rem;
	font-size: 14px;
	opacity: 1;
	color: rgba(255, 255, 255, 0.7);
}

/* 5. Get in touch: card 2 is this page's sign-up -------------------------- */

/* The hub's .ghub rules already reach the form through the .mw-leadcapture
 * wrapper; only its own centring and card chrome need to step aside. */
.ghub .mw-leadcapture {
	margin-top: auto;
	margin-inline: 0;
}

/* The hero's waitlist button jumps here; the card's title clears the sticky
 * header (the lore.css pattern). */
#waitlist-signup {
	scroll-margin-top: calc(var(--mw-header-h, 5rem) + 1rem);
}

/* Narrow screens ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-columns="4"] .mw-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__inner--split {
		grid-template-columns: 1fr;
	}

	.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__text {
		max-width: 560px;
	}

	.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__media--video {
		align-self: start;
		width: 100%;
		max-width: 560px;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 900px) {
	.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] {
		padding-block: 56px 56px;
	}

	.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-light"] .mw-section__inner--split {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] {
		padding-block-start: 80px;
	}

	.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"][data-columns="2"] {
		padding-block-end: 80px;
	}

	.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio .mw-card-grid {
		margin-block-start: 56px;
	}

	.mw-page-coloring-book-product .mw-section--media-text.mw-section--brand-studio[data-bg-token="studio-dark"] {
		padding-block: 56px 0;
	}

	.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] {
		padding-block-start: 80px;
	}
}

@media (max-width: 600px) {
	.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-columns="4"] .mw-card-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.mw-page-coloring-book-product .mw-section--card-grid.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-card {
		min-height: 0;
		padding: 24px 20px;
	}

	.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-section__inner {
		padding: 44px 18px;
	}

	/* The facts: one column; only the first row keeps the line above it. */
	.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-key-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__row {
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: 12px;
	}

	.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio[data-bg-token="studio-dark"] .mw-key-facts__row:nth-child(2) {
		border-block-start: 0;
	}

	/* The four short flags on one row. */
	.mw-page-coloring-book-product .mw-section--key-facts.mw-section--brand-studio .mw-edition-flags {
		gap: 10px;
	}
}