/* ==========================================================================
   Celli Progetti — stili di archivio e singolo progetto
   ==========================================================================

   I colori e i font non sono scritti a mano: vengono presi dalle variabili
   globali del kit di Elementor, così se il cliente cambia la palette dal
   pannello Stile globale le card lo seguono. I valori dopo la virgola sono
   solo il fallback per il caso in cui il kit non sia caricato.
   ---------------------------------------------------------------------- */

body {
	--cp-primario:  var(--e-global-color-primary, #141414);
	--cp-sfondo:    var(--e-global-color-secondary, #f0ede6);
	--cp-testo:     var(--e-global-color-text, #7a7a7a);
	--cp-bordo:     color-mix(in srgb, var(--cp-primario) 22%, transparent);
	--cp-font-tit:  var(--e-global-typography-primary-font-family, "Almarai"), sans-serif;
	--cp-font-dec:  var(--e-global-typography-cef10f5-font-family, "Antic Didone"), serif;
	--cp-font-acc:  var(--e-global-typography-accent-font-family, "Almarai"), sans-serif;
	--cp-wrap:      1280px;
	--cp-gap:       clamp(2.5rem, 6vw, 6rem);
}

/* Fallback per i browser senza color-mix (Safari < 16.2). */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	body {
		--cp-bordo: rgba(20, 20, 20, 0.22);
	}
}

.cp-main {
	background: var(--cp-sfondo);
	color: var(--cp-primario);
	padding-block: clamp(3rem, 7vw, 7rem);
}

.cp-wrap {
	width: 100%;
	max-width: var(--cp-wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* --- Intestazione ------------------------------------------------------- */

.cp-intestazione {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.cp-intestazione__overline {
	display: block;
	font-family: var(--cp-font-dec);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	color: var(--cp-primario);
	text-decoration: none;
	margin-bottom: 0.4em;
}

.cp-intestazione__sottotitolo {
	font-family: var(--cp-font-dec);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.6vw, 1.875rem);
	line-height: 1.35;
	margin: 0.35em 0 0;
}

.cp-intestazione__titolo {
	font-family: var(--cp-font-tit);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.cp-intestazione__testo {
	max-width: 60ch;
	margin-top: 1rem;
	color: var(--cp-testo);
	line-height: 1.8;
}

/* --- Filtri per tipologia ---------------------------------------------- */

.cp-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

/* Il colore del testo è scritto con un selettore a due classi più il tag
   (.cp-filtri a.cp-filtro): serve a battere il colore dei link del kit
   Elementor (.elementor-kit-15 a e a:hover). Con una classe sola vincevano
   quelli, e sulla pill attiva o al passaggio del mouse il testo diventava
   scuro su fondo scuro fino a sparire. */
.cp-filtri a.cp-filtro {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.4em;
	border: 1px solid var(--cp-bordo);
	border-radius: 999px;
	font-family: var(--cp-font-tit);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cp-primario);
	background: transparent;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cp-filtri a.cp-filtro:hover,
.cp-filtri a.cp-filtro:focus-visible,
.cp-filtri a.cp-filtro--attivo {
	background: var(--cp-primario);
	border-color: var(--cp-primario);
	color: #fff;
}

/* --- Lista delle card -------------------------------------------------- */

/* Fra le colonne serve meno aria che fra le righe: con lo stesso valore su
   entrambi gli assi le due colonne si allontanano troppo e le card smettono di
   leggersi come una coppia. */
.cp-lista {
	display: grid;
	row-gap: var(--cp-gap);
	column-gap: clamp(1.5rem, 3vw, 3.125rem);
}

.cp-lista--col-2,
.cp-lista--col-3 {
	row-gap: clamp(2.5rem, 5vw, 4.5rem);
}

.cp-lista--col-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cp-lista--col-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Il tablet tiene le due colonne: si scende a una sola sotto i 768px. */
@media (max-width: 1024px) {
	.cp-lista--col-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cp-lista--col-2,
	.cp-lista--col-3 {
		grid-template-columns: 1fr;
	}
}

/* Su due colonne la card è più stretta: il titolo scende di corpo, ma titolo e
   bottone restano sulla stessa riga. Se il titolo è talmente lungo da non
   lasciare spazio, il bottone va a capo da solo grazie al flex-wrap. */
.cp-lista--col-2 .cp-card__titolo,
.cp-lista--col-3 .cp-card__titolo {
	font-size: clamp(1.5rem, 2vw, 2rem);
}

.cp-lista--col-3 .cp-card__titolo {
	font-size: clamp(1.25rem, 1.6vw, 1.625rem);
}

/* --- Card ------------------------------------------------------------- */

.cp-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cp-card__media {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: color-mix(in srgb, var(--cp-primario) 8%, transparent);
}

/* Selettore a due classi di proposito: dentro ai template Elementor agisce
   .elementor img { height: auto }, che con una classe sola vincerebbe su questa
   regola e farebbe collassare il ritaglio 3:2. Due classi hanno specificità
   maggiore, e si evita un !important. */
.cp-card__media .cp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-card__link:hover .cp-card__img,
.cp-card__link:focus-visible .cp-card__img {
	transform: scale(1.035);
}

.cp-card__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: 1.5rem;
	row-gap: 1.25rem;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.cp-card__testo {
	min-width: 0;
}

.cp-card__overline {
	display: block;
	font-family: var(--cp-font-dec);
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	line-height: 1.3;
	margin-bottom: 0.35em;
}

.cp-card__titolo {
	font-family: var(--cp-font-tit);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
}

/* Allineati al bottone del tema: stessa tipografia (il globale "Accento" di
   Elementor, non quello dei titoli), stesso raggio e stesso padding. Prendendo
   la tipografia dalle variabili del kit e non da valori scritti a mano, se il
   cliente ritocca lo stile Accento i bottoni del plugin lo seguono insieme a
   quelli del tema.

   Colori e comportamento al passaggio del mouse restano quelli del plugin.

   Nella card il bottone è uno <span>: la card intera è già un link, un secondo
   link annidato non sarebbe HTML valido. */
.cp-card__cta,
.cp-bottone {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	flex: 0 0 auto;
	padding: 14px 36px;
	border: 1px solid var(--cp-bordo);
	border-radius: 30px;
	font-family: var(--cp-font-acc);
	font-size: var(--e-global-typography-accent-font-size, 0.8125rem);
	/* Come il bottone di Elementor: l'altezza della riga coincide con il corpo
	   del testo, cioè 13px. Scritto come rapporto e non in pixel perché il
	   corpo arriva da una variabile del kit: se cambia, la riga lo segue invece
	   di tagliare il testo. */
	line-height: 1;
	font-weight: var(--e-global-typography-accent-font-weight, 500);
	font-style: var(--e-global-typography-accent-font-style, normal);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, 0.5px);
	text-transform: var(--e-global-typography-accent-text-transform, uppercase);
	text-decoration: var(--e-global-typography-accent-text-decoration, none);
	color: var(--cp-primario);
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cp-card__link:hover .cp-card__cta,
.cp-card__link:focus-visible .cp-card__cta,
.cp-bottone:hover,
.cp-bottone:focus-visible {
	background: var(--cp-primario);
	border-color: var(--cp-primario);
	color: var(--cp-sfondo);
}

.cp-freccia {
	transition: transform 0.3s ease;
}

.cp-card__link:hover .cp-freccia,
.cp-bottone:hover .cp-freccia {
	transform: translateX(4px);
}

@media (max-width: 640px) {
	.cp-card__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

/* --- Paginazione ------------------------------------------------------- */

.cp-paginazione {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: clamp(3rem, 6vw, 5rem);
}

.cp-paginazione .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75em;
	border: 1px solid var(--cp-bordo);
	border-radius: 999px;
	font-family: var(--cp-font-tit);
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--cp-primario);
}

.cp-paginazione .page-numbers.current,
.cp-paginazione .page-numbers:hover {
	background: var(--cp-primario);
	border-color: var(--cp-primario);
	color: var(--cp-sfondo);
}

.cp-vuoto {
	color: var(--cp-testo);
	font-size: 1.125rem;
}

/* --- Singolo progetto -------------------------------------------------- */

.cp-singolo {
	padding-top: 0;
}

.cp-intestazione--progetto {
	max-width: 22ch;
}

@media (max-width: 860px) {
	.cp-intestazione--progetto {
		max-width: none;
	}
}

.cp-riassunto {
	font-family: var(--cp-font-dec);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.5;
	color: var(--cp-primario);
	margin-bottom: 1.75rem;
}

.cp-testo {
	color: var(--cp-testo);
	line-height: 1.85;
}

.cp-testo > * + * {
	margin-top: 1.25em;
}

/* Scheda tecnica.
   Le voci si impilano in verticale su tutti i dispositivi; dentro ogni voce
   etichetta e valore stanno su due colonne affiancate, separate da un filo.

   Etichetta e valore non portano tipografia propria: sono intestazioni (h6 per
   default) e prendono corpo e font dal tema, come i titoli. Qui si imposta solo
   il colore, che è ciò che distingue i due livelli di lettura, e si azzerano i
   margini che un'intestazione porta con sé. */
.cp-scheda {
	margin: 0;
}

.cp-scheda__voce {
	display: grid;
	grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 2fr);
	gap: 0.35rem 2rem;
	align-items: baseline;
	padding-block: clamp(1rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--cp-bordo);
}

.cp-scheda__voce:last-child {
	border-bottom: 1px solid var(--cp-bordo);
}

.cp-scheda__etichetta {
	margin: 0;
	color: var(--cp-testo);
}

.cp-scheda__valore {
	margin: 0;
	color: var(--cp-primario);
	overflow-wrap: break-word;
}

/* Sui telefoni più stretti la colonna dell'etichetta non ha larghezza
   sufficiente e ogni voce andrebbe a capo due volte: etichetta sopra, valore
   sotto. Le voci restano impilate come da progetto, cambia solo l'interno. */
@media (max-width: 600px) {
	.cp-scheda__voce {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* --- Galleria ---------------------------------------------------------- */

/* Galleria a masonry.
   Colonne CSS e non grid: ogni immagine tiene la propria altezza e le colonne
   si impacchettano da sole, senza JavaScript e senza sobbalzi al caricamento.
   In cambio l'ordine scorre per colonna (in alto a sinistra, poi giù) e non per
   riga. */
.cp-galleria {
	--cp-galleria-gap: clamp(0.75rem, 2vw, 1.5rem);
	columns: var(--cp-galleria-col, 3);
	column-gap: var(--cp-galleria-gap);
}

.cp-main .cp-galleria {
	margin-top: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 1024px) {
	.cp-galleria {
		columns: 2;
	}
}

@media (max-width: 600px) {
	.cp-galleria {
		columns: 1;
	}
}

.cp-galleria__voce {
	display: block;
	overflow: hidden;
	margin-bottom: var(--cp-galleria-gap);
	background: color-mix(in srgb, var(--cp-primario) 8%, transparent);
	cursor: zoom-in;
	/* Un'immagine non deve mai essere spezzata tra due colonne. */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

/* height: auto e non 100%: è il box che segue l'immagine, non il contrario.
   Due classi come sopra, per avere la meglio su .elementor img. */
.cp-galleria__voce .cp-galleria__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-galleria__voce:hover .cp-galleria__img {
	transform: scale(1.04);
}

/* --- CTA e navigazione ------------------------------------------------- */

.cp-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(3rem, 7vw, 6rem);
	padding-block: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--cp-bordo);
	border-bottom: 1px solid var(--cp-bordo);
}

.cp-cta__testo {
	font-family: var(--cp-font-dec);
	font-size: clamp(1.35rem, 3vw, 2rem);
	margin: 0;
}

.cp-nav-progetti {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.cp-nav-progetti__voce {
	text-decoration: none;
	color: var(--cp-primario);
	max-width: 20ch;
}

.cp-nav-progetti__voce--succ {
	text-align: right;
	margin-left: auto;
}

.cp-nav-progetti__etichetta {
	display: block;
	font-family: var(--cp-font-tit);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-testo);
	margin-bottom: 0.4em;
}

.cp-nav-progetti__titolo {
	font-family: var(--cp-font-tit);
	text-transform: uppercase;
	font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
	line-height: 1.25;
}

.cp-nav-progetti__voce:hover .cp-nav-progetti__titolo {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.cp-nav-progetti__tutti {
	font-family: var(--cp-font-tit);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cp-testo);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.cp-nav-progetti__tutti {
		display: none;
	}
}

.cp-correlati {
	margin-top: clamp(3.5rem, 8vw, 7rem);
}

.cp-correlati__titolo {
	font-family: var(--cp-font-tit);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.cp-correlati .cp-card__titolo {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

/* --- Lightbox --------------------------------------------------------- */

/* L'overlay resta nel DOM anche da chiuso: senza pointer-events: none e
   visibility: hidden continuerebbe a coprire la pagina, invisibile, e a
   intercettare tutti i click. */
.cp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cp-primario) 96%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* La visibilità cambia solo a dissolvenza finita. */
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.cp-lightbox {
		background: #141414;
	}
}

.cp-lightbox--aperta {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.cp-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
}

/* Controlli della lightbox.
   Selettori a due classi: il kit Elementor stila i <button> nudi
   (.elementor-kit-15 button) impostando corpo e colore della tipografia
   Accento, e con una classe sola vinceva lui — da cui i controlli piccoli e
   neri. Le icone sono SVG con misure proprie e non glifi di testo, così nessuna
   regola tipografica del tema può rimpicciolirle.

   Nessun effetto al passaggio del mouse: sono bianche e piene sempre. Resta
   solo il contorno di messa a fuoco, che serve a chi naviga da tastiera e non
   compare col mouse. */
.cp-lightbox .cp-lightbox__chiudi,
.cp-lightbox .cp-lightbox__prec,
.cp-lightbox .cp-lightbox__succ {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: #fff;
	opacity: 1;
	cursor: pointer;
	transition: none;
}

.cp-lightbox .cp-lightbox__chiudi svg,
.cp-lightbox .cp-lightbox__prec svg,
.cp-lightbox .cp-lightbox__succ svg {
	display: block;
	width: 40px;
	height: 40px;
}

.cp-lightbox .cp-lightbox__chiudi:focus-visible,
.cp-lightbox .cp-lightbox__prec:focus-visible,
.cp-lightbox .cp-lightbox__succ:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.cp-lightbox .cp-lightbox__chiudi {
	top: 1rem;
	right: 1rem;
}

.cp-lightbox .cp-lightbox__prec,
.cp-lightbox .cp-lightbox__succ {
	top: 50%;
	transform: translateY(-50%);
}

.cp-lightbox .cp-lightbox__prec {
	left: 0.75rem;
}

.cp-lightbox .cp-lightbox__succ {
	right: 0.75rem;
}

@media (max-width: 600px) {
	.cp-lightbox .cp-lightbox__chiudi,
	.cp-lightbox .cp-lightbox__prec,
	.cp-lightbox .cp-lightbox__succ {
		width: 52px;
		height: 52px;
	}

	.cp-lightbox .cp-lightbox__chiudi svg,
	.cp-lightbox .cp-lightbox__prec svg,
	.cp-lightbox .cp-lightbox__succ svg {
		width: 30px;
		height: 30px;
	}
}

.cp-lightbox .cp-lightbox__conta {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--cp-font-tit);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: #fff;
	opacity: 1;
}

body.cp-lightbox-attiva {
	overflow: hidden;
}

/* --- Link senza sottolineatura ----------------------------------------- */

/* La sottolineatura arriva dallo stile Link globale del kit Elementor
   (.elementor-kit-15 a), che vale per tutto il sito e ha specificità maggiore
   delle classi del plugin: per questo le card mostrano tipologia e titolo
   sottolineati anche se .cp-card__link dichiara text-decoration: none.

   Qui l'!important è la scelta giusta: inseguire quella regola alzando la
   specificità elemento per elemento funzionerebbe finché non si aggiunge un
   link nuovo, e l'errore si vedrebbe solo in pagina. La sottolineatura al
   passaggio del mouse sulla navigazione fra progetti continua a funzionare,
   perché è dichiarata su un elemento interno e non sul link. */
.cp-card__link,
.cp-galleria__voce,
.cp-nav-progetti__voce,
.cp-nav-progetti__tutti,
.cp-bottone,
a.cp-overline,
.cp-intestazione__overline,
.cp-scheda a {
	text-decoration: none !important;
}

/* --- Accessibilità ---------------------------------------------------- */

.cp-main a:focus-visible,
.cp-lista a:focus-visible,
.cp-filtri a:focus-visible {
	outline: 2px solid var(--cp-primario);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.cp-card__img,
	.cp-galleria__img,
	.cp-freccia,
	.cp-lightbox,
	.cp-lightbox--aperta {
		transition: none;
	}
	.cp-card__link:hover .cp-card__img,
	.cp-galleria__voce:hover .cp-galleria__img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Elementi stampati dagli shortcode dentro ai template Elementor
   --------------------------------------------------------------------------
   Qui non c'è il contenitore .cp-main a fare da contesto: questi blocchi
   devono stare in piedi da soli, dentro qualsiasi colonna del template.
   ----------------------------------------------------------------------- */

/* Titolo e sottotitolo non portano nessuna tipografia.
   Il tag scelto nello shortcode (h1, h2...) deve prendere dimensione, font e
   colore dal tema e dallo Stile globale di Elementor: se li imponessimo qui,
   cambiare la tipografia dal pannello non avrebbe effetto. Resta solo
   l'azzeramento del margine, perché nei template la spaziatura la decidono i
   contenitori. Il colore arriva dall'attributo colore="" quando serve. */
.cp-titolo,
.cp-sottotitolo {
	margin: 0;
}

/* La misura arriva dallo shortcode come variabile CSS; la classe modificatore
   viene aggiunta solo quando l'attributo dimensione_desktop è presente, così
   dove non serve la tipografia del tema non viene toccata.

   Il selettore ripete le due classi (0,2,0) per avere ragione su
   .elementor-kit-15 h1 (0,1,1), che imposta il corpo delle intestazioni per
   tutto il sito: una media query non aggiunge specificità, quindi con una
   classe sola vinceva il kit. L'!important copre il caso in cui il cliente
   imposti dal pannello anche una misura per singolo breakpoint, che Elementor
   genera con selettori più specifici. Vale solo sopra i 1025px: mobile e
   tablet restano in mano al tema. */
@media (min-width: 1025px) {
	.cp-titolo.cp-titolo--desktop {
		font-size: var(--cp-titolo-desktop) !important;
	}
}

.cp-overline {
	display: block;
	font-family: var(--cp-font-dec);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.3;
	color: var(--cp-primario);
	text-decoration: none;
}

a.cp-overline:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.cp-copertina {
	margin: 0;
}

.cp-copertina__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Nel layout predefinito la copertina fa da hero a tutta larghezza; dentro a un
   template Elementor la dimensione la decide la colonna che la contiene. */
.cp-singolo > .cp-copertina {
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.cp-singolo > .cp-copertina .cp-copertina__img {
	height: clamp(20rem, 62vh, 44rem);
	object-fit: cover;
}

/* Immagine banner.
   L'altezza è dichiarata e non dedotta dalle proporzioni: con aspect-ratio
   l'altezza è una conseguenza della larghezza, e in un contenitore da 1280px
   il 5:1 dava una fascia di soli 256px.

   clamp(220px, 28vw, 400px): 400px sopra i 1430px di viewport, poi scende in
   proporzione fino a fermarsi a 220px. Su un telefono una fascia da 400px
   occuperebbe metà schermo prima ancora di aver letto qualcosa.

   object-fit: cover è la garanzia contro le fasce vuote — il ritaglio del file
   da solo non basta, perché se l'originale è più piccolo del formato WordPress
   non lo genera e serve l'immagine intera. Selettore a due classi
   sull'immagine per avere ragione su .elementor img { height: auto }. */
.cp-banner {
	margin: 0;
	display: block;
	overflow: hidden;
	height: clamp(220px, 28vw, 400px);
	background: color-mix(in srgb, var(--cp-primario) 8%, transparent);
}

.cp-banner .cp-banner__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.cp-testo-progetto {
	max-width: 70ch;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.cp-elementor a:focus-visible {
	outline: 2px solid var(--cp-primario);
	outline-offset: 4px;
}