/**
 * Section: Product hero (inc/sections/product-hero.php)
 *
 * Topic 42 COPY-WP16, the coloring book page redesign. Built to section 1 of
 * wireframes/pages/coloring-book-product-v2/index.html (measurements at 1440
 * wide: a 612 / 536 grid with a 57px gap). New classes are
 * `mw-product-hero__*`, not the mockup's `mw-cbp-*`. Colours come from tokens
 * (theme-tokens.css); the edition flags and the gold button are styled in
 * components/_button.css.
 *
 * HEADER UNDERLAP. The site header is sticky and takes space in the flow, so
 * every photo hero pulls up under it with margin-block-start:
 * calc(-1 * var(--mw-header-h)) and pads its content by --mw-header-h
 * (sections/_hero.css, the data-has-image block). This section does the same:
 * the mockup's 156px top padding assumed an absolute 88px header, so the top
 * padding here is the header height plus the rest of that design value.
 *
 * JAGGED EDGE. The section's bottom edge is cut with the exact points of the
 * .fig mask, on a 1440-wide basis, in units of --mw-product-hero-jag (1px at
 * 1440 wide, shallower on phones). The band that follows slides up under the
 * teeth (the angled seam's working pattern, sections/_hero.css):
 *   - the section is positioned, isolated and z-index 1 so its teeth paint
 *     ABOVE the band beneath (a positioned next band would otherwise cover them);
 *   - `.mw-section--product-hero + .mw-section` gets the negative top margin,
 *     and the matching extra top padding goes on its inner, not on the
 *     section (a section's padding-block shorthand would replace, not add);
 *   - the clip and the negative margin sit inside @supports, so an engine
 *     without clip-path keeps a plain flat edge and no overlap.
 * Nothing may be inserted between this section and the next one: the rule is
 * an adjacent-sibling combinator, the same trap as the hero seam
 * (tools/probe-topic-34-hero-seam.php Section B guards it).
 *
 * LIGHT LOOK (`.mw-product-hero--light`, Topic 42 COPY-WP22, Home's book
 * section, built to the owner's picture of 2026-10-20): a pale band in the
 * page, no header underlap, no jagged edge (left out of the sibling rules with
 * :where(), which adds no weight, so the book page's rules weigh what they
 * did), dark text, and the thumbnails under the button at desktop. The
 * optional clip over the large photo (`.mw-product-hero__video`) is styled at
 * the end of this file.
 */

.mw-section--product-hero {
	position: relative;
	isolation: isolate;
	z-index: 1;
	margin-block-start: calc(-1 * var(--mw-header-h));
	padding-block: calc(var(--mw-header-h) + 68px) 110px;
	background: var(--mw-color-ink-deep);
	color: var(--mw-color-text-light);
}

/* The castle picture, under a 90% deep-ink layer. */
.mw-product-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.mw-product-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.mw-product-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mw-color-ink-deep);
	opacity: 0.9;
}

.mw-product-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 612fr) minmax(0, 536fr);
	gap: 57px;
	align-items: start;
	width: min(1264px, 100% - 2 * clamp(20px, 6vw, 88px));
	margin-inline: auto;
}

/* Gallery column ---------------------------------------------------------- */

.mw-product-hero__gallery .mw-breadcrumb {
	font-size: 20px;
	letter-spacing: 0;
	margin-block-end: 38px;
}

.mw-product-hero__gallery .mw-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.mw-product-hero__gallery .mw-breadcrumb a:hover {
	text-decoration: underline;
}

.mw-product-hero__main {
	position: relative; /* The optional clip lies over the photo. */
	border-radius: var(--mw-radius-soft, 8px);
	overflow: hidden;
	aspect-ratio: 612 / 505;
	background: var(--mw-color-pill-surface);
}

.mw-product-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-product-hero__rail {
	position: relative;
	margin-block-start: 29px;
	padding-inline: 16px;
}

.mw-product-hero__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw-product-hero__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--mw-radius-soft, 8px);
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--mw-color-pill-surface);
	cursor: pointer;
	transition: border-color 0.15s;
}

.mw-product-hero__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-product-hero__thumb[aria-pressed="true"] {
	border-color: var(--mw-color-text-light);
}

.mw-product-hero__thumb:focus-visible,
.mw-product-hero__arrow:focus-visible {
	outline: 3px solid var(--mw-btn-focus-ring, var(--mw-color-primary-glow, #A8A7FF));
	outline-offset: 3px;
}

.mw-product-hero__arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--mw-color-text-light);
	cursor: pointer;
	padding: 0;
}

