/*
	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
	rd_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 -------------------------------------------------------------
	This styles Splide's OWN generated arrows (its Arrows component builds
	one <svg> from options.arrowPath and reuses it for prev/next, mirroring
	"previous" via the transform rule below since splide-core.min.css styles
	nothing). No carousel block uses this today — see gallery.css for why.

	IMPORTANT — do not give a custom bring-your-own arrow button these exact
	class names (.splide__arrow / .splide__arrow--prev / .splide__arrow--next).
	Splide's Arrows component auto-adopts any element already carrying them
	as a pre-supplied custom arrow — regardless of the `arrows` option value
	— and assumes it's inside a real .splide__arrows wrapper it can toggle
	display on. Gallery's own buttons hit exactly this: rendered without that
	wrapper, Splide's mount() tried to hide a wrapper that didn't exist and
	threw, aborting mount entirely and leaving the whole carousel stuck
	invisible in its pre-init state. Gallery's buttons now use their own
	gallery__arrow* classes (blocks/gallery/gallery.css) specifically to stay
	outside this contract.
*/
.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;
	}
}

/*
	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 `&:disabled` 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;
	color: var(--color-accent-bg);
}

.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;
	}
}