/**
 * Page — homepage hero slider and popularity sections
 * ==========================================================================
 * Enqueued with pages/home.css on the front page only.
 *
 * Split from home.css, which was already at 556 lines against the ~250-line
 * guidance in PROJECT.md §9.3. The base hero rules stay there; this file adds
 * only what the slider and the two popularity rows need, so a site that never
 * enables a second slide pays for none of it beyond one small request.
 *
 * The track is CSS scroll-snap on purpose: it swipes on touch, paginates via
 * the dot anchors, and is fully operable **before `hero.js` loads or if it
 * never loads at all**.
 *
 * @package Preloved
 * @since   1.4.0
 * ========================================================================== */


/* ==========================================================================
   1. Slider track
   ========================================================================== */

.hero--slider { position: relative; }

.hero--slider .hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Momentum scroll on iOS without a visible bar stealing hero height. */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hero--slider .hero__track::-webkit-scrollbar { display: none; }

.hero--slider .hero__slide {
	flex: 0 0 100%;
	inline-size: 100%;
	scroll-snap-align: start;
	/* Each slide is its own positioning context for its scrim. */
	position: relative;
}

/* A single slide keeps the original, non-scrolling hero exactly as it was. */
.hero:not(.hero--slider) .hero__track { display: block; }

@media (prefers-reduced-motion: reduce) {
	.hero--slider .hero__track { scroll-behavior: auto; }
}


/* ==========================================================================
   2. Dots
   ========================================================================== */

.hero__controls {
	position: absolute;
	inset-inline: 0;
	inset-block-end: var(--pl-space-5);
	display: flex;
	justify-content: center;
	/* The track scrolls beneath; only the dots should catch a pointer. */
	pointer-events: none;
	z-index: 2;
}

.hero__dots {
	display: flex;
	gap: var(--pl-space-2);
	padding: var(--pl-space-2) var(--pl-space-3);
	background-color: rgb(20 18 15 / 35%);
	border-radius: var(--pl-radius-pill);
	/* Prefixed for Safari < 18 — see components/modals.css. */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	pointer-events: auto;
}

.hero__dot {
	display: block;
	/* 12px mark inside a 44px target (§9.5) — padding, not size. */
	inline-size: 12px;
	block-size: 12px;
	padding: 16px;
	background-clip: content-box;
	background-color: rgb(251 248 243 / 45%);
	border-radius: 50%;
	margin: -16px;
	transition: background-color var(--pl-fast) var(--pl-ease-standard);
}

.hero__dot:hover { background-color: rgb(251 248 243 / 75%); }

.hero__dot.is-active { background-color: var(--pl-paper); }

.hero__dot:focus-visible {
	outline: 2px solid var(--pl-paper);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hero__dot { transition: none; }
}

/*
 * Below 768px the copy sits under the image rather than on it (UI-LAYOUTS
 * §5.2), so the dots would land on top of the text. They move to the seam.
 */
@media (max-width: 767px) {
	.hero__controls {
		position: static;
		padding-block: var(--pl-space-4) 0;
	}

	.hero__dots { background-color: transparent; backdrop-filter: none; }

	.hero__dot { background-color: var(--pl-line); }
	.hero__dot.is-active { background-color: var(--pl-primary); }
}


/* ==========================================================================
   3. Popularity sections
   ========================================================================== */

.section--popular .section__head {
	max-inline-size: 56ch;
	margin-block-end: var(--pl-space-6);
}

.section--popular .section__text {
	margin-block: var(--pl-space-2) 0;
	color: var(--pl-text-muted);
}

/*
 * "Most loved" gets the sunken surface so two product grids in the same scroll
 * do not read as one long undifferentiated run.
 */
.section--saves {
	background-color: var(--pl-bg-sunken);
	padding-block: var(--pl-space-9);
}

.section__more { margin-block-start: var(--pl-space-6); }

/* `.link-arrow` lives in components/buttons.css. It was duplicated here, and
   this copy overrode the component from a page stylesheet. Do not re-add it. */