/* =========================================================================
   04-bottoni.css — i due bottoni e i loro gruppi. 03/09/2026.

   DUE BOTTONI SOLI, E BASTA COSI'. Primario per l'azione che vogliamo,
   secondario per tutte le altre. Un terzo livello si aggiunge solo quando
   esiste una terza gerarchia vera, non perche' serve un altro colore.

   I due condividono la scatola e differiscono solo nei colori: cosi' non
   possono disallinearsi di altezza quando stanno affiancati, che e' il modo
   in cui i bottoni si rompono piu' spesso.

   min-height 52px: bersaglio comodo al tocco, sopra i 44px di minimo WCAG.
   Il pubblico di queste pagine e' over 40 e naviga da telefono.
   ========================================================================= */

.lc-page .lc-btn-primary,
.lc-page .lc-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 16px 30px;
	border-radius: var(--lc-raggio-bottone);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--lc-durata) var(--lc-curva),
	            border-color var(--lc-durata) var(--lc-curva);
}

@media (prefers-reduced-motion: reduce) {
	.lc-page .lc-btn-primary,
	.lc-page .lc-btn-secondary {
		transition: none;
	}
}


/* --- Primario -----------------------------------------------------------
   ⚠️ Il testo bianco su --lc-azzurro fa 2,52:1, sotto qualunque soglia
   WCAG. E' il colore di brand, lo stesso del bottone "Prenota subito"
   dell'header di Enfold, ed e' approvato dal cliente cosi' (CLAUDE.md §7.4).
   Non e' un difetto introdotto qui: e' una scelta ereditata, e cambiarla e'
   una decisione del cliente. Per rientrare basterebbe scurire il FONDO a
   #1a7fb3 (4,44:1) o #0e5f88 (6,97:1) senza toccare nient'altro.          */
.lc-page .lc-btn-primary {
	background-color: var(--lc-azzurro);
	border: 1px solid var(--lc-azzurro);
	color: var(--lc-bianco);
}

.lc-page .lc-btn-primary:hover,
.lc-page .lc-btn-primary:focus {
	background-color: var(--lc-azzurro-scuro);
	border-color: var(--lc-azzurro-scuro);
	color: var(--lc-bianco);
}


/* --- Secondario ---------------------------------------------------------- */
.lc-page .lc-btn-secondary {
	background-color: transparent;
	border: 1px solid var(--lc-bordo-bottone);
	color: var(--lc-blu);
}

.lc-page .lc-btn-secondary:hover,
.lc-page .lc-btn-secondary:focus {
	border-color: var(--lc-azzurro);
	color: var(--lc-blu);
}

/* Su fondo blu il bordo tenue e il testo blu sparirebbero. Il componente
   non deve sapere su che fondo sta: e' il fondo a ridefinire i suoi colori,
   riconoscendo l'id della sezione (vedi 03-layout). */
.lc-page :is([id^="lc-fascia"], #cta-finale) .lc-btn-secondary {
	border-color: var(--lc-bordo-su-blu);
	color: var(--lc-bianco);
}

.lc-page :is([id^="lc-fascia"], #cta-finale) .lc-btn-secondary:hover,
.lc-page :is([id^="lc-fascia"], #cta-finale) .lc-btn-secondary:focus {
	border-color: var(--lc-azzurro);
	color: var(--lc-bianco);
}


/* --- Bottone piccolo ----------------------------------------------------
   Dentro una card o un pannello di accordion, dove un bottone da 52px
   pesa quanto il testo che lo accompagna. */
.lc-page .lc-btn-piccolo {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
}


/* --- Gruppi di bottoni --------------------------------------------------
   In colonna sotto i 400px: affiancati non ci starebbero, e un bottone che
   va a capo su due righe sembra rotto. */
.lc-page .lc-btn-gruppo {
	display: flex;
	gap: 12px;
}

.lc-page .lc-btn-gruppo > * {
	flex: 1 1 0;
	padding-inline: 20px;
}

@media (max-width: 399.98px) {
	.lc-page .lc-btn-gruppo {
		flex-direction: column;
	}
}

/* Il bottone principale sopra, i secondari sotto affiancati: e' la
   disposizione delle CTA delle pagine gia' online. */
.lc-page .lc-btn-pila {
	display: flex;
	flex-direction: column;
	gap: 12px;
}


/* --- Contenitore di un'azione -------------------------------------------
   Serve solo a non far diventare il bottone largo quanto il suo blocco: un
   <a> con display:inline-flex dentro un contenitore in blocco si allarga
   comunque se il contenitore e' una griglia. Con flex resta della sua
   misura naturale.                                                        */
.lc-page .lc-azione {
	display: flex;
}

.lc-page .lc-azione--centro {
	justify-content: center;
}