/*
 * Query Loop slider — block style `is-style-faves-slider` on core/query.
 *
 * The track is the post template itself, turned into a scroll-snap row. That
 * keeps the block's own markup untouched: no wrappers are injected, so the
 * layout still works if the stylesheet never loads (it just falls back to the
 * block's normal grid).
 */

.wp-block-query.is-style-faves-slider {
	position: relative;
}

.wp-block-query.is-style-faves-slider .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--faves-slider-gap, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* Hide the scrollbar — the arrows and swipe are the affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wp-block-query.is-style-faves-slider .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* Slides. One and a bit visible on mobile so it reads as scrollable. */
.wp-block-query.is-style-faves-slider .wp-block-post-template > li {
	flex: 0 0 var(--faves-slider-basis, 78%);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.wp-block-query.is-style-faves-slider .wp-block-post-template > li {
		--faves-slider-basis: calc((100% - var(--faves-slider-gap, 1rem)) / 2);
	}
}

@media (min-width: 900px) {
	.wp-block-query.is-style-faves-slider .wp-block-post-template > li {
		--faves-slider-basis: calc((100% - 2 * var(--faves-slider-gap, 1rem)) / 3);
	}
}

@media (min-width: 1200px) {
	.wp-block-query.is-style-faves-slider .wp-block-post-template > li {
		--faves-slider-basis: calc((100% - 3 * var(--faves-slider-gap, 1rem)) / 4);
	}
}

/*
 * Arrows. Injected by query-slider.js using WooCommerce's own
 * `wc-block-next-previous-buttons__*` markup, so the project styling that
 * already dresses the product-carousel arrows applies here too.
 *
 * Only placement and hit area live here — appearance is deliberately left to
 * the theme/ymir, so there is one arrow design in the project rather than two.
 */
.faves-slider-nav {
	position: absolute;
	top: var(--faves-slider-nav-top, 40%);
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--faves-slider-nav-size, 2.5rem);
	height: var(--faves-slider-nav-size, 2.5rem);
	padding: 0;
	cursor: pointer;
}

.faves-slider-nav--prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.faves-slider-nav--next {
	right: 0;
	transform: translate(50%, -50%);
}

.faves-slider-nav[aria-disabled="true"] {
	cursor: default;
}

/* Respect reduced-motion: snap instead of animating the scroll. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-query.is-style-faves-slider .wp-block-post-template {
		scroll-behavior: auto;
	}
}