/*
	Carousel theme layer — styles Splide's controls to match the theme.

	Enqueued (with splide-core.min.css) only on pages with a carousel block; see
	ns_enqueue_block_assets() in inc/enqueue.php. splide-core handles the track
	mechanics; this file only restyles the arrows, pagination dots, and autoplay
	toggle from design tokens — no raw values.
*/

/*
	Layout. splide-core is minimal — it styles nothing — so we own control
	placement entirely.

	The arrows sit in their OWN grid columns, beside the track rather than on top
	of it: [prev] [track] [next], with the pagination spanning a row beneath.

	This was previously an overlay, with the arrows on the track's own grid cell
	and each block insetting its slide content to keep clear of them. That looked
	right at rest but broke in motion: the track still spanned the full width, so
	a slide mid-transition travelled underneath the buttons. Giving the arrows
	real columns means the track is physically narrower than the carousel and a
	slide can never pass beneath an arrow, at rest or mid-transition.

	Splide wraps both buttons in a single .splide__arrows div, which would other-
	wise occupy one cell and put us back where we started. `display: contents` on
	that wrapper drops its box and promotes the two buttons to direct grid items,
	so each can take its own column. The div carries no semantics, so nothing is
	lost from the accessibility tree.
*/
.splide {
	display: grid;
	/* minmax(0, 1fr) not 1fr: a grid item's default min-width is auto, which
	   would let the track refuse to shrink below its content and overflow. */
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--carousel-arrow-gap);

	--carousel-arrow-size: 2.75rem;
	--carousel-arrow-gap: var(--space-4);
}

.splide__arrows {
	display: contents;
}

.splide__arrow--prev {
	grid-column: 1;
	grid-row: 1;
}

.splide__track {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.splide__arrow--next {
	grid-column: 3;
	grid-row: 1;
}

.splide__pagination {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* ---- Arrows ---------------------------------------------------------- */
.splide__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--carousel-arrow-size);
	height: var(--carousel-arrow-size);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background-color: transparent;
	color: inherit;
	opacity: 1;
	transition: background-color var(--transition), border-color var(--transition), opacity var(--transition);

	& svg {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	&:hover:not(:disabled) {
		background-color: var(--color-surface);
		border-color: currentColor;
	}

	&:disabled {
		opacity: 0.35;
		cursor: default;
	}
}

/*
	Splide generates the SAME path for both arrows — its Arrows component builds
	one <svg> from options.arrowPath and reuses it for prev and next — and relies
	on its full theme stylesheet to mirror the "previous" one. We load
	splide-core.min.css, which styles nothing, so without this both arrows point
	right. Anything this theme leaves unstyled, Splide will not style for us.

	Written flat rather than nested as `&--prev`: that is Sass-style selector
	concatenation, which native CSS nesting does not support. It would parse as
	nothing and fail silently. (`&:hover` and `&.is-active` above are fine — those
	are real compound selectors.)
*/
.splide__arrow--prev svg {
	transform: scaleX(-1);
}

/* ---- Pagination (dots) ----------------------------------------------- */
.splide__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-block-start: var(--space-5);
	padding: 0;
}

.splide__pagination__page {
	width: 0.6rem;
	height: 0.6rem;
	margin: 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: transparent;
	opacity: 0.6;
	transition: background-color var(--transition), transform var(--transition), opacity var(--transition);

	&.is-active {
		background-color: currentColor;
		opacity: 1;
		transform: scale(1.15);
	}
}

/* ---- Autoplay toggle (WCAG pause control) ---------------------------- */
.splide__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-block-start: var(--space-4);
	margin-inline: auto;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);

	& svg {
		width: 1rem;
		height: 1rem;
	}

	&:hover {
		background-color: var(--color-surface);
		border-color: currentColor;
	}
}

/* Show the pause icon while playing (Splide adds .is-active), the play icon
   while paused. */
.splide__toggle__pause {
	display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
	display: inline-flex;
}

.splide__toggle.is-active .splide__toggle__play {
	display: none;
}

/* ---- Narrow screens --------------------------------------------------- */
/*
	Below 30em, side columns cost too much: two arrows plus gaps eat roughly a
	third of a phone viewport, leaving the slide too narrow to read. So the grid
	collapses to one column and the arrows move to their own row beneath the
	track, above the dots.

	.splide__arrows becomes a real flex box again here — it needs its own box to
	group and centre the two buttons, which is exactly what `display: contents`
	gave up on wider screens.

	Arrows move rather than hide: they're a more discoverable control than a
	swipe, and dots alone give no "next" affordance.
*/
@media (max-width: 30em) {
	.splide {
		grid-template-columns: minmax(0, 1fr);
	}

	.splide__track {
		grid-column: 1;
		grid-row: 1;
	}

	.splide__arrows {
		display: flex;
		grid-column: 1;
		grid-row: 2;
		justify-content: center;
		gap: var(--space-4);
		margin-block-start: var(--space-4);
	}

	.splide__pagination {
		grid-column: 1;
		grid-row: 3;
	}
}