.mw-product-hero__arrow--prev {
	left: -14px;
}

.mw-product-hero__arrow--next {
	right: -14px;
}

.mw-product-hero__arrow svg {
	width: 10px;
	height: 16px;
}

/* Buy column -------------------------------------------------------------- */

.mw-product-hero__buy {
	padding-block-start: 68px;
	display: flex;
	flex-direction: column;
	gap: 42px;
	min-width: 0;
}

.mw-product-hero__eyebrow {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mw-color-primary-glow);
}

.mw-product-hero__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The headline is the book's full title, longer than the mockup's short one,
 * so the ceiling is lower than the mockup's 64px: it stays within three lines
 * at 1440 and never overflows on a phone. The text is never shortened. */
.mw-product-hero__title {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.17;
	color: var(--mw-color-text-light);
	overflow-wrap: break-word;
}

/* The headline's last word or two (`headline_accent`, COPY-WP20), in gold. */
.mw-product-hero__accent {
	color: var(--mw-color-cta-gold);
}

.mw-product-hero__lead {
	margin: 18px 0 0;
	font-size: 20px;
	line-height: 1.25;
	color: var(--mw-color-text-light);
}

.mw-product-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mw-product-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 7px 9px;
	background: var(--mw-color-pill-surface);
	border: 1px solid rgba(103, 101, 232, 0.2);
	border-radius: var(--mw-radius-round, 999px);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
}

.mw-product-hero__pill-label {
	color: rgba(255, 255, 255, 0.7);
}

.mw-product-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.mw-product-hero__amazon {
	width: 22px;
	height: 20px;
	flex: none;
}

.mw-product-hero__note {
	margin: 0;
	max-width: 357px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(248, 248, 248, 0.5);
}

.mw-product-hero__status {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--mw-color-text-light);
}

