/**
 * Section: Showcase (inc/sections/showcase.php)
 *
 * Topic 42 COPY-WP27, the Shop page's picture slider (design D of the
 * 2026-11-01 canvas). The 13th section of the library, added with the owner's
 * approval ("Then build it"). New classes are `mw-showcase__*`. Colours come
 * from tokens (theme-tokens.css); the only literals are the design's shade
 * (rgba of the deep ink #040420) and the rgba() glow of the dots.
 *
 * HEADER UNDERLAP. Copied from _product-hero.css (lines 42-47): the site header
 * is sticky and takes space in the flow, so a photo section pulls up under it
 * with margin-block-start: calc(-1 * var(--mw-header-h)) and pads its content by
 * --mw-header-h. The slide's text is centred in what is left under the
 * breadcrumb and the h1, which are placed absolutely at the top left.
 *
 * HEIGHT. Every slide sits in ONE grid cell, so the section is as tall as its
 * tallest slide. The script (assets/js/showcase.js) keeps every slide in the
 * layout (invisible and inert, never display:none), so the height never changes
 * when a slide changes and the page below does not jump. Without JavaScript the
 * other slides are `hidden` and only the first one exists.
 *
 * LEGIBILITY. Each slide has a dark shade over the whole picture, darkest on the
 * left (the words), and a dark band along the top (the header's light text and
 * the breadcrumb sit there, on the white merch picture too). The side arrows
 * keep their own solid dark backing: the right edge has the lightest shade.
 *
 * [hidden] GUARDS. Every element the script hides with `hidden` has an explicit
 * `[hidden] { display: none; }` rule below, because this file's own `display`
 * rules would beat the browser's plain [hidden] rule (the guard pattern of
 * _media-text.css, _product-hero.css and _card-grid.css).
 */

.mw-section--showcase {
	--mw-showcase-gutter: clamp(16px, 5vw, 88px);
	--mw-showcase-wrap: min(1264px, 100% - 2 * var(--mw-showcase-gutter));
	--mw-showcase-top: calc(var(--mw-header-h) + 116px);
	position: relative;
	isolation: isolate;
	z-index: 1;
	margin-block-start: calc(-1 * var(--mw-header-h));
	background: var(--mw-color-ink-deep);
	color: var(--mw-color-text-light);
	overflow: hidden;
}

.mw-section--showcase:focus-visible {
	outline: 3px solid var(--mw-color-primary-glow);
	outline-offset: -3px;
}

/* The stack ----------------------------------------------------------------- */

.mw-showcase__stage {
	display: grid;
	min-height: clamp(560px, 46vw, 680px);
}

.mw-showcase__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding-block: var(--mw-showcase-top) 108px;
	opacity: 1;
	transition: opacity 0.45s ease;
}

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

/* Off: invisible and out of reach, but still in the layout box. */
.mw-showcase__slide.is-off {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

@media (prefers-reduced-motion: reduce) {
	.mw-showcase__slide,
	.mw-showcase__slide.is-off {
		transition: none;
	}
}

.mw-showcase__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Crop choices (the `position` argument of the partial, allowlisted). */
.mw-showcase__img[data-pos="center-high"] {
	object-position: center 40%;
}

.mw-showcase__img[data-pos="right-high"] {
	object-position: 70% 40%;
}

.mw-showcase__img[data-pos="center-low"] {
	object-position: center 55%;
}

/* The dark band along the top, then the dark shade over the whole picture.
 * The shade's stops are shares of the width (owner 2026-11-01), so it covers the
 * picture at every screen width: 80% at the left, 70% in the middle, 50% at the
 * right. The design's stops were pixels from the left edge, and on a wide monitor
 * the shade ended before the centred words did. Lighter than the book page's even
 * 90% (_product-hero.css), so the picture still shows.
 * The top band holds 74% over the header's height (not the design's 70% fading at once):
 * measured over the white merch picture the header's nav text needs it for 4.5:1. */
.mw-showcase__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 4, 32, 0.74) 0, rgba(4, 4, 32, 0.74) var(--mw-header-h), transparent calc(var(--mw-header-h) + 72px)),
		linear-gradient(90deg, rgba(4, 4, 32, 0.8) 0%, rgba(4, 4, 32, 0.7) 50%, rgba(4, 4, 32, 0.5) 100%);
}

@media (max-width: 37.5em) {
	/* On a phone the words cross the whole picture: one even shade under the top band. */
	.mw-showcase__shade {
		background:
			linear-gradient(180deg, rgba(4, 4, 32, 0.74) 0, rgba(4, 4, 32, 0.74) var(--mw-header-h), transparent calc(var(--mw-header-h) + 72px)),
			rgba(4, 4, 32, 0.74);
	}
}

/* The words ---------------------------------------------------------------- */

.mw-showcase__copy {
	position: relative;
	width: var(--mw-showcase-wrap);
	margin-inline: auto;
}

.mw-showcase__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
}

