/* ==========================================================================
   Blocco: Testo e Immagini Sovrapposte (ctil = contenitore)
   Il layout a colonne è ora quello nativo del blocco Colonne: qui restano
   solo il wrapper e lo stile di "atterraggio" per i blocchi core al suo
   interno (Titolo, Titolo h3, Paragrafo, Bottone) per farli combaciare col
   mockup grafico originale.
   ========================================================================== */

.ctil-block {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4rem 2rem;
}
.ctil-block > div {
	margin-bottom: 0!important;
}
.ctil-block .wp-block-columns {
	align-items: center;
	gap: 6rem;
}

/* blocco per page */
.page-template-default .ctil-block h2 {
	font-family: "Gelasio";
	font-size: 44px;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: #000000;
}

.page-template-default .ctil-block h3 {
	font-family: "Gelasio";
	font-style: italic;
	color: #0E753B;
	font-size: 38px;
	line-height: 1.3;
	margin: 0 0 1.5rem;
}

.page-template-default .ctil-block p {
	color: #5E6977;
	font-family: "Gelasio";
	font-size: 26px;
	line-height: 1.6;
	max-width: 42ch;
	margin: 40px 0 30px 0;
}
/* blocco per single */
.single-progetti-sviluppo .ctil-block h2 {
	font-family: "Gelasio";
	font-size: 38px;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: #000000;
}
.single-progetti-sviluppo .ctil-block p {
	color: #000;
	font-family: "futura-pt";
	font-size: 24px;
	line-height: 1.3;
	max-width: 42ch;
	margin: 40px 0 30px 0;
}
/* Bottone: pillola nera come nel mockup */
.ctil-block .btn__project a {
	background: #000;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.05em;
	padding: 18px 40px;
	border-radius: 0;
}
.ctil-block .btn__project a:hover {
	text-decoration: underline;
	color: #fff;
}

@media (max-width: 900px) {
	.ctil-block {
		padding: 3rem 1.5rem;
	}
	.ctil-block .wp-block-columns {
		gap: 2.5rem;
	}
	
}
@media (max-width: 767px) {
	/* Colonne impilate: testo sempre sopra, immagini sempre sotto,
	   indipendentemente dall'ordine scelto nell'editor. */
	.ctil-block .wp-block-columns {
		flex-direction: column;
	}
	.ctil-block .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}
	.ctil-block .wp-block-columns > .wp-block-column:has(.ais-images) {
		order: 2;
	}
}
/* ==========================================================================
   Colonne invertite (drag & drop nel blocco Colonne nativo)
   Layout di base: testo a sinistra, immagini a destra. Se l'utente trascina
   la colonna delle immagini prima di quella del testo, la composizione a
   strati (vedi immagine-a-strati/style.css) va specchiata orizzontalmente:
   non si flippa il contenuto delle immagini (diventerebbero illeggibili/al
   contrario), si invertono solo le posizioni dei 3 livelli.
   Richiede il supporto CSS a :has() (Chrome/Edge 105+, Safari 15.4+,
   Firefox 121+).
   ========================================================================== */
.ctil-block .wp-block-columns > .wp-block-column:has(.ais-images):first-child .ais-layer-bg {
	right: auto;
	left: 0;
}

.ctil-block .wp-block-columns > .wp-block-column:has(.ais-images):first-child .ais-layer-1 {
	right: auto;
	left: 50%;
	transform: translateX(-55%);
}

.ctil-block .wp-block-columns > .wp-block-column:has(.ais-images):first-child .ais-layer-2 {
	left: auto;
	right: 0;
}