/* =========================================================
   Link Narrative — Design System baseline
   Token sorgente: LINK_NARRATIVE.md v1.0
   Implementa: .bg-link-narrative (underline animato inline,
              gestisce multilinea via background-image)
   Dipendenze: variables.css, card.css (per override paper)
   ========================================================= */

.bg-link-narrative {
	--link-underline-color: var(--accent);

	color: inherit;
	text-decoration: none;

	/* Underline animato via background-image — gestisce multilinea correttamente */
	background-image: linear-gradient(var(--link-underline-color), var(--link-underline-color));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.05em;
	transition: background-size var(--dur-s) var(--ease-out);
}

.bg-link-narrative:hover,
.bg-link-narrative:focus-visible {
	background-size: 100% 1px;
}

.bg-link-narrative:focus-visible {
	outline: 2px solid var(--link-underline-color);
	outline-offset: 2px;
}

/* --------- Override paper su .bg-card--light ----------------------------
   --accent (rosso #E63929) su --paper (#F5F0E8) è AA limite (4.6:1).
   Override scoped: underline rgba(0,0,0,0.5) — più contrasto editoriale.
   -------------------------------------------------------------------------- */

.bg-card--light .bg-link-narrative {
	--link-underline-color: rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.bg-link-narrative {
		transition: none;
	}

	/* Underline sempre visibile in reduced-motion: l'animazione era l'unico segnale */
	.bg-link-narrative:hover,
	.bg-link-narrative:focus-visible {
		background-size: 100% 1px;
	}
}