/* =================================================================
 * Menu Tiles – Varianti di «Icona a blocco»
 * Ogni variante ha anche la classe .mtl--blocco e ne eredita
 * struttura, colori (--c / --t) e regole di altezza.
 * ================================================================= */

/* ---------- 1. BLOCCO SFUMATO: gradiente diagonale e riflesso ---------- */
.mtl--blocco-sfumato.mtl--blocco .mtl-item:nth-child(8n+5) { --c: #78909c; --t: #fff; }
.mtl--blocco-sfumato.mtl--blocco .mtl-item {
	border-radius: 10px;
	background: linear-gradient(120deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 72%, #000) 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px color-mix(in srgb, var(--c) 75%, transparent);
}
.mtl--blocco-sfumato.mtl--blocco .mtl-item::before {
	content: ""; position: absolute; inset: 0 0 52% 0; pointer-events: none;
	background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0));
}
.mtl--blocco-sfumato.mtl--blocco .mtl-item:hover {
	filter: saturate(1.15) brightness(1.04);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -8px color-mix(in srgb, var(--c) 85%, transparent);
}
.mtl--blocco-sfumato.mtl--blocco .mtl-icon,
.mtl--blocco-sfumato.mtl--blocco.mtl--no-icon .mtl-body::before {
	background: rgba(255,255,255,.18); box-shadow: inset -1px 0 0 rgba(255,255,255,.25);
}
.mtl--blocco-sfumato.mtl--blocco .mtl-title { font-weight: 500; letter-spacing: .01em; }
.mtl--blocco-sfumato.mtl--blocco .mtl-item:nth-child(8n+5) .mtl-title { background: transparent; }

