/* =========================================================
   Buttons — Design System baseline
   Token sorgente: BUTTON.md v1.3.2
   Implementa: .btn-linkop (01) + .btn-primary (04)
   Estendibile a: .btn-frame, .btn-arrow, .btn-back, .btn-meta
   Dipendenze: variables.css (token --text, --bg, --border-hover,
   --radius-btn, --f-sans, --track-ui, --dur-s, --ease-out)
   ========================================================= */

/* --------- Tipografia condivisa .link-op ----------------------------------
   Manrope uppercase 0.8125rem / 600 / var(--track-ui)
   Roles: .btn-linkop, .btn-primary, .btn-frame
   -------------------------------------------------------------------------- */

.btn-linkop,
.btn-primary {
	font-family: var(--f-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	color: var(--text);
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
}

/* --------- 01 · .btn-linkop — link operativo con freccia inline ----------
   Underline animato left→right in hover, freccia → che scorre.
   Registro: tecnico/navigativo — "Dettagli", "Vedi archivio", "Tutti i progetti".
   -------------------------------------------------------------------------- */

.btn-linkop {
	background: transparent;
	border: 0;
	padding: 0;
	position: relative;
}

.btn-linkop .text {
	position: relative;
	display: inline-block;
}

.btn-linkop .text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	/* 1px, valore unico per tutte le .btn-linkop/.link-op del sito: nessun
	   override locale piu' spesso. A DPR frazionario (scaling 125%/150%) la
	   linea si distribuisce su due righe fisiche in modo diverso a seconda di
	   dove cade il testo in pagina — inevitabile, ma a 1px lo sbavamento resta
	   entro due righe, mentre a 2px arrivava a quattro e la differenza fra una
	   CTA e l'altra si vedeva. Misure in errors-log.md, 2026-07-31. */
	height: 1px;
	background-color: currentColor;
	transition: width var(--dur-s) var(--ease-out);
}

.btn-linkop:hover .text::after,
.btn-linkop:focus-visible .text::after {
	width: 100%;
}

.btn-linkop .arrow {
	font-size: 1.35em;
	font-weight: 700;
	display: inline-block;
	transition: transform var(--dur-s) var(--ease-out);
	line-height: 1;
}

.btn-linkop:hover .arrow,
.btn-linkop:focus-visible .arrow {
	transform: translateX(0.25em);
}

/* Sovrascrive eventuali a:hover globali (Astra) — il colore non cambia mai.
   L'unico feedback hover è underline animato + freccia che scorre. */
.btn-linkop,
.btn-linkop:hover,
.btn-linkop:focus,
.btn-linkop:focus-visible,
.btn-linkop:active,
.btn-linkop:visited {
	color: var(--text);
	text-decoration: none;
}

.btn-linkop:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 4px;
}

/* --------- 04 · .btn-primary — rettangolo primario -----------------------
   Bordo 1px var(--text), padding 1rem 2.25rem. Hover: fill bianco, testo nero.
   Registro: CTA primaria unica per sezione — "Acquista", "Contatta", "Invia".
   -------------------------------------------------------------------------- */

.btn-primary {
	background: transparent;
	border: 1px solid var(--text);
	border-radius: var(--radius-btn);
	padding: 1rem 2.25rem;
	transition:
		background-color var(--dur-s) var(--ease-out),
		color var(--dur-s) var(--ease-out);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--text);
	color: var(--bg);
	-webkit-text-stroke: 0.45px var(--bg);
}

.btn-primary:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

/* Reduced motion — toglie transizioni transform/width animate */
@media (prefers-reduced-motion: reduce) {
	.btn-linkop .text::after,
	.btn-linkop .arrow,
	.btn-primary {
		transition: none;
	}
}

/* --------- Override paper: .btn-primary dentro .bg-card--light -----------
   La superficie è chiara (--paper). Border bianco e fill nero su hover
   sparirebbero. Si rovescia: border --p-text (nero), color --p-text, hover
   bg --p-text, color --paper (testo chiaro su nero).
   -------------------------------------------------------------------------- */

.bg-card--light .btn-primary {
	color: var(--p-text);
	border-color: var(--p-text);
}

.bg-card--light .btn-primary:hover,
.bg-card--light .btn-primary:focus-visible {
	background-color: var(--p-text);
	color: var(--paper);
	-webkit-text-stroke: 0.45px var(--paper);
}

.bg-card--light .btn-primary:focus-visible {
	outline-color: var(--p-text);
}

/* Override paper per .btn-linkop dentro .bg-card--light (se mai servisse) */
.bg-card--light .btn-linkop,
.bg-card--light .btn-linkop:hover,
.bg-card--light .btn-linkop:focus,
.bg-card--light .btn-linkop:focus-visible,
.bg-card--light .btn-linkop:active,
.bg-card--light .btn-linkop:visited {
	color: var(--p-text);
}

.bg-card--light .btn-linkop:focus-visible {
	outline-color: var(--p-text);
}