/*
	Spotlight — Splide with perPage: 3 and focus: 'center' (both forced in
	spotlight.php, not editor fields), so the current slide sits centered
	with a neighbour visible on each side. The size/dim effect below is
	pure CSS keyed off .is-active, the class Splide itself moves from slide
	to slide as the carousel advances — nothing here has to know which
	slide is current, and the transition on transform/opacity is what makes
	that move read as smooth and animated rather than an instant swap,
	since Splide repositions and reclasses the same slide elements rather
	than removing/recreating them.
*/

/*
	Heading left, Button right — not the shared .section-header component
	(which stacks vertically), a bespoke two-column grid instead. 1fr auto,
	not .grid-2's own even split: the heading takes whatever space the
	button doesn't need, and the button sizes to its own content rather
	than stretching across half the row. Single column, button below the
	heading, below 48em — same breakpoint every other .grid-2 use in this
	theme collapses at.
*/
.spotlight__header {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--space-4);
	margin-block-end: var(--space-7); /* Same as .section-header's own. */
}

@media (min-width: 48em) {
	.spotlight__header {
		grid-template-columns: 1fr auto;
		gap: var(--space-6);
	}
}

/* Below 48em, a tighter 32px gap to the carousel instead of the 40px used
   everywhere else. */
@media (max-width: 47.99em) {
	.spotlight__header {
		margin-block-end: var(--space-6); /* 32px */
	}
}

.spotlight__header-cta {
	margin: 0;
}

.spotlight__item-inner {
	display: block;
	color: inherit;
	text-decoration: none;
	/* 20% bigger than the previous 0.41, plus a very subtle blur (1px, not
	   the earlier 3px) — enough to read as "not the focused one" without
	   softening the image so much detail is lost. */
	transform: scale(0.49);
	filter: blur(1px);
	/* var(--transition)'s own 150ms (tokens.css) is tuned for quick hover
	   feedback, too fast to read as a deliberate, cinematic focus change
	   here — the shorthand still borrows its 'ease' timing-function, this
	   override only replaces the duration part with a slower, block-specific
	   one, same "not on the shared scale" treatment as e.g. Hero's 800px. */
	transition: transform var(--transition), filter var(--transition), opacity var(--transition);
	transition-duration: 0.5s;

	/*
		Without this, base.css's global `a:hover { color: var(--color-link-hover); }`
		(a tag selector + a pseudo-class, specificity 0,1,1) narrowly beats this
		element's own plain `color: inherit` above (a single class selector,
		0,1,0) the moment it's hovered — the caption (which sets no colour of
		its own, so it inherits this element's) would flip to
		--color-link-hover (currently black) against Spotlight's own dark
		background, reading as text vanishing rather than a hover state. This
		rule's own class + :hover (0,2,0) is what wins the tie back.
	*/
	&:hover {
		color: inherit;
	}
}

.splide__slide.is-active .spotlight__item-inner {
	transform: scale(1.15);
	filter: blur(0);
}

.spotlight__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* The dark overlay lives on the non-active state, not a fixed layer —
	   opacity is what transitions it away as a slide becomes active, same
	   transition-on-a-shared-property mechanism as the scale above. */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--color-dark-bg);
		opacity: 0.7;
		transition: opacity var(--transition);
		transition-duration: 0.5s;
	}
}

.splide__slide.is-active .spotlight__media::after {
	opacity: 0;
}

/* Only shown on the focused slide (spotlight.php's own docblock) — fades
   in with the same transition as the rest of the active-state change,
   rather than just appearing/disappearing abruptly. */
.spotlight__caption {
	display: block;
	margin-block-start: var(--space-4);
	/* 20px isn't on the --font-size-* scale (nearest are --font-size-3's
	   17px and --font-size-4's 24px) — a literal value, same "not on the
	   shared scale" treatment other one-off sizes in this theme get. */
	font-size: 1.25rem; /* 20px */
	font-weight: var(--font-weight-bold);
	text-align: center;
	opacity: 0;
	transition: opacity var(--transition);
	transition-duration: 0.5s;
}

.splide__slide.is-active .spotlight__caption {
	opacity: 1;
}