/* ---------- 2. BLOCCO TENUE: fondo pastello, blocco icona pieno ---------- */
.mtl--blocco-tenue.mtl--blocco .mtl-item:nth-child(8n+5) { --c: #7d8a96; --t: #fff; }
.mtl--blocco-tenue.mtl--blocco .mtl-item:nth-child(8n+3) { --c: #e0a800; --t: #fff; }
.mtl--blocco-tenue.mtl--blocco .mtl-item {
	border-radius: 8px;
	background: color-mix(in srgb, var(--c) 12%, #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
}
.mtl--blocco-tenue.mtl--blocco .mtl-item:hover {
	filter: none; transform: translateY(-1px);
	background: color-mix(in srgb, var(--c) 20%, #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--c) 80%, transparent);
}
.mtl--blocco-tenue.mtl--blocco .mtl-icon,
.mtl--blocco-tenue.mtl--blocco.mtl--no-icon .mtl-body::before {
	background: var(--c); color: var(--t); box-shadow: none;
}
.mtl--blocco-tenue.mtl--blocco .mtl-title {
	justify-content: flex-start; font-weight: 600;
	color: color-mix(in srgb, var(--c) 70%, #000);
}
.mtl--blocco-tenue.mtl--blocco .mtl-item:nth-child(8n+5) .mtl-title { background: transparent; }
.mtl--blocco-tenue.mtl--blocco.mtl--dark .mtl-item { background: color-mix(in srgb, var(--c) 22%, #1d2327); }
.mtl--blocco-tenue.mtl--blocco.mtl--dark .mtl-title { color: color-mix(in srgb, var(--c) 35%, #fff); }

/* ---------- 3. BLOCCO CON FOTO: la foto prende il posto del blocco icona ---------- */
.mtl--blocco-foto.mtl--blocco .mtl-item { min-height: 56px; border-radius: 8px; }
.mtl--blocco-foto.mtl--blocco:not(.mtl--no-image) .mtl-media {
	display: block; position: relative; flex: none; align-self: stretch;
	width: clamp(52px, calc(var(--mtx-h, 56px) * 1.3), 120px);
	height: auto !important; max-height: none !important; min-height: 0;
	margin: 0; padding: 0; border-radius: 0; overflow: hidden; aspect-ratio: auto !important;
	background: rgba(0,0,0,.14);
}
.mtl--blocco-foto.mtl--blocco:not(.mtl--no-image) .mtl-media img {
	position: absolute; inset: 0; display: block;
	width: 100% !important; height: 100% !important; max-width: none; object-fit: cover;
	border-radius: 0; margin: 0; transition: transform .4s ease;
}
.mtl--blocco-foto.mtl--blocco:not(.mtl--no-image) .mtl-media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset -4px 0 0 color-mix(in srgb, var(--c) 70%, #000);
}
.mtl--blocco-foto.mtl--blocco .mtl-item:hover .mtl-media img { transform: scale(1.08); }
.mtl--blocco-foto.mtl--blocco:not(.mtl--no-image) .mtl-icon,
.mtl--blocco-foto.mtl--blocco:not(.mtl--no-image).mtl--no-icon .mtl-body::before { display: none; }
.mtl--blocco-foto.mtl--blocco:not(.mtl--no-image) .mtl-title { justify-content: flex-start; padding-left: 16px; }

/* ---------- 4. BLOCCO COPERTINA: foto a tutto pulsante con velo di colore ---------- */
.mtl--blocco-copertina.mtl--blocco .mtl-item { --t: #fff; isolation: isolate; border-radius: 10px; }
.mtl--blocco-copertina.mtl--blocco .mtl-item:nth-child(8n+5) { --c: #455a64; }
.mtl--blocco-copertina.mtl--blocco .mtl-item:nth-child(8n+3) { --c: #c79100; }
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image) .mtl-item { min-height: 84px; }
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image) .mtl-media {
	display: block; position: absolute; inset: 0; z-index: -1;
	width: auto; height: auto !important; max-height: none !important;
	margin: 0; padding: 0; border-radius: 0; overflow: hidden; aspect-ratio: auto !important;
}
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image) .mtl-media img {
	position: absolute; inset: 0; display: block;
	width: 100% !important; height: 100% !important; max-width: none; object-fit: cover;
	border-radius: 0; margin: 0; transition: transform .5s ease;
}
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image) .mtl-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--c) 92%, #000) 0%,
		color-mix(in srgb, var(--c) 72%, transparent) 50%,
		color-mix(in srgb, var(--c) 18%, transparent) 100%);
}
.mtl--blocco-copertina.mtl--blocco .mtl-item:hover { filter: none; }
.mtl--blocco-copertina.mtl--blocco .mtl-item:hover .mtl-media img { transform: scale(1.06); }
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image) .mtl-icon,
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image).mtl--no-icon .mtl-body::before {
	background: rgba(255,255,255,.16); color: #fff;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	box-shadow: inset -1px 0 0 rgba(255,255,255,.28);
}
.mtl--blocco-copertina.mtl--blocco:not(.mtl--no-image) .mtl-title {
	justify-content: flex-start; color: #fff; font-weight: 600;
	text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.mtl--blocco-copertina.mtl--blocco .mtl-item:nth-child(8n+5) .mtl-title { background: transparent; }

/* ---------- Miniature nel selettore ---------- */
.mtl-thumb--blocco-sfumato, .mtl-thumb--blocco-tenue, .mtl-thumb--blocco-foto, .mtl-thumb--blocco-copertina {
	flex-direction: column; justify-content: center; gap: 6px; background: #fff;
}
:is(.mtl-thumb--blocco-sfumato, .mtl-thumb--blocco-tenue, .mtl-thumb--blocco-foto, .mtl-thumb--blocco-copertina) i:nth-child(n) {
	flex: none; height: 13px; border: 0; border-radius: 3px;
}
.mtl-thumb--blocco-sfumato i:nth-child(1) { background: linear-gradient(90deg, rgba(255,255,255,.3) 0 24%, transparent 24%), linear-gradient(110deg, #8bd08e, #43a047 50%, #2b6a2e); }
.mtl-thumb--blocco-sfumato i:nth-child(2) { background: linear-gradient(90deg, rgba(255,255,255,.3) 0 24%, transparent 24%), linear-gradient(110deg, #f08a95, #dc3545 50%, #8f1f2a); }
.mtl-thumb--blocco-sfumato i:nth-child(3) { background: linear-gradient(90deg, rgba(255,255,255,.3) 0 24%, transparent 24%), linear-gradient(110deg, #93adfa, #3d6ef5 50%, #213f99); }
.mtl-thumb--blocco-tenue i:nth-child(1) { background: linear-gradient(90deg, #43a047 0 24%, #e3f1e4 24%); }
.mtl-thumb--blocco-tenue i:nth-child(2) { background: linear-gradient(90deg, #dc3545 0 24%, #fae4e6 24%); }
.mtl-thumb--blocco-tenue i:nth-child(3) { background: linear-gradient(90deg, #3d6ef5 0 24%, #e5ecfe 24%); }
.mtl-thumb--blocco-foto i:nth-child(1) { background: linear-gradient(90deg, #8fb7c7 0 12%, #d9a066 12% 24%, #43a047 24%); }
.mtl-thumb--blocco-foto i:nth-child(2) { background: linear-gradient(90deg, #6b8f71 0 12%, #c9b28a 12% 24%, #dc3545 24%); }
.mtl-thumb--blocco-foto i:nth-child(3) { background: linear-gradient(90deg, #a77d5b 0 12%, #7fa4c9 12% 24%, #3d6ef5 24%); }
.mtl-thumb--blocco-copertina i:nth-child(n) { height: 15px; }
.mtl-thumb--blocco-copertina i:nth-child(1) { background: linear-gradient(90deg, #2b6a2e, rgba(67,160,71,.6) 55%, rgba(67,160,71,.1)), linear-gradient(100deg, #9cc5d6 0 40%, #d6b98c 40% 70%, #7b9e6b 70%); }
.mtl-thumb--blocco-copertina i:nth-child(2) { background: linear-gradient(90deg, #8f1f2a, rgba(220,53,69,.6) 55%, rgba(220,53,69,.1)), linear-gradient(100deg, #c9a27a 0 35%, #86a9c4 35% 75%, #5d7f61 75%); }
.mtl-thumb--blocco-copertina i:nth-child(3) { background: linear-gradient(90deg, #213f99, rgba(61,110,245,.6) 55%, rgba(61,110,245,.1)), linear-gradient(100deg, #7fa4c9 0 45%, #e0c290 45% 80%, #9a7a5a 80%); }