/* =========================================================================
   07-blocchi.css — hero, fascia CTA, CTA finale, team, galleria, carosello.
   03/09/2026.

   Sono i blocchi che occupano una sezione intera. Stanno negli strati
   comuni e non nei fogli di pagina perche' le due pagine gia' online li
   usano GIA' identici: l'inventario delle classi ha mostrato che la
   Palestra riusa .lg-hero-*, .lg-team-*, .lg-cta-* della Longevity senza
   cambiare una riga. Erano gia' componenti condivisi, solo senza saperlo.
   ========================================================================= */


/* --- Hero ---------------------------------------------------------------
   Una colonna fino a 991px, due da 992. Il testo per primo nel DOM, che e'
   anche l'ordine di lettura giusto su telefono: nessun `order` da
   invertire, quindi ordine visivo e ordine di lettura non possono
   divergere.                                                              */
.lc-page .lc-hero {
	display: grid;
	gap: 32px;
}

@media (min-width: 992px) {
	.lc-page .lc-hero {
		/* 1.05fr/1fr e non 1fr/1fr: la colonna del testo deve essere appena
		   piu' larga di quella dell'immagine, altrimenti il paragrafo va a
		   capo troppo presto e l'hero sembra sbilanciato a destra. Sono le
		   proporzioni delle due pagine gia' online e approvate. */
		grid-template-columns: 1.05fr 1fr;
		align-items: center;
		column-gap: 64px;
	}
}

/* Hero senza immagine, per le pagine di specialita' che non ne hanno una.
   ⚠️ DEVE STARE DOPO il blocco qui sopra: stessa specificita' (due classi),
   quindi a parita' vince l'ordine nel file. Messo prima, e' inerte.

   Il max-width non e' decorativo: senza, il paragrafo di apertura correrebbe
   su tutta la larghezza utile (1176px da 1400px in su), ben oltre la misura
   leggibile. 46em stanno intorno ai 75 caratteri per riga. */
@media (min-width: 992px) {
	.lc-page .lc-hero--solo-testo {
		grid-template-columns: 1fr;
	}

	.lc-page .lc-hero--solo-testo .lc-hero-testo {
		max-width: 46em;
	}
}

.lc-page .lc-hero-testo > * + * {
	margin-top: 16px;
}

.lc-page .lc-hero-sottotitolo {
	color: var(--lc-testo-tenue);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
}

@media (min-width: 992px) {
	.lc-page .lc-hero-sottotitolo { font-size: 24px }
}

@media (max-width: 575.98px) {
	.lc-page .lc-hero-sottotitolo { font-size: 18px }
}

/* Il sottotitolo e il paragrafo che lo segue stanno nello stesso blocco
   editabile, quindi la regola generale sui paragrafi consecutivi (che vale
   fra due .lc-corpo-*) non li tocca: senza questa riga si attaccano. */
.lc-page .lc-hero-sottotitolo + * {
	margin-top: 14px;
}

/* La colonna dell'immagine. min-width:0 perche' e' un elemento di griglia:
   senza, non si comprime sotto la propria min-content e a schermi stretti
   spinge fuori la colonna accanto. */
.lc-page .lc-hero-media {
	min-width: 0;
}

/* L'immagine dell'hero e' l'elemento LCP: nel markup NON deve avere
   loading="lazy" e deve avere fetchpriority="high", oltre a width e height
   veri (senza, il browser non riserva lo spazio e la pagina salta). */
.lc-page .lc-hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-raggio);
}


/* --- Fascia CTA intermedia ----------------------------------------------
   Pannello blu basso da infilare FRA due sezioni, non al posto di una.
   Nasce per un motivo che vale per ogni pagina lunga: fra il bottone
   dell'hero e la CTA finale della Longevity c'erano 8.326px di scroll su
   telefono, dieci schermate, senza un solo punto di conversione
   (CLAUDE.md §7.1).

   ⚠️ NESSUN HEADING QUI DENTRO, deliberatamente: il claim e' un <p> col
   peso visivo di un H2. Una fascia non e' una sezione e non deve entrare
   nell'albero dei titoli.                                                 */
.lc-page .lc-fascia {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	max-width: 960px;
	margin-inline: auto;
	text-align: center;
}

/* Elemento flex: senza min-width:0 non si comprime sotto la propria
   min-content e su schermi stretti spinge fuori i bottoni. */
.lc-page .lc-fascia-testo {
	min-width: 0;
}

