/**
 * Motion layer: sliders, marquee, pinned scrolling and reveals.
 *
 * Rules scoped with :not(.block-editor-block-list__block) apply on the front end only,
 * so in the editor every slide stays stacked in the page and easy to edit. Without
 * JavaScript a slider is a native, swipeable scroll row. motion.js adds .is-slider-ready
 * when it takes over.
 *
 * Contents
 * 1. Sliders
 * 2. Split-screen slides
 * 3. Slider controls
 * 4. Marquee
 * 5. Pinned horizontal scroll
 * 6. Stacked panels
 * 7. Carousel
 * 8. Reveals
 * 9. User preferences
 */

/* 1. Sliders
   ======================================================================== */

:is(.is-style-slider-fade, .is-style-slider-wipe, .is-style-slider-split):not(.block-editor-block-list__block) {
	display: flex;
	overflow-x: auto;
	position: relative;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-y;
}

:is(.is-style-slider-fade, .is-style-slider-wipe, .is-style-slider-split):not(.block-editor-block-list__block) > * {
	flex: 0 0 100%;
	margin-block: 0;
	scroll-snap-align: start;
}

:is(.is-style-slider-fade, .is-style-slider-wipe, .is-style-slider-split).is-slider-ready {
	display: grid;
	overflow: hidden;
}

:is(.is-style-slider-fade, .is-style-slider-wipe, .is-style-slider-split).is-slider-ready > :not(.wb-slider__controls) {
	grid-area: 1 / 1;
	max-width: none;
	min-width: 0;
	overflow: hidden;
	width: 100%;
}

/* Full-screen slides, using the small viewport unit so phone toolbars do not crop them. */
:is(.is-style-slider-fade, .is-style-slider-wipe) > .wp-block-cover {
	min-height: 100vh !important;
	min-height: 100svh !important;
}

/* A soft scrim behind text placed low on a photograph, so it stays readable on any image. */
.wp-block-cover.is-position-bottom-left::before {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* Text on photographs is sized and placed for the image, not the page column. */
.wp-block-cover.has-custom-content-position .wp-block-cover__inner-container {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--layout--gutter);
	width: 100%;
}

.wp-block-cover__inner-container :is(p, .wp-block-heading) {
	max-width: 62rem;
}

.wp-block-cover__inner-container p:not(.is-style-eyebrow) {
	max-width: 38rem;
}

.wp-block-cover__inner-container .has-text-align-center {
	margin-inline: auto;
}

:is(.wp-block-cover:not(.is-light), .slide-caption) .wp-element-button {
	background: #fff;
	color: #111;
}

:is(.wp-block-cover:not(.is-light), .slide-caption) .wp-element-button:hover {
	background: #e8e6e1;
	color: #111;
}

.wp-block-cover:not(.is-light) .is-style-outline .wp-element-button {
	background: transparent;
	color: #fff;
}

/* 2. Split-screen slides
   ======================================================================== */

.slide-split {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

.slide-split > .wp-block-image {
	height: 100vh;
	height: 100svh;
	margin: 0;
	overflow: hidden;
}

.slide-split > .wp-block-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.slide-caption {
	bottom: 0;
	color: #fff;
	left: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--custom--layout--gutter);
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 1;
}

.slide-caption > * {
	margin-block: 0.5rem 0;
	pointer-events: auto;
}

/* The scrim keeps white text readable, whichever photograph sits behind it. */
.slide-split::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 55%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

@media (max-width: 600px) {

	.slide-split {
		grid-template-columns: 1fr;
	}

	.slide-split > .wp-block-image + .wp-block-image {
		display: none;
	}
}

/* 3. Slider controls
   ======================================================================== */

.wb-slider__controls {
	align-items: center;
	bottom: var(--wp--preset--spacing--40);
	color: #fff;
	display: flex;
	gap: 0.25rem;
	grid-area: 1 / 1;
	height: 2.75rem;
	justify-self: end;
	margin-right: var(--wp--custom--layout--gutter);
	position: absolute;
	right: 0;
	z-index: 5;
}

.wb-slider__count {
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	margin-right: 0.5rem;
}

.wb-slider__button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	transition: opacity var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
	width: 2.75rem;
}

