/* =========================================================================
   05-utility.css — cio' che bootstrap-grid non ha. 03/09/2026.

   bootstrap-grid da' container, griglia, flex, display, spacing e order.
   NON da' componenti ne' utility di testo. Misurato sulle pagine reali, le
   classi Bootstrap che mancavano davvero sono queste — poche, e sono qui.

   I NOMI SONO QUELLI DI BOOTSTRAP, DI PROPOSITO. Chi compone in LiveCanvas
   scrive le classi che l'editor gli propone (il tema dichiara Bootstrap 5.3
   con lc_theme_bootstrap_version): se .text-center non facesse niente,
   sembrerebbe un guasto. Sono scoped sotto .lc-page, quindi non escono
   dalle pagine LiveCanvas.

   ⚠️ NON AGGIUNGERE UTILITY A CASO. Prima di metterne una nuova qui:
   e' davvero una utility, o e' un componente travestito? Una lista che
   cresce senza criterio e' il modo in cui un design system smette di essere
   un sistema. Con 120 pagine, questo file deve restare corto.
   ========================================================================= */


/* --- Allineamento del testo --------------------------------------------- */
.lc-page .text-start  { text-align: left }
.lc-page .text-center { text-align: center }
.lc-page .text-end    { text-align: right }

.lc-page .text-uppercase { text-transform: uppercase }


/* --- Dimensione del testo -----------------------------------------------
   ⚠️ QUESTI VALORI VENGONO DA BOOTSTRAP e non vanno "arrotondati".
   Prima della migrazione le pagine caricavano Bootstrap completo compilato,
   che porta fs-1…fs-6; con bootstrap-grid quelle classi spariscono. Sulla
   Longevity la sezione "Scopri la tua vera eta' biologica" le usa (fs-2,
   fs-3, fs-6) e senza queste regole il suo testo cambiava dimensione.

   fs-1…fs-4 sono fluidi in Bootstrap (calc con vw fino a 1200px, poi fissi):
   riprodotti qui uguali, altrimenti su schermi stretti la resa diverge.

   ⚠️ SOLO font-size, NESSUN line-height. In Bootstrap queste utility non lo
   dichiarano: l'interlinea resta quella ereditata. Aggiungerne uno (era
   stato messo 1.2) alza ogni elemento che le usa — sulla Longevity il
   paragrafo "in rapporto alla tua età anagrafica" passava da 25 a 34px di
   altezza, e lo scarto si accumulava su tutta la pagina.                   */
.lc-page .fs-1 { font-size: calc(1.375rem + 1.5vw) }
.lc-page .fs-2 { font-size: calc(1.325rem + 0.9vw) }
.lc-page .fs-3 { font-size: calc(1.3rem + 0.6vw) }
.lc-page .fs-4 { font-size: calc(1.275rem + 0.3vw) }
.lc-page .fs-5 { font-size: 1.25rem }
.lc-page .fs-6 { font-size: 1rem }

@media (min-width: 1200px) {
	.lc-page .fs-1 { font-size: 2.5rem }
	.lc-page .fs-2 { font-size: 2rem }
	.lc-page .fs-3 { font-size: 1.75rem }
	.lc-page .fs-4 { font-size: 1.5rem }
}


/* --- Peso del testo ------------------------------------------------------ */
.lc-page .fw-normal { font-weight: 400 }
.lc-page .fw-600    { font-weight: 600 }
.lc-page .fw-bold   { font-weight: 700 }


/* --- Immagini ------------------------------------------------------------ */
.lc-page .img-fluid {
	max-width: 100%;
	height: auto;
}

/* Immagine che riempie il suo contenitore e viene ritagliata: serve dove le
   fotografie hanno proporzioni diverse fra loro e le altezze ballerebbero. */
.lc-page .img-cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* --- Dimensioni ---------------------------------------------------------- */
.lc-page .w-100 { width: 100% }
.lc-page .h-100 { height: 100% }


/* --- Spaziatura fra elementi flex o grid --------------------------------
   bootstrap-grid non porta gap-*, che invece serve di continuo perche' qui
   quasi ogni layout e' una griglia CSS. */
.lc-page .gap-1 { gap: .25rem }
.lc-page .gap-2 { gap: .5rem }
.lc-page .gap-3 { gap: 1rem }
.lc-page .gap-4 { gap: 1.5rem }
.lc-page .gap-5 { gap: 3rem }


/* --- Spaziatura verticale delle sezioni --------------------------------
   ⚠️ IL PASSO 7 NON ESISTE IN BOOTSTRAP: la scala si ferma a 5 (3rem). Il
   passo 7 (6rem) era una aggiunta custom compilata dentro longevity.css, e
   tutte e tre le pagine lo usano su OGNI sezione ("py-5 py-lg-7"). Cancellato
   quel file, le sezioni erano rimaste con i soli 48px di py-5 e la pagina si
   era accorciata di ~48px per sezione — il difetto segnalato il 03/09/2026.

   !important come nell'originale: le utility di Bootstrap ce l'hanno tutte,
   e senza, py-5 (che ce l'ha) vincerebbe su py-lg-7 che non ce l'ha.       */
.lc-page .py-7 {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}

.lc-page .pt-7 { padding-top: 6rem !important }
.lc-page .pb-7 { padding-bottom: 6rem !important }

@media (min-width: 992px) {
	.lc-page .py-lg-7 {
		padding-top: 6rem !important;
		padding-bottom: 6rem !important;
	}

	.lc-page .pt-lg-7 { padding-top: 6rem !important }
	.lc-page .pb-lg-7 { padding-bottom: 6rem !important }
}

.lc-page .gap-7 { gap: 6rem }


/* --- Angoli -------------------------------------------------------------- */
.lc-page .rounded    { border-radius: var(--lc-raggio-piccolo) }
.lc-page .rounded-lg { border-radius: var(--lc-raggio) }


/* --- Solo per screen reader ---------------------------------------------
   Toglie l'elemento dalla vista lasciandolo nell'albero di accessibilita'.
   Usata per dare un nome accessibile piu' preciso a un comando il cui testo
   visibile e' generico — "Maggiori informazioni" ripetuto ventuno volte in
   una pagina non dice a nessuno su cosa.

   clip-path e non display:none: quest'ultimo lo toglierebbe anche agli
   screen reader, che e' l'opposto di cio' che serve.                       */
.lc-page .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}