/*
 * Calendario Eventi
 * Nessuno sfondo, nessuna larghezza fissa: colori, dimensioni e pesi sono
 * variabili CSS dichiarate sul contenitore radice .kb-cal e sovrascrivibili
 * da Elementor.
 */

.kb-cal {

	/* --- Font ---------------------------------------------------------
	 * "acumin-variable" e' gia caricato globalmente dal sito (Adobe Fonts):
	 * il plugin non lo carica, lo usa e basta.
	 * ------------------------------------------------------------------ */
	--kb-cal-font: "acumin-variable", sans-serif;

	/* --- Nome del mese ------------------------------------------------ */
	--kb-cal-colore-mese: #ffffff;
	--kb-cal-dim-mese: 60px;
	--kb-cal-peso-mese: 500;

	/* --- Intestazioni Lun-Dom ----------------------------------------- */
	--kb-cal-colore-nome-giorno: #ffffff;
	--kb-cal-dim-nome-giorno: 13px;
	--kb-cal-peso-nome-giorno: 600;
	--kb-cal-opacita-nome-giorno: 0.6;

	/* --- Numero del giorno --------------------------------------------- */
	--kb-cal-colore-numero: #ffffff;
	--kb-cal-colore-numero-fuori-mese: #3b4b35;
	--kb-cal-dim-numero: 36px;
	--kb-cal-peso-numero: 400;

	/* --- Giorno di oggi ------------------------------------------------ */
	--kb-cal-colore-oggi-sfondo: #f86036;
	--kb-cal-colore-oggi-testo: #ffffff;
	--kb-cal-dim-cerchio-oggi: 1.6em; /* Relativo a --kb-cal-dim-numero. */

	/* --- Evento --------------------------------------------------------- */
	--kb-cal-colore-titolo: #ffffff;
	--kb-cal-dim-titolo: 22px;
	--kb-cal-peso-titolo: 600;
	--kb-cal-righe-titolo: 2;

	--kb-cal-colore-ora: #ffffff;
	--kb-cal-dim-ora: 15px;
	--kb-cal-peso-ora: 600;

	/* --- Anteprima in hover (solo desktop) ------------------------------ */
	--kb-cal-gap-anteprima: 10px; /* Immagine -> orario. */

	/* Tempi e curve dell'apertura. Non c'e' nessuna "transition" nel CSS:
	   l'animazione la esegue il JavaScript, che legge queste quattro
	   variabili. Sovrascriverle da Elementor cambia l'animazione senza
	   toccare il codice, e metterle a 0ms la spegne. */
	--kb-cal-anteprima-entrata: 250ms;
	--kb-cal-anteprima-uscita: 150ms;
	--kb-cal-anteprima-curva-entrata: ease-out;
	--kb-cal-anteprima-curva-uscita: ease-in;

	/* --- Frecce prev/next ----------------------------------------------- */
	--kb-cal-colore-nav: #ffffff;
	--kb-cal-colore-nav-hover: #f86036;
	--kb-cal-dim-nav: 32px;
	--kb-cal-transizione: 0.15s ease;

	/* --- Spaziature e proporzioni ---------------------------------------- */
	--kb-cal-gap-colonne: 0.75rem;
	--kb-cal-gap-righe: 1.5rem;
	--kb-cal-spazio-numero-eventi: 30px; /* Numero del giorno -> primo evento. */
	--kb-cal-gap-eventi: 30px;           /* Fra un evento e il successivo. */
	--kb-cal-altezza-cella: 13rem;
	--kb-cal-spazio-intestazione: 1.5rem;
	--kb-cal-colore-bordo: transparent;

	font-family: var(--kb-cal-font);

	/* Larghezza: sempre il 100% del contenitore, nessun max-width, nessun
	   margin auto. "display: block" e' esplicito perche' il contenitore non
	   erediti un display inline/inline-block dal tema o da Elementor, che lo
	   farebbe restringere sul contenuto. "min-width: 0" serve quando .kb-cal
	   finisce come figlio di un flex/grid container (i widget Elementor lo
	   sono): senza, il min-width:auto di default impedirebbe di restringersi
	   e i titoli lunghi allargherebbero il blocco. */
	display: block;
	width: 100%;
	min-width: 0;
}

/* Box model coerente, limitato al calendario: nessun reset globale. */
.kb-cal,
.kb-cal *,
.kb-cal *::before,
.kb-cal *::after {
	box-sizing: border-box;
}

