/* DETF Logobånd — hele båndet kører på CSS. Ingen scripts på forsiden. */

.detf-lb {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	width: 100%;
	--detf-lb-dur: 27s;
	--detf-lb-gap: 8px;
	--detf-lb-h: 90px;
	--detf-lb-per: 5;
	--detf-lb-per-lap: 4;
	--detf-lb-per-tab: 3;
	--detf-lb-per-mob: 2;
	--detf-lb-vis: var(--detf-lb-per);
}

.detf-lb__track {
	display: flex;
	width: max-content;
	animation: detf-lb-rul var(--detf-lb-dur) linear infinite;
	will-change: transform;
}

/* Sporet rummer to ens sæt. Halvvejs er vi tilbage ved udgangspunktet. */
@keyframes detf-lb-rul {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.detf-lb--pause:hover .detf-lb__track,
.detf-lb--pause:focus-within .detf-lb__track {
	animation-play-state: paused;
}

.detf-lb__item {
	flex: 0 0 calc(100cqw / var(--detf-lb-vis));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--detf-lb-gap) / 2);
	box-sizing: border-box;
	position: relative;
}

/* Billedet får en fast boks, ikke sin egen størrelse. Et billede, der endnu ikke
   er hentet, fylder 0x0, og så kollapser rækken — og et lazy-billede uden
   layoutstørrelse bliver aldrig hentet. Med fast højde og object-fit sker der
   heller ingen hop, når logoerne lander. */
.detf-lb__img {
	display: block;
	width: 100%;
	height: var(--detf-lb-h);
	object-fit: contain;
	object-position: center;
}

.detf-lb--graa .detf-lb__img {
	filter: grayscale(100%);
	transition: filter .25s ease;
}

.detf-lb--graa .detf-lb__item:hover .detf-lb__img {
	filter: grayscale(0);
}

.detf-lb__link {
	display: block;
	line-height: 0;
}

/* Navnet vises ved hover. Det ligger inde i båndets egen boks, fordi båndet
   klipper alt udenfor — derfor en lille bjælke i bunden frem for en boble over. */
.detf-lb__tip {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 5;
	max-width: calc(100% - 8px);
	padding: 3px 9px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .82);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}

.detf-lb__item:hover .detf-lb__tip,
.detf-lb__item:focus-within .detf-lb__tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Antal synlige logoer — samme trin som det gamle bånd. */
@media (max-width: 980px) { .detf-lb { --detf-lb-vis: var(--detf-lb-per-lap); } }
@media (max-width: 767px) { .detf-lb { --detf-lb-vis: var(--detf-lb-per-tab); } }
@media (max-width: 479px) { .detf-lb { --detf-lb-vis: var(--detf-lb-per-mob); } }

/* Browsere uden container queries får en fast bredde i stedet. */
@supports not (container-type: inline-size) {
	.detf-lb__item { flex-basis: 180px; }
}

/* Respekter systemets valg om mindre bevægelse: vis logoerne stille. */
@media (prefers-reduced-motion: reduce) {
	.detf-lb__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 16px;
	}
	.detf-lb__item[aria-hidden="true"] { display: none; }
	.detf-lb__item { flex-basis: calc(100% / var(--detf-lb-vis)); }
}