/**
 * Component: Hero slider
 * Usage: template-parts/hero-slider.php, wired up by js/hero-slider.js.
 * Crossfade carousel, no dependency — [data-active] controls visibility.
 * .hero-slider__viewport holds just the image; .hero-slider__controls
 * (prev arrow / dots / next arrow) sits below it, pulled to the full
 * width of the image — never overlaid on top of it.
 */

.hero-slider__viewport {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-paper-dim);
}

.hero-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1200ms ease;
	/* Opacity alone doesn't stop a hidden slide from being clicked —
	   all 5 stack at the same position, and without this, whichever one
	   is last in the DOM always intercepts clicks (it paints on top),
	   regardless of which slide is actually visible. */
	pointer-events: none;
}

.hero-slider__slide[data-active] {
	opacity: 1;
	pointer-events: auto;
}

.hero-slider__slide a {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Autoplay progress bar (js/hero-slider.js) — a single fill div whose
 * width is driven by a CSS animation, not JS-computed percentages, so
 * pausing on hover/focus is frame-accurate: animation-play-state:
 * paused freezes it exactly where it is, and running resumes from that
 * same point (matching the JS timer, which tracks real remaining time
 * rather than restarting the full duration on every pause).
 */
.hero-slider__timer-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgb(255 255 255 / 25%);
	z-index: 1;
}

.hero-slider__timer-bar-fill {
	height: 100%;
	width: 0%;
	background: var(--color-primary);
	animation-name: hero-slider-progress;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes hero-slider-progress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

/*
 * Optional per-slide overlay (header + text), set via the Homepage Hero
 * Slider meta box — see inc/meta-boxes.php/template-parts/hero-slider.php.
 * Only rendered when a slide actually has one filled in, so most slides
 * (image-only, matching the old site) are unaffected.
 *
 * A solid/blurred panel, not just a gradient wash — a gradient alone
 * reads fine against a dark photo but can lose the text entirely against
 * a light one (e.g. the book-cover slide), so the caption needs its own
 * legible surface regardless of what's under it.
 */
.hero-slider__caption {
	position: absolute;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-4);
	max-width: 28rem;
	padding: var(--space-3) var(--space-4);
	background: rgb(28 27 25 / 50%);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: var(--shadow-raised);
	color: #fff;
}

/* Matches the rest of the site's headings (sans, bold, balanced line
   wrap) — see base.css's h1-h6 rule — rather than a one-off style.
   Clamped to 2 lines, same reasoning as .card__excerpt below: this is
   free-text admin input with no length limit, and the slide's fixed
   16:9 aspect ratio leaves little vertical room on narrow screens. */
.hero-slider__caption-header {
	font-family: var(--font-sans);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-heading);
	font-weight: 700;
	color: #fff;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Matches the site's body-copy paragraph style (serif, see base.css's
   p rule, and .card__excerpt) rather than the sans-serif heading font.
   Same 2-line clamp reasoning as the header above. */
.hero-slider__caption-content {
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	color: rgb(255 255 255 / 85%);
	margin: var(--space-1) 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Matches the site's unified mobile threshold (nav.css, article-layout.css,
   content.css). The 16:9 slide is short in absolute px at this width, so
   the caption needs to take up less of it. */
@media (max-width: 40rem) {
	.hero-slider__caption {
		left: var(--space-3);
		right: var(--space-3);
		bottom: var(--space-3);
		padding: var(--space-2) var(--space-3);
	}

	.hero-slider__caption-content {
		font-size: var(--font-size-sm);
	}
}

.hero-slider__controls {
	margin-top: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero-slider__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-paper);
	color: var(--color-ink);
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base);
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
	background: var(--color-primary);
	color: var(--color-paper);
}

.hero-slider__arrow svg {
	width: 1rem;
	height: 1rem;
}

.hero-slider__dots {
	display: flex;
	gap: var(--space-2);
}

.hero-slider__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-border);
	padding: 0;
	cursor: pointer;
	transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.hero-slider__dot[aria-current] {
	background: var(--color-primary);
	border-color: var(--color-primary);
	/*
	 * A ring outside the dot's own box, not a border/size change — a
	 * thicker border or bigger dot would shift the gap to its neighbors
	 * (the row is a flex gap layout). box-shadow paints outside the box
	 * without affecting layout at all. Needed once --color-border got
	 * darker for contrast reasons — the active dot's green stopped
	 * standing out clearly against the now-more-visible inactive ones.
	 */
	box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 3px var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider__slide,
	.hero-slider__arrow,
	.hero-slider__dot {
		transition: none;
	}

	/* Autoplay is off under reduced motion (see hero-slider.js) — the
	   bar would otherwise sit frozen at 0%, implying a stalled timer. */
	.hero-slider__timer-bar {
		display: none;
	}
}