/**
 * framework/slider — scroll-snap carousel.
 *
 * The number of slides in view is a custom property so one stylesheet serves
 * every configuration: --fw-slider-per on desktop, --fw-slider-per-md on
 * tablet, always 1 on a phone.
 */

.fw-slider {
	position: relative;
	--fw-slider-gap: 24px;
	--fw-slider-per: 1;
	--fw-slider-per-md: 1;
	--fw-slider-arrow-size: 44px;
}

.fw-slider__track {
	display: flex;
	gap: var(--fw-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* The scrollbar is the mechanism, not the interface — arrows and dots are.
	   Hidden visually; the track still keeps keyboard scrolling. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block-end: 2px;
}

.fw-slider__track::-webkit-scrollbar { display: none; }

/* Adaptive height: view.js sets an explicit height per slide. Slides must not
   stretch to fill it, or a short slide's content floats in the middle of the
   previous slide's height while the transition runs. */
.fw-slider__track--adaptive {
	align-items: flex-start;
	transition: height 0.3s ease;
	overflow-y: hidden;
}

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

.fw-slider__track:focus-visible {
	outline: 2px solid var(--fw-primary, currentColor);
	outline-offset: 4px;
}

.fw-slide {
	flex: 0 0 calc(
		(100% - (var(--fw-slider-gap) * (var(--fw-slider-per) - 1)))
		/ var(--fw-slider-per)
	);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

.fw-slide__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.fw-slide--middle .fw-slide__inner { justify-content: center; }
.fw-slide--bottom .fw-slide__inner { justify-content: flex-end; }

.fw-slide__inner > :first-child { margin-block-start: 0; }
.fw-slide__inner > :last-child  { margin-block-end: 0; }

/* --- arrows ------------------------------------------------------------ */

.fw-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--fw-slider-arrow-size);
	height: var(--fw-slider-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fw-slider-arrow-bg, rgba(255, 255, 255, 0.9));
	color: var(--fw-slider-arrow-color, #5A5A5A);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.fw-slider__arrow:hover { background: var(--fw-slider-arrow-bg-hover, #fff); }

.fw-slider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.fw-slider__arrow--prev { left: calc(var(--fw-slider-arrow-size) / -2); }
.fw-slider__arrow--next { right: calc(var(--fw-slider-arrow-size) / -2); }

/* Chevron drawn from a rotated border, so there is no icon font and no SVG
   request for something this small. */
.fw-slider__arrow span {
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.fw-slider__arrow--prev span { transform: rotate(-135deg); margin-left: 3px; }
.fw-slider__arrow--next span { transform: rotate(45deg);   margin-right: 3px; }

/* --- dots -------------------------------------------------------------- */

.fw-slider__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-block-start: 1.5rem;
}

.fw-slider__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fw-slider-dot, rgba(90, 90, 90, 0.3));
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.fw-slider__dot[aria-selected="true"] {
	background: var(--fw-slider-dot-active, var(--fw-primary, #5A5A5A));
	transform: scale(1.25);
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.fw-slide {
		flex-basis: calc(
			(100% - (var(--fw-slider-gap) * (var(--fw-slider-per-md) - 1)))
			/ var(--fw-slider-per-md)
		);
	}
}

@media (max-width: 640px) {
	.fw-slide { flex-basis: 100%; }
	/* Inset arrows: at this width there is no gutter to hang them in. */
	.fw-slider__arrow--prev { left: 4px; }
	.fw-slider__arrow--next { right: 4px; }
}

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