/* Stato transitorio durante il caricamento AJAX di un mese. */
.kb-cal.is-caricamento {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* ------------------------------------------------------------------ */
/* Intestazione: frecce + nome del mese                                */
/* ------------------------------------------------------------------ */

.kb-cal__intestazione {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--kb-cal-spazio-intestazione);
}

.kb-cal__titolo-mese {
	order: 2;
	font-size: var(--kb-cal-dim-mese);
	font-weight: var(--kb-cal-peso-mese);
	color: var(--kb-cal-colore-mese);
	line-height: 1.1;
}

.kb-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--kb-cal-colore-nav);
	font-size: var(--kb-cal-dim-nav);
	text-decoration: none;
	line-height: 1;
	padding: 0.15em 0.25em;
	border-radius: 0.2em;
	transition: color var(--kb-cal-transizione);
}

/* Freccia sinistra prima del titolo, freccia destra dopo. */
.kb-cal__nav--prec {
	order: 1;
}

.kb-cal__nav--succ {
	order: 3;
}

/* Stesso stato per il mouse e per il focus da tastiera. */
.kb-cal__nav:hover,
.kb-cal__nav:focus-visible {
	color: var(--kb-cal-colore-nav-hover);
}

/* La freccia e' un SVG inline dimensionato in em, quindi segue
   --kb-cal-dim-nav, e riempito con currentColor, quindi segue
   --kb-cal-colore-nav. */
.kb-cal__freccia {
	display: block;
	width: 1em;
	height: 1em;
	flex: none;
}

/* ------------------------------------------------------------------ */
/* Griglia mensile: 7 colonne, lunedi -> domenica                      */
/* ------------------------------------------------------------------ */

.kb-cal__griglia {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	column-gap: var(--kb-cal-gap-colonne);
	row-gap: var(--kb-cal-gap-righe);
}

.kb-cal__giorno-nome {
	font-size: var(--kb-cal-dim-nome-giorno);
	font-weight: var(--kb-cal-peso-nome-giorno);
	color: var(--kb-cal-colore-nome-giorno);
	opacity: var(--kb-cal-opacita-nome-giorno);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-bottom: 0.25rem;
}

.kb-cal__giorno-nome abbr {
	text-decoration: none;
	border-bottom: 0;
	cursor: default;
}

.kb-cal__cella {
	/* Trasparente per scelta: lo sfondo lo gestisce Elementor. */
	min-height: var(--kb-cal-altezza-cella);
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* gap invece di margin: si applica solo FRA numero e blocco eventi, quindi
	   l'ultimo evento non aggiunge spazio in fondo alla cella. Nei giorni senza
	   eventi il blocco .kb-cal__eventi non viene proprio stampato, quindi il
	   gap non produce spazio a vuoto. */
	gap: var(--kb-cal-spazio-numero-eventi);
	border-top: 1px solid var(--kb-cal-colore-bordo);
}

/* ------------------------------------------------------------------ */
/* Numero del giorno                                                   */
/* ------------------------------------------------------------------ */

/*
 * Contenitore del numero. E' un flex container (non un blocco con testo
 * inline) cosi il cerchio di "oggi" non viene posizionato per baseline.
 * min-height pari al diametro del cerchio: l'altezza della riga e' identica
 * in tutte le celle, con o senza cerchio, e non serve nessun margine negativo
 * di compensazione.
 */
.kb-cal__numero {
	display: flex;
	align-items: center;
	min-height: var(--kb-cal-dim-cerchio-oggi);
	font-size: var(--kb-cal-dim-numero);
	font-weight: var(--kb-cal-peso-numero);
	color: var(--kb-cal-colore-numero);
	line-height: 1;
}

/* Etichetta estesa ("Lunedi 03 Luglio"): serve solo al layout mobile. */
.kb-cal__numero-etichetta {
	display: none;
}

/* Spillover: stessa dimensione e peso, cambia solo il colore. */
.kb-cal__cella--fuori-mese .kb-cal__numero {
	color: var(--kb-cal-colore-numero-fuori-mese);
}

/*
 * Oggi: cerchio pieno arancione con numero in bianco.
 *
 * "display: flex" (non inline-flex): il cerchio esce dal flusso inline e non
 * viene piu allineato alla baseline del testo, che era la causa dello
 * scentramento verticale.
 *
 * Il centramento e' affidato solo ad align-items/justify-content, mai al
 * line-height. width = height + aspect-ratio: 1 garantiscono un quadrato
 * vero, e "flex: none" impedisce che il numero a due cifre lo deformi in
 * pillola. padding/letter-spacing/text-indent azzerati perche' un valore
 * asimmetrico ereditato sposterebbe il numero dentro il cerchio.
 */
