/* ==========================================================================
   Blocco: Testo e immagine di fondo – Full width (ctiff)
   - .ctiff-wrap  → fascia a tutta larghezza del viewport con immagine di
                    fondo (background inline dalla view)
   - .ctiff-block → container interno centrato (max-width 1200px) con il
                    blocco Colonne nativo 50/50: testo + colonna vuota
   Nota: wp-block-library è disattivato sul front-end (functions.php), quindi
   il layout flex delle colonne è definito qui per intero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper a tutta larghezza ("full bleed")
   -------------------------------------------------------------------------- */
.ctiff-wrap {
	--ctiff-min: 520px;

	position: relative;
	display: flex;
	align-items: center;
	width: 100vw;
	max-width: 100vw;
	min-height: var(--ctiff-min);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	background-color: #f0f0f0;
}

/* 100vw include la scrollbar verticale su Windows/Linux: evita la scrollbar
   orizzontale. "clip" non crea un contesto di scroll e non rompe sticky. */
body:has(.ctiff-wrap) {
	overflow-x: clip;
}

/* Nell'editor il blocco è già "align full": niente 100vw. */
.editor-styles-wrapper .ctiff-wrap {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.ctiff-placeholder {
	position: absolute;
	top: 1rem;
	right: 1rem;
	margin: 0;
	padding: 0.5rem 1rem;
	background: #fff;
	border: 2px dashed #ccc;
	color: #777;
	font-size: 0.85rem;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Container interno + colonne 50/50
   -------------------------------------------------------------------------- */
.ctiff-block {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 5rem 2rem;
	box-sizing: border-box;
}
.ctiff-block > div {
	margin-bottom: 0 !important;
}
.ctiff-block .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6rem;
	margin: 0 !important;
}
.ctiff-block .wp-block-columns > .wp-block-column {
	flex: 1 1 0 !important;
	min-width: 0;
	margin: 0;
}
.ctiff-block .wp-block-column > *:last-child {
	margin-bottom: 0;
}

/* blocco per page */
.page-template-default .ctiff-block h2 {
	font-family: "Gelasio";
	font-size: 44px;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: var(--ctiff-text, #000000);
}
.page-template-default .ctiff-block p {
	color: var(--ctiff-text, #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 .ctiff-block h2 {
	font-family: "Gelasio";
	font-size: 38px;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: var(--ctiff-text, #000000);
}
.single-progetti-sviluppo .ctiff-block p {
	color: var(--ctiff-text, #000);
	font-family: "futura-pt";
	font-size: 24px;
	line-height: 1.3;
	max-width: 42ch;
	margin: 40px 0 30px 0;
}

@media (max-width: 900px) {
	.ctiff-block {
		padding: 4rem 1.5rem;
	}
	.ctiff-block .wp-block-columns {
		gap: 2.5rem;
	}
}
@media (max-width: 767px) {
	.ctiff-wrap {
		min-height: 0;
	}
	/* Colonne impilate; la colonna vuota sparisce per non lasciare spazio. */
	.ctiff-block .wp-block-columns {
		flex-direction: column;
		align-items: stretch;
	}
	.ctiff-block .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}
	.ctiff-block .wp-block-columns > .wp-block-column:not(:has(*)) {
		display: none;
	}
}