/*
 * Slider variation of core/group — frontend styles.
 * Pairs with splide-core.min.css (loaded first).
 *
 * splide-core.min.css ships NO arrow/dot styling, so everything you see below
 * is bespoke. Splide's JS injects the arrow/pagination HTML into the slider
 * root as siblings of .splide__track — they're always there when arrows/dots
 * are enabled; this file just makes them visible.
 */

.wp-block-group.is-slider {
	padding-right: 0;
	position: relative;
}

.wp-block-group.alignfull:has(.splide) {
	overflow: clip;
}

/* Let slides overflow the track so they bleed off the right edge. */
.wp-block-group.is-slider .splide__track {
	overflow: visible;
}

.wp-block-group.is-slider .splide__slide {
	height: auto;
}

/* ── Arrows ──────────────────────────────────────── */

/* Pulled out of flow; sits above the track, right-aligned. */
.wp-block-group.is-slider .splide__arrows {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: calc(100% + 1.5rem);
	display: flex;
	gap: 0.5rem;
}

.wp-block-group.is-slider .splide__arrow {
	appearance: none;
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	font: inherit;
	padding: 0;
	cursor: pointer;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}

.wp-block-group.is-slider .splide__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.wp-block-group.is-slider .splide__arrow svg {
	inline-size: 1rem;
	block-size: 1rem;
	fill: currentColor;
}

/* Splide ships a single right-pointing glyph for both arrows; flip prev. */
.wp-block-group.is-slider .splide__arrow--prev svg {
	transform: rotate(180deg);
}

/* ── Pagination (dots) ───────────────────────────── */

.wp-block-group.is-slider .splide__pagination {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.wp-block-group.is-slider .splide__pagination li {
	display: inline-flex;
	margin: 0;
}

.wp-block-group.is-slider .splide__pagination__page {
	appearance: none;
	background: currentColor;
	border: 0;
	padding: 0;
	cursor: pointer;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	opacity: 0.3;
	transition: opacity 0.15s ease;
}

.wp-block-group.is-slider .splide__pagination__page.is-active,
.wp-block-group.is-slider .splide__pagination__page:hover,
.wp-block-group.is-slider .splide__pagination__page:focus-visible {
	opacity: 1;
}