.kb-cal__cella--oggi .kb-cal__numero-cifra {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--kb-cal-dim-cerchio-oggi);
	height: var(--kb-cal-dim-cerchio-oggi);
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 0;
	line-height: 1;
	letter-spacing: normal;
	text-indent: 0;
	background-color: var(--kb-cal-colore-oggi-sfondo);
	color: var(--kb-cal-colore-oggi-testo);
}

/* ------------------------------------------------------------------ */
/* Eventi dentro la cella                                              */
/* ------------------------------------------------------------------ */

.kb-cal__eventi {
	display: flex;
	flex-direction: column;
	gap: var(--kb-cal-gap-eventi);
}

.kb-cal__evento {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kb-cal__evento:hover .kb-cal__evento-titolo,
.kb-cal__evento:focus-visible .kb-cal__evento-titolo {
	text-decoration: underline;
}

.kb-cal__evento-ora {
	display: block;
	font-size: var(--kb-cal-dim-ora);
	font-weight: var(--kb-cal-peso-ora);
	color: var(--kb-cal-colore-ora);
	line-height: 1.2;
	margin-bottom: 0.25em;
}

/* Massimo N righe, poi taglio con i puntini di sospensione. */
.kb-cal__evento-titolo {
	display: -webkit-box;
	-webkit-line-clamp: var(--kb-cal-righe-titolo);
	line-clamp: var(--kb-cal-righe-titolo);
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--kb-cal-dim-titolo);
	font-weight: var(--kb-cal-peso-titolo);
	color: var(--kb-cal-colore-titolo);
	line-height: 1.25;
}

/* ------------------------------------------------------------------ */
/* Anteprima in hover                                                  */
/*                                                                     */
/* Passando su una voce, la cella mostra solo quell'evento: la sua     */
/* immagine in evidenza, e sotto l'orario e il titolo gia' presenti.   */
/* Le altre voci e il numero del giorno spariscono finche' il mouse    */
/* resta li'.                                                          */
/*                                                                     */
/* Le classi le mette il JavaScript, non e' un ":has()": l'immagine    */
/* va comunque costruita in JS, e cosi' se il JavaScript non parte il  */
/* calendario resta esattamente quello di sempre invece di mostrare    */
/* mezzo comportamento.                                                */
/* ------------------------------------------------------------------ */

/*
 * L'immagine entra nel DOM al primo passaggio sulla cella e ci resta. Questa
 * riga sta FUORI dalla media query apposta: cosi' l'immagine costruita su un
 * desktop non ricompare se la finestra viene ristretta sotto la soglia.
 */
