/**
 * Box corsi nel blog — Ultima Pagina
 *
 * Traduzione del canvas «Box corsi blog» (Claude Design, 08/09/2026).
 * Qui stanno i dettagli che in Bricks sarebbero scomodi da tenere: l'ombra
 * piena, la linguetta ruotata, l'evidenziatore giallo, lo scroll a scatti
 * della striscia in home. Struttura, testi e spaziature restano modificabili
 * dal builder.
 */

:root {
	--up-navy: #002740;
	--up-rosso: #960F0F;
	--up-giallo: #FDC548;
	--up-ottanio: #106F8C;
	--up-crema: #FAF7F2;
	--up-serif: 'Recoleta', 'Fraunces', Georgia, serif;

	/*
	 * Il rientro della colonna di testo del sito, per le strisce a tutta
	 * larghezza: misurato a 885px (27px di margine) e a 1425px (163px), cioè
	 * una colonna da 1100px centrata, con un minimo che tiene il bordo pagina.
	 */
	--up-bordo: max(clamp(1rem, 3vw, 1.875rem), calc((100% - 1100px) / 2));
}

/* -------------------------------------------------------------------------
 * Box dentro l'articolo — variante «fascicolo» (1a)
 * ---------------------------------------------------------------------- */

.up-box {
	--up-box-colore: var(--up-rosso);
	--up-box-cta-testo: #fff;

	position: relative;
	background: #fff;
	border: 3px solid var(--up-box-colore);
	border-radius: 20px;
	box-shadow: 6px 6px 0 0 var(--up-box-colore);
	padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px);
	/* La linguetta sporge di 18px in alto, l'ombra di 6px a destra e in basso. */
	margin: 48px 6px 40px 0;
	font-weight: 500;
	color: var(--up-navy);
}

.up-box--rosso   { --up-box-colore: var(--up-rosso); --up-box-cta-testo: #fff; }
.up-box--navy    { --up-box-colore: var(--up-navy); --up-box-cta-testo: #fff; }
.up-box--giallo  { --up-box-colore: var(--up-giallo); --up-box-cta-testo: var(--up-navy); }
.up-box--ottanio { --up-box-colore: var(--up-ottanio); --up-box-cta-testo: #fff; }

/* Linguetta gialla, ruotata, a cavallo del bordo. */
.up-box__linguetta {
	position: absolute;
	top: -18px;
	left: 24px;
	transform: rotate(-3deg);
	display: inline-flex;
	align-items: center;
	background: var(--up-giallo);
	border: 1.5px solid var(--up-navy);
	border-radius: 6px;
	padding: 6px 12px;
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--up-navy);
}

/* Pillola con la data di partenza. */
.up-box__data {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(0, 39, 64, 0.12);
	border-radius: 9999px;
	padding: 5px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--up-navy);
	margin-bottom: 16px;
}

.up-box__data::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var(--up-rosso);
	flex: 0 0 auto;
}

.up-box__titolo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: clamp(1.35rem, 2.6vw, 1.6rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--up-box-colore);
	margin: 0 0 12px;
}

/* Il giallo si legge male su bianco: il titolo del box giallo resta navy. */
.up-box--giallo .up-box__titolo { color: var(--up-navy); }

.up-box__testo {
	margin: 0 0 20px;
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(0, 39, 64, 0.82);
}

/* Evidenziatore a pennarello, non sottolineatura. */
.up-hl {
	background: linear-gradient(transparent 62%, rgba(253, 197, 72, 0.55) 62%);
}

.up-box__prezzi {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 39, 64, 0.12);
}

.up-box__prezzi-etichetta {
	font-size: 14px;
	color: rgba(0, 39, 64, 0.7);
	padding-bottom: 6px;
}

.up-box__prezzo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 44px;
	line-height: 0.9;
	color: var(--up-box-colore);
}

.up-box--giallo .up-box__prezzo { color: var(--up-navy); }

.up-box__prezzo-nota {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 4px;
}

.up-box__prezzo-pieno {
	font-size: 14px;
	color: rgba(0, 39, 64, 0.5);
	text-decoration: line-through;
}

.up-box__promo {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--up-navy);
}

