/*
 * Varumärkesbanner — elements/brands.php.
 *
 * Bredd, bakgrund och avstånd hör till sektionen elementet placeras i; här
 * bor bara bandet självt.
 */

.nws-brands {
	--nws-brands-speed: 45s;
	--nws-brands-logo-height: 32px;
	--nws-brands-gap: 5.6rem;
}

.nws-brands__viewport {
	display: flex;
	overflow: hidden;
	gap: var(--nws-brands-gap);
	/* Loggorna tonar ut i kanterna i stället för att kapas tvärt. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.nws-brands__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--nws-brands-gap);
}

.nws-brands__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* Gemensam höjd på rutan, inte på loggan: symboler och ordmärken hamnar
	   på samma mittlinje även när de får olika höjd av regeln nedan. */
	height: var(--nws-brands-logo-height);
	line-height: 0;
}

.nws-brands__logo {
	/*
	 * Måtten sätts per logga i PHP (elements/brands.php) — de skiljer sig åt,
	 * eftersom loggorna skalas till samma upplevda yta och inte samma höjd.
	 * Här bor bara det som är gemensamt.
	 */
	object-fit: contain;
	display: block;
	max-width: 100%;
}

/* ---- Band som glider -------------------------------------------------- */

.nws-brands--marquee .nws-brands__track {
	animation: nws-brands-scroll var(--nws-brands-speed) linear infinite;
	/* Spåret och kopian ligger kant i kant: när det första flyttat hela sin
	   bredd står kopian exakt där det började, och varvet går ihop utan hopp. */
	padding-right: var(--nws-brands-gap);
}

@keyframes nws-brands-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* ---- Rad utan rörelse -------------------------------------------------- */

.nws-brands--row .nws-brands__viewport {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.nws-brands--row .nws-brands__track {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 3.2rem;
}

/* ---- Dämpade loggor ---------------------------------------------------- */

.nws-brands--muted .nws-brands__logo {
	/* Lätt dämpning — gråskala men nästan full styrka, så raden läses som
	   en rad loggor och inte som ett utgråat, inaktivt band. */
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.nws-brands--muted .nws-brands__item:hover .nws-brands__logo,
.nws-brands--muted .nws-brands__item:focus-visible .nws-brands__logo {
	filter: grayscale(0);
	opacity: 1;
}

/* ---- Mindre rörelse ----------------------------------------------------
 *
 * En oändlig slinga är precis den rörelse inställningen finns för. Bandet
 * blir en rad som går att bläddra i stället.
 */

@media (prefers-reduced-motion: reduce) {
	.nws-brands--marquee .nws-brands__track {
		animation: none;
	}

	.nws-brands--marquee .nws-brands__track--clone {
		display: none;
	}

	.nws-brands--marquee .nws-brands__viewport {
		overflow-x: auto;
	}
}

@media (max-width: 767px) {
	.nws-brands {
		--nws-brands-gap: 3.2rem;
	}
}