/* Home slider component
 *
 * Native scroll with scroll-snap, like the theme's slideshow. No carousel
 * library: with JavaScript off this is a snapping, scrollable row, and the
 * arrows stay hidden because nothing is there to drive them.
 */

.saqi-home-slider {
	position: relative;
	/* 4rem below, to the New Releases rule; `layout.css` zeroes the margins
	   the section and its heading would otherwise add on top, so this is the
	   whole gap. It was 2.5rem, the dev build's 49px rounded down, and the
	   slider read as part of the strip beneath it (Will, 2026-09-11). The
	   gap above is the page's, set once on `.site-main`. */
	margin-block-end: var(--wp--preset--spacing--60);
}

.saqi-home-slider__track {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.saqi-home-slider__track::-webkit-scrollbar {
	display: none;
}

.saqi-home-slider__slide {
	flex: 0 0 100%;
	/* Exactly the row's width, whatever the picture inside says. A flex item's
	   automatic minimum is its content's, and an image can claim more than the
	   row before it has loaded: a waiting slide claimed 3000px (render.php
	   says how), and every stop after it moved. */
	min-width: 0;
	scroll-snap-align: start;
	margin: 0;
}

.saqi-home-slider__link {
	display: block;
}

.saqi-home-slider__image {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The arrows: over the slide, vertically centred, 2rem in from either edge.
 * A translucent white disc under a thin chevron, so they read on any image
 * without dictating its palette; solid on hover.
 */
.saqi-home-slider__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--background) 85%, transparent);
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 150ms ease;
}

.saqi-home-slider__arrow[hidden] {
	display: none;
}

.saqi-home-slider__arrow--prev {
	left: 2rem;
}

.saqi-home-slider__arrow--next {
	right: 2rem;
}

.saqi-home-slider__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.saqi-home-slider__arrow:hover {
	background: var(--wp--preset--color--background);
}

.saqi-home-slider__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/*
 * On a phone, edge to edge and hard up under the header (Will, 2026-09-17):
 * out through `.site-main`'s gutters and through the gap it sets under the
 * header, which every other page, and this one on a wider screen, keeps. No
 * arrows either; the row swipes. They are hidden rather than never revealed,
 * so view.js still keeps the row continuous.
 */
@media (max-width: 47.9375rem) {
	.saqi-home-slider {
		margin-inline: calc(-1 * var(--saqi-gutter));
		margin-block-start: calc(-1 * var(--wp--preset--spacing--50));
	}

	.saqi-home-slider__arrow {
		display: none;
	}
}

/* Held upright, New Releases follows closer under it: 2.5rem rather than the
   4rem above (Will, 2026-09-17; 1.5rem for an hour was too close). */
@media (max-width: 47.9375rem) and (orientation: portrait) {
	.saqi-home-slider {
		margin-block-end: var(--wp--preset--spacing--50);
	}
}

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