/*
 * AtiChap shared slider.
 *
 * One horizontal collection slider, used by every section that shows a row of
 * cards wider than the viewport: the Business Profile product, portfolio and
 * article collections, and the related-posts row on a single blog post.
 *
 * The markup contract is three data attributes plus the shared classes:
 *
 *   <section data-ati-slider>
 *     <div class="ati-slider__track" data-slider-track tabindex="0" role="group" aria-label="…">
 *       …cards…
 *     </div>
 *     <div class="ati-slider__nav">
 *       <button data-slider-prev …><svg …></button>
 *       <button data-slider-next …><svg …></button>
 *     </div>
 *   </section>
 *
 * The behaviour lives in assets/js/industry.js (initSlider), which reads only
 * those data attributes and is therefore section-agnostic.
 */

/* A bare length is a definite track size, so cards past the third one overflow
 * and the strip scrolls. Wrapping this in minmax(0, …) would only cap the size
 * and let the extra cards share the row, which is what put six cards on screen.
 * Desktop shows exactly 3, tablet 2, mobile 1. */
.ati-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--ati-space-4)) / 3);
	justify-content: start;
	gap: var(--ati-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	scrollbar-width: thin;
	padding-block-end: var(--ati-space-1);
}

.ati-slider__track > * {
	scroll-snap-align: start;
	height: 100%;
}

.ati-slider__nav {
	display: flex;
	gap: var(--ati-space-2);
	margin-block-start: var(--ati-space-4);
}

.ati-slider__btn {
	flex: 0 0 auto;
}

.ati-slider__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* The registry arrow points left. In RTL the forward control ("بعدی") already
 * points the right way, so only the backward control is mirrored; in LTR it is
 * the other way round. Direction is handled here rather than with a blind
 * transform, so the accessible names and the visuals always agree. */
.ati-slider__btn--prev:dir(rtl) .ati-icon,
.ati-slider__btn--next:dir(ltr) .ati-icon {
	transform: scaleX(-1);
}

@media (max-width: 1024px) {
	.ati-slider__track {
		grid-auto-columns: calc((100% - var(--ati-space-4)) / 2);
	}
}

@media (max-width: 560px) {
	.ati-slider__track {
		grid-auto-columns: 100%;
	}
}