/*!
 * Client Logo Slider — frontend.
 *
 * Every rule here is static and cached once site-wide. A slider adds only custom
 * properties (see Frontend\StyleBuilder), which is the one mechanism that makes a
 * value both per-instance and per-breakpoint without a rule set per slider.
 *
 * Base resets sit inside :where() so a site's own CSS overrides them with a plain
 * class and never needs !important. There is no !important in this file.
 */

:where(.cls-slider) {
	/* Fallbacks, so the component is presentable before any instance CSS loads. */
	--cls-cols: 4;
	--cls-rows: 2;
	--cls-pages: 1;
	--cls-index: 0;
	--cls-gap-x: 24px;
	--cls-gap-y: 24px;
	--cls-cell-h: 90px;
	--cls-cell-pad: 8px;
	--cls-max-w: 1200px;
	--cls-fit: contain;
	--cls-opacity: 1;
	--cls-opacity-h: 1;
	--cls-gray: 0;
	--cls-gray-h: 0;
	--cls-scale-h: 1;
	--cls-fx: 200ms;
	--cls-duration: 450ms;
	--cls-ease: cubic-bezier(.22, .61, .36, 1);

	--cls-nav-size: 44px;
	--cls-nav-icon: 20px;
	--cls-nav-stroke: 2;
	--cls-nav-radius: 50%;
	--cls-nav-offset: 10px;
	--cls-nav-color: #1f2328;
	--cls-nav-bg: #ffffff;
	--cls-nav-border: #e6e6e6;
	--cls-nav-color-h: #ffffff;
	--cls-nav-bg-h: #1f2328;

	--cls-dot-size: 8px;
	--cls-dot-active-w: 22px;
	--cls-dot-gap: 8px;
	--cls-dot-margin: 22px;
	--cls-dot-radius: 999px;
	--cls-dot-color: #d3d7dc;
	--cls-dot-active: #1f2328;
	--cls-dot-hover: #b0b7bf;

	box-sizing: border-box;
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--cls-max-w);
	margin-inline: auto;
}

:where(.cls-slider) *,
:where(.cls-slider) *::before,
:where(.cls-slider) *::after {
	box-sizing: border-box;
}

.cls-slider--align-left { margin-inline: 0 auto; }
.cls-slider--align-right { margin-inline: auto 0; }

/* ------------------------------------------------------------------ viewport */

.cls-slider__viewport {
	overflow: hidden;
}

/*
 * Pages are exactly one viewport wide with no gap between them, so the track is
 * pageCount viewports across and one step is 100% / pageCount of the track.
 * Both numbers are custom properties, which means navigating writes one property
 * and reads nothing — no measurement, no layout thrash, no resize handler.
 */
.cls-slider__track {
	display: flex;
	will-change: transform;
	transition: transform var(--cls-duration) var(--cls-ease);
	transform: translateX(calc(var(--cls-index) * -100% / var(--cls-pages)));
}

[dir="rtl"] .cls-slider__track {
	transform: translateX(calc(var(--cls-index) * 100% / var(--cls-pages)));
}

.cls-slider__page {
	flex: 0 0 100%;
	min-inline-size: 100%;
	display: grid;
	grid-template-columns: repeat(var(--cls-cols), minmax(0, 1fr));
	column-gap: var(--cls-gap-x);
	row-gap: var(--cls-gap-y);
	align-content: start;
}

/* ---------------------------------------------------------------------- cell */

.cls-slider__cell {
	block-size: var(--cls-cell-h);
	padding: var(--cls-cell-pad);
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 0;
}

.cls-slider__link {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	text-decoration: none;
}

.cls-slider__img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: var(--cls-fit);
	display: block;
	opacity: var(--cls-opacity);
	filter: grayscale(var(--cls-gray));
	transition:
		opacity var(--cls-fx) ease,
		filter var(--cls-fx) ease,
		transform var(--cls-fx) ease;
}

.cls-slider__cell:hover .cls-slider__img,
.cls-slider__link:focus-visible .cls-slider__img {
	opacity: var(--cls-opacity-h);
	filter: grayscale(var(--cls-gray-h));
	transform: scale(var(--cls-scale-h));
}

.cls-slider__link:focus-visible {
	outline: 2px solid var(--cls-nav-bg-h);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ controls */

.cls-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-block-start: var(--cls-dot-margin);
}

/*
 * Themes routinely style every bare <button> — Divi, Salient and Astra all do —
 * so each property is neutralised explicitly rather than hoping for the best.
 */
:where(.cls-slider) button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	line-height: 1;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	min-block-size: 0;
	block-size: auto;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
}

.cls-slider__nav {
	flex: none;
	inline-size: var(--cls-nav-size);
	block-size: var(--cls-nav-size);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cls-nav-color);
	background: var(--cls-nav-bg);
	border: 1px solid var(--cls-nav-border);
	border-radius: var(--cls-nav-radius);
	transition:
		color var(--cls-fx) ease,
		background-color var(--cls-fx) ease,
		border-color var(--cls-fx) ease,
		opacity var(--cls-fx) ease;
}

