/**
 * Brands carousel — shared by every page that shows the "brands we
 * service" section (home, about, …). See template-parts/sections/brands-carousel.php.
 *
 * Sizes are read off the Figma home-page frame (nodes 337:148/157 and the
 * 337:528–535 logo tiles) on its 1920px canvas.
 *
 * An infinite step-slider, not a manually-scrolled strip: JS
 * (assets/js/global.js's initStepSliders) auto-advances the track one logo
 * at a time forever with a smooth eased transform transition, and the
 * prev/next buttons step it manually. The track holds two copies of the
 * logo list so stepping past the first copy can snap invisibly back to the
 * start — see initStepSliders' own comment for the mechanics.
 *
 * 1. Shared track/viewport/item/logo/arrows
 * 2. Variant A — left-aligned eyebrow, no heading (used on the homepage)
 * 3. Variant B — centered eyebrow + heading (used on About)
 * 4. Responsive
 */

/* ============================ SHARED ============================ */
.brands-we-service {
	padding: 4rem 0;
}
.brands-we-service__container {
	max-width: var(--container-wide);
}
.brands-we-service__track-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.brands-we-service__viewport {
	overflow: hidden;
	flex: 1;
	min-width: 0;
}
.brands-we-service__track {
	display: flex;
	gap: 16px;
	width: max-content;
	transition: transform 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
	.brands-we-service__track {
		transition: none;
	}
}
.brands-we-service__item {
	flex: 0 0 155px;
	height: 118px;
	border: 1px solid var(--border-color);
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--background-color);
}
.brands-we-service__logo {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.brands-we-service__arrow {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--heading-color);
	line-height: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: color var(--transition-fast);
}
.brands-we-service__arrow svg {
	width: 100%;
	height: 100%;
}
.brands-we-service__arrow:hover {
	background: none;
	border: 0;
	color: var(--color-accent-red);
}

/* ============================ VARIANT A — LEFT-ALIGNED EYEBROW ============================ */
.brands-we-service__head {
	margin-bottom: 33px;
}

/* ============================ VARIANT B — CENTERED EYEBROW + HEADING ============================ */
.brands-we-service__head-centered {
	max-width: 720px;
	margin: 0 auto 2.5rem;
}

/* ============================ RESPONSIVE ============================ */

/* --- XS / Small Mobile --- */
@media (max-width: 575px) {
	.brands-we-service__arrow {
		display: none;
	}
}