@layer blocks {
	.blk--logos {
		position: relative;
		z-index: 2;		/* oznaka sega nad naslovnico */
	}

	.logos {
		--visible: 3;
		--cell: calc(100cqi / var(--visible));
		--label-gap: clamp(1.5rem, 1.363rem + .5825vw, 2.0625rem);    /* 24 → 33 */
		container-type: inline-size;
		display: flex;
		overflow-x: clip;
		border-block: 1px solid var(--c-line-soft);
	}

	.logos__track {
		flex: none;
		display: flex;
		margin: 0;
	}

	.logos__item {
		flex: none;
		inline-size: var(--cell);
		aspect-ratio: 1;
		border-inline-end: 1px solid var(--c-line-soft);
	}

	.logos__cell {
		position: relative;
		display: grid;
		place-items: center;
		block-size: 100%;
		outline-offset: -2px;
	}
	.logos__cell img {
		max-inline-size: 50%;
		max-block-size: 34%;
		inline-size: auto;
		block-size: auto;
		object-fit: contain;
		opacity: .3;
		transition: opacity var(--dur) var(--ease);
	}
	.logos:not(.logos--color) .logos__cell img { filter: brightness(0) invert(1); }

	/* rumen okvir */
	.logos__cell::before {
		content: "";
		position: absolute;
		inset: -1px;
		border: 1px solid var(--c-accent);
		opacity: 0;
		transition: opacity var(--dur) var(--ease);
		pointer-events: none;
	}

	/* oznaka nad celico s poševno črto do celice */
	.logos__label {
		position: absolute;
		inset-inline-start: 30%;
		inset-block-end: calc(100% + var(--label-gap));
		padding: .875em 1.75em;
		background: var(--c-accent);
		color: var(--c-on-accent);
		font-family: var(--font-cond);
		font-stretch: var(--stretch-cond);
		font-size: var(--fs-label);
		font-weight: var(--fw-regular);
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
		opacity: 0;
		translate: 0 .5rem;
		transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
		pointer-events: none;
	}
	.logos__label::after {
		content: "";
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 46%;
		inline-size: 1px;
		block-size: calc(var(--label-gap) * 1.4142);
		background: var(--c-accent);
		transform-origin: top;
		rotate: 45deg;
	}

	@media (hover: hover) {
		.logos__cell:hover img { opacity: .9; }
		.logos__cell:hover::before,
		.logos__cell:hover .logos__label { opacity: 1; translate: 0 0; }
	}
	.logos__cell:focus-visible img { opacity: .9; }
	.logos__cell:focus-visible::before,
	.logos__cell:focus-visible .logos__label { opacity: 1; translate: 0 0; }

	/* samodejno drsenje: dva enaka seznama, vsak se premakne za svojo širino */
	@media (prefers-reduced-motion: no-preference) {
		.logos--marquee .logos__track {
			animation: logos-scroll calc(var(--n) * 3s) linear infinite;
		}
		.logos--marquee:hover .logos__track,
		.logos--marquee:focus-within .logos__track {
			animation-play-state: paused;
		}
	}

	/* brez gibanja: ročno drsenje, kopija skrita */
	@media (prefers-reduced-motion: reduce) {
		.logos {
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: thin;
		}
		.logos__track[aria-hidden="true"] { display: none; }
		.logos__item { scroll-snap-align: start; }
		.logos__label { display: none; }
	}

	@keyframes logos-scroll {
		to { translate: -100% 0; }
	}

	@media (width >= 48em) {
		.logos { --visible: 5; }
	}
	@media (width >= 64em) {
		.logos { --visible: 7; }
	}
}