/**
 * Calendario «In partenza» — Ultima Pagina
 *
 * Lo stesso calendario che academy ha nella sua home, riletto coi colori del
 * blog. Due vesti, stessa struttura:
 *
 *   .up-cal--hero      appoggiato sull'illustrazione della home: bianco pieno,
 *                      angoli tondi, ombra lunga che lo stacca dal disegno
 *   .up-cal--articolo  dentro la colonna di testo: piatto, un filetto invece
 *                      dell'ombra, perché lì non deve sembrare un cartellone
 *
 * I colori vengono da assets/box-corsi.css (--up-navy, --up-giallo, …), che è
 * già in coda a Bricks: qui non si ridefiniscono, si usano.
 */

.up-cal {
	--up-cal-riga: rgba(0, 39, 64, .12);
	--up-cal-tenue: rgba(0, 39, 64, .58);

	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	color: var(--up-navy, #002740);
	text-align: left;
}

.up-cal--hero {
	box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .5);
}

.up-cal--articolo {
	border: 1px solid var(--up-cal-riga);
	border-radius: 14px;
	margin: 34px 0;
}

/* ── testata ───────────────────────────────────────────────────────────── */

.up-cal__testata {
	background: var(--up-navy, #002740);
	padding: 13px 18px 15px;
}

.up-cal__occhiello {
	margin: 0;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--up-giallo, #FDC548);
}

.up-cal__intestazione {
	margin: 3px 0 0;
	font-family: var(--up-serif, Georgia, serif);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

/* ── una riga = un corso ───────────────────────────────────────────────── */

.up-cal__riga {
	display: grid;
	grid-template-columns: 5px 52px minmax(0, 1fr) 16px;
	gap: 0 12px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: background-color .2s ease;
}

.up-cal__riga + .up-cal__riga {
	border-top: 1px solid var(--up-cal-riga);
}

/* La prima riga è il corso che parte prima: fondo panna, così si vede subito
   qual è senza dover leggere le date. */
.up-cal__riga--prima {
	background: #FDF3DA;
}

.up-cal__riga:hover,
.up-cal__riga:focus-visible {
	background: rgba(16, 111, 140, .08);
}

.up-cal__riga:focus-visible {
	outline: 2px solid var(--up-ottanio, #106F8C);
	outline-offset: -2px;
}

.up-cal__barra {
	align-self: stretch;
	background: var(--up-cal-barra, var(--up-navy, #002740));
}

.up-cal__barra--navy    { --up-cal-barra: var(--up-navy, #002740); }
.up-cal__barra--giallo  { --up-cal-barra: var(--up-giallo, #FDC548); }
.up-cal__barra--rosso   { --up-cal-barra: var(--up-rosso, #960F0F); }
.up-cal__barra--ottanio { --up-cal-barra: var(--up-ottanio, #106F8C); }

/* ── la data ───────────────────────────────────────────────────────────── */

.up-cal__data {
	display: block;
	padding: 12px 0;
	text-align: center;
}

.up-cal__giorno,
.up-cal__mese {
	display: block;
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--up-cal-tenue);
}

.up-cal__numero {
	display: block;
	font-family: var(--up-serif, Georgia, serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.05;
	color: var(--up-navy, #002740);
	font-variant-numeric: tabular-nums;
}

/* ── il corpo della riga ───────────────────────────────────────────────── */

.up-cal__corpo {
	display: block;
	min-width: 0;
	padding: 11px 0;
}

.up-cal__etichette {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.up-cal__etichette:not(:empty) {
	margin-bottom: 4px;
}

.up-cal__pill {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--up-ottanio, #106F8C);
}

.up-cal__pill--prossima {
	background: #BC1313;
}

.up-cal__pill--base       { background: var(--up-ottanio, #106F8C); }
.up-cal__pill--intermedio { background: #0d5670; }
.up-cal__pill--avanzato   { background: var(--up-navy, #002740); }

.up-cal__titolo {
	display: block;
	font-family: var(--up-serif, Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--up-navy, #002740);
}

/* Il sottotitolo sta su una riga sola: se non ci sta, si taglia con i
   puntini invece di mandare a capo e sfondare l'altezza della riga. */
.up-cal__sottotitolo {
	display: block;
	margin-top: 2px;
	font-size: .75rem;
	line-height: 1.3;
	color: rgba(0, 39, 64, .7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.up-cal__freccia {
	font-size: 1.125rem;
	color: rgba(0, 39, 64, .35);
}

/* ── schermi stretti ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.up-cal__riga {
		grid-template-columns: 4px 44px minmax(0, 1fr) 12px;
		gap: 0 10px;
	}

	.up-cal__numero {
		font-size: 1.375rem;
	}

	.up-cal__titolo {
		font-size: .9375rem;
	}

	/* Su telefono il sottotitolo può andare a capo una volta: c'è meno
	   larghezza e i puntini mangerebbero mezza frase. */
	.up-cal__sottotitolo {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

@media (prefers-reduced-motion: reduce) {
	.up-cal__riga {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * La hero della home, divisa in due
 *
 * Il testo a sinistra coi bottoni sotto, il calendario a destra. La divisione
 * si fa qui e non in Bricks perché l'impaginazione di quella hero vive in una
 * classe globale di Frames (.fr-hero-hotel__content-wrapper) che sta anche su
 * altre pagine: cambiarla lì le toccherebbe tutte. Tutto quanto segue è chiuso
 * dentro .fr-hero-ultima-pagina, quindi vale solo per questa.
 *
 * È una griglia e non un flex per non dover aggiungere un contenitore attorno
 * ai quattro pezzi di testo: le colonne si assegnano una per una, e la
 * struttura Bricks guadagna un elemento solo, il calendario.
 * ---------------------------------------------------------------------- */

/*
 * Ogni regola qui sotto passa da :has(.up-cal), cioè scatta solo quando nella
 * hero c'è davvero un calendario stampato: il contenitore vuoto non basta.
 *
 * Senza quel filtro, ogni volta che il calendario non esce — l'elemento tolto
 * dal builder, Supabase muto, nessun corso in programma — la home resterebbe
 * col testo spinto a sinistra e mezza pagina vuota a destra. Così invece torna
 * da sola alla hero centrata di sempre.
 */

.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);

	/*
	 * Le righe contano, e vanno dichiarate: quattro a contenuto minimo per
	 * occhiello, titolo, sottotitolo e bottoni, più due elastiche ai lati.
	 *
	 * Il calendario attraversa tutte le righe ed è più alto del testo. Senza
	 * righe elastiche che si prendano l'avanzo, quei duecento pixel di troppo
	 * verrebbero spartiti fra le righe del testo: occhiello e titolo finivano
	 * a 241px di distanza, con la hero sfilacciata in verticale.
	 *
	 * Una sola riga elastica in coda basterebbe a togliere lo sfilacciamento,
	 * ma incollerebbe il testo in alto. Due, sopra e sotto, si dividono
	 * l'avanzo in parti uguali: il blocco di testo resta compatto e il suo
	 * centro cade esattamente sul centro del calendario.
	 */
	grid-template-rows: 1fr repeat(4, min-content) 1fr;

	column-gap: clamp(24px, 4vw, 48px);
	align-items: start;
	text-align: left;
}

/*
 * Le quattro parti di testo vanno nelle righe centrali, dalla 2 alla 5: senza
 * dirlo la prima finirebbe nella riga elastica in alto e il centraggio
 * salterebbe. Sono numerate una per una perché la hero ha esattamente questi
 * quattro pezzi; se se ne aggiunge uno dal builder, va aggiunta una riga qui
 * e alzato il repeat() qui sopra.
 */
.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) > *:nth-child(1) { grid-row: 2; }
.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) > *:nth-child(2) { grid-row: 3; }
.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) > *:nth-child(3) { grid-row: 4; }
.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) > *:nth-child(4) { grid-row: 5; }

/* Occhiello, titolo, sottotitolo e bottoni: tutti incolonnati a sinistra.
   Senza questa riga la griglia li distribuirebbe a serpentina sulle due
   colonne, e il titolo finirebbe accanto all'occhiello. */
.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) > *:not(.up-cal-slot) {
	grid-column: 1;
	justify-self: start;
}

.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) .up-cal-slot {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	width: 100%;
}

/*
 * La hero respira 202px sopra e sotto: giusto quando dentro c'è una riga di
 * testo, troppo quando c'è anche il calendario, che da solo è alto quanto
 * tutto il blocco di testo. Senza questo, l'insegna diventerebbe alta 889px e
 * spingerebbe fuori schermo la striscia dei corsi che viene subito dopo.
 */
.fr-hero-ultima-pagina:has(.up-cal) {
	padding-block: clamp(48px, 7vh, 110px);
}

/* Un elemento shortcode che non stampa niente lascia comunque il suo
   contenitore vuoto: senza questo, la colonna di destra resterebbe occupata
   da un riquadro invisibile. */
.fr-hero-ultima-pagina .up-cal-slot:empty {
	display: none;
}

/* Sotto i 992px il calendario scende sotto il testo, come fa academy sui
   telefoni: prima chi siamo, poi cosa parte. */
@media (max-width: 991px) {
	/*
	 * Su una colonna sola la hero torna centrata, com'era prima del calendario:
	 * l'allineamento a sinistra serve solo quando accanto c'è la seconda
	 * colonna da cui prendere le distanze.
	 */
	.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		text-align: center;
	}

	/*
	 * Le righe assegnate a mano servono solo al centraggio su due colonne.
	 * Qui vanno sciolte tutte: se il testo restasse inchiodato alle righe da 2
	 * a 5, il calendario troverebbe libera la 1 e scavalcherebbe il titolo.
	 * Il selettore ripete la stessa forza di quelli sopra e viene dopo, che è
	 * l'unico modo perché vinca — le media query da sole non pesano.
	 */
	.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) > *:nth-child(-n + 4) {
		grid-row: auto;
		justify-self: center;
	}

	.fr-hero-ultima-pagina .fr-hero-hotel__content-wrapper:has(.up-cal) .up-cal-slot {
		grid-column: 1;
		grid-row: auto;
		justify-self: center;
		margin-top: 28px;
		margin-inline: auto;
		max-width: 480px;
	}
}