/* Header slider. The slide itself is the theme's own .y-hero__media, so its
   click-through/focus affordance comes from the theme — this file adds the
   track, the dots, swipe/autoplay support, and the responsive picture sizing
   below.

   2026-09-08 rebuild — every slide's image now carries its own copy baked in
   (headline and CTA included), so there is no text/button layer to style
   here at all. Each slide serves one of two uploads through a <picture>
   (mobile below 768px, desktop from 768px up) and reserves exactly the right
   amount of space for whichever one will show *before* it loads: the
   aspect-ratio custom properties below (--yps-ar-m / --yps-ar-d) are set
   inline per slide from that image's own real dimensions (see
   class-yps-slider.php::render_slides()), so the box is never a guess and
   never needs a fixed-height band or a letterbox fill color — the image is
   simply shown whole, at full width, auto height. */

.yps-slider { position: relative; overflow: hidden; }

.yps-slider__track {
	display: flex;
	align-items: flex-start; /* never stretch a slide taller than its own aspect ratio */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
.yps-slider__track::-webkit-scrollbar { display: none; }

.yps-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	position: relative;
	display: block;
}

/* The theme styles .y-hero__media as a stacked, cross-fading layer:
   position:absolute; inset:0; opacity:0 — visible only with .is-active, and
   sized by a .y-hero__viewport wrapper. This slider uses neither: its slides
   are flex children of the track and there is no .is-active class, so those
   theme rules collapse the track to zero height and fade every slide out.
   Every rule below is prefixed with the extra .yps-slider ancestor class so
   it wins on specificity regardless of the two stylesheets' load order. */
.yps-slider .yps-slider__slide {
	position: relative;
	inset: auto;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition: none;
	height: auto;
}

/* ---- the picture: full width, height derived from the real image ratio ---- */
.yps-slider .yps-slider__picture {
	display: block;
	width: 100%;
	aspect-ratio: var(--yps-ar-m, 1000 / 750);
}
@media (min-width: 768px) and (max-width: 767px) {
	.yps-slider .yps-slider__picture { aspect-ratio: var(--yps-ar-d, 2000 / 750); }
}
.yps-slider .yps-slider__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* the aspect-ratio box already matches the image, this is only a safety net */
}

/* One slide needs no swipe affordance at all. */
.yps-slider[data-count="1"] .yps-slider__track { overflow-x: hidden; }

/* ---- dots ---- */
.yps-slider__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
	z-index: 2;
	pointer-events: none;
}
.yps-slider__dot {
	pointer-events: auto;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: width .2s, background .2s;
}
.yps-slider__dot.is-active {
	width: 22px;
	background: #fff;
}
.yps-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The dots sit over a photo whose brightness is unknown, so they get their own
   scrim rather than assuming the image is dark enough near the bottom. */
.yps-slider[data-count]:not([data-count="1"])::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 40px;
	background: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 1;
}

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