/**
 * Slider — front-end styles.
 * Loaded only when the block renders (block.json "style").
 */

.amnesty-slider {
	position: relative;
}

.amnesty-slider__track {
	display: flex;
	gap: var(--wp--preset--spacing--l, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.amnesty-slider__track::-webkit-scrollbar {
	display: none;
}

/* The focus ring matters here — the track is keyboard-focusable so it can be
   scrolled with arrow keys, and a focusable thing with no visible focus is
   worse than one that cannot be focused at all. */
.amnesty-slider__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--black, #1a1a1a);
	outline-offset: 2px;
}

.amnesty-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

/* The whole point of the scroll-snap approach: the display choice is one
   rule, with no width maths in JS and nothing to resynchronise on resize. */
.amnesty-slider--peek .amnesty-slider__slide {
	flex-basis: 80%;
}

@media (max-width: 600px) {
	.amnesty-slider--peek .amnesty-slider__slide {
		flex-basis: 88%;
	}
}

/* Slides are free content, but a slider only reads as a slider when every
   panel is the same shape. Normalise uploaded media to one ratio rather than
   letting a portrait photo set the height of the whole strip. Scoped to
   .wp-block-image so an inline icon or logo dropped into a slide is left
   alone — this is about the panel's lead image, not every img on the page. */
/* rocketways-images-byline wraps the image in a <span class="rw-byline"> so it
   can hang a credit off it. The span is only as wide as the image's own file,
   so the img rule below measured its 100% against 683px inside an 1836px
   slide — and a slider set to full width looked like the setting had not
   taken. Stretch the wrapper so the percentage means the slide. */
.amnesty-slider__slide .wp-block-image .rw-byline {
	display: block;
	width: 100%;
}

.amnesty-slider__slide .wp-block-image img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.amnesty-slider__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.amnesty-slider__nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--m, 1rem);
	margin-top: var(--wp--preset--spacing--m, 1rem);
}

/* Full width bleeds the track to the screen edges — that is the whole reason
   to choose it for media — but the controls must not go with it. Edge to edge
   they sat half outside the viewport, and space-between stretched a two-point
   timeline across an entire wide monitor. Pull the navigation back to the
   width the theme already uses for wide blocks, and keep the page's own
   gutter below that width so the arrows never touch the edge. */
.amnesty-slider.alignfull .amnesty-slider__nav {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, var(--wp--preset--spacing--m, 1rem));
}

.amnesty-slider__points {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.amnesty-slider__nav .amnesty-slider__points {
	flex: 1;
}

.amnesty-slider__point {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.amnesty-slider__point:focus-visible,
.amnesty-slider__prev:focus-visible,
.amnesty-slider__next:focus-visible {
	outline: 2px solid var(--wp--preset--color--black, #1a1a1a);
	outline-offset: 2px;
}

.amnesty-slider__prev,
.amnesty-slider__next {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wp--preset--color--gray-200, #e2e2e2);
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* Disabled at the ends rather than hidden: a control that vanishes moves
   everything beside it, and the timeline shifting under the cursor while you
   click along it is worse than a greyed-out arrow. aria-disabled rather than
   the disabled attribute so the button keeps its place in the tab order — see
   view.js, which refuses the click instead. */
.amnesty-slider__prev[aria-disabled="true"],
.amnesty-slider__next[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

/* Arrows only ----------------------------------------------------------- */
/* No points row to sit between, so the two arrows would clump against the
   left edge of the nav. Keep them together and centred instead — the pair is
   the whole control, not a leftover from one. */
.amnesty-slider--arrows .amnesty-slider__nav {
	justify-content: center;
}

/* Dots ------------------------------------------------------------------ */
/* Centred, unlike the timeline below: dots carry no labels and no rule, so
   spreading them edge to edge on a wide screen leaves twelve pixels of grey
   marooned at either end of an empty row. The timeline keeps space-between —
   that is what makes its rule span the full width. */
.amnesty-slider--dots .amnesty-slider__points {
	justify-content: center;
}

.amnesty-slider--dots .amnesty-slider__point {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--gray-200, #e2e2e2);
	transition: background-color .15s ease;
}

.amnesty-slider--dots .amnesty-slider__point[aria-current="true"] {
	background: var(--wp--preset--color--black, #1a1a1a);
}

/* Timeline -------------------------------------------------------------- */
/* The labels are nowrap and the items cannot shrink below them, so eight
   slides labelled "September 1961" are wider than the nav. Scroll the strip
   of points rather than the document — hidden scrollbar, like the track. */
.amnesty-slider--timeline .amnesty-slider__points {
	/* Scrolling the strip costs it a visible focus ring: a computed
	   overflow-x of auto drags overflow-y to auto with it, and the list is
	   exactly as tall as one marker, so the 2px ring at 2px offset is ink
	   overflow on every side and gets clipped — worst at the first and last
	   marker, where the sides go too. Pad the scrollport by those 4px and
	   take the same 4px straight back off as margin: the markers keep their
	   old position to the pixel, and the ring has somewhere to paint. */
	--amnesty-slider-ring: 4px;
	position: relative;
	justify-content: space-between;
	gap: 0;
	padding: var(--amnesty-slider-ring);
	margin: calc(var(--amnesty-slider-ring) * -1);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.amnesty-slider--timeline .amnesty-slider__points::-webkit-scrollbar {
	display: none;
}

/* The rule the points sit on. Drawn behind them and inset by half a point so
   it starts and ends under the first and last marker rather than past them.

   A background rather than the absolutely positioned pseudo-element this used
   to be: the list is a scroll container now, and an abs-pos child resolves
   left/right against the scrollport, so the old rule was only ever as wide as
   the visible strip and slid out from under the markers as you scrolled.
   background-attachment: local is measured against the scrollable area
   instead and scrolls with the content, which is exactly the rule's job —
   span every marker, stay under them. background-origin: content-box measures
   it from the markers rather than from the focus-ring padding above, so the
   two fixes stay independent of each other. */
.amnesty-slider--timeline .amnesty-slider__points {
	background-image: linear-gradient(
		to right,
		transparent 12px,
		var(--wp--preset--color--gray-200, #e2e2e2) 12px,
		var(--wp--preset--color--gray-200, #e2e2e2) calc(100% - 12px),
		transparent calc(100% - 12px)
	);
	background-repeat: no-repeat;
	background-position: 0 6px;
	background-size: 100% 2px;
	background-origin: content-box;
	background-attachment: local;
}

.amnesty-slider--timeline .amnesty-slider__point-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.amnesty-slider--timeline .amnesty-slider__point::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--gray-200, #e2e2e2);
	transition: background-color .15s ease;
}

.amnesty-slider--timeline .amnesty-slider__point[aria-current="true"]::before {
	background: var(--wp--preset--color--amnesty-yellow, #ff0);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--black, #1a1a1a);
}

.amnesty-slider--timeline .amnesty-slider__point-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}