.cls-slider__nav:hover {
	color: var(--cls-nav-color-h);
	background: var(--cls-nav-bg-h);
	border-color: var(--cls-nav-bg-h);
}

.cls-slider__nav:focus-visible,
.cls-slider__dot:focus-visible,
.cls-slider__pause:focus-visible {
	outline: 2px solid var(--cls-nav-bg-h);
	outline-offset: 2px;
}

.cls-slider__nav[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

.cls-slider__nav[aria-disabled="true"]:hover {
	color: var(--cls-nav-color);
	background: var(--cls-nav-bg);
	border-color: var(--cls-nav-border);
}

.cls-slider__icon {
	inline-size: var(--cls-nav-icon);
	block-size: var(--cls-nav-icon);
	display: block;
}

[dir="rtl"] .cls-slider__icon {
	transform: scaleX(-1);
}

/* Arrows beside the grid rather than under it. */
.cls-slider--nav-outside .cls-slider__viewport,
.cls-slider--nav-inside .cls-slider__viewport {
	margin-inline: 0;
}

.cls-slider--nav-outside {
	padding-inline: calc(var(--cls-nav-size) + var(--cls-nav-offset));
}

.cls-slider--nav-outside .cls-slider__nav,
.cls-slider--nav-inside .cls-slider__nav {
	position: absolute;
	inset-block-start: calc(
		(var(--cls-rows) * var(--cls-cell-h) + (var(--cls-rows) - 1) * var(--cls-gap-y)) / 2
	);
	transform: translateY(-50%);
	z-index: 2;
}

.cls-slider--nav-outside .cls-slider__nav--prev { inset-inline-start: 0; }
.cls-slider--nav-outside .cls-slider__nav--next { inset-inline-end: 0; }
.cls-slider--nav-inside .cls-slider__nav--prev { inset-inline-start: var(--cls-nav-offset); }
.cls-slider--nav-inside .cls-slider__nav--next { inset-inline-end: var(--cls-nav-offset); }

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

.cls-slider__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cls-dot-gap);
}

.cls-slider--dots-above .cls-slider__dots {
	margin-block-end: var(--cls-dot-margin);
}

.cls-slider__dot {
	position: relative;
	inline-size: var(--cls-dot-size);
	block-size: var(--cls-dot-size);
	border-radius: var(--cls-dot-radius);
	background: var(--cls-dot-color);
	transition:
		background-color var(--cls-fx) ease,
		inline-size var(--cls-fx) ease;
}

/*
 * The dots are the fallback control — and the only one on mobile when the arrows
 * are hidden — so they carry a 26px hit area regardless of how small they look.
 * WCAG 2.5.8 asks for 24.
 */
.cls-slider__dot::after {
	content: "";
	position: absolute;
	inset: 50% 50%;
	inline-size: 26px;
	block-size: 26px;
	transform: translate(-50%, -50%);
}

.cls-slider__dot:hover {
	background: var(--cls-dot-hover);
}

.cls-slider__dot[aria-current="true"] {
	background: var(--cls-dot-active);
	inline-size: var(--cls-dot-active-w);
}

/* -------------------------------------------------------------- pause button */

.cls-slider__pause {
	flex: none;
	inline-size: var(--cls-nav-size);
	block-size: var(--cls-nav-size);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cls-nav-color);
	border-radius: var(--cls-nav-radius);
}

.cls-slider__pause-icon {
	inline-size: 10px;
	block-size: 12px;
	border-inline: 3px solid currentColor;
}

.cls-slider__pause[data-cls-playing="false"] .cls-slider__pause-icon {
	inline-size: 0;
	block-size: 0;
	border: 6px solid transparent;
	border-inline-start: 10px solid currentColor;
}

/* ------------------------------------------------------------------- status */

.cls-slider__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cls-slider__notice {
	padding: 12px 16px;
	border: 1px dashed currentColor;
	opacity: .7;
	font-size: .9em;
}

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

@media (max-width: 782px) {
	/*
	 * Decision D-1: arrows off below 783px returns about 22% of the width to the
	 * logos. The dots stay — the sanitiser guarantees it — so the slider is still
	 * reachable by keyboard, and swipe covers the pointer case.
	 */
	.cls-slider--nav-hide-mobile .cls-slider__nav {
		display: none;
	}

	.cls-slider--nav-hide-mobile.cls-slider--nav-outside {
		padding-inline: 0;
	}
}

/* ----------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.cls-slider__track,
	.cls-slider__img,
	.cls-slider__nav,
	.cls-slider__dot {
		transition: none;
	}

	.cls-slider__cell:hover .cls-slider__img {
		transform: none;
	}
}