.up-box__cta,
.up-box__cta:visited {
	display: block;
	margin-top: 20px;
	text-align: center;
	background: var(--up-box-colore);
	color: var(--up-box-cta-testo);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	padding: 15px 26px;
	border-radius: 9999px;
	transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.up-box__cta:hover,
.up-box__cta:focus-visible {
	transform: translateY(-2px);
	color: var(--up-box-cta-testo);
}

.up-box__meta {
	margin-top: 12px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(0, 39, 64, 0.62);
}

/* -------------------------------------------------------------------------
 * Box dentro l'articolo — variante «editoriale», senza card (1c)
 * Serve al ripiego gratuito: non ha un prezzo da urlare.
 * ---------------------------------------------------------------------- */

.up-editoriale {
	--up-box-colore: var(--up-ottanio);

	border-top: 4px solid var(--up-box-colore);
	padding-top: 22px;
	margin: 48px 0 40px;
	font-weight: 500;
	color: var(--up-navy);
}

.up-editoriale__occhiello {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--up-box-colore);
	margin-bottom: 14px;
}

.up-editoriale__titolo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--up-navy);
	margin: 0 0 14px;
}

.up-editoriale__testo {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(0, 39, 64, 0.85);
	max-width: 52ch;
}

.up-editoriale__riga {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 39, 64, 0.12);
}

.up-editoriale__cta,
.up-editoriale__cta:visited {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 19px;
	color: var(--up-box-colore);
	text-decoration: none;
	border-bottom: 2px solid var(--up-box-colore);
	padding-bottom: 2px;
}

.up-editoriale__cta:hover,
.up-editoriale__cta:focus-visible {
	color: var(--up-navy);
	border-bottom-color: var(--up-navy);
}

.up-editoriale__nota {
	font-size: 14.5px;
	color: rgba(0, 39, 64, 0.72);
}

/* -------------------------------------------------------------------------
 * Catalogo in coda all'articolo — striscia a tutta larghezza, voci editoriali
 *
 * Variante 1c del canvas: niente card e niente banda di colore. Il lettore ha
 * appena finito un articolo, il catalogo deve informare senza gridare.
 * ---------------------------------------------------------------------- */

.up-catalogo {
	background: var(--up-crema);
	padding: clamp(32px, 5vw, 56px) 0;
	color: var(--up-navy);
}

.up-catalogo__interno {
	padding: 0 var(--up-bordo);
}

.up-catalogo__occhiello {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--up-rosso);
	margin-bottom: 14px;
}

.up-catalogo__titolo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--up-navy);
	margin: 0 0 10px;
}

.up-catalogo__testo {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(0, 39, 64, 0.72);
	margin: 0 0 32px;
	max-width: 60ch;
}

.up-catalogo__voci {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
	align-items: start;
	width: 100%;
}

/* Una voce: filetto di colore, data, titolo, riga di servizio, prezzo, link. */
.up-voce {
	--up-voce-colore: var(--up-navy);

	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	border-top: 4px solid var(--up-voce-colore);
	padding-top: 16px;
	width: 100%;
}

.up-voce--rosso   { --up-voce-colore: var(--up-rosso); }
.up-voce--navy    { --up-voce-colore: var(--up-navy); }
.up-voce--giallo  { --up-voce-colore: var(--up-giallo); }
.up-voce--ottanio { --up-voce-colore: var(--up-ottanio); }

.up-voce__data {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--up-voce-colore);
}

/* Il giallo su crema non si legge: quella data passa al navy. */
.up-voce--giallo .up-voce__data { color: var(--up-navy); }

.up-voce__titolo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--up-navy);
}

.up-voce__meta {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(0, 39, 64, 0.6);
}

.up-voce__prezzi {
	font-size: 14px;
	line-height: 1.35;
	color: rgba(0, 39, 64, 0.8);
}

.up-voce__prezzi s { color: rgba(0, 39, 64, 0.4); }
.up-voce__prezzi strong { color: var(--up-navy); }

.up-voce__cta,
.up-voce__cta:visited {
	align-self: flex-start;
	margin-top: 4px;
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: var(--up-voce-colore);
	text-decoration: none;
	border-bottom: 2px solid var(--up-voce-colore);
	padding-bottom: 2px;
}

.up-voce--giallo .up-voce__cta,
.up-voce--giallo .up-voce__cta:visited {
	color: var(--up-navy);
	border-bottom-color: var(--up-giallo);
}

.up-voce__cta:hover,
.up-voce__cta:focus-visible {
	color: var(--up-navy);
	border-bottom-color: var(--up-navy);
}

/* I due test gratuiti, in fondo alla striscia. */
.up-catalogo__test {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	width: 100%;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 39, 64, 0.15);
}