.lc-page .lc-fascia-claim {
	/* margin: 0 e non il margine del Reboot: il claim e' un <p> e senza
	   questo si porta dietro 1rem in fondo, che alza la fascia di 16px.
	   Misurato il 03/09/2026 contro la produzione: 193px invece di 177. */
	margin: 0;
	color: var(--lc-bianco);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.lc-page .lc-fascia-azione {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 360px;
}

@media (min-width: 768px) {
	.lc-page .lc-fascia {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
		text-align: left;
	}

	/* Elemento flex: senza min-width:0 non si comprime sotto la propria
   min-content e su schermi stretti spinge fuori i bottoni. */
.lc-page .lc-fascia-testo {
	min-width: 0;
}

.lc-page .lc-fascia-claim { font-size: 28px }

	.lc-page .lc-fascia-azione {
		flex: 0 0 auto;
		flex-direction: row;
		width: auto;
		max-width: none;
	}
}


/* --- CTA finale ----------------------------------------------------------
   Colonna stretta e centrata: e' l'ultima cosa che si legge e deve essere
   una sola frase a fuoco, non un paragrafo a piena larghezza.             */
.lc-page .lc-cta {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

/* Piu' grande di un H2 di sezione (36px): qui il titolo E' il messaggio, non
   l'etichetta di cio' che segue. Il colore su fondo blu lo mette 03-layout. */
#top .lc-page .lc-cta-h2 {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.18;
}

@media (max-width: 575.98px) {
	#top .lc-page .lc-cta-h2 { font-size: 27px }
}

.lc-page .lc-cta > * + * {
	margin-top: 16px;
}

.lc-page .lc-cta-azione {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
	margin-inline: auto;
}


/* --- Blocco team --------------------------------------------------------
   Tre fasce su desktop: intestazione su due colonne, poi la fotografia a
   piena larghezza, poi le specialita' in riga.

   L'IMMAGINE NON STA SUBITO SOTTO L'H2, come verrebbe naturale: separerebbe
   il titolo dai paragrafi che lo spiegano, e a piena larghezza titolo e
   testo verrebbero righe da ~140 caratteri. Con l'intestazione su due
   colonne il testo resta a misura e la banda sotto e' tutta per la foto,
   che passa da 463px a 1176px di larghezza (CLAUDE.md §7.5).

   ⚠️ SERVONO I DUE WRAPPER .lc-team-intro e .lc-team-testo, ed e' l'unica
   cosa che il CSS non poteva fare da solo: con occhiello, H2 e i due
   paragrafi come celle separate della stessa griglia, le righe si allineano
   a coppie e sotto l'occhiello si apre un buco alto quanto il primo
   paragrafo. Ogni wrapper e' invece una cella sola, e dentro il testo
   scorre.                                                                 */
.lc-page .lc-team {
	display: grid;
	gap: 24px;
}

.lc-page .lc-team-intro > * + * {
	margin-top: 12px;
}

.lc-page .lc-team-testo > * + * {
	margin-top: 1em;
}

/* La foto e' un mosaico di ritratti, non una scena: NON si ritaglia.
   Ritagliarla taglia via intere file di persone. */
.lc-page .lc-team-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-raggio);
}

