/* ==========================================================================
   Blocco: Testo e Immagine a filo pagina (ctifb)
   - .ctifb-wrap  → fascia a tutta larghezza del viewport + colore di fondo
   - .ctifb-block → contiene il blocco Colonne nativo, diviso 50/50:
       colonna immagine → dal filo pagina fino a metà riga
       colonna testo    → contenuto allineato al container (1200px)
   La colonna immagine si riconosce con :has(.wp-block-image), così il layout
   funziona sia con l'immagine a sinistra sia a destra.
   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")
   -------------------------------------------------------------------------- */
.ctifb-wrap {
	--ctifb-container: 1200px;
	--ctifb-img-min: 480px;
	--ctifb-inner-gap: 4rem;
	/* Distanza tra il bordo del viewport e il bordo del container: è il
	   padding esterno della colonna testo. 100cqw = larghezza della fascia
	   (container query), corretta sia sul front-end che nell'editor. */
	--ctifb-gutter: max(2rem, calc((100cqw - var(--ctifb-container)) / 2 + 2rem));

	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	container-type: inline-size;
}

/* 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(.ctifb-wrap) {
	overflow-x: clip;
}

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

/* --------------------------------------------------------------------------
   Colonne 50/50 senza gap: l'immagine tocca il centro della riga
   -------------------------------------------------------------------------- */
.ctifb-block .wp-block-columns {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	margin: 0 !important;
}
.ctifb-block .wp-block-columns > .wp-block-column {
	flex: 0 0 50% !important;
	max-width: 50%;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Colonna immagine: riempie tutta la metà, dal filo pagina al centro
   -------------------------------------------------------------------------- */
.ctifb-block .wp-block-column:has(.wp-block-image) {
	position: relative;
	padding: 0;
	min-height: var(--ctifb-img-min);
}
.ctifb-block .wp-block-column .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}
.ctifb-block .wp-block-column .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ctifb-block .wp-block-column .wp-block-image figcaption {
	display: none;
}

/* Nell'editor l'immagine resta nel flusso (il blocco Immagine ha i suoi
   wrapper di resize/placeholder che non vanno posizionati in assoluto). */
.editor-styles-wrapper .ctifb-block .wp-block-column .wp-block-image {
	position: static;
}
.editor-styles-wrapper .ctifb-block .wp-block-column .wp-block-image img {
	height: var(--ctifb-img-min);
}

/* --------------------------------------------------------------------------
   Colonna testo: contenuto allineato al container
   Il lato verso il bordo pagina usa --ctifb-gutter, il lato verso il centro
   usa --ctifb-inner-gap.
   -------------------------------------------------------------------------- */
.ctifb-block .wp-block-column:not(:has(.wp-block-image)) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.ctifb-block .wp-block-column:not(:has(.wp-block-image)):first-child {
	padding-left: var(--ctifb-gutter);
	padding-right: var(--ctifb-inner-gap);
}
.ctifb-block .wp-block-column:not(:has(.wp-block-image)):last-child {
	padding-left: var(--ctifb-inner-gap);
	padding-right: var(--ctifb-gutter);
}
.ctifb-block .wp-block-column:not(:has(.wp-block-image)) > *:last-child {
	margin-bottom: 0;
}

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

@media (max-width: 900px) {
	.ctifb-wrap {
		--ctifb-inner-gap: 2.5rem;
		--ctifb-gutter: 1.5rem;
	}
}
@media (max-width: 767px) {
	/* Colonne impilate: testo sempre sopra, immagine sempre sotto, a tutta
	   larghezza (filo pagina su entrambi i lati). */
	.ctifb-block .wp-block-columns {
		flex-direction: column;
	}
	.ctifb-block .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		max-width: 100%;
		width: 100%;
	}
	.ctifb-block .wp-block-column:has(.wp-block-image) {
		order: 2;
		min-height: 300px;
	}
	.ctifb-block .wp-block-column:not(:has(.wp-block-image)):first-child,
	.ctifb-block .wp-block-column:not(:has(.wp-block-image)):last-child {
		padding: 3rem 1.5rem;
	}
}