/* ==========================================================================
   TRE - blocchi

   I blocchi grafici: quelli che in Elementor si applicano dal campo
   "Classi CSS" di un contenitore e ne cambiano la forma, non solo il colore.
   Crescono insieme al tema; un blocco nuovo entra qui e nella pagina di
   stile, mai soltanto dentro un sito cliente - altrimenti il prossimo che lo
   cerca non lo trova.
   ========================================================================== */

/* Il blocco "posato": una scheda che sborda sopra la fascia precedente.
   Lega due sezioni senza bisogno di una linea di separazione. */
.tre-posato {
	position: relative;
	z-index: 2;
	margin-top: -4rem;
	padding: 2rem;
	border-radius: var(--tre-raggio);
	background: var(--tre-bg);
	box-shadow: var(--tre-ombra-alta);
}

@media (max-width: 782px) {
	.tre-posato {
		margin-top: -2rem;
		padding: 1.4rem;
	}
}

/* Il riquadro con l'esempio tecnico: un blocco di codice o di dati con
   l'etichetta di che cosa sia. */
.tre-riquadro {
	margin: 1.8rem 0;
	overflow: hidden;
	border: 1px solid var(--tre-line);
	border-radius: var(--tre-raggio);
}

.tre-riquadro__titolo {
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--tre-line);
	background: var(--tre-bg-2);
	color: var(--tre-ink-3);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tre-riquadro pre {
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* La lista con il segno di spunta al posto del pallino. */
.tre-elenco {
	margin: 1.2rem 0;
	padding: 0;
	list-style: none;
}

.tre-elenco li {
	position: relative;
	margin-bottom: 0.6rem;
	padding-left: 1.75rem;
}

.tre-elenco li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--tre-accent);
	border-bottom: 2px solid var(--tre-accent);
	transform: rotate(-45deg);
}

/* Due colonne di testo affiancate, che diventano una sola sul telefono.
   Elementor sa farlo con i contenitori, ma dentro un contenuto scritto
   nell'editor classico serve una classe. */
.tre-due-colonne {
	display: grid;
	gap: 1.5rem 3rem;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}