/* =========================================================================
   EMME-CI — Sezione 09 · Clienti e certificazioni
   File: ec-clients.css
   Versione: 1.2.0
   Data: 2026-08-26
   Dipende da: ec-core.css
   Collocazione: child theme /assets/css/ec-clients.css

   IDEA
   Il carosello del sito vecchio faceva scorrere i loghi come decorazione.
   Qui diventano navigazione: griglia ferma, loghi in monocromo, e
   all'hover il logo torna a colore mentre entrano superficie e numero di
   interventi. Il clic porta all'archivio di quel committente.

   Il monocromo si ottiene con grayscale + opacità anziché con un colore
   fisso: funziona su qualsiasi logo, senza sapere com'è fatto il file.

   CHANGELOG
   1.2.0 — 2026-08-26 — Celle di chiusura per l'ultima riga incompleta.
                        Stato per le celle non cliccabili.
   1.1.0 — 2026-08-26 — Dimensioni esplicite sui loghi: gli SVG con solo
                        viewBox non hanno dimensioni intrinseche e con
                        width:auto venivano resi a zero. Aggiunta la
                        classe ec-clients--loghi-chiari per gli SVG
                        bianchi su fondo chiaro.
   1.0.0 — 2026-08-26 — Prima release.
   ========================================================================= */

:root {
	--ec-cl-cols:     5;
	--ec-cl-gap:      1px;
	--ec-cl-line:     rgba(14, 27, 43, .12);
	--ec-cl-bg:       transparent;
	--ec-cl-ink:      #0E1B2B;
	--ec-cl-ink-soft: rgba(14, 27, 43, .58);
	--ec-cl-logo-h:   2.25rem;
	--ec-cl-riposo:   .55;    /* opacità del logo a riposo */
}

/* Su sezione scura invertiamo i ruoli */
.ec-t-dark .ec-clients,
.ec-t-darker .ec-clients,
.ec-clients--su-scuro {
	--ec-cl-line:     rgba(255, 255, 255, .16);
	--ec-cl-ink:      #FFFFFF;
	--ec-cl-ink-soft: rgba(255, 255, 255, .62);
	--ec-cl-riposo:   .42;
}

/* -------------------------------------------------------------------------
   1. GRIGLIA
   Le hairline sono il fondo che traspare dai gap: una sola regola
   invece di gestire i bordi cella per cella, senza doppioni agli incroci.
   ---------------------------------------------------------------------- */

