/* =====================================================================
   DSGN Clients — parete loghi
   Una cella alta e un logo piccolo dentro: il respiro nasce da qui,
   non dallo spazio tra le celle.
   ===================================================================== */

.dsgn-c {
	--dsgn-c-cols: 4;
	--dsgn-c-gap: 0px;
	--dsgn-c-cell: 170px;
	--dsgn-c-logo-h: 40px;
	--dsgn-c-logo-w: 62%;
	--dsgn-c-radius: 20px;

	--dsgn-c-line: rgba(255, 255, 255, 0.11);
	--dsgn-c-surface: rgba(255, 255, 255, 0.04);
	--dsgn-c-surface-hover: rgba(255, 255, 255, 0.075);

	--dsgn-c-opacity: 0.7;
	--dsgn-c-opacity-hover: 1;
	--dsgn-c-speed: 45s;
	--dsgn-c-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
}

.dsgn-c *,
.dsgn-c *::before,
.dsgn-c *::after {
	box-sizing: border-box;
}

.dsgn-c__empty {
	color: rgba(255, 255, 255, 0.5);
	padding: 1.5rem 0;
}

.dsgn-c__grid {
	display: grid;
	grid-template-columns: repeat(var(--dsgn-c-cols), minmax(0, 1fr));
	gap: var(--dsgn-c-gap);
}

.dsgn-c__item {
	min-width: 0;
}

.dsgn-c__cell {
	display: grid;
	place-items: center;
	height: var(--dsgn-c-cell);
	padding: 1rem;
	text-decoration: none;
	transition: background-color 0.4s var(--dsgn-c-ease);
}

/* Il cuore della normalizzazione: stessa altezza per tutti, corretta dalla
   scala ottica del singolo marchio, e un tetto in larghezza per i loghi
   molto allungati (Sky sta a un'altezza, BTicino a una larghezza). */
.dsgn-c__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--dsgn-c-logo-h) * var(--s, 1));
	max-width: calc(var(--dsgn-c-logo-w) * var(--s, 1));
	object-fit: contain;
	opacity: var(--dsgn-c-opacity);
	transition: opacity 0.4s var(--dsgn-c-ease), filter 0.4s var(--dsgn-c-ease),
		transform 0.5s var(--dsgn-c-ease);
}

.dsgn-c__cell:hover .dsgn-c__logo {
	opacity: var(--dsgn-c-opacity-hover);
}

.dsgn-c__cell:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Monocromia: utile quando i loghi arrivano da fonti diverse. */
.dsgn-c.is-mono-white .dsgn-c__logo {
	filter: brightness(0) invert(1);
}

.dsgn-c.is-mono-black .dsgn-c__logo {
	filter: brightness(0);
}

/* Attenuazione degli altri, solo quando un logo è davvero puntato. */
.dsgn-c.is-dimmable .dsgn-c__grid:hover .dsgn-c__item:not(:hover) .dsgn-c__logo {
	opacity: calc(var(--dsgn-c-opacity) * 0.45);
}

/* ---------------------------------------------------------------------
   Ruled — filetti continui
   Bordo su container (alto e sinistra) e su ogni cella (destra e basso):
   la griglia si chiude da sola con qualunque numero di colonne.
   --------------------------------------------------------------------- */

.dsgn-c--ruled .dsgn-c__grid {
	gap: 0;
	border-top: 1px solid var(--dsgn-c-line);
	border-left: 1px solid var(--dsgn-c-line);
}

.dsgn-c--ruled .dsgn-c__item {
	border-right: 1px solid var(--dsgn-c-line);
	border-bottom: 1px solid var(--dsgn-c-line);
}

.dsgn-c--ruled .dsgn-c__cell:hover {
	background: var(--dsgn-c-surface-hover);
}

/* ---------------------------------------------------------------------
   Cards — coerente con la griglia dei progetti
   --------------------------------------------------------------------- */

.dsgn-c--cards {
	--dsgn-c-gap: 12px;
}

.dsgn-c--cards .dsgn-c__cell {
	background: var(--dsgn-c-surface);
	border: 1px solid var(--dsgn-c-line);
	border-radius: var(--dsgn-c-radius);
	transition: background-color 0.4s var(--dsgn-c-ease), border-color 0.4s var(--dsgn-c-ease),
		transform 0.45s var(--dsgn-c-ease);
}

.dsgn-c--cards .dsgn-c__cell:hover {
	background: var(--dsgn-c-surface-hover);
	border-color: rgba(255, 255, 255, 0.28);
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------------
   Plain — nessuna linea, solo aria
   --------------------------------------------------------------------- */

.dsgn-c--plain {
	--dsgn-c-gap: 24px;
}

.dsgn-c--plain .dsgn-c__cell {
	border-radius: var(--dsgn-c-radius);
}

.dsgn-c--plain .dsgn-c__cell:hover .dsgn-c__logo {
	transform: translateY(-3px);
}

/* ---------------------------------------------------------------------
   Marquee — nastro continuo
   --------------------------------------------------------------------- */

.dsgn-c__marquee {
	overflow: hidden;
}

.dsgn-c.has-fade .dsgn-c__marquee {
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.dsgn-c__track {
	display: flex;
	width: max-content;
	animation: dsgn-c-scroll var(--dsgn-c-speed) linear infinite;
}

.dsgn-c.is-rtl .dsgn-c__track {
	animation-direction: reverse;
}

.dsgn-c.is-pausable .dsgn-c__marquee:hover .dsgn-c__track {
	animation-play-state: paused;
}

.dsgn-c__clone {
	display: flex;
}

.dsgn-c--marquee .dsgn-c__item {
	flex: 0 0 auto;
}

.dsgn-c--marquee .dsgn-c__cell {
	height: calc(var(--dsgn-c-cell) * 0.75);
	padding-inline: clamp(1.5rem, 4vw, 3.5rem);
}

.dsgn-c--marquee .dsgn-c__logo {
	max-width: none;
}

@keyframes dsgn-c-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------------------
   Responsive e accessibilità
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
	.dsgn-c {
		--dsgn-c-radius: 16px;
	}

	.dsgn-c--cards {
		--dsgn-c-gap: 8px;
	}

	.dsgn-c--plain {
		--dsgn-c-gap: 12px;
	}

	.dsgn-c__cell {
		padding: 0.75rem;
	}
}

@media (hover: none) {
	.dsgn-c__logo {
		opacity: var(--dsgn-c-opacity-hover);
	}

	.dsgn-c.is-dimmable .dsgn-c__grid:hover .dsgn-c__item:not(:hover) .dsgn-c__logo {
		opacity: var(--dsgn-c-opacity-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dsgn-c__track {
		animation: none;
	}

	.dsgn-c__clone {
		display: none;
	}

	.dsgn-c--marquee .dsgn-c__track {
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}

	.dsgn-c *,
	.dsgn-c *::before,
	.dsgn-c *::after {
		transition-duration: 0.01ms !important;
	}
}