/*
	The whole slide is already one big click target (spotlight.php's own
	docblock) — this is purely a visual affordance so it reads as a link,
	not a new interaction. Only rendered in the markup when the slide
	actually has a link, and only shown here on the focused slide, same
	"only the active slide" treatment .spotlight__caption gets above (a
	link indicator on a small, blurred side slide would just be clutter).

	36px circle, 1px border, transparent fill — a smaller, single-purpose
	sibling of the shared .carousel-arrow (carousel.css), not a reuse of
	it: that class is sized/wired for carousel prev/next navigation
	specifically, not a per-slide "this links somewhere" hint. The icon
	itself is its own 16px, independent of .carousel-arrow's/
	.button--outline's own 20px arrow-to-line icon — a deliberately
	smaller mark for a smaller, secondary circle.
*/
.spotlight__link-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem; /* 36px */
	height: 2.25rem;
	margin-block-start: var(--space-5); /* 24px, below the caption */
	margin-inline: auto;
	/* --color-white (tokens.css), not a literal hex/rgb — color-mix is what
	   gets the 50%-opacity resting border from that same token rather than
	   a second, disconnected literal value. */
	border: 1px solid color-mix(in srgb, var(--color-white) 50%, transparent);
	border-radius: 50%;
	background-color: transparent;
	/* This element's own opacity is the active/inactive show-hide (below) —
	   the icon's separate 50%/100% hover fade lives on the svg itself
	   (also below), a different element, so the two don't fight. */
	opacity: 0;
	transition: opacity var(--transition), border-color var(--transition);

	& svg {
		width: 1rem; /* 16px */
		height: 1rem;
		color: var(--color-white);
		opacity: 0.5;
		transition: opacity var(--transition);
	}
}

.splide__slide.is-active .spotlight__link-indicator {
	opacity: 1;
}

/* Hover/focus anywhere on the slide (the whole thing is the <a>), not just
   on the small circle itself — matches how a real button's hover reads
   regardless of exactly where the pointer is over it. */
.spotlight__item-inner:hover .spotlight__link-indicator,
.spotlight__item-inner:focus-visible .spotlight__link-indicator {
	border-color: var(--color-white);

	& svg {
		opacity: 1;
	}
}

/*
	Splide's own core CSS sets overflow: hidden on .splide__track (needed to
	hide off-screen slides) — the active slide's own scale(1.15) transform
	(above) grows it symmetrically from center, so its caption's (and now
	the link indicator's) bottom edge ends up further down than the track's
	own unscaled height accounts for, and was getting clipped by that
	overflow boundary. Padding here doesn't change what gets hidden, just
	where that boundary sits: extra padding pushes it outward, giving the
	scaled-up slide room to grow into before hitting the edge again. Scoped
	to Spotlight's own track, not the shared carousel.css rule — no other
	carousel scales its active slide up this way, so none of them need the
	extra room.

	Bumped from 48px once the link indicator (caption + 24px margin + a
	36px circle, ~60px more content below the caption) was added below the
	caption — 48px was tuned for the caption alone and would likely clip
	the indicator on a linked slide now. Not re-verified in a real browser
	(this repo has no local PHP/rendering environment in this session) —
	check a linked slide's indicator isn't clipped and adjust further if so.
*/
.spotlight__carousel .splide__track {
	padding-block: var(--space-11); /* 96px */
}

/*
	Arrows use the shared .carousel-arrow class (assets/css/carousel.css —
	48px circle, hover-invert colours, [prev][track][next] grid placement,
	and the narrow-screen fallback), same as Gallery's own carousel mode.
	Nothing Spotlight-specific needed here.
*/

/*
	Below 30em, carousel.css's own narrow-screen fallback drops the arrows
	beneath the track instead of beside it (its own docblock — a phone
	viewport can't spare the side columns) with a 16px gap
	(margin-block-start: var(--space-4)) above them. Widened to 32px here,
	scoped to Spotlight's own section so Gallery's carousel mode — sharing
	the exact same .carousel-arrow class from that shared file — isn't
	affected too. .flex-section--spotlight .carousel-arrow beats the shared
	rule's own .carousel-arrow--prev/--next selector on specificity (two
	classes vs. one) regardless of load order.
*/
@media (max-width: 30em) {
	.flex-section--spotlight .carousel-arrow--prev,
	.flex-section--spotlight .carousel-arrow--next {
		margin-block-start: var(--space-6); /* 32px */
	}
}