/*
 * NMH - Scroll Gallery (widgets/Scroll_Gallery_Widget.php, assets/js/scroll-gallery.js).
 *
 * The track is as tall as the cards need in natural scroll; the stage inside it
 * is sticky, so the page scrolls normally and the stage stays on screen while
 * the cards change. Nothing here touches html, body or anything outside the
 * widget, and nothing is fixed.
 *
 * Every layer is placed against the stage (never against another layer), so an
 * empty layer changes nothing else. Positions use the `translate` property and
 * leave `transform` free for the runtime's animations; author opacity applies to
 * the image or text inside a layer, the animation to the layer itself.
 *
 * Controls write their variables on `.ndw-scroll-gallery`, where the defaults
 * below are declared. Colours have no fallback here: their preconfigured value
 * is the control default, so clearing a control really clears it.
 */

.e-con > .elementor-widget-noise-scroll-gallery {
	width: var(--container-widget-width, 100%);
	max-width: 100%;
}

.ndw-scroll-gallery {
	--ndw-sg-stage-h: 100vh;
	--ndw-sg-length: 100vh;
	--ndw-sg-offset: 0px;
	--ndw-sg-end-hold: 35vh;
	--ndw-sg-stop-in: 30%;
	--ndw-sg-stop-out: 72%;
	--ndw-sg-product-x: 50%;
	--ndw-sg-product-y: 52%;
	--ndw-sg-product-size: 72%;
	--ndw-sg-product-opacity: 1;
	--ndw-sg-splash-x: 50%;
	--ndw-sg-splash-y: 50%;
	--ndw-sg-splash-size: 52%;
	--ndw-sg-splash-opacity: 1;
	--ndw-sg-word-x: 50%;
	--ndw-sg-word-y: 50%;
	--ndw-sg-word-size: 17cqw;
	--ndw-sg-word-max: 42;
	--ndw-sg-word-opacity: 1;
	--ndw-sg-overlay-x: 4%;
	--ndw-sg-overlay-y: 50%;
	--ndw-sg-overlay-tx: 0%;
	--ndw-sg-overlay-w: 24%;
	--ndw-sg-overlay-gap: 14px;
	--ndw-sg-button-radius: 40px;
	--ndw-sg-dots-x: 96%;
	--ndw-sg-dots-y: 50%;
	--ndw-sg-counter-x: 50%;
	--ndw-sg-counter-y: 94%;
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* Fill the visible screen on phones with a moving address bar. */
@supports (height: 100svh) {
	.ndw-scroll-gallery {
		--ndw-sg-stage-h: 100svh;
		--ndw-sg-length: 100svh;
	}
}

.ndw-scroll-gallery *,
.ndw-scroll-gallery *::before,
.ndw-scroll-gallery *::after {
	box-sizing: border-box;
}

/* ---- Track and sticky stage ---- */

.ndw-scroll-gallery__track {
	position: relative;
	height: var(--ndw-sg-stage-h);
}

/* Natural scroll: one screen plus one scroll length per extra card. The mode is
   a prefix class on the widget wrapper, so the height is right on first paint
   (no layout shift when the script starts). Phones and tablets always scroll
   naturally. */
.ndw-sg-mode-natural .ndw-scroll-gallery__track,
.ndw-scroll-gallery.is-natural .ndw-scroll-gallery__track {
	height: calc(var(--ndw-sg-stage-h) + (var(--ndw-sg-count, 1) - 1) * var(--ndw-sg-length) + var(--ndw-sg-end-hold));
}

@media (pointer: coarse) {
	.ndw-sg-mode-step .ndw-scroll-gallery__track {
		height: calc(var(--ndw-sg-stage-h) + (var(--ndw-sg-count, 1) - 1) * var(--ndw-sg-length) + var(--ndw-sg-end-hold));
	}
}

/* "Pause at the last card": an invisible probe the script measures in px. */
.ndw-scroll-gallery__hold {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: var(--ndw-sg-end-hold);
	visibility: hidden;
	pointer-events: none;
}

/* Sticky cannot work under a clipping ancestor; the script then switches to one
   card per gesture and the track goes back to one screen. */
.ndw-scroll-gallery.is-stepped .ndw-scroll-gallery__track {
	height: var(--ndw-sg-stage-h);
}

/* Logged-in visitors see the WordPress toolbar fixed over the top of the screen
   (32 px, 46 px up to 782 px wide; below 600 px it scrolls away). The stage
   rests below it and is that much shorter, so nothing hides under the bar. */
.admin-bar .ndw-scroll-gallery {
	--ndw-sg-admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ndw-scroll-gallery {
		--ndw-sg-admin-bar: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .ndw-scroll-gallery {
		--ndw-sg-admin-bar: 0px;
	}
}

.ndw-scroll-gallery__stage {
	position: sticky;
	top: calc(var(--ndw-sg-offset) + var(--ndw-sg-admin-bar, 0px));
	height: calc(var(--ndw-sg-stage-h) - var(--ndw-sg-admin-bar, 0px));
	overflow: clip;
	isolation: isolate;
}

.ndw-scroll-gallery__cards {
	position: absolute;
	inset: 0;
	container-type: inline-size;
}

/* ---- Cards ---- */

.ndw-scroll-gallery__card {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

.ndw-scroll-gallery__card.is-active,
.ndw-scroll-gallery__card.is-entering,
.ndw-scroll-gallery__card.is-leaving {
	visibility: visible;
}

.ndw-scroll-gallery__card.is-entering {
	z-index: 2;
}

.ndw-scroll-gallery__card.is-leaving {
	z-index: 1;
}

/* A card's own colours, or the gallery gradient when they are empty. */
.ndw-scroll-gallery__bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(at center center, var(--ndw-sg-card-in, var(--ndw-sg-in)) var(--ndw-sg-stop-in), var(--ndw-sg-card-out, var(--ndw-sg-out)) var(--ndw-sg-stop-out));
}

.ndw-scroll-gallery__layer {
	position: absolute;
	translate: -50% -50%;
	pointer-events: none;
	will-change: transform, opacity;
}

.ndw-scroll-gallery__layer--splash {
	z-index: 1;
	left: var(--ndw-sg-c-splash-x, var(--ndw-sg-splash-x));
	top: var(--ndw-sg-c-splash-y, var(--ndw-sg-splash-y));
	width: var(--ndw-sg-c-splash-size, var(--ndw-sg-splash-size));
}

/* Typography defaults sit on the layer, where the Word typography control (and
   its Global Typography) applies; the giant size sits on the word itself. */
.ndw-scroll-gallery__layer--word {
	z-index: 2;
	left: var(--ndw-sg-c-word-x, var(--ndw-sg-word-x));
	top: var(--ndw-sg-c-word-y, var(--ndw-sg-word-y));
	white-space: nowrap;
	font-family: Anton, "Arial Narrow", Impact, sans-serif;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0;
	text-transform: uppercase;
}

.ndw-scroll-gallery__layer--product {
	z-index: 3;
	left: var(--ndw-sg-c-product-x, var(--ndw-sg-product-x));
	top: var(--ndw-sg-c-product-y, var(--ndw-sg-product-y));
	height: var(--ndw-sg-c-product-size, var(--ndw-sg-product-size));
}

.ndw-sg-splash-front-yes .ndw-scroll-gallery__layer--splash {
	z-index: 2;
}

.ndw-sg-splash-front-yes .ndw-scroll-gallery__layer--word {
	z-index: 1;
}

/* Global layer switches: hide a layer in every card without deleting it. */
.elementor-widget-noise-scroll-gallery:not(.ndw-sg-word-yes) .ndw-scroll-gallery__layer--word,
.elementor-widget-noise-scroll-gallery:not(.ndw-sg-splash-yes) .ndw-scroll-gallery__layer--splash,
.elementor-widget-noise-scroll-gallery:not(.ndw-sg-product-yes) .ndw-scroll-gallery__layer--product {
	display: none;
}

/* Two classes, to beat the global Elementor image rule at (0,1,1). */
.ndw-scroll-gallery__splash.ndw-scroll-gallery__splash {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: var(--ndw-sg-c-splash-opacity, var(--ndw-sg-splash-opacity));
}

.ndw-scroll-gallery__product.ndw-scroll-gallery__product {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	opacity: var(--ndw-sg-c-product-opacity, var(--ndw-sg-product-opacity));
}

.ndw-scroll-gallery__layer--product .ndw-scroll-gallery__link {
	display: block;
	height: 100%;
	pointer-events: auto;
}

/* `--ndw-sg-word-fit` (set by the script) shrinks a word too long for the
   gallery width, so WATERMELON never overflows on a phone. */
.ndw-scroll-gallery .ndw-scroll-gallery__word {
	display: block;
	font-size: calc(var(--ndw-sg-c-word-size, var(--ndw-sg-word-size)) * var(--ndw-sg-word-fit, 1));
	color: var(--ndw-sg-word-color);
	opacity: var(--ndw-sg-c-word-opacity, var(--ndw-sg-word-opacity));
	overflow-wrap: normal;
}

/* ---- Text block of each card (changes and animates with its card) ---- */

.ndw-scroll-gallery__overlay {
	position: absolute;
	z-index: 10;
	left: var(--ndw-sg-c-overlay-x, var(--ndw-sg-overlay-x));
	top: var(--ndw-sg-c-overlay-y, var(--ndw-sg-overlay-y));
	translate: var(--ndw-sg-overlay-tx) -50%;
	display: flex;
	flex-direction: column;
	gap: var(--ndw-sg-overlay-gap);
	width: var(--ndw-sg-overlay-w);
	max-width: calc(100% - 32px);
}

.ndw-scroll-gallery .ndw-scroll-gallery__eyebrow,
.ndw-scroll-gallery .ndw-scroll-gallery__title,
.ndw-scroll-gallery .ndw-scroll-gallery__text {
	margin: 0;
	overflow-wrap: normal;
}

.ndw-scroll-gallery .ndw-scroll-gallery__eyebrow {
	color: var(--ndw-sg-eyebrow-color);
}

.ndw-scroll-gallery .ndw-scroll-gallery__title {
	color: var(--ndw-sg-title-color);
}

.ndw-scroll-gallery .ndw-scroll-gallery__text {
	color: var(--ndw-sg-text-color);
}

/* {Focus} words of a title, as in NMH - Heading. */
.ndw-scroll-gallery .ndw-scroll-gallery__focus {
	color: var(--ndw-sg-focus-color);
}

.ndw-scroll-gallery .ndw-scroll-gallery__text p {
	margin: 0;
}

.ndw-scroll-gallery .ndw-scroll-gallery__text > * + * {
	margin-top: 0.5em;
}

/* A link styled as a button: three classes beat Theme Style `a:hover` (0,2,1). */
.ndw-scroll-gallery__button.ndw-scroll-gallery__button.ndw-scroll-gallery__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--ndw-sg-button-radius);
	background: var(--ndw-sg-button-bg);
	color: var(--ndw-sg-button-color);
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.ndw-scroll-gallery__button.ndw-scroll-gallery__button.ndw-scroll-gallery__button:hover,
.ndw-scroll-gallery__button.ndw-scroll-gallery__button.ndw-scroll-gallery__button:focus-visible {
	background: var(--ndw-sg-button-bg-hover, var(--ndw-sg-button-bg));
	color: var(--ndw-sg-button-color-hover, var(--ndw-sg-button-color));
	text-decoration: none;
}

/* ---- Navigation ---- */

.ndw-scroll-gallery__dots {
	position: absolute;
	z-index: 11;
	left: var(--ndw-sg-dots-x);
	top: var(--ndw-sg-dots-y);
	translate: -50% -50%;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Real buttons: two classes beat Theme Style `.elementor-kit-N button` (0,1,1). */
.ndw-scroll-gallery .ndw-scroll-gallery__dot,
.ndw-scroll-gallery .ndw-scroll-gallery__dot:hover,
.ndw-scroll-gallery .ndw-scroll-gallery__dot:focus {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.ndw-scroll-gallery .ndw-scroll-gallery__dot:focus-visible {
	outline: 2px solid var(--ndw-sg-dot-active);
	outline-offset: -2px;
}

.ndw-scroll-gallery__dot-mark {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ndw-sg-dot);
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.ndw-scroll-gallery__dot.is-active .ndw-scroll-gallery__dot-mark {
	background: var(--ndw-sg-dot-active);
	transform: scale(1.3);
}

.ndw-scroll-gallery__counter {
	position: absolute;
	z-index: 11;
	left: var(--ndw-sg-counter-x);
	top: var(--ndw-sg-counter-y);
	translate: -50% -50%;
	display: flex;
	gap: 6px;
	color: var(--ndw-sg-counter-color);
	font-variant-numeric: tabular-nums;
}

/* Only the editor shows this, when the page clips the gallery. */
.ndw-scroll-gallery__notice {
	position: absolute;
	z-index: 12;
	left: 12px;
	right: 12px;
	top: 12px;
	padding: 8px 12px;
	border-radius: 6px;
	background: rgb(0 0 0 / 70%);
	color: #fff;
	font: 13px/1.4 system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	.ndw-scroll-gallery__dot-mark,
	.ndw-scroll-gallery__button.ndw-scroll-gallery__button.ndw-scroll-gallery__button {
		transition: none;
	}
}