.ec-clients {
	display: grid;
	grid-template-columns: repeat(var(--ec-cl-cols), minmax(0, 1fr));
	gap: var(--ec-cl-gap);
	background: var(--ec-cl-line);
	border: 1px solid var(--ec-cl-line);
	border-radius: 2px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   2. CELLA
   ---------------------------------------------------------------------- */

.ec-clients__item {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	padding: clamp(.75rem, 2vw, 1.5rem);
	background: var(--ec-paper, #F6F5F2);
	text-decoration: none;
	color: var(--ec-cl-ink);
	overflow: hidden;
	isolation: isolate;
	transition: background-color 320ms var(--ec-ease, ease);
}

.ec-t-dark .ec-clients__item,
.ec-t-darker .ec-clients__item,
.ec-clients--su-scuro .ec-clients__item {
	background: var(--ec-ink-800, #142740);
}

/* -------------------------------------------------------------------------
   2b. CELLE DI CHIUSURA
   Con sedici clienti su cinque colonne l'ultima riga resta scoperta per
   quattro celle. Il PHP ne prepara quattro vuote e qui ne mostriamo solo
   quelle che servono al breakpoint corrente, usando il resto della
   divisione fra numero di clienti e colonne.
   ---------------------------------------------------------------------- */

.ec-clients__fill {
	display: none;
	aspect-ratio: 16 / 10;
	background: var(--ec-paper, #F6F5F2);
}

.ec-t-dark .ec-clients__fill,
.ec-t-darker .ec-clients__fill,
.ec-clients--su-scuro .ec-clients__fill {
	background: var(--ec-ink-800, #142740);
}

/* Cinque colonne: serve chiudere quando il totale non è multiplo di 5 */
.ec-clients[data-ec-clients-n$="1"] .ec-clients__fill:nth-of-type(-n+4),
.ec-clients[data-ec-clients-n$="2"] .ec-clients__fill:nth-of-type(-n+3),
.ec-clients[data-ec-clients-n$="3"] .ec-clients__fill:nth-of-type(-n+2),
.ec-clients[data-ec-clients-n$="4"] .ec-clients__fill:nth-of-type(-n+1),
.ec-clients[data-ec-clients-n$="6"] .ec-clients__fill:nth-of-type(-n+4),
.ec-clients[data-ec-clients-n$="7"] .ec-clients__fill:nth-of-type(-n+3),
.ec-clients[data-ec-clients-n$="8"] .ec-clients__fill:nth-of-type(-n+2),
.ec-clients[data-ec-clients-n$="9"] .ec-clients__fill:nth-of-type(-n+1) {
	display: block;
}

/* Cella non cliccabile: nessuna promessa di approfondimento */
.ec-clients__item:not(a) {
	cursor: default;
}

/* -------------------------------------------------------------------------
   3. LOGO
   Dimensioni esplicite e non "auto": gli SVG esportati con il solo
   viewBox non hanno dimensioni intrinseche, e con width:auto il browser
   li rende a zero. object-fit li fa stare dentro senza deformarli.
   ---------------------------------------------------------------------- */

.ec-clients__logo {
	width: 78%;
	height: var(--ec-cl-logo-h);
	max-width: 78%;
	object-fit: contain;
	object-position: center;
	display: block;
	filter: grayscale(1);
	opacity: var(--ec-cl-riposo);
	transition: opacity 320ms var(--ec-ease, ease),
	            filter 320ms var(--ec-ease, ease),
	            transform 420ms var(--ec-ease, ease);
}

/* --- Loghi chiari su fondo chiaro -------------------------------------
   Gli SVG recuperati dal sito vecchio erano usati su fondo scuro, quindi
   possono essere bianchi: su carta sparirebbero. Questa classe li porta
   a nero. Va sul contenitore, non sulle singole immagini. */

.ec-clients--loghi-chiari .ec-clients__logo {
	filter: grayscale(1) brightness(0);
}
.ec-clients--loghi-chiari .ec-clients__item:hover .ec-clients__logo,
.ec-clients--loghi-chiari .ec-clients__item:focus-visible .ec-clients__logo {
	filter: grayscale(1) brightness(0);
	opacity: 1;
}

.ec-clients--su-scuro .ec-clients__logo,
.ec-t-dark .ec-clients__logo,
.ec-t-darker .ec-clients__logo {
	/* Su fondo scuro i loghi scuri sparirebbero: li schiariamo */
	filter: grayscale(1) brightness(0) invert(1);
}

/* Ripiego quando il cliente non ha ancora il logo caricato */
.ec-clients__name {
	font-family: var(--ec-font-display, inherit);
	font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem);
	font-weight: 500;
	letter-spacing: -.01em;
	text-align: center;
	color: var(--ec-cl-ink);
	opacity: var(--ec-cl-riposo);
	transition: opacity 320ms var(--ec-ease, ease),
	            transform 420ms var(--ec-ease, ease);
}

/* -------------------------------------------------------------------------
   4. DATI IN HOVER
   Entrano dal basso, il logo si alza per far posto.
   ---------------------------------------------------------------------- */

.ec-clients__info {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: .125rem;
	padding: clamp(.625rem, 1.5vw, 1rem);
	font-family: var(--ec-font-mono, monospace);
	font-size: .6875rem;
	letter-spacing: .04em;
	color: var(--ec-cl-ink-soft);
	text-align: center;
	align-items: center;
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity 260ms var(--ec-ease, ease),
	            transform 380ms var(--ec-ease, ease);
	pointer-events: none;
}

.ec-clients__mq {
	color: var(--ec-cl-ink);
	font-size: .8125rem;
	letter-spacing: 0;
}

.ec-clients__item:hover,
.ec-clients__item:focus-visible {
	background: color-mix(in srgb, var(--ec-cl-ink) 5%, transparent);
}

.ec-clients__item:hover .ec-clients__logo,
.ec-clients__item:focus-visible .ec-clients__logo {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-.75rem);
}

.ec-clients--su-scuro .ec-clients__item:hover .ec-clients__logo,
.ec-t-dark .ec-clients__item:hover .ec-clients__logo,
.ec-t-darker .ec-clients__item:hover .ec-clients__logo {
	/* Su scuro restano chiari anche in hover: a colori sparirebbero */
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 1;
}

.ec-clients__item:hover .ec-clients__name,
.ec-clients__item:focus-visible .ec-clients__name {
	opacity: 1;
	transform: translateY(-.75rem);
}

.ec-clients__item:hover .ec-clients__info,
.ec-clients__item:focus-visible .ec-clients__info {
	opacity: 1;
	transform: translateY(0);
}

.ec-clients__item:focus-visible {
	outline: 2px solid var(--ec-blue-400, #4A6E9B);
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
   5. FASCIA CERTIFICAZIONI
   Trattata come dato tecnico e non come bollino: mono, hairline, niente
   colore. Su un'impresa con SOA OG1 IV-BIS è più credibile così.
   ---------------------------------------------------------------------- */

.ec-certs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, 2vw, 2.5rem);
	align-items: center;
	margin-top: clamp(1.5rem, 4vw, 3rem);
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--ec-cl-line);
}

.ec-certs__item {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-family: var(--ec-font-mono, monospace);
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--ec-cl-ink-soft);
	margin: 0;
}

.ec-certs__label {
	color: var(--ec-cl-ink);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .6875rem;
}

.ec-certs__sep {
	flex: 1;
	height: 1px;
	background: var(--ec-cl-line);
	min-width: 1.5rem;
}

/* -------------------------------------------------------------------------
   6. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.ec-clients { --ec-cl-cols: 4; }
}

@media (max-width: 900px) {
	.ec-clients { --ec-cl-cols: 3; }
}

@media (max-width: 600px) {
	.ec-clients {
		--ec-cl-cols: 2;
		--ec-cl-logo-h: 1.75rem;
	}
	/* Senza hover i dati sono sempre visibili, e il logo sta già alzato */
	.ec-clients__info {
		opacity: 1;
		transform: none;
	}
	.ec-clients__logo,
	.ec-clients__name {
		opacity: 1;
		transform: translateY(-.6rem);
	}
	.ec-clients__item { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------
   7. MOVIMENTO RIDOTTO
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ec-clients__logo,
	.ec-clients__name,
	.ec-clients__info {
		transition: opacity 120ms linear;
		transform: none !important;
	}
	.ec-clients__item:hover .ec-clients__logo,
	.ec-clients__item:hover .ec-clients__name {
		transform: none !important;
	}
}