.wb-slider__button[hidden] {
	display: none;
}

.wb-slider__button:hover {
	opacity: 0.65;
}

.wb-slider__button:disabled {
	cursor: default;
	opacity: 0.3;
}

.wb-slider__controls .wb-slider__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.wb-slider__progress {
	background: currentColor;
	bottom: -0.25rem;
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left;
}

/* 4. Marquee
   ======================================================================== */

.is-style-marquee:not(.block-editor-block-list__block) {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--50);
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}

.is-style-marquee > * {
	flex: none;
	margin-block: 0;
}

.is-style-marquee.is-marquee-ready {
	overflow: hidden;
}

.wb-marquee__track {
	display: flex;
	flex: none;
	gap: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
	will-change: transform;
}

.wb-marquee__track > * {
	flex: none;
	margin-block: 0;
}

/* 5. Pinned horizontal scroll
   ======================================================================== */

.is-style-pin-horizontal:not(.block-editor-block-list__block) {
	align-items: stretch;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--wp--custom--layout--gutter);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.is-style-pin-horizontal:not(.block-editor-block-list__block) > * {
	flex: none;
	margin-block: 0;
	scroll-snap-align: center;
	width: min(80vw, 34rem);
}

.is-style-pin-horizontal.is-pinned {
	height: 100vh;
	overflow: visible;
	width: max-content;
}

.is-style-pin-horizontal.is-pinned > * {
	width: auto;
}

.is-style-pin-horizontal.is-pinned .wp-block-image img {
	height: calc(100vh - 11rem);
	width: auto;
}

.is-style-pin-horizontal .wp-block-image img {
	object-fit: cover;
}

/* 6. Stacked panels. Sticky alone does the work; GSAP only adds the settle.
   ======================================================================== */

.is-style-pin-stack:not(.block-editor-block-list__block) > * {
	margin-block: 0;
	min-height: 100vh;
	min-height: 100svh;
	position: sticky;
	top: 0;
	transform-origin: center top;
}

/* 7. Carousel
   ======================================================================== */

.is-style-carousel {
	position: relative;
}

.is-style-carousel:not(.wp-block-woocommerce-product-collection):not(.block-editor-block-list__block),
.is-style-carousel:not(.block-editor-block-list__block) .wc-block-product-template {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.is-style-carousel:not(.wp-block-woocommerce-product-collection):not(.block-editor-block-list__block) > :not(.wb-carousel__nav),
.is-style-carousel:not(.block-editor-block-list__block) .wc-block-product-template > * {
	flex: 0 0 min(72vw, 21rem);
	margin-block: 0;
	max-width: none;
	scroll-snap-align: start;
	width: auto;
}

.wb-carousel__nav {
	display: flex;
	gap: 0.25rem;
	justify-content: flex-end;
	margin-block-start: var(--wp--preset--spacing--20);
}

.wb-carousel__nav[hidden] {
	display: none;
}

.is-style-carousel:not(.wp-block-woocommerce-product-collection) > .wb-carousel__nav {
	bottom: 0;
	flex: none;
	margin: 0;
	position: sticky;
	right: 0;
}

/* 8. Reveals
   ======================================================================== */

.wb-word {
	display: inline-block;
	overflow: hidden;
	padding-block-end: 0.12em;
	vertical-align: top;
}

.wb-word > span {
	display: inline-block;
}

.is-style-clip-reveal,
.is-style-parallax:not(.wp-block-cover) {
	overflow: hidden;
}

/* 9. User preferences
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

	:is(.is-style-slider-fade, .is-style-slider-wipe, .is-style-slider-split):not(.block-editor-block-list__block) {
		scroll-behavior: auto;
	}

	.wb-slider__progress {
		display: none;
	}
}

@media print {

	:is(.is-style-slider-fade, .is-style-slider-wipe, .is-style-slider-split, .is-style-marquee, .is-style-pin-horizontal):not(.block-editor-block-list__block) {
		display: block;
		overflow: visible;
	}

	.wb-slider__controls,
	.wb-carousel__nav {
		display: none;
	}
}

/* Lookbook intro panel: text only, so it sets its own width. */
.is-style-pin-horizontal .lookbook-intro {
	align-self: center;
	width: min(62vw, 26rem) !important;
}