@media (min-width: 992px) {
	.lc-page .lc-team {
		grid-template-columns: 1fr 1fr;
		gap: 32px 48px;
	}

	/* La foto e' il PRIMO blocco nel DOM ma sta nella seconda fascia: qui
	   e' l'unico punto della cartella in cui si riordina con la griglia, e
	   si puo' fare perche' non ci sono elementi focalizzabili da riordinare
	   (l'ordine di tabulazione non cambia). */
	.lc-page .lc-team-foto {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.lc-page .lc-team-intro { grid-row: 1 }
	.lc-page .lc-team-testo { grid-row: 1 }
	.lc-page .lc-team-voci  { grid-column: 1 / -1; grid-row: 3 }
}

.lc-page .lc-team-voci {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (min-width: 1100px) {
	.lc-page .lc-team-voci {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ⚠️ Fra 992 e 1100px le voci restano 2x2, e non e' gusto: il Chrome di
   questa macchina non scende sotto i 1120px di viewport, quindi sotto quella
   soglia i numeri sarebbero calcolati e non misurati (CLAUDE.md §7.5). Se
   un giorno si misura davvero, si abbassa il 1100. */


/* --- Galleria di fotografie ---------------------------------------------
   Rapporto imposto e ritaglio centrato: le foto di una galleria hanno quasi
   sempre proporzioni diverse fra loro, e senza questo le altezze ballano di
   decine di pixel per riga.                                               */
.lc-page .lc-galleria {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.lc-page .lc-galleria-cella {
	border-radius: var(--lc-raggio-piccolo);
	overflow: hidden;
	background: var(--lc-bianco);
}

.lc-page .lc-galleria-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 576px) {
	.lc-page .lc-galleria { grid-template-columns: repeat(2, 1fr) }
}

@media (min-width: 992px) {
	.lc-page .lc-galleria {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}


/* --- Carosello ----------------------------------------------------------
   Il markup e le classi sono quelle del kit ns-swiper (assets/js/ns-swiper.js).
   Qui stanno solo gli aggiustamenti che servono sempre.

   ⚠️ DUE TRAPPOLE, entrambe gia' costate tempo (CLAUDE.md §7.4, §8.1):
   1. Le frecce devono stare DENTRO [data-ns-scope] — e' cosi' che il kit le
      trova — e devono essere FRATELLI di .ns-swiper, non figlie: il CSS del
      kit nasconde .swiper-button-prev dentro .ns-swiper sotto md, e
      annidarle le farebbe sparire su telefono.
   2. Il margine che separa un'area dalla successiva NON va messo sulla
      barra di avanzamento, che da 768px in su e' display:none: un elemento
      nascosto non porta margine, e sul desktop le aree risultano attaccate.

   Swiper da' alle slide un'altezza propria, quindi le card si fermano al
   loro contenuto e i bordi non si allineano: slide ad altezza automatica
   piu' card al 100% le fa arrivare tutte in fondo alla riga.              */
.lc-page .lc-carosello .swiper-wrapper {
	align-items: stretch;
}

.lc-page .lc-carosello .swiper-slide {
	height: auto;
}

.lc-page .lc-carosello .swiper-slide > * {
	height: 100%;
}


/* --- Testo e immagine affiancati ----------------------------------------
   Il blocco piu' comune di una pagina di specialita'. Sta qui e non nel
   foglio di una pagina perche' lo useranno tutte le ~120 da migrare.

   1.05fr/1fr e non 1fr/1fr: le stesse proporzioni dell'hero, cosi' una
   sezione del corpo e l'apertura hanno lo stesso ritmo.                   */
.lc-page .lc-duo {
	display: grid;
	gap: 24px;
}

@media (min-width: 992px) {
	.lc-page .lc-duo {
		grid-template-columns: 1.05fr 1fr;
		column-gap: 56px;
		align-items: center;
	}

	/* Immagine a sinistra invece che a destra, per alternare il ritmo fra
	   una sezione e l'altra. Si puo' fare con `order` perche' l'unico
	   elemento riordinato e' un'immagine, che non e' focalizzabile:
	   l'ordine di tabulazione non cambia. Non farlo mai su un blocco che
	   contiene link o bottoni. */
	.lc-page .lc-duo--media-prima .lc-duo-media {
		order: -1;
	}
}

.lc-page .lc-duo-testo > * + * {
	margin-top: 1em;
}

.lc-page .lc-duo-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-raggio);
}


/* --- Card del professionista, dal campo ACF "medico" ---------------------
   Prodotta da [lc_professionisti]: un accordion in fondo alla pagina con
   dentro una griglia .lc-griglia--3, cioe' 1 colonna su telefono, 2 da 768px
   e 3 da 992px. Le colonne le da' gia' il componente griglia: qui non si
   ridichiarano.

   Sostituisce il blocco foto-affiancata-al-testo usato fino al 04/09/2026.
   Il cliente ha chiesto che i professionisti stiano in fondo, in un
   accordion, come su tutte le altre specialita' del sito.

   ⚠️ LA FOTO E' QUADRATA E LO IMPONE QUESTA REGOLA, non il componente base.
   L'<img> qui sta dentro .lc-prof-foto e NON porta la classe .lc-card-foto:
   e' apposta, per non ereditarne l'aspect-ratio 4/3 del componente standard,
   che su un ritratto verticale taglierebbe fronte o mento. E la size
   "square" di Enfold e' 180x180 ma NON e' croppata (lo dice il docblock di
   im_professionista_thumb() in functions.php): un ritratto 178x226 esce
   178x180. Serve percio' una regola dedicata, non quella del componente.  */
.lc-page .lc-prof-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.lc-page .lc-prof-nome {
	margin: 0;
	color: var(--lc-blu);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.lc-page .lc-prof-abstract {
	margin: 8px 0 0;
	color: var(--lc-testo-tenue);
	font-size: 15px;
	line-height: 1.5;
}

.lc-page .lc-prof-card .lc-card-corpo .btn {
	margin-top: 16px;
}


/* --- Elenco prestazioni, dal campo ACF "elenco_prestazioni" --------------
   ⚠️ Il campo e' un WYSIWYG e il cliente ci scrive quello che vuole. Queste
   regole vestono il caso normale (un <ul>) e non rompono gli altri: se un
   giorno ci finisce dentro della prosa, resta prosa leggibile.            */
.lc-page .lc-prestazioni > * + * {
	margin-top: 12px;
}

.lc-page .lc-prestazioni ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.lc-page .lc-prestazioni ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 20px;
	}
}

.lc-page .lc-prestazioni li {
	position: relative;
	padding: 12px 16px 12px 40px;
	background: var(--lc-bianco);
	border: 1px solid var(--lc-bordo);
	border-radius: var(--lc-raggio);
}

.lc-page .lc-prestazioni li::before {
	content: "";
	position: absolute;
	top: 1.15em;
	left: 16px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lc-blu);
}


/* --- Specialita' correlate, dal campo ACF "specialita_correlate" ---------
   ⚠️ NON si usa .lc-chip. 05-card.css la dichiara esplicitamente come
   etichetta e non bottone: "nessun bordo, nessun hover". Queste sono cinque
   destinazioni cliccabili e devono avere entrambi, altrimenti non si capisce
   che si possono premere.                                                 */
.lc-page .lc-correlate {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-page .lc-correlate a {
	display: inline-block;
	padding: 8px 16px;
	background: var(--lc-bianco);
	border: 1px solid var(--lc-bordo);
	border-radius: 999px;
	color: var(--lc-blu);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.lc-page .lc-correlate a:hover,
.lc-page .lc-correlate a:focus-visible {
	border-color: var(--lc-blu);
	background: var(--lc-fondo-alt);
}