/* UDC Dashboard — Fine articolo (proposta B «Colorata»). Tutte le regole sono sotto .udc-fa. */
.udc-fa {
	--udc-fa-ink: #29262d;
	--udc-fa-muted: #5c5662;
	--udc-fa-purple: #54258f;
	--udc-fa-yellow: #ffd84d;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 36px 0 12px;
	color: var(--udc-fa-ink);
	font-size: 16px;
	line-height: 1.5;
}
.udc-fa *, .udc-fa *::before, .udc-fa *::after { box-sizing: border-box; }
/* Il tema sottolinea e colora i link del contenuto (.content-area .bloglo-entry a): qui servono !important. */
.udc-fa a, .udc-fa a:hover, .udc-fa a:focus { color: inherit !important; text-decoration: none !important; box-shadow: none !important; }
.udc-fa .udc-fa-term dt a, .udc-fa .udc-fa-term dt a:hover, .udc-fa a.udc-fa-more, .udc-fa a.udc-fa-more:hover { color: var(--udc-fa-purple) !important; }
.udc-fa .udc-fa-term dt a:hover, .udc-fa a.udc-fa-more:hover, .udc-fa .udc-fa-sign a:hover { text-decoration: underline !important; }
.udc-fa a:focus-visible { outline: 3px solid var(--udc-fa-purple); outline-offset: 3px; }
.udc-fa svg { display: block; width: 100%; height: 100%; }
.udc-fa p, .udc-fa dl, .udc-fa dd { margin: 0; }

/* Titoli di sezione a «etichetta» */
.udc-fa .udc-fa-h {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 6px 16px 6px 10px;
	border-radius: 999px;
	background: var(--udc-fa-yellow);
	color: var(--udc-fa-ink);
	font-size: 1.3em;
	font-weight: 800;
	line-height: 1.2;
	transform: rotate(-1.5deg);
}
.udc-fa-hi { flex: 0 0 24px; width: 24px; height: 24px; }

/* Parole da conoscere */
.udc-fa-glossary {
	padding: 20px 20px 18px;
	border: 3px solid var(--udc-fa-ink);
	border-radius: 22px;
	background: #efe6fb;
	box-shadow: 5px 5px 0 var(--udc-fa-ink);
}
.udc-fa-glossary .udc-fa-h { background: #fff; }
.udc-fa .udc-fa-lead { margin: -4px 0 12px; font-size: .88em; }
.udc-fa-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.udc-fa-term { padding: 12px; border-radius: 14px; background: #fff; }
.udc-fa-term dt { margin: 0 0 4px; color: var(--udc-fa-purple); font-size: 1em; font-weight: 800; }
.udc-fa-term dt a:hover { text-decoration: underline; }
.udc-fa-term dd { font-size: .85em; line-height: 1.45; }
.udc-fa .udc-fa-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--udc-fa-purple); font-size: .88em; font-weight: 700; }
.udc-fa-more span, .udc-fa-x-copy em span { display: inline-block; width: 15px; height: 15px; }

/* Firma: subito dopo l'articolo, testo semplice con il nome «a evidenziatore» */
.udc-fa .udc-fa-sign { margin: 0; color: var(--udc-fa-muted); font-size: .95em; line-height: 1.5; }
.udc-fa .udc-fa-sign a, .udc-fa .udc-fa-sign > strong {
	padding: 0 2px;
	background: linear-gradient(transparent 55%, var(--udc-fa-yellow) 55%);
	color: var(--udc-fa-ink) !important;
	font-weight: 800;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.udc-fa .udc-fa-sign a strong { font-weight: inherit; }

/* Nota AI: in fondo, piccola e grigia */
.udc-fa .udc-fa-ai { display: flex; gap: 6px; margin-top: -8px; color: #a39dab; font-size: .72em; line-height: 1.45; }
.udc-fa-ai-i { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 2px; color: #c9c3cf; }

/* Leggi anche */
.udc-fa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.udc-fa-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 3px solid var(--udc-fa-ink);
	border-radius: 18px;
	background: #dff4ff;
	box-shadow: 4px 4px 0 var(--udc-fa-ink);
	transition: transform .15s ease, box-shadow .15s ease;
}
.udc-fa-card:nth-child(4n+2) { background: #ffe3ec; }
.udc-fa-card:nth-child(4n+3) { background: #e2f7e9; }
.udc-fa-card:nth-child(4n+4) { background: #fff1c7; }
.udc-fa-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--udc-fa-ink); }
.udc-fa-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--udc-fa-ink); background: #fff; }
.udc-fa .udc-fa-thumb img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; }
.udc-fa-thumb-empty { display: grid; place-items: center; height: 100%; padding: 26%; color: var(--udc-fa-purple); }
.udc-fa-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 13px; }
.udc-fa-cat {
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--udc-fa-ink);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.udc-fa-ttl { font-size: .92em; font-weight: 800; line-height: 1.3; }
.udc-fa-date { color: var(--udc-fa-muted); font-size: .75em; }

/* Continua a curiosare */
.udc-fa-xgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.udc-fa-x {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 14px;
	border: 3px solid var(--udc-fa-ink);
	border-radius: 20px;
	background: #ffe27a;
	transition: transform .15s ease;
}
.udc-fa-x:hover { transform: translateY(-3px) rotate(-.6deg); }
.udc-fa-x--mint { background: #a6ecd0; }
.udc-fa-x--pink { background: #ffb8cf; }
.udc-fa-x--blue { background: #b5d3ff; }
.udc-fa-x-ico { width: 44px; height: 44px; padding: 9px; border: 2px solid var(--udc-fa-ink); border-radius: 50%; background: #fff; }
.udc-fa-x-copy { display: flex; flex-direction: column; gap: 4px; }
.udc-fa-x-copy strong { font-size: .94em; font-weight: 800; line-height: 1.25; }
.udc-fa-x-copy > span { font-size: .78em; line-height: 1.4; }
.udc-fa-x-copy em { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .82em; font-style: normal; font-weight: 800; }

/* Larghezze del contenitore (non della finestra): funziona anche con la sidebar */
@container (min-width: 640px) {
	.udc-fa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
	.udc-fa-terms { grid-template-columns: 1fr; }
	.udc-fa-xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.udc-fa .udc-fa-h { font-size: 1.15em; }
}
@media (prefers-reduced-motion: reduce) {
	.udc-fa .udc-fa-h { transform: none; }
	.udc-fa-card, .udc-fa-x { transition: none; }
}