.mw-showcase__headline {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(40px, 5.6vw, 76px);
	line-height: 1.02;
	color: var(--mw-color-text-light);
	overflow-wrap: break-word;
}

/* White like the headline (owner 2026-11-01). */
.mw-showcase__line {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.55;
	color: var(--mw-color-text-light);
}

.mw-showcase__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-block-start: 6px;
}

.mw-showcase__link {
	color: var(--mw-color-primary-glow);
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 18px;
	letter-spacing: 0.04em;
	text-underline-offset: 0.3em;
}

.mw-showcase__link:hover {
	color: var(--mw-color-text-light);
}

.mw-showcase__link:focus-visible {
	outline: 3px solid var(--mw-color-primary-glow);
	outline-offset: 3px;
}

/* The book page's edition flags under a slide's buttons (owner 2026-11-01, COPY-WP27).
 * The pills are the shared .mw-edition-flag of components/_button.css (dark pill surface,
 * white text), which reads on the dark shade; only the spacing is set here. */
.mw-showcase__flags .mw-edition-flags {
	gap: 10px 12px;
}

/* Breadcrumb and the page's h1, top left, over every slide. -------------------- */

.mw-showcase__top {
	position: absolute;
	z-index: 2;
	top: calc(var(--mw-header-h) + 32px);
	left: 0;
	right: 0;
	width: var(--mw-showcase-wrap);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	pointer-events: none;
}

.mw-showcase__top a {
	pointer-events: auto;
}

.mw-showcase__top .mw-breadcrumb {
	font-size: 16px;
	letter-spacing: 0;
	margin: 0;
}

.mw-showcase__top .mw-breadcrumb a {
	color: inherit;
	opacity: 0.92;
	text-decoration: none;
}

.mw-showcase__top .mw-breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.mw-showcase__top .mw-breadcrumb a:focus-visible {
	outline: 3px solid var(--mw-color-primary-glow);
	outline-offset: 3px;
}

.mw-showcase__title {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--kw-gold, #F4C430);
}

/* Controls ------------------------------------------------------------------ */

.mw-showcase__arrow,
.mw-showcase__ctrl {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	color: var(--mw-color-text-light);
	cursor: pointer;
}

.mw-showcase__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: var(--mw-radius-round, 999px);
	/* A solid dark backing: the right edge of a picture has almost no shade. */
	background: rgba(4, 4, 32, 0.82);
}

.mw-showcase__arrow--prev {
	left: clamp(8px, 1.5vw, 24px);
}

.mw-showcase__arrow--next {
	right: clamp(8px, 1.5vw, 24px);
}

.mw-showcase__arrow[hidden],
.mw-showcase__bar[hidden] {
	display: none;
}

.mw-showcase__arrow:hover,
.mw-showcase__ctrl:hover {
	background: var(--kw-gold, #F4C430);
	color: var(--mw-color-text-dark);
}

.mw-showcase__bar {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 24px;
}

.mw-showcase__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	width: var(--mw-showcase-wrap);
	margin-inline: auto;
}

.mw-showcase__ctrl {
	width: 44px;
	height: 44px;
	border-radius: var(--mw-radius-round, 999px);
	border: 2px solid rgba(250, 248, 255, 0.5);
	background: rgba(4, 4, 32, 0.55);
}

.mw-showcase__ctrl:hover {
	border-color: var(--kw-gold, #F4C430);
}

.mw-showcase__dot {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mw-showcase__dot::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-radius: var(--mw-radius-round, 999px);
	background: rgba(250, 248, 255, 0.55);
	transition: width 0.18s ease;
}

.mw-showcase__dot[aria-current="true"]::before {
	width: 32px;
	background: var(--kw-gold, #F4C430);
}

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

.mw-showcase__count {
	margin-inline: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mw-color-text-light);
}

/* Pause / play: one icon at a time, by the state the script sets. */
.mw-showcase__toggle[data-state="playing"] .mw-showcase__icon--play,
.mw-showcase__toggle[data-state="stopped"] .mw-showcase__icon--pause {
	display: none;
}

.mw-showcase__arrow:focus-visible,
.mw-showcase__ctrl:focus-visible,
.mw-showcase__dot:focus-visible {
	outline: 3px solid var(--mw-color-primary-glow);
	outline-offset: 3px;
}

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

@media (min-width: 37.5625em) {
	/* The side arrows (24px in, 52px wide) lie in the side margin; keep the words clear of them. */
	.mw-section--showcase {
		--mw-showcase-gutter: clamp(84px, 5vw, 88px);
	}
}

@media (max-width: 37.5em) {
	/* No side arrows on a phone: swipe, or use the control row. */
	.mw-showcase__arrow {
		display: none;
	}

	.mw-section--showcase {
		--mw-showcase-top: calc(var(--mw-header-h) + 108px);
	}

	/* The control row wraps onto two lines here (up to 94px tall, 24px up): keep the words and the
	 * edition flags clear of it. */
	.mw-showcase__slide {
		padding-block-end: 140px;
	}
}