/*
	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
	as_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.
	   The trailing auto is the autoplay toggle's own column, alongside next —
	   see .splide__toggle below. */
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	column-gap: var(--carousel-arrow-gap);
}

.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 ---------------------------------------------------------- */
/*
	assets/images/arrow.svg in place of Splide's own built-in generated icon.
	Splide draws its default arrow as an inline <svg> from its own arrowPath
	option, sized for a 40x40 viewBox — passing it our own path data risked
	Splide scaling it oddly against that baked-in viewBox, so it's simpler and
	more reliable to hide that generated <svg> outright (display: none below)
	and paint our own icon as a mask instead. mask-image (not a plain
	background-image) is what lets a single-colour SVG track
	--color-accent-bg, rather than being stuck at arrow.svg's own hard-coded
	fill.

	color: var(--color-accent-bg) (not just border-color) is what it looks
	like it's for text, but nothing here renders text — it's so :hover's
	border-color: currentColor below still resolves to accent instead of
	whatever this button would otherwise have inherited.
*/
.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-accent-bg);
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-accent-bg);
	opacity: 1;
	transition: background-color var(--transition), border-color var(--transition), opacity var(--transition);

	& svg {
		display: none;
	}

	&::after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		background-color: var(--color-accent-bg);
		mask-image: url("../images/arrow.svg");
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
	}

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

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

/*
	arrow.svg points right (Splide's "next" direction) — flip just the masked
	icon for "previous". 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::after {
	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;
}

/*
	The button's own box is ALWAYS the active (taller) size, with a
	border-radius that never changes — so it's never the thing being
	transformed, and never distorts. The colour comes from ::after instead,
	an absolutely-positioned rectangle (no radius of its own) that fills the
	button completely and gets clipped to the button's own rounded shape via
	overflow: hidden. That rectangle is what scales for the active state, not
	the rounded frame around it.

	This keeps the animation on transform alone (GPU-compositor, no layout
	reflow — the button's real height never changes) while still growing
	symmetrically from the centre (transform-origin defaults to the
	rectangle's own centre, and the frame it's clipped to is fixed, so
	there's nothing to visually shift). scaleY on the ROUNDED box itself
	stretched its already-rendered semicircular caps into ellipses — border-
	radius is resolved against layout dimensions before transform ever runs,
	so it can't adapt to a transform after the fact, and the button's real
	(unanimated) height is what decides how rounded the caps actually are.
*/
.splide__pagination__page {
	position: relative;
	width: 1.375rem;
	height: 0.375rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.1875rem;
	background-color: transparent;
	opacity: 0.6;
	overflow: hidden;
	transition: opacity var(--transition);
	cursor: pointer;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--color-accent-bg);
		transform: scaleY(0.5);
		transition: transform var(--transition);
	}

	&.is-active {
		opacity: 1;

		&::after {
			transform: scaleY(1);
		}
	}
}

/* ---- Autoplay toggle (WCAG pause control) ---------------------------- */
/*
	Styled and sized to match .splide__arrow exactly, and given its own
	explicit grid cell (column 4, same row as prev/track/next) so it sits
	in line with the arrows at the carousel's far right, rather than being
	left to grid auto-placement — see the .splide rule above.
*/
.splide__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 4;
	grid-row: 1;
	width: var(--carousel-arrow-size);
	height: var(--carousel-arrow-size);
	border: 1px solid var(--color-accent-bg);
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-accent-bg);
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);

	& svg {
		width: 12px;
		height: 12px;
	}

	&: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;
	}

	/* Column 4 (its desktop cell, alongside next) doesn't exist in this
	   collapsed single-column grid — give it its own row instead, same as
	   arrows and pagination above.

	   Scoped to a direct child of .splide, not just any .splide__toggle:
	   Testimonial Slider moves its toggle out into .testimonial-slider__
	   controls (a flex row, not this grid) right after mount, and this
	   margin would otherwise follow it there and throw off its vertical
	   centring alongside prev/dots/next. */
	.splide > .splide__toggle {
		grid-column: 1;
		grid-row: 4;
		justify-self: center;
		margin-block-start: var(--space-4);
	}
}