.up-catalogo__test-voce {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	width: 100%;
}

.up-catalogo__test-testo {
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(0, 39, 64, 0.75);
}

.up-catalogo__test-link,
.up-catalogo__test-link:visited {
	font-weight: 700;
	font-size: 15px;
	color: var(--up-ottanio);
	text-decoration: none;
	border-bottom: 2px solid var(--up-ottanio);
	padding-bottom: 1px;
}

.up-catalogo__test-link:hover,
.up-catalogo__test-link:focus-visible {
	color: var(--up-navy);
	border-bottom-color: var(--up-navy);
}

/* Quattro colonne stanno larghe solo da 1000px in su. */
@media (max-width: 1000px) {
	.up-catalogo__voci { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.up-catalogo__voci { grid-template-columns: 1fr; }
}


/* -------------------------------------------------------------------------
 * Striscia corsi in home
 * ---------------------------------------------------------------------- */

/*
 * Senza card e senza container: la striscia prende tutta la larghezza della
 * pagina. Testata e piede però restano allineati alla colonna del sito —
 * stessa misura che usano le altre sezioni, presa dalle variabili ACSS — e a
 * scorrere oltre il bordo sono solo le card.
 */
.up-striscia {
	padding: clamp(24px, 4vw, 48px) 0;
	color: var(--up-navy);
}

.up-striscia__testa {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	padding: 0 var(--up-bordo);
	margin-bottom: 32px;
}

.up-striscia__occhiello {
	font-family: var(--up-serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--up-rosso);
	margin-bottom: 14px;
}

.up-striscia__titolo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	max-width: 24ch;
}

.up-striscia__titolo .up-asterisco { color: var(--up-giallo); }

.up-striscia__nota {
	font-family: 'Caveat', var(--up-serif);
	font-weight: 600;
	font-size: 20px;
	color: rgba(0, 39, 64, 0.62);
}

.up-striscia__frecce {
	display: flex;
	gap: 10px;
}

/*
 * Doppia classe apposta: `.brxe-button.bricks-button` di Bricks vince su una
 * classe sola e schiaccia il pulsante a 36px.
 */
