/*
	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
	sd_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: 3rem; /* 48px */
	--carousel-arrow-gap: var(--space-4);
}

.splide__arrows {
	display: contents;
}

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

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

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

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

/*
	---- Arrows -------------------------------------------------------------
	Shared by two different things: .splide__arrow (Splide's OWN generated
	arrows — its Arrows component builds one <svg> from options.arrowPath
	and reuses it for prev/next; no carousel block uses this today, see the
	warning below) and .carousel-arrow (the shared bring-your-own class
	Gallery's and Spotlight's own prev/next buttons use instead). One set of
	rules for both, so a future block that DOES use Splide's own generated
	arrows still gets the same look with nothing extra to write.

	48px circle (--carousel-arrow-size), 1px border, transparent fill,
	color: inherit — white on a dark section, black on a light one, the
	same --section-fg every other themed element already resolves through.
	The icon itself is a flat 20px, centered by the flex alignment above —
	no padding declared, just a smaller icon inside the same circle.

	Hover reverses it: background fills with the button's own current
	colour, and the icon swaps to the section's own background colour
	instead of currentColor — the explicit --section-fg/--section-bg pair
	(layout.css), not `background-color: currentColor`: in a rule that ALSO
	changes color, currentColor resolves to that new value too, so both
	properties would land on the same colour (e.g. white-on-white instead
	of a black arrow on a white fill).

	IMPORTANT — do not give a custom bring-your-own arrow button Splide's
	own reserved 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 early on: 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 — which
	is why Gallery's (and now Spotlight's) own buttons use .carousel-arrow
	instead, staying outside Splide's DOM contract entirely.
*/
.splide__arrow,
.carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--carousel-arrow-size);
	height: var(--carousel-arrow-size);
	border: 1px solid currentColor;
	border-radius: 50%;
	background-color: transparent;
	color: inherit;
	opacity: 1;
	transition: background-color var(--transition), color var(--transition), opacity var(--transition);

	& svg {
		width: 1.25rem; /* 20px */
		height: 1.25rem;
	}

	&:hover:not(:disabled) {
		background-color: var(--section-fg, var(--color-default-fg));
		color: var(--section-bg, var(--color-default-bg));
	}

	&: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,
.carousel-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 appends this as a direct child of .splide (assets/js/carousel.js),
	which makes it a grid item in .splide's own [prev][track][next] grid
	(above) — without its own placement it fell into the narrow "auto"
	first column, not actually centered despite margin-inline: auto (that
	only centers a grid item within ITS OWN cell, and its cell was never
	full-width to begin with). grid-column: 1 / -1 spans every column, same
	as .splide__pagination already does, so margin-inline: auto centers it
	for real. grid-row: 3 — one past .splide__pagination's own fixed
	grid-row: 2 (above) — puts it directly under the dots; hardcoded rather
	than left to auto-placement so it doesn't depend on whether arrows or
	dots actually render for a given carousel (both blocks that force
	Autoplay on, Team Carousel/Callout Carousel, always have arrows off).
	Safe even when dots: false and .splide__pagination doesn't render at
	all — the unused row simply collapses to 0 height (grid-auto-rows'
	default 'auto' sizing, with nothing in it to size against).
*/
.splide__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 1 / -1;
	grid-row: 3;
	width: 1.5rem; /* 24px */
	height: 1.5rem;
	margin-block-start: var(--space-4);
	margin-inline: auto;
	border: 1px solid var(--color-accent-bg);
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-accent-bg); /* same colour as .splide__pagination's own dots, above */
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);

	& svg {
		width: 0.75rem; /* 12px, scaled down with the button */
		height: 0.75rem;
	}

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

	/* Same reasoning as the base rule (above) — one past pagination's own
	   fixed row here (3), so it stays under the dots at this width too,
	   regardless of whether the arrows row above it is actually in use. */
	.splide__toggle {
		grid-row: 4;
	}

	/*
		Bring-your-own buttons (.carousel-arrow) have no .splide__arrows
		wrapper to become a flex box the way Splide's own generated pair
		does above — a two-column sub-grid on row 2 does the same
		side-by-side centring job instead, each button pinned toward the
		shared middle gap via justify-self. :has() scopes this to only the
		carousels actually using .carousel-arrow (Gallery, Spotlight), not
		every .splide on the page.
	*/
	.splide:has(.carousel-arrow) {
		grid-template-columns: 1fr 1fr;
	}

	.splide:has(.carousel-arrow) .splide__track {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.carousel-arrow--prev,
	.carousel-arrow--next {
		grid-row: 2;
		margin-block-start: var(--space-4);
	}

	.carousel-arrow--prev {
		grid-column: 1;
		justify-self: end;
		margin-inline-end: var(--carousel-arrow-gap);
	}

	.carousel-arrow--next {
		grid-column: 2;
		justify-self: start;
		margin-inline-start: var(--carousel-arrow-gap);
	}
}