.mw-product-hero__link {
	align-self: flex-start;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 18px;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mw-product-hero__link:focus-visible {
	outline: 3px solid var(--mw-btn-focus-ring, var(--mw-color-primary-glow, #A8A7FF));
	outline-offset: 3px;
}

/* Jagged bottom edge + the band that slides up under it ------------------- */

@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {

	/* Declared on the section AND on the band beneath it, because a sibling
	 * inherits nothing from a sibling. Edit as ONE set. */
	.mw-section--product-hero,
	.mw-section--product-hero:where(:not(.mw-product-hero--light)) + .mw-section {
		--mw-product-hero-jag: clamp(0.45px, calc(100vw / 1440), 1px);
	}

	.mw-section--product-hero {
		padding-block-end: calc(110px + 76 * var(--mw-product-hero-jag));
		/* Exact points from the .fig mask ("Vector 4"), 1440-wide basis. */
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36.5 * var(--mw-product-hero-jag)), 85.42% 100%, 72.36% calc(100% - 76 * var(--mw-product-hero-jag)), 61.15% calc(100% - 16.5 * var(--mw-product-hero-jag)), 47.64% calc(100% - 56.5 * var(--mw-product-hero-jag)), 30.9% calc(100% - 16.5 * var(--mw-product-hero-jag)), 28.26% calc(100% - 36.5 * var(--mw-product-hero-jag)), 16.84% 100%, 0 calc(100% - 36.5 * var(--mw-product-hero-jag)));
	}

	/* Pulled up by the tallest tooth ... */
	.mw-section--product-hero:where(:not(.mw-product-hero--light)) + .mw-section {
		margin-block-start: calc(-76 * var(--mw-product-hero-jag));
	}

	/* ... and given back on its inner, so its content does not move and only
	 * its background reaches up under the teeth. On the inner, not the section:
	 * the section's padding-block is a shorthand that would be replaced. */
	.mw-section--product-hero:where(:not(.mw-product-hero--light)) + .mw-section > .mw-section__inner {
		padding-block-start: calc(76 * var(--mw-product-hero-jag));
	}
}

/* Light look (Home's book section) ----------------------------------------- */

.mw-section--product-hero.mw-product-hero--light {
	z-index: auto;
	margin-block-start: 0;
	padding-block: clamp(56px, 8vw, 112px);
	background: var(--studio-paper, #F5FCFE);
	color: var(--mw-color-text-dark);
	clip-path: none;
}

/* The picture's grid: the photo down the left; on the right the words and the
 * button at the top, the thumbnails at the bottom, level with the photo. */
.mw-product-hero--light .mw-product-hero__grid {
	grid-template-columns: minmax(0, 517fr) minmax(0, 385fr);
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"main buy"
		"main rail";
	gap: 28px 32px;
}

.mw-product-hero--light .mw-product-hero__gallery {
	display: contents;
}

.mw-product-hero--light .mw-product-hero__main {
	grid-area: main;
	align-self: start;
	aspect-ratio: 517 / 392;
}

.mw-product-hero--light .mw-product-hero__rail {
	grid-area: rail;
	margin-block-start: 0;
	padding-inline: 0;
}

.mw-product-hero--light .mw-product-hero__arrow {
	display: none;
}

.mw-product-hero--light .mw-product-hero__thumbs {
	gap: 22px;
}

.mw-product-hero--light .mw-product-hero__thumb {
	border-color: rgba(4, 4, 32, 0.08);
}

.mw-product-hero--light .mw-product-hero__thumb[aria-pressed="true"] {
	border-color: var(--mw-color-primary);
}

.mw-product-hero--light .mw-product-hero__buy {
	grid-area: buy;
	padding-block-start: 0;
	gap: 16px;
}

.mw-product-hero--light .mw-product-hero__eyebrow {
	font-size: 16px;
	color: var(--mw-color-primary-ink);
}

.mw-product-hero--light .mw-product-hero__intro {
	gap: 20px;
}

.mw-product-hero--light .mw-product-hero__title {
	font-size: clamp(34px, 3.9vw, 56px);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--mw-color-text-dark);
}

.mw-product-hero--light .mw-product-hero__lead {
	margin-block-start: 20px;
	max-width: 32em;
	line-height: 1.3;
	color: var(--mw-color-text-dark);
}

/* The picture's four pills fit on one line at desktop. */
.mw-product-hero--light .mw-product-hero__pills {
	gap: 10px 12px;
}

.mw-product-hero--light .mw-product-hero__pill > span[aria-hidden="true"] {
	color: var(--mw-color-cta-gold);
}

.mw-product-hero--light .mw-product-hero__actions {
	margin-block-start: 20px;
}

/* The clip over the large photo (`video`, COPY-WP22) ------------------------
 * Markup and behaviour: inc/sections/product-hero.php, assets/js/video-loop.js
 * (press mode) and product-gallery.js (hides it for the other photos). Until
 * it plays, the round button sits large in the middle of the still; once it
 * plays, it moves to the corner as the small pause button of _media-text.css. */

.mw-product-hero__video {
	position: absolute;
	inset: 0;
}

.mw-product-hero__video[hidden] {
	display: none;
}

.mw-product-hero__video .mw-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-product-hero__video .mw-video__toggle {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	translate: -50% -50%;
	width: 88px;
	height: 88px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mw-color-primary);
	box-shadow: 0 8px 24px rgba(4, 4, 32, 0.25);
}

.mw-product-hero__video .mw-video__toggle:hover {
	background: #fff;
}

.mw-product-hero__video.is-playing .mw-video__toggle {
	top: auto;
	left: auto;
	right: 16px;
	bottom: 16px;
	translate: none;
	width: 48px;
	height: 48px;
	background: rgba(30, 30, 40, 0.72);
	color: #fff;
	box-shadow: none;
}

.mw-product-hero__video.is-playing .mw-video__toggle:hover {
	background: rgba(30, 30, 40, 0.9);
}

.mw-product-hero__video.is-playing .mw-video__icon--play,
.mw-product-hero__video:not(.is-playing) .mw-video__icon--pause {
	display: none;
}

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

@media (max-width: 900px) {
	.mw-section--product-hero {
		padding-block-start: calc(var(--mw-header-h) + 28px);
	}

	.mw-product-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mw-product-hero__buy {
		padding-block-start: 0;
		gap: 32px;
	}

	/* Light look: the photo, its thumbnails right under it, then the words. */
	.mw-product-hero--light .mw-product-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"main"
			"rail"
			"buy";
		gap: 20px;
	}

	.mw-product-hero--light .mw-product-hero__buy {
		margin-block-start: 12px;
	}
}

@media (max-width: 600px) {
	.mw-product-hero__gallery .mw-breadcrumb {
		font-size: 15px;
		margin-block-end: 20px;
	}

	.mw-product-hero__thumbs {
		gap: 10px;
	}

	.mw-product-hero__rail {
		margin-block-start: 14px;
	}

	.mw-product-hero__pills {
		gap: 10px;
	}

	.mw-product-hero__video:not(.is-playing) .mw-video__toggle {
		width: 64px;
		height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-product-hero__thumb {
		transition: none;
	}
}