.up-striscia .up-striscia__freccia {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	padding: 0;
	border-radius: 9999px;
	border: 1px solid rgba(0, 39, 64, 0.2);
	background: #fff;
	color: var(--up-navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.up-striscia__freccia:hover { background: #F3F0EA; }

/*
 * Chevron disegnato col bordo: niente icone da caricare. `flex:0 0 auto` non
 * è un vezzo — dentro un contenitore flex il pseudo-elemento veniva ristretto
 * a 2px e la freccia sembrava tagliata a metà.
 */
.up-striscia .up-striscia__freccia::before {
	content: '';
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	box-sizing: border-box;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 3px;
}

.up-striscia .up-striscia__freccia[data-up-scroll="succ"]::before {
	transform: rotate(-135deg);
	margin-left: -3px;
}

.up-striscia__freccia[disabled] {
	opacity: 0.35;
	cursor: default;
}

.up-striscia__freccia svg {
	width: 20px;
	height: 20px;
}

/* Scorrimento a scatti, non slider con autoplay: qui si sceglie, non si guarda. */
.up-striscia__rail {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 6px var(--up-bordo) 12px;
	/*
	 * Senza questo lo snap considera «inizio» il bordo dello scrollport e non
	 * il rientro: la striscia si auto-scrollava e la prima card finiva contro
	 * il bordo, disallineata dal titolo.
	 */
	scroll-padding-inline: var(--up-bordo);
}

.up-striscia__rail::-webkit-scrollbar { height: 0; }

.up-corso {
	flex: 0 0 min(340px, 78vw);
	scroll-snap-align: start;
	background: var(--up-corso-colore, var(--up-rosso));
	border-radius: 20px;
	box-shadow: 0 20px 50px -15px rgba(0, 39, 64, 0.18);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: #fff;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.up-corso:hover { transform: translateY(-6px); }

/* Rosso e ottanio non si toccano mai: navy e giallo fanno da neutro. */
.up-corso--rosso   { --up-corso-colore: var(--up-rosso); }
.up-corso--navy    { --up-corso-colore: var(--up-navy); }
.up-corso--ottanio { --up-corso-colore: var(--up-ottanio); }
.up-corso--giallo  { --up-corso-colore: var(--up-giallo); color: var(--up-navy); }

.up-corso__intestazione {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.up-corso__etichetta {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--up-giallo);
}

.up-corso--giallo .up-corso__etichetta { color: var(--up-rosso); }

.up-corso__data { font-size: 12.5px; }

.up-corso__titolo {
	font-family: var(--up-serif);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}

.up-corso__testo {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
}

.up-corso__meta { font-size: 13px; }

.up-corso__prezzi { font-size: 14.5px; }
.up-corso__prezzi s { color: rgba(255, 255, 255, 0.7); }
.up-corso__prezzi strong {
	font-family: var(--up-serif);
	font-size: 23px;
}

.up-corso--giallo .up-corso__prezzi s { color: rgba(0, 39, 64, 0.55); }

.up-corso__cta,
.up-corso__cta:visited {
	margin-top: auto;
	text-align: center;
	background: var(--up-giallo);
	color: var(--up-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 24px;
	border-radius: 9999px;
	transition: opacity 180ms ease;
}

.up-corso--giallo .up-corso__cta,
.up-corso--giallo .up-corso__cta:visited {
	background: var(--up-navy);
	color: #fff;
}

.up-corso__cta:hover,
.up-corso__cta:focus-visible { opacity: 0.9; }

.up-striscia__pie {
	padding: 24px var(--up-bordo) 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(0, 39, 64, 0.72);
}

/* Il titolo più lungo del catalogo non può stare a 28px. */
.up-corso--giallo .up-corso__titolo { font-size: 24px; line-height: 1.12; }

/* -------------------------------------------------------------------------
 * Campi vuoti: spariscono, non lasciano il buco
 *
 * Quando la console non ha un prezzo — o l'interruttore dei prezzi è giù —
 * gli elementi Bricks restano nel markup ma escono vuoti. Qui li nascondiamo
 * insieme al contorno che li accompagna (il filetto sopra i prezzi, il
 * pallino della data), altrimenti resta una riga orfana.
 * ---------------------------------------------------------------------- */

.up-box__data:empty,
.up-box__meta:empty,
.up-box__promo:empty,
.up-box__prezzo-pieno:empty,
.up-voce__prezzi:empty,
.up-voce__meta:empty,
.up-corso__prezzi:empty,
.up-corso__meta:empty,
.up-editoriale__nota:empty {
	display: none;
}

.up-box__prezzi:has(.up-box__prezzo:empty) { display: none; }

/* -------------------------------------------------------------------------
 * Convivenza con i valori di fabbrica di Bricks
 *
 * Bricks parte da `.brxe-block { display:flex; flex-direction:column;
 * align-items:flex-start }`. Senza queste righe le file diventano colonne
 * (il prezzo finisce sotto al prezzo barrato) e i pulsanti non si allargano.
 * Sta in fondo al foglio apposta: deve vincere sulle regole qui sopra.
 * ---------------------------------------------------------------------- */

/* I due box dell'articolo tornano al flusso normale: sono testo, non griglie. */
.up-box,
.up-editoriale,
.up-catalogo,
.up-catalogo__interno,
.up-striscia {
	display: block;
}

/* I paragrafi arrivano dentro un <p> con i margini del tema. */
.up-box p,
.up-editoriale p,
.up-voce p,
.up-corso p,
.up-striscia__pie p,
.up-catalogo__testo p {
	margin: 0;
}

/* Le file restano file. */
.up-box__prezzi,
.up-editoriale__riga,
.up-corso__intestazione,
.up-striscia__testa,
.up-striscia__frecce,
.up-striscia__rail {
	flex-direction: row;
}

.up-box__prezzo-nota,
.up-catalogo__test-voce,
.up-voce {
	flex-direction: column;
}

/*
 * Le griglie restano griglie: Bricks impone `display:flex` a ogni blocco.
 */
.up-catalogo__voci,
.up-catalogo__test {
	display: grid;
	width: 100%;
	align-items: start;
}

.up-striscia__rail {
	align-items: stretch;
}

/* Le card della striscia si allargano quanto il loro contenitore. */
.up-corso {
	flex-direction: column;
	align-items: stretch;
}

/* Il pulsante del box in linea è largo quanto il box. */
.up-box__cta {
	width: 100%;
}

/*
 * Bricks dà `width:100%` a ogni blocco. Chi sta dentro una fila deve invece
 * essere largo quanto il suo contenuto, altrimenti manda a capo i fratelli:
 * era il motivo per cui il prezzo finiva sopra al prezzo barrato.
 */
.up-box__prezzo-nota,
.up-striscia__frecce {
	width: auto;
}

.up-striscia__testa > *:first-child {
	flex: 1 1 auto;
	width: auto;
}

/*
 * Il corpo del sito gira a interlinea 1,8: su un'etichetta da 12px diventano
 * 22px di aria dentro una pillola alta 13. Le righe corte hanno bisogno della
 * loro interlinea, o il box cresce di un centinaio di pixel senza motivo.
 */
.up-box__linguetta,
.up-box__prezzo,
.up-voce__data,
.up-corso__titolo,
.up-corso__etichetta,
.up-striscia__occhiello,
.up-catalogo__occhiello,
.up-editoriale__occhiello {
	line-height: 1;
}

.up-box__data,
.up-box__prezzo-pieno,
.up-box__promo,
.up-box__prezzi-etichetta,
.up-corso__data,
.up-corso__prezzi,
.up-editoriale__nota {
	line-height: 1.25;
}

.up-box__meta,
.up-corso__meta {
	line-height: 1.45;
}

.up-striscia__rail { flex-wrap: nowrap; }

.up-striscia__freccia { flex: 0 0 auto; }

/* -------------------------------------------------------------------------
 * Schermi stretti
 *
 * `minmax(300px, 1fr)` sotto i 520px chiede più larghezza di quanta ce ne sia
 * dentro la banda: la colonna resta a 300 e sborda. Sotto quella soglia una
 * card per riga.
 * ---------------------------------------------------------------------- */

@media (max-width: 520px) {
	.up-catalogo__test {
		grid-template-columns: 1fr;
	}

	.up-box {
		/* L'ombra piena sporge di 6px: al telefono quei 6px sono preziosi. */
		margin-right: 6px;
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * Chi non vuole animazioni non le riceve
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.up-box__cta,
	.up-corso,
	.up-striscia__freccia {
		transition: none;
	}

	.up-box__cta:hover,
	.up-corso:hover {
		transform: none;
	}

	.up-striscia__rail { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
 * Numero di commenti nella testata dell'articolo
 * ---------------------------------------------------------------------- */

.up-meta-commenti,
.up-meta-commenti:visited {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.up-meta-commenti:hover,
.up-meta-commenti:focus-visible {
	color: var(--up-rosso);
}

/* Senza commenti l'etichetta è vuota: sparisce invece di dire «0 commenti». */
.up-meta-commenti:empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * Box biografia, uno per autore
 *
 * Ricalca il box che c'era prima (elemento `post-author` di Bricks), che però
 * sapeva mostrare un autore solo: quello di `post_author`. Sui pezzi a quattro
 * mani usciva un box unico col nome unito da Molongui, senza avatar né bio.
 * Qui i box sono tanti quanti gli autori veri.
 * ---------------------------------------------------------------------- */

.up-autori {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	width: 100%;
	align-items: start;
}

.up-autore {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	background: #f9f9f9;
	border-radius: 20px;
	padding: 30px;
	box-shadow: 5px 5px 0 0 #d9d9d9;
	width: 100%;
}

.up-autore__testi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.up-autore__nome {
	font-family: 'Recoleta Alt', var(--up-serif);
	font-weight: 600;
	font-size: var(--text-m);
	line-height: 1.2;
	color: #000;
	margin: 0;
}

.up-autore__bio {
	font-size: var(--text-s);
	line-height: 1.6;
	margin: 0;
}

.up-autore__bio:empty { display: none; }

.up-autore__link,
.up-autore__link:visited {
	background: #106f8c;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--text-s);
	padding: 12px 20px;
	border-radius: 20px;
	transition: background 180ms ease;
}

.up-autore__link:hover,
.up-autore__link:focus-visible {
	background: var(--primary-hover-d-2, #0d5b72);
	color: var(--primary-hover-l-6, #fff);
}

/* L'avatar sta a destra, con l'ombra gialla piena come nel box originale. */
.up-autore__avatar {
	flex: 0 0 auto;
	order: 2;
	width: 90px;
}

.up-autore__avatar img {
	display: block;
	width: 90px;
	height: 90px;
	border-radius: 9999px;
	object-fit: cover;
	box-shadow:
		0 0 0 2px rgba(253, 196, 72, 1),
		3px 3px 0 0 rgba(253, 196, 72, 1);
}

@media (max-width: 520px) {
	.up-autore {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}

	.up-autore__avatar { order: 0; }
}