.kb-cal__anteprima {
	display: none;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {

	/*
	 * Interruttore unico. La soglia e' scritta solo qui: il JavaScript non
	 * ripete ne' i 768px ne' la condizione sul puntatore, legge questa
	 * proprieta' calcolata e non fa niente se non vale 1. Cambiando la media
	 * query cambia anche il comportamento del JS, senza toccarlo.
	 *
	 * 768px e' la stessa soglia del layout a lista qui sotto: sotto quella
	 * larghezza il calendario non e' piu' una griglia e l'hover non esiste.
	 * (hover: hover) and (pointer: fine) esclude i tablet in orizzontale,
	 * dove l'hover si incolla al primo tocco e non se ne va piu'.
	 */
	.kb-cal {
		--kb-cal-anteprima: 1;
	}

	/*
	 * Rete di sicurezza. In condizioni normali non taglia niente, perche' e'
	 * il JS a congelare l'altezza del blocco eventi prima di accendere
	 * l'anteprima; se per qualunque motivo il contenuto sforasse lo stesso,
	 * viene tagliato invece di allargare la riga della griglia.
	 */
	.kb-cal__cella {
		overflow: hidden;
	}

	/* Le altre voci della cella spariscono. */
	.kb-cal__cella.is-anteprima .kb-cal__evento:not(.is-anteprima-voce) {
		display: none;
	}

	/*
	 * Sparisce anche il numero del giorno, e non e' un vezzo: numero piu'
	 * spazio valgono circa 88px dei 208px di una cella, e senza quei pixel
	 * all'immagine ne resterebbero una quarantina, cioe' una striscia. Il
	 * numero torna appena il mouse esce. Se lo si vuole sempre visibile
	 * basta togliere questa regola: l'immagine si accorcia da sola.
	 */
	.kb-cal__cella.is-anteprima .kb-cal__numero {
		display: none;
	}

	/*
	 * Qui dentro il JS ha appena scritto un'altezza in pixel pari a quella
	 * che la cella occupa gia'. Da questo momento il contenuto puo' essere
	 * alto quanto vuole: la riga della griglia non se ne accorge e le altre
	 * settimane non si spostano.
	 */
	.kb-cal__cella.is-anteprima .kb-cal__eventi {
		overflow: hidden;

		/*
		 * L'unica proprieta' animata che costa layout e' l'altezza
		 * dell'immagine, e questa riga dice al browser che il conto si
		 * ferma qui: con l'altezza congelata in pixel, la dimensione di
		 * questo blocco non dipende dal contenuto, quindi niente di
		 * quello che succede dentro puo' propagarsi in su fino alla
		 * griglia. Non c'e' "size" nella lista apposta: se un giorno il
		 * JS non riuscisse a scrivere l'altezza, "contain: size" farebbe
		 * collassare il blocco a zero invece di lasciarlo funzionare male
		 * ma visibile.
		 */
		contain: layout paint;
	}

	/* La voce puntata occupa tutta l'altezza congelata. */
	.kb-cal__evento.is-anteprima-voce {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.kb-cal__evento.is-anteprima-voce .kb-cal__anteprima {
		display: block;
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		margin-bottom: var(--kb-cal-gap-anteprima);

		/*
		 * Questa e' l'altezza di ARRIVO. L'apertura la fa il JavaScript
		 * animando "height" da quanto occupava il numero del giorno fino a
		 * qui: e' l'unico modo perche' il testo scenda accompagnato invece
		 * di saltare, perche' solo l'altezza sposta davvero le cose in
		 * flusso. Durante l'animazione width resta al 100% e object-fit
		 * ritaglia di piu' o di meno: l'immagine si scopre, non si schiaccia.
		 */

		/*
		 * Il quadrato e' la misura desiderata, non un obbligo. flex-shrink
		 * resta 1 e min-height: 0 toglie il pavimento automatico dei flex
		 * item: quando l'altezza congelata non basta per immagine + orario +
		 * titolo, e' l'immagine ad accorciarsi. Essendo object-fit: cover si
		 * ritaglia dal centro, non si deforma, e il testo resta sempre
		 * leggibile.
		 */
		flex: 0 1 auto;
		min-height: 0;
	}

	/* Orario e titolo non cedono mai: lo spazio lo cede l'immagine. */
	.kb-cal__evento.is-anteprima-voce .kb-cal__evento-ora,
	.kb-cal__evento.is-anteprima-voce .kb-cal__evento-titolo {
		flex: none;
	}
}

/*
 * Chi ha chiesto meno movimento non lo riceve: durate a zero. Il
 * JavaScript legge queste variabili prima di ogni animazione, quindi non
 * chiama nemmeno animate() e l'immagine compare e sparisce di colpo, con
 * tutto il resto identico. La regola sta qui, dopo il blocco che dichiara
 * i valori normali, perche' li sovrascriva.
 */
@media (prefers-reduced-motion: reduce) {

	.kb-cal {
		--kb-cal-anteprima-entrata: 0ms;
		--kb-cal-anteprima-uscita: 0ms;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile: la griglia a 7 colonne diventa una lista verticale          */
/* dei soli giorni che hanno eventi.                                   */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.kb-cal {
		--kb-cal-dim-mese: 34px;
		--kb-cal-dim-nav: 22px;
		--kb-cal-dim-numero: 16px;
		--kb-cal-dim-titolo: 18px;
		--kb-cal-righe-titolo: 3;
		--kb-cal-spazio-numero-eventi: 12px;
		--kb-cal-gap-eventi: 20px;
	}

	.kb-cal__griglia {
		display: flex;
		flex-direction: column;
		row-gap: 1.5rem;
	}

	/* Le intestazioni Lun-Dom non servono in lista. */
	.kb-cal__giorno-nome {
		display: none;
	}

	/* In lista mostro solo i giorni con eventi: le celle vuote sarebbero
	   righe vuote inutili. */
	.kb-cal__cella {
		display: none;
		min-height: 0;
	}

	.kb-cal__cella--con-eventi {
		display: flex;
	}

	/* In lista il numero secco non basta: mostro "Lunedi 03 Luglio". */
	.kb-cal__numero-cifra {
		display: none;
	}

	.kb-cal__numero-etichetta {
		display: inline;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	/* In lista il numero-cifra e' nascosto, quindi niente cerchio: il giorno
	   corrente si distingue solo dal colore dell'etichetta. */
	.kb-cal__numero {
		min-height: 0;
	}

	.kb-cal__cella--oggi .kb-cal__numero {
		color: var(--kb-cal-colore-oggi-sfondo);
	}
}