/**
 * Snap Carousel — Block Style
 * Accessible horizontal carousel via CSS scroll-snap
 * Compatible with all child blocks of core/group
 *
 * @package SnapCarousel
 * @since   1.0.0
 */

/* ─────────────────────────────────────────────
   Wrapper: contains nav + carousel
   ───────────────────────────────────────────── */

.snap-carousel-wrapper {
	position: relative;
	/* Space above for navigation buttons */
	padding-top: 3.5rem;
	/* Prevent is-layout-constrained from limiting width */
	max-width: none;
}

/* ─────────────────────────────────────────────
   Base: carousel container (scrollable area)
   ───────────────────────────────────────────── */

[class*="is-style-snap-carousel"] {
	/* Override Gutenberg Row layout */
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* Padding to prevent shadow clipping */
	padding-block: 0.5rem;
	padding-inline: 0.25rem;

}

[class*="is-style-snap-carousel"]::-webkit-scrollbar {
	display: none;
}

/* Focus visible for keyboard navigation — graceful degradation */
[class*="is-style-snap-carousel"]:focus {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
	border-radius: 4px;
}

[class*="is-style-snap-carousel"]:focus:not(:focus-visible) {
	outline: none;
}

[class*="is-style-snap-carousel"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ─────────────────────────────────────────────
   Items: each direct child
   ───────────────────────────────────────────── */

[class*="is-style-snap-carousel"] > :not(.snap-carousel-nav):not(.snap-carousel-live) {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* Default variant: 3 visible items + peek (≈20px of next item visible) */
.is-style-snap-carousel > :not(.snap-carousel-nav):not(.snap-carousel-live) {
	flex-basis: calc(31% - 1rem);
}

/* 1 visible item + peek */
.is-style-snap-carousel-single > :not(.snap-carousel-nav):not(.snap-carousel-live) {
	flex-basis: 92%;
}

/* 2 visible items + peek */
.is-style-snap-carousel-duo > :not(.snap-carousel-nav):not(.snap-carousel-live) {
	flex-basis: calc(47% - 0.75rem);
}

/* 4 visible items + peek */
.is-style-snap-carousel-quad > :not(.snap-carousel-nav):not(.snap-carousel-live) {
	flex-basis: calc(23.5% - 1.125rem);
}

/* ─────────────────────────────────────────────
   Gallery: exclude <figcaption> from slides
   ───────────────────────────────────────────── */

.wp-block-gallery[class*="is-style-snap-carousel"] > figcaption {
	flex-shrink: 0;
	flex-basis: 100%;
	scroll-snap-align: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0;
}

/* ─────────────────────────────────────────────
   Query Loop: override outer wrapper
   ───────────────────────────────────────────── */

.wp-block-query[class*="is-style-snap-carousel"] {
	display: block !important;
	overflow: visible !important;
}

/* ─────────────────────────────────────────────
   Query Loop: <ul> becomes the scroll container
   ───────────────────────────────────────────── */

[class*="is-style-snap-carousel"] > .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 0.5rem;
	padding-inline: 0.25rem;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

[class*="is-style-snap-carousel"] > .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* Focus visible on the <ul> scroll container */
[class*="is-style-snap-carousel"] > .wp-block-post-template:focus {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
	border-radius: 4px;
}

[class*="is-style-snap-carousel"] > .wp-block-post-template:focus:not(:focus-visible) {
	outline: none;
}

[class*="is-style-snap-carousel"] > .wp-block-post-template:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ─────────────────────────────────────────────
   Query Loop: items (<li>) sizing
   ───────────────────────────────────────────── */

[class*="is-style-snap-carousel"] > .wp-block-post-template > li {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* 3 items + peek (default) */
.is-style-snap-carousel > .wp-block-post-template > li {
	flex-basis: calc(31% - 1rem);
}

/* 1 item + peek */
.is-style-snap-carousel-single > .wp-block-post-template > li {
	flex-basis: 92%;
}

/* 2 items + peek */
.is-style-snap-carousel-duo > .wp-block-post-template > li {
	flex-basis: calc(47% - 0.75rem);
}

/* 4 items + peek */
.is-style-snap-carousel-quad > .wp-block-post-template > li {
	flex-basis: calc(23.5% - 1.125rem);
}

/* ─────────────────────────────────────────────
   Responsive: mobile adaptation
   ───────────────────────────────────────────── */

@media (max-width: 781px) {
	/* Tablet: max 2 items + peek */
	.is-style-snap-carousel > :not(.snap-carousel-nav):not(.snap-carousel-live),
	.is-style-snap-carousel-quad > :not(.snap-carousel-nav):not(.snap-carousel-live) {
		flex-basis: calc(46% - 0.75rem);
	}

	/* Query Loop: tablet */
	.is-style-snap-carousel > .wp-block-post-template > li,
	.is-style-snap-carousel-quad > .wp-block-post-template > li {
		flex-basis: calc(46% - 0.75rem);
	}
}

@media (max-width: 480px) {
	/* Mobile: 1 full-width item + peek */
	[class*="is-style-snap-carousel"] > :not(.snap-carousel-nav):not(.snap-carousel-live) {
		flex-basis: calc(88% - 0.5rem);
	}

	[class*="is-style-snap-carousel"] {
		gap: 1rem;
	}

	/* Query Loop: mobile */
	[class*="is-style-snap-carousel"] > .wp-block-post-template > li {
		flex-basis: calc(88% - 0.5rem);
	}

	[class*="is-style-snap-carousel"] > .wp-block-post-template {
		gap: 1rem;
	}
}

/* ─────────────────────────────────────────────
   Navigation buttons
   ───────────────────────────────────────────── */

.snap-carousel-nav {
	/* Positioned top-right of the wrapper, outside the overflow */
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: flex;
	gap: 0.5rem;
	z-index: 10;
}

.snap-carousel-prev,
.snap-carousel-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;  /* WCAG minimum touch target */
	height: 44px;
	padding: 0;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1a1a1a);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.snap-carousel-prev:hover,
.snap-carousel-next:hover {
	background: var(--wp--preset--color--contrast, #1a1a1a);
	color: var(--wp--preset--color--base, #fff);
}

.snap-carousel-prev:focus-visible,
.snap-carousel-next:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
}

.snap-carousel-prev:disabled,
.snap-carousel-next:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.snap-carousel-prev:disabled:hover,
.snap-carousel-next:disabled:hover {
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

/* ─────────────────────────────────────────────
   Live region (screen-reader only)
   ───────────────────────────────────────────── */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─────────────────────────────────────────────
   Reduced motion: respect user preferences
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	[class*="is-style-snap-carousel"] {
		scroll-behavior: auto;
	}

	.snap-carousel-prev,
	.snap-carousel-next {
		transition: none;
	}
}

/* ─────────────────────────────────────────────
   Images inside the carousel: prevent overflow
   ───────────────────────────────────────────── */

[class*="is-style-snap-carousel"] img {
	max-width: 100%;
	height: auto;
	display: block;
}