/* Slider: cards as a grid or a Swiper track (drag only, next card peeks at the edge); tabs scroll | filter. */

.slider {
	--slider-gap: var(--system-spacing-gap-md);
	--slider-bleed: var(--system-spacing-wrapper);

	display: flex;
	flex-direction: column;
	gap: var(--system-spacing-gap-lg);
	width: 100%;
	min-width: 0;
}

.slider[data-columns="2"] { --slider-columns: 2; }
.slider[data-columns="3"] { --slider-columns: 3; }
.slider[data-columns="4"] { --slider-columns: 4; }

@container page-content (max-width: 1240px) {
	.slider[data-columns="4"] { --slider-columns: 3; }
}

@container page-content (max-width: 1024px) {
	.slider[data-columns="3"],
	.slider[data-columns="4"] { --slider-columns: 2; }
}

@media (max-width: 768px) {
	.slider[data-mobile="stack"] { --slider-columns: 1; }
	.slider[data-mobile="grid"] { --slider-columns: 2; }
}

/* ── Tabs: text + underline; the transparent border keeps the selected one from shifting the row ── */

.slider__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--system-spacing-gap-md);

	@container page-content (max-width: 1024px) {
		justify-content: center;
	}
}

.slider__tab {
	margin: 0;
	padding: 0 0 var(--system-spacing-gap-2xs);
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-weight: 500;
	color: var(--system-fg-muted);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;

	&:hover {
		color: var(--system-fg);
	}

	&[aria-selected="true"] {
		border-bottom-color: var(--system-fg-primary);
		color: var(--system-fg);
	}
}

/* ── Track ── */

.slider__track {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Swiper's auto side margins stop the column flex from stretching the viewport; it would shrink to its content. */
.slider__viewport {
	margin-inline: 0;
}

.slider__viewport:not(.swiper-initialized) > .slider__track {
	gap: var(--slider-gap);
}

.slider__item {
	display: flex;
	flex-direction: column;
	height: auto;

	& > * {
		flex: 1;
	}
}

.slider[data-layout="grid"] .slider__viewport:not(.swiper-initialized) > .slider__track {
	display: grid;
	grid-template-columns: repeat(var(--slider-columns), minmax(0, 1fr));
}

/* Swiper bleeds to the .block edges so the next card is cut by the screen, not the padding. */
.slider[data-layout="slider"] .slider__viewport,
.slider[data-mobile="slider"] .slider__viewport.swiper-initialized {
	margin-inline: calc(var(--slider-bleed) * -1);
	padding-inline: var(--slider-bleed);
}

.slider[data-layout="slider"] .slider__viewport:not(.swiper-initialized) .slider__item {
	flex-shrink: 0;
	width: calc((100% - var(--slider-gap) * var(--slider-columns)) / (var(--slider-columns) + 0.25));
}