/**
 * lbai-slider.css — THE single stylesheet for the ONE shared homepage slider engine.
 *
 * Pairs with assets/js/lbai-slider.js (Swiper 11) and inc/class-slider-settings.php.
 * Every homepage slider (listing rows, locations, providers, testimonials, advertisements)
 * uses the .lbai-hslider container + these controls — one CSS module, no per-section slider CSS.
 *
 * Only slider MECHANICS + controls live here. Card visuals stay in listing-card.css; section
 * headers reuse the shared .lbai-hp-head layout. No homepage redesign.
 */

/* ── Standardized section header extras ──────────────────────────────────
   The shared header layout (.lbai-hp-head: title LEFT, "View All" RIGHT) is defined once in
   home.css. These two rules only add the optional subtitle column so sections that carry a
   subtitle (Browse by Location, Featured Providers) keep the SAME header layout, spacing and
   right-alignment as every other section — no per-section header CSS. */
.lbai-hp-head__titlewrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lbai-hp-head__sub { margin: 0; color: var(--text-secondary, #64748b); font-size: 14px; }

/* ── Slider container ────────────────────────────────────────────────────── */
.lbai-hslider {
	position: relative;
	width: 100%;
	/* Swiper drives slide widths/translation; keep overflow clipped to the row. */
	overflow: hidden;
}

/* Graceful pre-init / no-JS fallback: show slides as a horizontal scroll-snap row so the
   section is never broken or collapsed before Swiper initializes (or if JS fails). */
.lbai-hslider:not(.swiper-initialized) > .swiper-wrapper {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.lbai-hslider:not(.swiper-initialized) > .swiper-wrapper::-webkit-scrollbar { display: none; }
.lbai-hslider:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: clamp(240px, 78%, 320px);
}

/* Slides stretch to equal height so cards align; the card fills the slide. */
.lbai-hslider .swiper-slide {
	height: auto;
	display: flex;
}
.lbai-hslider .swiper-slide > * {
	width: 100%;
}

/* The shared listing card (.lbai-card) carries its own scroll-snap rail sizing
   (flex-basis 66% / 260px) for NON-slider contexts. Inside the shared engine the SLIDE width is
   backend-controlled, so neutralize the card's own basis here only — the card's visual styling in
   listing-card.css is untouched, and category/search/dashboard rails keep their original sizing. */
.lbai-hslider .swiper-slide > .lbai-card {
	flex: 1 1 auto;
	max-width: none;
}

/* ── Navigation arrows (globally controlled; hidden on touch/mobile) ──────── */
.lbai-hslider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--border-color, #e5e7eb);
	background: var(--card-bg, #fff);
	color: var(--text-primary, #0f172a);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
	transition: opacity .2s ease, background .2s ease, transform .2s ease;
	-webkit-user-select: none;
	user-select: none;
}
.lbai-hslider__nav:hover { background: var(--light-gray, #f1f5f9); }
.lbai-hslider__nav svg { width: 18px; height: 18px; pointer-events: none; }
.lbai-hslider__nav--prev { left: 6px; }
.lbai-hslider__nav--next { right: 6px; }
.lbai-hslider__nav.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}
/* Arrows are a pointer affordance only — touch devices swipe/drag instead. */
@media (max-width: 768px) {
	.lbai-hslider__nav { display: none; }
}

/* ── Pagination dots (globally controlled) ───────────────────────────────── */
.lbai-hslider__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
}
.lbai-hslider__dots .swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--border-color, #cbd5e1);
	opacity: 1;
	transition: width .25s ease, background .25s ease;
}
.lbai-hslider__dots .swiper-pagination-bullet-active {
	width: 20px;
	background: var(--primary-color, #6366f1);
}

/* ── Autoplay progress indicator (advertisement sliders) ─────────────────── */
.lbai-hslider__progress {
	position: relative;
	height: 3px;
	margin-top: 12px;
	border-radius: 999px;
	background: var(--border-color, #e5e7eb);
	overflow: hidden;
}
.lbai-hslider__progress-bar {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform: scaleX(var(--lbai-progress, 0));
	background: var(--primary-color, #6366f1);
	transition: transform .1s linear;
}

/* ── Advertisement slider: single full-width banner ──────────────────────── */
.lbai-hslider--ads .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--card-radius, 14px);
}

/* Respect reduced-motion: the engine also disables autoplay via JS. */
@media (prefers-reduced-motion: reduce) {
	.lbai-hslider__progress-bar { transition: none; }
}