/* Pagina generica (page.php, fallback senza Template Name; anche "Pagina — Hero ridotta").
   Caricato anche in Home e sulle pagine Visita (il loro corpo usa ancora le classi cc-page-*,
   ponte temporaneo). Qui i componenti del corpo pagina propri delle pagine generiche: intro,
   titoli, foto, slider, colori del testo nelle sezioni scure, griglie (jobs, specialità, step,
   risorse, video), pagine foto e indice pubblicazioni. Hero, struttura delle sezioni,
   timeline, chip, pillole, CTA e box prenotazione sono condivisi con gli altri template e
   definiti in base.css. Vedi CLAUDE.md > Design system / Animazioni. */

/* Contenuto che inizia/finisce con una fascia a tutta larghezza (.cc-page-section, es.
   pagina Ecografie): niente padding sopra/sotto, la fascia arriva a filo dell'hero e del
   box prenotazione invece di lasciare una striscia bianca. Le pagine che iniziano con testo
   o con .cc-page-intro mantengono il padding. */
.cc-page-body:has(> .cc-page-section:first-child) {
	padding-top: 0;
}

.cc-page-body:has(> .cc-page-section:last-child) {
	padding-bottom: 0;
}

/* .cc-page-intro può trovarsi dentro un contenitore flex (es. un blocco Gruppo di Gutenberg)
   il cui markup non possiamo toccare direttamente: :has() lo seleziona da qui via CSS,
   individuando "qualunque elemento che abbia .cc-page-intro come figlio diretto", senza
   bisogno di conoscerne la classe. Senza justify-content:center il figlio a piena larghezza
   (100vw, sotto) parte allineato a sinistra invece di sconfinare in modo simmetrico. */
*:has(> .cc-page-intro) {
	justify-content: center;
}

/* width:100vw da solo non basta in un contesto flex: un elemento flessibile può venire
   ristretto dall'algoritmo flex nonostante la width dichiarata. flex-shrink:0 + flex-basis:
   100vw forzano la larghezza piena indipendentemente dal parent. */
.cc-page-intro {
	width: 100vw;
	flex-shrink: 0;
	flex-basis: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ─── Intro testuale (corpo pagina) ────────────────────────────────────
   Un'unica classe sul contenitore: gli stili si applicano automaticamente a h2 (titolo,
   corsivo con accento sotto — invece del solito eyebrow+h2 delle altre sezioni) e p
   (testo) al suo interno, senza bisogno di classi aggiuntive su ciascun elemento. */

/* Margini laterali calcolati invece di "auto": la larghezza è 100vw (sopra) limitata a 720px,
   quindi su mobile l'intro è più larga del contenitore e con "auto" partiva dal suo bordo
   sinistro sbordando a destra (pagina più larga dello schermo, tutto spostato a sinistra).
   50% - metà della larghezza effettiva la centra sempre, sia più larga che più stretta. */
.cc-page-intro {
	max-width: 720px;
	margin: 0 calc(50% - min(50vw, 360px));
	padding: clamp(24px, 4vw, 48px) clamp(15px, 2vw, 24px);
	text-align: center;
}

/* Modificatore: niente padding sotto l'intro (e niente margine sull'ultimo elemento), quando
   segue subito una fascia .cc-page-section che ha già il suo padding sopra. */
.cc-page-intro--tight {
	padding-bottom: 0;
}

.cc-page-intro--tight > :last-child {
	margin-bottom: 0;
}

/* Tutti gli h2 del corpo pagina (non solo dentro .cc-page-intro): stesso trattamento
   corsivo con accento sotto invece del solito eyebrow+h2 delle altre sezioni. text-align:
   center è qui sull'h2 stesso (non ereditato dal contenitore) perché un h2 può comparire
   anche fuori da .cc-page-intro, in un contenitore non centrato. */
.cc-page-body h2 {
	position: relative;
	font-family: var(--font-heading);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.35;
	color: var(--primary);
	text-align: center;
	margin: 0 0 20px;
	padding-bottom: 20px;
}

/* Piccolo accento al posto del solito eyebrow uppercase */
.cc-page-body h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: var(--radius-pill);
	background: var(--accent);
}

/* h3: stessa famiglia dell'h2 (corsivo, centrato, colore primary) ma più piccolo e senza
   accento sotto — l'accento resta il "segnale" esclusivo del titolo di sezione (h2), così
   la gerarchia visiva tra i due resta leggibile. */
.cc-page-body h3 {
	font-family: var(--font-heading);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	line-height: 1.35;
	color: var(--primary);
	margin: 0 0 16px;
}

.cc-page-intro p {
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--muted-foreground);
	margin: 0 0 14px;
}

/* Eventuale elenco puntato dentro l'intro: stesso colore/dimensione dei paragrafi, ma
   allineato a sinistra (un elenco centrato è illeggibile) — display:inline-block sfrutta il
   text-align:center del contenitore per centrare il blocco lista nel suo insieme, mentre
   text-align:left al suo interno riallinea le singole voci. */
.cc-page-intro ul,
.cc-page-intro ol {
	display: inline-block;
	text-align: left;
	margin: 0 0 14px;
}

.cc-page-intro li {
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--muted-foreground);
}

.cc-page-intro p:last-child {
	margin-bottom: 0;
}

/* ─── Foto in colonna (corpo pagina) ──────────────────────────────────────────────────────
   Contenitore a 2 colonne (testo + foto/mappa) per il body in editor classico: grid propria,
   non dipende più dal CSS di .wp-block-columns di Gutenberg. Mobile-first, 1 colonna sotto
   i 720px (stesso breakpoint standard usato altrove nel tema). */
.cc-page-columns--photo,
.cc-page-columns-photo {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 720px) {
	.cc-page-columns--photo,
	.cc-page-columns-photo {
		grid-template-columns: 1fr 1fr;
	}
}

/* Sulla singola colonna che contiene il blocco Immagine: ritaglio verticale costante e
   angoli arrotondati, coerente con le altre foto del sito */
.cc-page-photo {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

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

/* Foto orizzontale a piena larghezza sotto il testo di una sezione (non in colonna): stessi
   angoli arrotondati di .cc-page-photo, ma ritaglio 16:9 invece che verticale. */
.cc-page-section__photo {
	margin: clamp(24px, 4vw, 32px) 0 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.cc-page-section__photo img {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Slider foto (dissolvenza) ────────────────────────────────────────
   Variante di .cc-page-section__photo con più foto in dissolvenza incrociata
   al posto di una singola immagine statica. Markup come blocco HTML
   personalizzato (wp:html), stesso motivo di .cc-page-steps: Gutenberg
   normalizza i Gruppi annidati e romperebbe lo stack assoluto delle slide.
   JS: assets/js/page-slider.js — senza JS (o con prefers-reduced-motion)
   resta visibile solo la prima slide, già .is-active nel markup. */
.cc-page-slider {
	position: relative;
	margin: clamp(24px, 4vw, 32px) 0 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 16 / 9;
}

.cc-page-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity var(--duration-hero) var(--ease);
}

.cc-page-slider__slide.is-active {
	opacity: 1;
}

.cc-page-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-page-slider__toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	padding: 6px 14px;
	border: none;
	border-radius: var(--radius-pill);
	background: rgba(15, 36, 71, 0.55);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 0.78rem;
	cursor: pointer;
	transition: background-color var(--duration-ui) var(--ease);
}

.cc-page-slider__toggle:hover,
.cc-page-slider__toggle:focus-visible {
	background: rgba(15, 36, 71, 0.85);
}

.cc-page-slider__dots {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 1;
	display: flex;
	gap: 8px;
}

/* Pallino visivo piccolo (9px) ma area cliccabile 25x25 via ::before, per restare
   comodo da toccare su mobile senza appesantire otticamente la foto sotto. */
.cc-page-slider__dot {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color var(--duration-ui) var(--ease), transform var(--duration-ui) var(--ease);
}

.cc-page-slider__dot::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.cc-page-slider__dot:hover,
.cc-page-slider__dot:focus-visible {
	background: rgba(255, 255, 255, 0.85);
}

.cc-page-slider__dot.is-active {
	background: #ffffff;
	transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
	.cc-page-slider__slide {
		transition: none;
	}
}

/* ─── Sezioni generiche ─────────────────────────────────────────────── */
/* Struttura delle sezioni (padding, --dark/--muted/--centered, testata, eyebrow, titolo) in
   base.css; qui colori del testo "nudo" su sfondo scuro e varianti proprie delle pagine. */

/* Card .cc-page-steps su sfondo scuro: la card resta chiara, quindi titolo e testo tornano ai
   colori normali — senza, la regola generica "p" qui sotto (#b9c8dd) li renderebbe chiari
   su chiaro. Specificità più alta di .cc-page-section--dark p. */
.cc-page-section--dark .cc-page-steps .cc-page-steps__title,
.cc-page-section-dark .cc-page-steps .cc-page-steps__title {
	color: var(--primary);
}

.cc-page-section--dark .cc-page-steps .cc-page-steps__text,
.cc-page-section-dark .cc-page-steps .cc-page-steps__text {
	color: var(--muted-foreground);
}

/* Rete di sicurezza per contenuto scritto con blocchi Gutenberg "nudi" (Titolo/Paragrafo
   nativi, non le classi cc-page-section__title/__lead): senza questa regola erediterebbero
   il colore di default (titoli blu navy, testo quasi nero) pensato per sfondi chiari,
   illeggibile su .cc-page-section--dark. */
.cc-page-section--dark :where(h1, h2, h3, h4, h5, h6),
.cc-page-section-dark :where(h1, h2, h3, h4, h5, h6) {
	color: #ffffff;
}

.cc-page-section--dark p,
.cc-page-section-dark p {
	color: #b9c8dd;
}

/* Elenchi su sfondo scuro: nessuna regola li copriva finora (solo p aveva un colore dedicato
   sopra) — senza questa il testo dei <li> erediterebbe il quasi-nero del body, invisibile sul
   navy. max-width + margin:auto centra il blocco nel layout (indipendentemente dal
   text-align:center della sezione, .cc-page-section--centered/-centered) restando più stretto
   e compatto della sezione intera; padding-left esplicito (invece del margin-left:3em di
   GeneratePress, pensato per un elenco "nudo" a piena larghezza) avvicina il pallino al testo;
   list-style-position:outside mantiene il pallino fuori dal testo ma vicino, non staccato. */
.cc-page-section--dark ul,
.cc-page-section--dark ol,
.cc-page-section-dark ul,
.cc-page-section-dark ol {
	max-width: 480px;
	margin: 14px auto 0;
	padding-left: 1.2em;
	text-align: left;
	list-style-position: outside;
}

/* Elenco Gutenberg seguito da altro testo (es. paragrafo dopo l'elenco segnali in
   Odontoiatria conservativa): margine sotto, altrimenti il paragrafo si attacca all'ultima voce. */
.cc-page-section--dark ul.wp-block-list,
.cc-page-section--dark ol.wp-block-list,
.cc-page-section-dark ul.wp-block-list,
.cc-page-section-dark ol.wp-block-list {
	margin-bottom: 14px;
}

.cc-page-section--dark li,
.cc-page-section-dark li {
	color: #ffffff;
}

/* .cc-medico-cta su sfondo scuro (.cc-page-section--dark, background: var(--primary)): lo
   stato normale del bottone userebbe lo stesso var(--primary) dello sfondo, sparendoci sopra
   — qui si parte dal colore già previsto per l'hover altrove (var(--footer)), e per l'hover
   si scende a un blu ancora più scuro. */
.cc-page-section--dark .cc-medico-cta,
.cc-page-section--dark .cc-btn,
.cc-page-section-dark .cc-medico-cta ,
.cc-page-section-dark .cc-btn {
	background: var(--footer);
}

.cc-page-section--dark .cc-medico-cta:hover,

.cc-page-section--dark .cc-btn:hover,
.cc-page-section--dark .cc-medico-cta:focus,
.cc-page-section--dark .cc-btn:focus,
.cc-page-section-dark .cc-medico-cta:hover,
.cc-page-section-dark .cc-btn:hover,
.cc-page-section-dark .cc-medico-cta:focus ,
.cc-page-section-dark .cc-btn:focus {
	background: #0b1932;
}

/* Il tema padre (GeneratePress) applica un colore hover globale ai link scuro/quasi nero,
   illeggibile su questo sfondo navy — qui lo sostituiamo con un azzurro luminoso. Esclude
   .cc-medico-cta: quel bottone ha già il proprio hover (sfondo footer, testo bianco, come
   nell'header) e per specificità questa regola glielo sovrascriverebbe solo sul colore,
   rendendolo incoerente con lo stesso bottone altrove. */
.cc-page-section--dark a:not(.cc-medico-cta):not(.cc-btn):hover,
.cc-page-section--dark a:not(.cc-medico-cta):not(.cc-btn):focus,
.cc-page-section-dark a:not(.cc-medico-cta):not(.cc-btn):hover,
.cc-page-section-dark a:not(.cc-medico-cta):not(.cc-btn):focus {
	color: #8fb2ea;
}

/* Link dentro le card chiare .cc-page-steps su sfondo scuro: l'azzurro qui sopra è pensato
   per il navy e sulla card chiara si leggerebbe poco — qui hover/focus in nero. */
.cc-page-section--dark .cc-page-steps a:not(.cc-medico-cta):not(.cc-btn):hover,
.cc-page-section--dark .cc-page-steps a:not(.cc-medico-cta):not(.cc-btn):focus,
.cc-page-section-dark .cc-page-steps a:not(.cc-medico-cta):not(.cc-btn):hover,
.cc-page-section-dark .cc-page-steps a:not(.cc-medico-cta):not(.cc-btn):focus {
	color: var(--foreground);
}

/* Sezione che continua la precedente sullo stesso sfondo (es. box pubblicazioni subito sotto
   i 4 box di "Implantologia"): senza padding sopra, lo stacco lo dà già il padding sotto
   della sezione precedente — altrimenti i due vuoti si sommano. */
.cc-page-section--flush-top {
	padding-top: 0;
	margin-block-start: 0; /* annulla anche lo spazio tra blocchi che WP aggiunge nei layout "flow" */
}

/* Sezione seguita da una --flush-top che ne continua il discorso (es. Home: box servizi →
   testo SIMCRI): spazio sotto ridotto, così i due contenuti restano vicini. */
.cc-page-section--tight-bottom {
	padding-bottom: clamp(20px, 3vw, 32px);
}

/* GeneratePress aggiunge padding 40px (30px sotto i 768px) a OGNI contenitore interno dei
   Gruppi (.site-main .wp-block-group__inner-container, CSS inline del tema padre): in una
   sezione ce ne sono due (sezione + __inner), quindi +80px sopra e sotto. Qui li si azzera
   solo sul lato che serve: sopra per --flush-top, sotto per --tight-bottom. Il prefisso
   .site-main pareggia/supera la specificità della regola del tema. */
.site-main .cc-page-section--flush-top > .wp-block-group__inner-container,
.site-main .cc-page-section--flush-top > .wp-block-group__inner-container > .cc-page-section__inner > .wp-block-group__inner-container {
	padding-top: 0;
}

.site-main .cc-page-section--tight-bottom > .wp-block-group__inner-container,
.site-main .cc-page-section--tight-bottom > .wp-block-group__inner-container > .cc-page-section__inner > .wp-block-group__inner-container {
	padding-bottom: 0;
}

/* Icona sopra titolo/eyebrow di una sezione centrata: blocco Immagine Gutenberg con classe
   cc-page-section__icon (es. icona FAQ nell'ultima fascia di "Implantologia"). */
.cc-page-section__icon {
	margin: 0 auto 14px;
}

.cc-page-section__icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* ─── Aree (chip): componente in base.css, qui il margine proprio delle pagine ─────────── */

.cc-page-areas {
	margin: clamp(28px, 4vw, 34px) auto;
}

/* Su sfondo scuro: la regola generica degli elenchi (.cc-page-section--dark ul, più
   specifica di .cc-page-areas) stringeva i box a 480px. Qui griglia propria: 1 colonna su
   mobile, 2 da 720px (stesso breakpoint di .cc-page-steps). Vale per gli esami della pagina
   Ecografie e per l'elenco automatico [cc_elenco_area stile="box"]. */
.cc-page-section--dark ul.cc-page-areas,
.cc-page-section-dark ul.cc-page-areas {
	max-width: 900px;
	margin: clamp(28px, 4vw, 34px) auto 0;
	padding: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.cc-page-section--dark ul.cc-page-areas,
	.cc-page-section-dark ul.cc-page-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Card con link (es. esami → box prenotazione): tutta la card cliccabile tramite ::after
   esteso sull'intera card, testo bianco come le card senza link. */
.cc-page-areas__item:has(> a) {
	position: relative;
}

.cc-page-areas__item > a {
	color: inherit;
	text-decoration: none;
}

.cc-page-areas__item > a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cc-page-areas__item:has(> a:focus-visible) {
	outline: 2px solid #8fb2ea;
	outline-offset: 3px;
}

.cc-page-areas__item > a:focus-visible {
	outline: none;
}

/* Estratto sotto il titolo ([cc_elenco_area stile="box" estratto="si"], es. Odontoiatria):
   più leggero del titolo, colore testo chiaro delle sezioni scure. */
.cc-page-areas__item .cc-page-areas__desc {
	margin: 8px 0 0;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #b9c8dd;
}

/* ─── Griglia posizioni aperte (es. Lavora con noi) ───────────────────────────────────────
   Card piatta e semplice, nessun trattamento decorativo (niente logo/foto in sovrimpressione
   come nelle card team di gruppo.css): qui il contenuto è testuale/informativo, non un
   profilo persona. Il bottone riusa .cc-medico-cta (condiviso, definito in base.css). */

.cc-page-jobs {
	max-width: var(--content-max);
	margin-inline: auto;
	margin-top: clamp(20px, 5vw, 50px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 720px) {
	.cc-page-jobs {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cc-page-jobs__card {
	display: flex;
	flex-direction: column;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 4vw, 36px);
}

/* Le icone sorgente sono PNG bianchi (pensati per sfondi scuri): senza uno sfondo sotto
   risultano invisibili sulla card chiara .cc-page-jobs__card. */
.cc-page-jobs__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--accent);
	border-radius: var(--radius-lg);
	margin: 0 0 16px;
}

.cc-page-jobs__icon {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.cc-page-jobs__category {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 8px;
}

.cc-page-jobs__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--primary);
	margin: 0 0 12px;
}

.cc-page-jobs__desc {
	font-family: var(--font-body);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--muted-foreground);
	margin: 0 0 20px;
}

.cc-page-jobs__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
}

.cc-page-jobs__tag {
	background: var(--muted);
	color: var(--muted-foreground);
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
}

.cc-page-jobs__card .cc-medico-cta ,

.cc-page-jobs__card .cc-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ─── Griglia specialità/aree di specializzazione (es. Odontoiatria) ──────────────────────
   Griglia elastica auto-fit: nessun breakpoint fisso, il numero di colonne si adatta da solo
   allo spazio disponibile (1 su mobile, 2-4 su schermi più larghi). Foto + titolo linkati
   (stesso pattern del contenuto sorgente), descrizione non cliccabile. Ogni card è un
   .cc-page-specialties__item (nessuno stile proprio, serve solo a raggruppare foto/titolo/
   testo in un'unica cella di griglia — senza non starebbero insieme). */

.cc-page-specialties {
	max-width: var(--content-max);
	margin: clamp(40px, 6vw, 64px) auto 0;
	padding: 0 clamp(10px, 2vw, 24px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.cc-page-specialties__photo {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	margin: 0 0 16px;
}

.cc-page-specialties__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	/* Foto d'archivio con dominante gialla/calda: schiarite e desaturate leggermente
	   per un look più neutro e luminoso, coerente con la palette del sito. */
	filter: brightness(1.08) saturate(0.9);
	transition: transform var(--duration-ui) var(--ease);
}

.cc-page-specialties__photo:hover img {
	transform: scale(1.04);
}

.cc-page-specialties__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	margin: 0 0 8px;
}

.cc-page-specialties__title a {
	color: var(--primary);
	text-decoration: none;
	transition: color var(--duration-ui) var(--ease);
}

.cc-page-specialties__title a:hover {
	color: var(--accent);
}

.cc-page-specialties__desc {
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--muted-foreground);
	margin: 0;
}

/* ─── Griglia step con icona (card) ────────────────────────────────────────────────────────
   Riepilogo dei passaggi (es. "Come si sviluppa il trattamento"): card con icona, titolo e
   breve testo. Stessi breakpoint di .cc-gruppo-team (gruppo.css) — 1 colonna mobile, 2 da
   720px, 4 da 1300px. Markup come blocco HTML personalizzato (wp:html), non Gruppi
   annidati: Gutenberg normalizza/riscrive i blocchi Gruppo aggiungendo wrapper e classi di
   layout proprie (.wp-block-group__inner-container.is-layout-flow...) che rompevano la
   griglia — con HTML puro la struttura resta esattamente questa, senza reinterpretazioni. */

.cc-page-steps {
	max-width: var(--content-max);
	margin: clamp(28px, 4vw, 40px) auto 0;
	padding: 0 clamp(10px, 2vw, 24px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 32px);
}

@media (min-width: 720px) {
	.cc-page-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1300px) {
	.cc-page-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Variante 3 colonne da desktop (griglie con un numero di card multiplo di 3, es. 6). */
@media (min-width: 1300px) {
	.cc-page-steps--3col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Variante 2 colonne anche da desktop (es. 2 card affiancate): senza, sopra i 1300px le 2
   card occuperebbero solo metà della griglia a 4. Contenitore più stretto per non avere
   card troppo larghe. */
.cc-page-steps--2col {
	max-width: 900px;
}

@media (min-width: 1300px) {
	.cc-page-steps--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cc-page-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 3vw, 32px) clamp(18px, 2vw, 24px);
}

/* Su sezione già grigia (.cc-page-section--muted) le card grigie ci sparirebbero sopra:
   qui restano bianche per contrasto con lo sfondo della sezione. */
.cc-page-section--muted .cc-page-steps__item,
.cc-page-section-muted .cc-page-steps__item {
	background: var(--background);
}

/* Niente sfondo colorato dietro: a differenza di .cc-page-jobs__icon-wrap (icone sorgente
   bianche, illeggibili su sfondo chiaro senza un riquadro colorato sotto), qui le icone sono
   già scure/colorate e si leggono direttamente sulla card — un cerchio colorato dietro le
   appesantirebbe soltanto. */
.cc-page-steps__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 0 16px;
}

.cc-page-steps__icon-wrap img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
}

/* ─── Icone tema (.cc-icon) ────────────────────────────────────────────────────────────────
   Icone lineari disegnate via CSS: nel contenuto basta <span class="cc-icon cc-icon--nome">.
   Non SVG inline perché WordPress, senza il permesso "HTML non filtrato", toglie i tag <svg>
   al salvataggio dall'editor a blocchi; uno <span> con classe invece resta. Il disegno è la
   maschera (alpha), il colore è il background → si cambia col token, non nel file SVG.
   Lo span contiene un &nbsp;: l'editor classico (TinyMCE) elimina gli span vuoti al
   salvataggio. font-size/color nascondono quel carattere. */
.cc-icon {
	display: block;
	width: 48px;
	height: 48px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	overflow: hidden;
	background-color: var(--accent);
	-webkit-mask: var(--cc-icon) center / contain no-repeat;
	mask: var(--cc-icon) center / contain no-repeat;
}

.cc-page-resources__icon .cc-icon {
	width: 100%;
	height: 100%;
}

.cc-icon--portafoglio { --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='16.5' cy='13.5' r='1.2'/%3E%3C/svg%3E"); }
.cc-icon--calendario { --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3Cpath d='M7 13h2M11 13h2M15 13h2M7 17h2M11 17h2'/%3E%3C/svg%3E"); }
.cc-icon--segnaposto { --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.cc-icon--documento { --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.cc-icon--endorale { --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='18' rx='2'/%3E%3Cpath d='M10 8c0-1 .9-1.5 2-1.5s2 .5 2 1.5c0 1.5-.6 2.5-.8 4.5-.1 1-.4 2-1.2 2s-1.1-1-1.2-2C10.6 10.5 10 9.5 10 8z'/%3E%3C/svg%3E"); }
.cc-icon--panoramica { --cc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M5 10c2 3 4.5 4.5 7 4.5s5-1.5 7-4.5'/%3E%3Cpath d='M8 12.6v1.6M12 14.5v1.5M16 12.6v1.6'/%3E%3C/svg%3E"); }

.cc-page-steps__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--primary);
	margin: 0 0 10px;
}

.cc-page-steps__text {
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--muted-foreground);
	margin: 0;
}

/* Più paragrafi nella stessa card */
.cc-page-steps__text + .cc-page-steps__text {
	margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.cc-page-specialties__photo img,
	.cc-page-specialties__title a {
		transition: none;
	}
}

/* ─── Griglia risorse — 1 card grande con elenco + card piccole a link (es. pagina
   "Implantologia funzionale": Pubblicazioni + Video/FAQ/Supporto scientifico) ────────────
   A differenza di .cc-page-steps/.cc-page-specialties qui le card non sono tutte uguali:
   la prima contiene un vero elenco di link (non è lei stessa cliccabile), le altre sono
   singole card-link a tinta piena con icona, stesso pattern delle card icona della Home.
   3 righe × 2 colonne: la card grande occupa la colonna larga per tutta l'altezza, le
   piccole si impilano una per riga nella colonna stretta. Sotto i 720px, 1 colonna in
   ordine di contenuto. Markup come blocco HTML personalizzato (wp:html), stesso motivo di
   .cc-page-steps: Gutenberg normalizza i Gruppi annidati e romperebbe la griglia. */

.cc-page-resources {
	max-width: var(--content-max);
	margin: clamp(28px, 4vw, 40px) auto 0;
	padding: 0 clamp(10px, 2vw, 24px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 2vw, 20px);
}

@media (min-width: 720px) {
	.cc-page-resources {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: repeat(3, minmax(120px, 1fr));
		grid-template-areas:
			"a b"
			"a c"
			"a d";
	}
}

.cc-page-resources__card--a { grid-area: a; }
.cc-page-resources__card--b { grid-area: b; }
.cc-page-resources__card--c { grid-area: c; }
.cc-page-resources__card--d { grid-area: d; }

.cc-page-resources__card {
	position: relative;
	border-radius: var(--radius-lg);
	padding: clamp(20px, 3vw, 28px);
}

/* --- Card grande, elenco pubblicazioni --- */
.cc-page-resources__card--a {
	background: var(--muted);
}

.cc-page-resources__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
}

.cc-page-resources__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Distacco dal contenuto sopra (es. immagine) quando la griglia non apre la sezione.
   Selettore doppio: .cc-page-resources--single (più avanti nel file) azzera il margin-top. */
.cc-page-resources.cc-page-resources--spaced {
	margin-top: clamp(32px, 5vw, 48px);
}

/* Immagini impilate (es. locandina + fascia PagoDIL) trattate come un'unica figura:
   angoli arrotondati sul contenitore, coerenti con le altre foto del sito */
.cc-page-rounded {
	max-width: 1024px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.cc-page-rounded img {
	display: block;
	width: 100%;
	height: auto;
}

/* Da aggiungere all'<img> dentro .cc-page-resources__icon quando l'icona originale è
   troppo chiara/slavata sulla card: la scurisce senza bisogno di rifare il file sorgente. */
.cc-icon-dark {
	filter: brightness(0.8);
}

.cc-page-resources__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-style: normal;
	text-align: left;
	color: var(--primary);
	margin: 0 0 16px;
}

.cc-page-resources__card--a .cc-page-resources__title {
	font-size: 1.2rem;
}

.cc-page-resources__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-page-resources__list li {
	border-top: 1px solid var(--border);
}

.cc-page-resources__list li:first-child {
	border-top: none;
}

.cc-page-resources__list a {
	display: block;
	padding: 12px 0;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--foreground);
	text-decoration: none;
	transition: color var(--duration-ui) var(--ease);
}

.cc-page-resources__list a:hover,
.cc-page-resources__list a:focus-visible {
	color: var(--accent);
}

/* --- Card piccole, singolo link a tinta piena --- */
.cc-page-resources__card--link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #ffffff;
	text-decoration: none;
	transition: transform var(--duration-ui) var(--ease), box-shadow var(--duration-ui) var(--ease);
	box-shadow: 0 1px 2px rgba(15, 36, 71, 0.08);
}

.cc-page-resources__card--link:hover,
.cc-page-resources__card--link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 20px 34px -18px rgba(15, 36, 71, 0.4);
}

.cc-page-resources__card--link .cc-page-resources__title {
	color: #ffffff;
	margin: 0;
	font-size: 1.05rem;
}

/* --- Variante a box unico (--single): solo la card elenco, a tutta larghezza, con
   icona + eyebrow + titolo di sezione centrati dentro il box (es. "Implantologia") --- */
.cc-page-resources--single {
	display: block;
	margin-top: 0;
}

.cc-page-resources__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: clamp(16px, 2.5vw, 24px);
}

.cc-page-resources__head .cc-page-resources__icon {
	margin-bottom: 12px;
}

.cc-page-resources--single .cc-page-resources__list {
	max-width: 760px;
	margin: 0 auto;
}

/* Pubblicazioni dentro una sezione scura (es. Implantologia funzionale): niente box chiaro,
   l'elenco sta direttamente sul blu della fascia. Eyebrow e titolo prendono già i colori
   "dark" da base.css; qui link chiari, separatori bianchi trasparenti, e reset dell'elenco
   (la regola generica .cc-page-section--dark ul gli darebbe rientro e larghezza 480px). */
.cc-page-section--dark .cc-page-resources {
	position: relative;
	z-index: 1;
	max-width: 900px; /* stessa larghezza delle card .cc-page-steps--2col sotto */
	text-align: left;
}

.cc-page-section--dark .cc-page-resources__card--a {
	background: none;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Testata della fascia (frase lead) seguita dalle pubblicazioni: stacco ridotto rispetto al
   margine standard della testata (40-56px), qui il discorso prosegue. */
.cc-page-section--dark:has(.cc-page-resources) .cc-page-section__head {
	margin-bottom: clamp(16px, 2.5vw, 24px);
}

.cc-page-section--dark .cc-page-resources .cc-page-resources__list {
	padding: 0;
}

.cc-page-section--dark .cc-page-resources__list li {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.cc-page-section--dark .cc-page-resources__list a {
	color: #ffffff;
}

.cc-page-section--dark .cc-page-resources__list a:hover,
.cc-page-section--dark .cc-page-resources__list a:focus-visible {
	color: #8fb2ea;
}

.cc-page-resources__card--b { background: var(--primary); }
.cc-page-resources__card--c { background: var(--accent); }
.cc-page-resources__card--d { background: var(--footer); }

@media (prefers-reduced-motion: reduce) {
	.cc-page-resources__card--link {
		transition: none;
	}

	.cc-page-resources__card--link:hover,
	.cc-page-resources__card--link:focus-visible {
		transform: none;
	}
}

/* ─── Video gallery (.cc-video-gallery) ────────────────────────────────────────────────────
   Griglia di video "a facciata": ogni video parte come anteprima + pulsante play (link a
   YouTube se JS non parte), assets/js/video-gallery.js lo sostituisce con l'iframe
   youtube-nocookie solo al clic — nessun player caricato con la pagina (LCP/INP, privacy).
   Primo video in evidenza (--featured): da 1100px occupa tutta la riga, video e testo
   affiancati. Markup come blocco HTML personalizzato (wp:html), stesso motivo di
   .cc-page-steps. */

.cc-video-gallery {
	max-width: var(--content-max);
	margin: clamp(28px, 4vw, 40px) auto 0;
	padding: 0 clamp(10px, 2vw, 24px);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 32px);
	text-align: left;
}

@media (min-width: 720px) {
	.cc-video-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cc-video-gallery__item {
	display: flex;
	flex-direction: column;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 36, 71, 0.06);
	transition: transform var(--duration-ui) var(--ease), box-shadow var(--duration-ui) var(--ease);
}

.cc-video-gallery__item:hover,
.cc-video-gallery__item:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 22px 36px -20px rgba(15, 36, 71, 0.35);
}

/* Contenitore 16:9: riserva lo spazio prima che l'anteprima carichi (niente CLS) e resta
   della stessa misura quando l'anteprima viene sostituita dall'iframe. */
.cc-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--footer);
	overflow: hidden;
}

.cc-video__poster {
	position: absolute;
	inset: 0;
	display: block;
	cursor: pointer;
}

/* hqdefault di YouTube è 4:3 con bande nere sopra/sotto: object-fit:cover in un box 16:9
   le taglia via. */
.cc-video__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-hero) var(--ease);
}

/* Velo sfumato dal basso (--footer) per staccare il pulsante play da anteprime chiare. */
.cc-video__poster::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 36, 71, 0.55), rgba(15, 36, 71, 0.05) 60%);
	transition: opacity var(--duration-ui) var(--ease);
}

.cc-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--background);
	box-shadow: 0 10px 24px -8px rgba(15, 36, 71, 0.5);
	transition: transform var(--duration-ui) var(--ease), background-color var(--duration-ui) var(--ease);
}

/* Triangolo "play" disegnato coi bordi, leggermente spostato a destra per il centro ottico. */
.cc-video__play::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent var(--primary);
	transition: border-color var(--duration-ui) var(--ease);
}

.cc-video__poster:hover img,
.cc-video__poster:focus-visible img {
	transform: scale(1.05);
}

.cc-video__poster:hover .cc-video__play,
.cc-video__poster:focus-visible .cc-video__play {
	transform: scale(1.1);
	background: var(--accent);
}

.cc-video__poster:hover .cc-video__play::before,
.cc-video__poster:focus-visible .cc-video__play::before {
	border-left-color: var(--background);
}

.cc-video__poster:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: -3px;
}

.cc-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cc-video-gallery__body {
	padding: clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 26px) clamp(22px, 3vw, 28px);
}

.cc-video-gallery__num {
	display: block;
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--accent);
}

.cc-video-gallery__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.3;
	text-align: left;
	color: var(--primary);
	margin: 0 0 10px;
}

.cc-video-gallery__text {
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--muted-foreground);
	margin: 0;
}

/* Video in evidenza: tutta la riga, video e testo affiancati da 1100px. */
.cc-video-gallery__item--featured {
	grid-column: 1 / -1;
}

@media (min-width: 1100px) {
	.cc-video-gallery__item--featured {
		display: grid;
		grid-template-columns: 3fr 2fr;
		align-items: center;
	}

	.cc-video-gallery__item--featured .cc-video-gallery__body {
		padding: clamp(24px, 3vw, 44px);
	}

	.cc-video-gallery__item--featured .cc-video-gallery__title {
		font-size: 1.5rem;
	}

	.cc-video-gallery__item--featured .cc-video-gallery__text {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-video-gallery__item,
	.cc-video__poster img,
	.cc-video__poster::after,
	.cc-video__play,
	.cc-video__play::before {
		transition: none;
	}

	.cc-video-gallery__item:hover,
	.cc-video-gallery__item:focus-within,
	.cc-video__poster:hover img,
	.cc-video__poster:focus-visible img,
	.cc-video__poster:hover .cc-video__play,
	.cc-video__poster:focus-visible .cc-video__play {
		transform: none;
	}
}

/* ─── Supporti per le pagine lunghe (es. Implantologia) ───────────────────────────────────── */

/* Colonna con un video .cc-video accanto al testo (al posto di .cc-page-photo, che forzerebbe
   il ritaglio 3:4 delle foto): angoli arrotondati e ombra leggera. */
.cc-page-video .cc-video {
	border-radius: var(--radius-lg);
	box-shadow: 0 22px 40px -24px rgba(15, 36, 71, 0.45);
}

/* Colonna di lettura più stretta per testi lunghi senza foto: righe da ~75 caratteri invece
   della larghezza piena del contenuto. */
.cc-page-section__inner--narrow {
	max-width: 760px;
}

/* Foto orizzontale in colonna: ritaglio 3:2 invece del 3:4 verticale di .cc-page-photo. */
.cc-page-photo--landscape img {
	aspect-ratio: 3 / 2;
}

/* Titoli delle card .cc-page-steps usati come link: colore del titolo, accento in hover. */
.cc-page-steps__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease);
}

.cc-page-steps__title a:hover,
.cc-page-steps__title a:focus-visible {
	color: var(--accent);
}

/* Titolo di sezione usato come link (es. "L'implantologia dentale è dolorosa?"). */
/* Secondo titolo nella stessa fascia (es. Centro Polispecialistico: "Diagnostica e
   trattamenti" dopo l'elenco visite): stacco dal contenuto sopra. Selettore doppio per
   superare .cc-page-body h2 (margin-top 0). */
.cc-page-section .cc-page-section__title--gap-top {
	margin-top: clamp(56px, 8vw, 88px);
}

.cc-page-section__title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid var(--accent);
}

.cc-page-section__title a:hover,
.cc-page-section__title a:focus-visible {
	color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
	.cc-page-steps__title a {
		transition: none;
	}
}

/* ─── Pagina foto interventi (.cc-photo-*) ────────────────────────────────────────────────
   Es. "Foto interventi implantologia funzionale". Ogni tipologia è un "capitolo":
   fascia grigia (.cc-photo-chapter) con numero grande a contorno, titolo, immagine schema e
   definizioni, seguita da una fascia bianca (.cc-photo-cases) con le serie di foto.
   Le gallerie sono blocchi Galleria nativi (classe cc-photo-gallery), con "Espandi al clic"
   (lightbox nativo WP) sulle immagini: nessun JS/plugin del tema. Numerazioni (01, 1.2,
   foto 1…n) tutte con contatori CSS, nessun testo aggiunto nel contenuto. */

.cc-page-body {
	counter-reset: cc-chapter;
}

/* Avviso contenuti sensibili nell'intro */
.cc-page-intro .cc-page-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 560px;
	margin: clamp(18px, 3vw, 28px) auto 0;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	background: var(--alert-soft);
	color: var(--alert);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
}

.cc-page-intro .cc-page-notice::before {
	content: '!';
	flex: 0 0 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--alert);
	color: var(--background);
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
}

/* Salto ai capitoli */
.cc-page-intro .cc-photo-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: clamp(22px, 3vw, 32px) 0 0;
}

.cc-photo-nav a {
	padding: 10px 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--background);
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	transition: background-color var(--duration-ui) var(--ease), color var(--duration-ui) var(--ease), border-color var(--duration-ui) var(--ease);
}

.cc-photo-nav a::after {
	content: ' ↓';
	color: var(--accent);
	transition: color var(--duration-ui) var(--ease);
}

.cc-photo-nav a:hover,
.cc-photo-nav a:focus-visible {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--background);
}

.cc-photo-nav a:hover::after,
.cc-photo-nav a:focus-visible::after {
	color: var(--background);
}

/* Capitolo: numero a contorno sopra il titolo */
.cc-photo-chapter {
	counter-increment: cc-chapter;
	counter-reset: cc-case;
	scroll-margin-top: 90px;
}

.cc-photo-chapter .cc-page-section__inner::before {
	content: counter(cc-chapter, decimal-leading-zero);
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(3.2rem, 8vw, 5.5rem);
	line-height: 1;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--accent);
	margin-bottom: 6px;
}

.cc-photo-chapter__cols {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
	max-width: 900px;
	margin: clamp(20px, 3vw, 32px) auto 0;
}

@media (min-width: 720px) {
	.cc-photo-chapter__cols {
		grid-template-columns: minmax(200px, 300px) 1fr;
	}
}

/* Immagine schema come una "stampa": bordo bianco, angoli morbidi, ombra leggera */
.cc-photo-chapter__figure .wp-block-image {
	max-width: 300px;
	margin: 0 auto;
	padding: 8px;
	background: var(--background);
	border-radius: var(--radius-lg);
	box-shadow: 0 22px 40px -26px rgba(15, 36, 71, 0.45);
}

.cc-photo-chapter__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Definizioni: titoletto + testo con filetto accento a sinistra */
.cc-photo-defs h3 {
	font-size: 1.2rem;
	text-align: left;
	margin: 0 0 6px;
	padding-left: 16px;
	border-left: 3px solid var(--accent);
}

.cc-photo-defs p {
	margin: 0 0 22px;
	padding-left: 19px;
	color: var(--muted-foreground);
	line-height: 1.6;
	text-align: left;
}

.cc-photo-defs p:last-child {
	margin-bottom: 0;
}

/* Serie di foto */
.cc-photo-case + .cc-photo-case {
	margin-top: clamp(40px, 6vw, 64px);
}

.cc-photo-case h3 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	text-align: left;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

.cc-photo-case h3::before {
	counter-increment: cc-case;
	content: counter(cc-chapter) '.' counter(cc-case);
	flex: none;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--muted);
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--accent);
}

/* Griglia foto: sovrascrive il layout flex della Galleria core (stessa specificità dei
   selettori core, :not(#individual-image) compreso). */
.wp-block-gallery.has-nested-images.cc-photo-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(100px, 22vw, 170px), 1fr));
	gap: clamp(8px, 1.2vw, 14px);
	margin: 0;
	counter-reset: cc-shot;
}

.wp-block-gallery.has-nested-images.cc-photo-gallery figure.wp-block-image:not(#individual-image) {
	position: relative;
	width: auto;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--muted);
	counter-increment: cc-shot;
}

.wp-block-gallery.has-nested-images.cc-photo-gallery figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-hero) var(--ease);
}

.wp-block-gallery.has-nested-images.cc-photo-gallery figure.wp-block-image:hover img {
	transform: scale(1.06);
}

/* Numero progressivo della foto nella serie (la sequenza è cronologica) */
.wp-block-gallery.has-nested-images.cc-photo-gallery figure.wp-block-image::before {
	content: counter(cc-shot);
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 2;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: rgba(15, 36, 71, 0.72);
	color: var(--background);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	pointer-events: none;
}

/* Variante archivio (.cc-photo-gallery--archivio, es. Foto interventi implantologia
   funzionale): etichetta discreta "Immagine d'archivio" in alto a sinistra su ogni miniatura
   (il numero progressivo è già in basso a sinistra, ::before). Solo sulle miniature: la
   foto ingrandita del lightbox non la mostra. */
.wp-block-gallery.has-nested-images.cc-photo-gallery--archivio figure.wp-block-image::after {
	content: 'Immagine d\2019 archivio'; /* \2019 = apostrofo tipografico; lo spazio chiude il codice, non compare */
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	max-width: calc(100% - 12px);
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.82);
	color: var(--muted-foreground);
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* Schermi stretti: sotto i 560px le miniature scendono a 100-120px e la scritta intera non
   ci sta (misurato) → versione corta */
@media (max-width: 559px) {
	.wp-block-gallery.has-nested-images.cc-photo-gallery--archivio figure.wp-block-image::after {
		content: 'Archivio';
	}
}

/* Variante prima/dopo (.cc-photo-gallery--prima-dopo, es. Gengive e parodontologia): coppia
   di foto grandi affiancate (impilate su mobile), immagine intera e non ritagliata (contain su
   cornice 3:2, i formati originali sono diversi tra loro), didascalia sotto la foto invece che
   sovrapposta, etichetta Prima/Dopo al posto del numero progressivo. Galleria con
   "Ritaglia immagini" disattivato (niente classe is-cropped). */
.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo {
	grid-template-columns: 1fr;
	gap: clamp(16px, 2.5vw, 28px);
	max-width: 1000px;
	margin: clamp(28px, 4vw, 44px) auto;
}

@media (min-width: 600px) {
	.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo figure.wp-block-image:not(#individual-image) {
	aspect-ratio: auto;
	overflow: visible;
	background: none;
	border-radius: 0;
	justify-content: flex-start;
}

.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo figure.wp-block-image:not(#individual-image) img {
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--background);
	border-radius: var(--radius-md);
	box-shadow: 0 22px 40px -26px rgba(15, 36, 71, 0.45);
}

.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo figure.wp-block-image:hover img {
	transform: none;
}

/* Etichetta: resetta anche la sfumatura sfocata che il core mette sul ::before delle
   immagini con didascalia (:has(figcaption)) */
.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo figure.wp-block-image::before {
	content: 'Prima';
	top: 10px;
	left: 10px;
	bottom: auto;
	height: 26px;
	max-height: none;
	width: auto;
	padding: 0 12px;
	backdrop-filter: none;
	-webkit-mask-image: none;
	mask-image: none;
	background: rgba(15, 36, 71, 0.72);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo figure.wp-block-image:nth-child(2)::before {
	content: 'Dopo';
	background: var(--primary);
	box-shadow: 0 0 0 2px var(--accent);
}

.wp-block-gallery.has-nested-images.cc-photo-gallery--prima-dopo figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	margin: 12px 0 0;
	padding: 0 2px;
	background: none;
	color: var(--muted-foreground);
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: left;
	text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.cc-photo-nav a,
	.cc-photo-nav a::after,
	.wp-block-gallery.has-nested-images.cc-photo-gallery figure.wp-block-image:not(#individual-image) img {
		transition: none;
	}

	.wp-block-gallery.has-nested-images.cc-photo-gallery figure.wp-block-image:hover img {
		transform: none;
	}
}

/* ─── Indice di un libro/raccolta di pubblicazioni (.cc-book) ─────────────────────────────
   Es. "Implantologia funzionale — supporto scientifico". Un'unica classe sul Gruppo
   contenitore (.cc-book) + un Gruppo per ogni volume (.cc-book__volume) con dentro Titolo
   H3 (volume) ed Elenchi numerati nativi. In testa un Elenco puntato .cc-book__toc con i
   link ai volumi (#ancore). Variante --chapters (libro con capitoli): ogni capitolo è un
   Gruppo senza classe con Titolo H4, eventuale Paragrafo introduttivo ed Elenco numerato;
   le sottovoci senza numero sono un Elenco puntato annidato nella voce.
   Numerazione solo tipografica via contatori CSS, nessun numero né pallino nel testo:
   1, 2… sui capitoli del libro (H4) e "capitolo.voce" (2.1…) sui sottocapitoli.
   Variante .cc-book--studies (sezione a parte, fondo grigio): studi/ricerche collegati
   ma estranei al libro — schede bianche affiancate, pallino ad anello su titolo e voci.
   Nel sommario la prima scheda (il libro) è piena, le altre (studi) con anello.
   Voci senza link (pagine non pubblicate): tono attenuato. */

.cc-book {
	max-width: 1080px;
}

.cc-book h2 a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-ui) var(--ease);
}

.cc-book h2 a:hover,
.cc-book h2 a:focus-visible {
	color: var(--accent);
}

/* Sommario dei volumi */
.cc-book .cc-book__toc {
	list-style: none;
	margin: clamp(24px, 4vw, 36px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 900px) {
	.cc-book .cc-book__toc {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cc-book__toc li {
	margin: 0;
}

.cc-book__toc a {
	display: grid;
	grid-template-columns: 14px 1fr;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--background);
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--primary);
	text-decoration: none;
	transition: transform var(--duration-ui) var(--ease), border-color var(--duration-ui) var(--ease), box-shadow var(--duration-ui) var(--ease);
}

.cc-book__toc a::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 2.5px solid var(--accent);
	border-radius: 50%;
	box-sizing: border-box;
}

/* Il libro: scheda piena, senza segno */
.cc-book__toc li:first-child a {
	grid-template-columns: 1fr;
	background: var(--primary);
	border-color: var(--primary);
	color: var(--background);
}

.cc-book__toc li:first-child a::before {
	content: none;
}

.cc-book__toc a:hover,
.cc-book__toc a:focus-visible {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: 0 18px 30px -22px rgba(15, 36, 71, 0.45);
}

/* Volume */
.cc-book__volume {
	--cc-book-row-hover: var(--background);
	margin-top: clamp(40px, 6vw, 64px);
	padding: clamp(22px, 4vw, 40px);
	border-radius: var(--radius-lg);
	background: var(--muted);
	scroll-margin-top: 90px;
}

.cc-book__volume + .cc-book__volume {
	margin-top: clamp(20px, 3vw, 28px);
}

.cc-book__volume h3 {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 18px;
	text-align: left;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(26, 58, 107, 0.14);
}

/* Libro: titolo senza segno davanti */
.cc-book__volume--chapters h3 {
	grid-template-columns: 1fr;
}

/* Studi e ricerche: sezione a parte, schede bianche affiancate con anello sul titolo.
   La griglia va sul contenitore interno che WP aggiunge ai Gruppi (se c'è). */
.cc-book--studies:not(:has(> .wp-block-group__inner-container)),
.cc-book--studies > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 2.5vw, 24px);
	align-items: start;
}

@media (min-width: 900px) {
	.cc-book--studies:not(:has(> .wp-block-group__inner-container)),
	.cc-book--studies > .wp-block-group__inner-container {
		grid-template-columns: 1fr 1fr;
	}
}

.cc-book--studies h2 {
	grid-column: 1 / -1;
}

.cc-book--studies .cc-book__volume,
.cc-book--studies .cc-book__volume + .cc-book__volume {
	--cc-book-row-hover: var(--muted);
	margin: 0;
	background: var(--background);
}

.cc-book--studies .cc-book__volume h3 {
	grid-template-columns: 16px 1fr;
	gap: 14px;
	font-size: clamp(1.1rem, 2vw, 1.3rem);
}

.cc-book--studies .cc-book__volume h3::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 3px solid var(--accent);
	border-radius: 50%;
	box-sizing: border-box;
}

/* Voci: pallino ad anello al posto del numero (nel libro, rombo — vedi --chapters) */
.cc-book__volume ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-book__volume ol > li {
	display: grid;
	grid-template-columns: 0.9rem 1fr;
	column-gap: 10px;
	align-items: baseline;
	margin: 0;
	padding: 9px 10px 9px 4px;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 0.96rem;
	line-height: 1.5;
	color: var(--muted-foreground);
	transition: background-color var(--duration-ui) var(--ease);
}

.cc-book__volume ol > li + li {
	border-top: 1px dashed rgba(26, 58, 107, 0.14);
}

.cc-book__volume ol > li::before {
	content: '';
	align-self: start;
	width: 9px;
	height: 9px;
	margin-top: 0.5em;
	border: 2px solid var(--accent);
	border-radius: 50%;
	box-sizing: border-box;
}

/* Voce senza pagina pubblicata: segno più tenue */
.cc-book__volume ol > li:not(:has(> a))::before {
	opacity: 0.5;
}

.cc-book__volume ol > li > a {
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
}

.cc-book__volume ol > li > a::after {
	content: ' →';
	color: var(--accent);
	opacity: 0;
	transition: opacity var(--duration-ui) var(--ease);
}

.cc-book__volume ol > li:has(> a):hover {
	background: var(--cc-book-row-hover);
}

.cc-book__volume ol > li > a:hover,
.cc-book__volume ol > li > a:focus-visible {
	color: var(--accent);
}

.cc-book__volume ol > li > a:hover::after,
.cc-book__volume ol > li > a:focus-visible::after {
	opacity: 1;
}

/* Sottovoci senza numero (es. "Legge di Ante" sotto 2.5) */
.cc-book__volume ol > li > ul {
	grid-column: 2;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}

.cc-book__volume ol > li > ul > li {
	margin: 0;
	padding: 1px 0;
	font-size: 0.88rem;
	font-style: italic;
	color: var(--muted-foreground);
}

/* Libro a capitoli: capitoli come schede bianche, su due colonne da desktop */
.cc-book__volume--chapters {
	--cc-book-row-hover: var(--muted);
	counter-reset: cc-bookch;
}

@media (min-width: 1000px) {
	.cc-book__volume--chapters {
		column-count: 2;
		column-gap: 20px;
	}

	.cc-book__volume--chapters h3 {
		column-span: all;
	}
}

/* Capitolo = qualunque Gruppo dentro il libro: niente ">" perché WP avvolge il contenuto
   dei Gruppi in un .wp-block-group__inner-container (temi classici). */
.cc-book__volume--chapters .wp-block-group {
	counter-increment: cc-bookch;
	break-inside: avoid;
	margin: 0 0 20px;
	padding: 18px 16px 12px 10px;
	border-radius: var(--radius-md);
	background: var(--background);
}

.cc-book__volume--chapters h4 {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	align-items: baseline;
	gap: 10px;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 8px;
	padding: 0 10px 10px 4px;
	border-bottom: 1px solid var(--border);
}

.cc-book__volume--chapters h4::before {
	content: counter(cc-bookch);
	font-size: 1.7rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.2px var(--accent);
}

/* Riga introduttiva senza numero (es. "Tecnica operatoria") */
.cc-book__volume--chapters .wp-block-group p {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	column-gap: 10px;
	align-items: center;
	margin: 0 0 4px;
	padding: 4px 10px 4px 4px;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--muted-foreground);
}

/* Trattino al posto del segno elenco: è un'intestazione, non un sottocapitolo */
.cc-book__volume--chapters .wp-block-group p::before {
	content: '';
	width: 10px;
	height: 2px;
	border-radius: var(--radius-pill);
	background: var(--accent);
}

/* Sottocapitoli del libro: numerino "capitolo.voce" (2.1, 2.2…), come nell'indice
   originale — azzurro se la pagina è pubblicata (voce con link), grigio se non lo è. Esatto
   finché voci e capitoli restano tutti e nell'ordine del libro. */
.cc-book__volume--chapters .wp-block-group {
	counter-reset: cc-chap;
}

.cc-book__volume--chapters ol > li {
	grid-template-columns: 2.6rem 1fr;
	padding-block: 7px;
	counter-increment: cc-chap;
}

.cc-book__volume--chapters ol > li + li {
	border-top: none;
}

.cc-book__volume--chapters ol > li::before {
	content: counter(cc-bookch) '.' counter(cc-chap);
	align-self: baseline;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--accent);
}

.cc-book__volume--chapters ol > li:not(:has(> a))::before {
	color: var(--muted-foreground);
	opacity: 0.7;
}

@media (max-width: 599px) {
	.cc-book__volume ol > li {
		padding: 9px 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-book__toc a,
	.cc-book__volume ol > li,
	.cc-book__volume ol > li > a::after {
		transition: none;
	}

	.cc-book__toc a:hover,
	.cc-book__toc a:focus-visible {
		transform: none;
	}
}

/* ─── Supporto scientifico: immagini con didascalia ─────────────────────────────────────
   Solo la sezione "Supporto scientifico implantologia funzionale" (pagina 78 e le sue
   figlie: body.page-id-78 / body.parent-pageid-78). Le vecchie immagini con didascalia
   (shortcode [caption] → figure.wp-caption) hanno una larghezza fissa scritta da WordPress
   (style="width: …px"): con le immagini piccole la didascalia, lunga, diventava una
   colonna strettissima. Qui la larghezza fissa viene annullata, la figura si allarga e
   tutto (immagine + didascalia) è centrato nella pagina, qualunque fosse l'allineamento
   originale (nessuno / sinistra / centro). Nessuna modifica al contenuto delle pagine. */
:is(.page-id-78, .parent-pageid-78) .wp-caption {
	float: none;
	width: auto !important; /* annulla lo style="width: …px" inline */
	max-width: 100%;
	margin: clamp(20px, 3vw, 32px) auto;
	text-align: center;
}

:is(.page-id-78, .parent-pageid-78) .wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

:is(.page-id-78, .parent-pageid-78) .wp-caption .wp-caption-text {
	max-width: 720px;
	margin-inline: auto;
}

/* ─── Titolo semplice senza hero (template "Contatti e prenotazioni") ──────────────────
   page.php con $GLOBALS['cc_senza_hero']: al posto della hero solo l'H1, centrato, con lo
   stesso accento sotto dei titoli di sezione. Il contenuto (prenotazione) parte subito. */
.cc-page-head {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 56px) clamp(15px, 3vw, 30px) 0;
	text-align: center;
}

.cc-page-head .cc-page-head__title {
	position: relative;
	margin: 0;
	padding-bottom: 18px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.15;
	color: var(--primary);
}

.cc-page-head .cc-page-head__title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: var(--radius-pill);
	background: var(--accent);
}

/* ─── Pagina Contatti e prenotazioni (.cc-contatti) ─────────────────────────────────────
   Una classe sulle tre fasce (.cc-contatti + modificatore: --canali, --richiesta, --dove),
   gli elementi interni stilati per discendenza. Solo blocchi Colonne/Colonna dentro le
   fasce, niente Gruppi annidati: GeneratePress aggiunge 40px di padding a ogni
   .wp-block-group__inner-container. Icone delle card via mask (colore = currentColor).
   Accessibilità: gerarchia H1 › H2 (nascosto "Come prenotare") › H3 card › H4 aree;
   contrasti AA (testo secondario, etichette, bordi campi più scuri dei token di base);
   focus primary/bianco ben visibile; link nel testo sempre sottolineati. */
.cc-contatti {
	--cc-ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	--cc-ico-online: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E");
	--cc-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--cc-ico-orari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--cc-ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");

	/* Contrasto rinforzato, derivato dai token: testo secondario ~8:1 su bianco (invece di
	   ~6:1), bordi card più visibili, bordo campi ≥ 3:1. Colore area odontoiatria = accent
	   scurito (~5.7:1 su bianco, accent puro non arriva ad AA). */
	--cc-testo-2: color-mix(in srgb, var(--muted-foreground) 65%, var(--foreground));
	--cc-bordo: color-mix(in srgb, var(--border) 60%, var(--muted-foreground));
	--cc-bordo-campo: color-mix(in srgb, var(--muted-foreground) 80%, var(--foreground));
	--cc-odonto: color-mix(in srgb, var(--accent) 65%, var(--foreground));
	--cc-odonto-soft: color-mix(in srgb, var(--accent) 12%, var(--background));
	--cc-focus: var(--primary);

	font-family: var(--font-body);
}

/* Ancora #richiesta: non finire sotto l'header sticky */
.cc-contatti[id] {
	scroll-margin-top: 96px;
}

.cc-contatti a:focus-visible {
	outline: 3px solid var(--cc-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.cc-contatti .cc-contatti__intro {
	max-width: 56ch;
	margin: 0 auto clamp(24px, 4vw, 40px);
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--cc-testo-2);
}

/* Etichette (H4 nella card telefono, H3 in "Dove siamo"): annullano lo stile corsivo
   Spectral dei titoli del corpo pagina (.cc-page-body h3), restano titoli per i lettori
   di schermo. */
.cc-contatti .cc-contatti__label {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	color: var(--cc-testo-2);
}

.cc-contatti .cc-contatti__label::after {
	content: none;
}

/* ── Card canali ── */

/* Griglia: 1 colonna → 2 (telefono a tutta riga) → 3 */
.wp-block-columns.cc-contatti__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 0;
}

@media (min-width: 720px) {
	.wp-block-columns.cc-contatti__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cc-contatti__cards .cc-contatti__card--tel {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.wp-block-columns.cc-contatti__cards {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.cc-contatti__cards .cc-contatti__card--tel {
		grid-column: auto;
	}
}

.cc-contatti .cc-contatti__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: clamp(18px, 4vw, 30px);
	background: var(--background);
	border: 1px solid var(--cc-bordo);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(15, 36, 71, 0.06);
	color: var(--foreground);
}

.cc-contatti__card > * {
	margin: 0;
}

.cc-contatti .cc-contatti__card h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 1.5rem;
	color: var(--primary);
}

.cc-contatti__card h3::before {
	content: '';
	flex: none;
	width: 28px;
	height: 28px;
	background: currentColor;
	-webkit-mask: var(--cc-ico) center / contain no-repeat;
	mask: var(--cc-ico) center / contain no-repeat;
}

.cc-contatti__card--tel { --cc-ico: var(--cc-ico-tel); }
.cc-contatti__card--online { --cc-ico: var(--cc-ico-online); }
.cc-contatti__card--mail { --cc-ico: var(--cc-ico-mail); }

/* Link nel testo delle card: sottolineati (non distinti solo dal colore), area di tocco
   ≥ 44px. */
.cc-contatti .cc-contatti__card p:not(.cc-contatti__num) a,
.cc-contatti .cc-contatti__mail a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.cc-contatti .cc-contatti__card p:not(.cc-contatti__num) a:hover,
.cc-contatti .cc-contatti__mail a:hover {
	text-decoration-thickness: 2px;
}

.cc-contatti .cc-contatti__mail a {
	font-size: 1.1rem;
	overflow-wrap: anywhere;
}

/* Numeri grandi: mai spezzati su due righe, area di tocco ≥ 44px. Hover = sottolineatura
   (il colore resta quello dell'area). */
.cc-contatti .cc-contatti__num a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 5.5vw, 1.95rem);
	line-height: 1.1;
	white-space: nowrap;
	color: var(--cc-area, var(--primary));
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.cc-contatti .cc-contatti__num a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.cc-contatti .cc-contatti__card p:not(.cc-contatti__num) a[href^="tel:"] {
	white-space: nowrap;
}

/* Card telefono, due aree con colore proprio: visite specialistiche (primary) sopra il
   separatore, odontoiatria (--cc-odonto) dopo — selettore "hr ~ *", nessuna classe in più
   sui blocchi. Etichetta = pillola con pallino. */
.cc-contatti__card--tel {
	--cc-area: var(--primary);
	--cc-area-soft: var(--primary-soft);
}

.cc-contatti__card--tel hr ~ * {
	--cc-area: var(--cc-odonto);
	--cc-area-soft: var(--cc-odonto-soft);
}

.cc-contatti .cc-contatti__card--tel .cc-contatti__label {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--cc-area-soft);
	color: var(--cc-area);
}

.cc-contatti__card--tel .cc-contatti__label::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.cc-contatti .cc-contatti__card--tel p:not(.cc-contatti__num) a[href^="tel:"] {
	color: var(--cc-area);
}

.cc-contatti .cc-contatti__card hr {
	width: 100%;
	margin: 8px 0;
	border: 0;
	border-top: 1px solid var(--cc-bordo);
	opacity: 1;
}

/* Tablet (card telefono a tutta riga): le due aree affiancate invece che una sotto l'altra.
   Prima del separatore → colonna 1, dopo → colonna 2; "dense" riporta la colonna 2 in alto. */
@media (min-width: 720px) and (max-width: 1023px) {
	.cc-contatti .cc-contatti__card--tel {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row dense;
		align-items: start;
		column-gap: 32px;
		row-gap: 12px;
	}

	.cc-contatti__card--tel > * {
		grid-column: 1;
	}

	.cc-contatti__card--tel > h3 {
		grid-column: 1 / -1;
	}

	.cc-contatti__card--tel > hr {
		display: none;
	}

	.cc-contatti__card--tel > hr ~ * {
		grid-column: 2;
	}
}

.cc-contatti .cc-contatti__nota {
	margin-top: auto;
	font-size: 0.9rem;
	color: var(--cc-testo-2);
}

/* Card "Richiedi online": in evidenza, sfondo primary (testo bianco ~11:1) */
.cc-contatti .cc-contatti__card--online {
	--cc-focus: #ffffff;
	background: var(--primary);
	border-color: var(--primary);
	color: #ffffff;
}

.cc-contatti .cc-contatti__card--online h3 {
	color: #ffffff;
}

.cc-contatti__card .wp-block-buttons {
	margin-top: auto;
}

/* ── Pulsanti ── */

.cc-contatti .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	background: var(--primary);
	color: #ffffff;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease);
}

.cc-contatti .wp-block-button__link:hover,
.cc-contatti .wp-block-button__link:focus-visible {
	background: var(--footer);
	color: #ffffff;
	transform: translateY(-2px);
}

.cc-contatti .cc-contatti__card--online .wp-block-button__link {
	background: #ffffff;
	color: var(--primary);
}

.cc-contatti .cc-contatti__card--online .wp-block-button__link:hover,
.cc-contatti .cc-contatti__card--online .wp-block-button__link:focus-visible {
	background: var(--primary-tint);
	color: var(--primary);
}

/* Da telefono i pulsanti occupano tutta la larghezza: bersaglio più comodo */
@media (max-width: 719px) {
	.cc-contatti .wp-block-buttons,
	.cc-contatti .wp-block-button {
		width: 100%;
	}

	.cc-contatti .wp-block-button__link {
		width: 100%;
	}
}

/* ── Fascia orari ── */

.cc-contatti .cc-contatti__orari {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	max-width: var(--content-max);
	margin: 20px auto 0;
	padding: 16px clamp(16px, 4vw, 24px);
	background: var(--primary-soft);
	border-radius: var(--radius-md);
	color: var(--foreground);
	line-height: 1.5;
}

.cc-contatti__orari::before {
	content: '';
	flex: none;
	width: 22px;
	height: 22px;
	background: var(--primary);
	-webkit-mask: var(--cc-ico-orari) center / contain no-repeat;
	mask: var(--cc-ico-orari) center / contain no-repeat;
}

.cc-contatti__orari strong {
	color: var(--primary);
}

/* ── Due colonne testo + contenuto (richiesta, dove siamo) ── */

.wp-block-columns.cc-contatti__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.wp-block-columns.cc-contatti__split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.wp-block-columns.cc-contatti__split--dove {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		align-items: stretch;
	}
}

/* Fascia richiesta: titolo a sinistra, accento allineato al testo */
.cc-contatti--richiesta h2 {
	text-align: left;
}

.cc-contatti--richiesta h2::after {
	left: 0;
	transform: none;
}

/* Fascia richiesta su navy (.cc-page-section--dark): testo della colonna sinistra quasi
   bianco (~13:1, più del #b9c8dd generico delle sezioni scure), focus bianco fuori dal
   box del modulo, che resta bianco con i suoi colori normali. */
.cc-contatti--richiesta {
	--cc-focus: #ffffff;
}

/* Titolo bianco: .cc-page-body h2 (primary) batte la regola generica delle sezioni
   scure, che usa :where() e ha specificità più bassa. */
.cc-contatti.cc-contatti--richiesta h2 {
	color: #ffffff;
}

.cc-contatti--richiesta .wp-block-column:first-child p {
	color: color-mix(in srgb, #ffffff 90%, var(--primary));
	line-height: 1.65;
}

.cc-contatti--richiesta .cc-contatti__form {
	--cc-focus: var(--primary);
}

.cc-contatti.cc-contatti--richiesta .cc-contatti__form {
	border-color: transparent;
	box-shadow: 0 12px 32px rgba(15, 36, 71, 0.35);
}

/* Le regole generiche delle sezioni scure (p azzurrino, link hover azzurro chiaro) non
   devono entrare nel box bianco del modulo. */
.cc-contatti.cc-contatti--richiesta .cc-contatti__form p {
	color: var(--foreground);
}

.cc-contatti.cc-contatti--richiesta .cc-contatti__form .cm-nota {
	color: var(--cc-testo-2);
}

.cc-contatti.cc-contatti--richiesta .cc-contatti__form .wpcf7-acceptance a:hover,
.cc-contatti.cc-contatti--richiesta .cc-contatti__form .wpcf7-acceptance a:focus {
	color: var(--footer);
}

/* ── Modulo: stili di base dei campi, validi per qualunque markup di form ── */

.cc-contatti .cc-contatti__form {
	min-width: 0;
	padding: clamp(18px, 4vw, 32px);
	background: var(--background);
	border: 1px solid var(--cc-bordo);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(15, 36, 71, 0.06);
}

.cc-contatti__form label {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--foreground);
}

/* font-size ≥ 16px: su iOS evita lo zoom automatico al tocco del campo */
.cc-contatti__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.cc-contatti__form select,
.cc-contatti__form textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--cc-bordo-campo);
	border-radius: var(--radius-md);
	background: var(--background);
	font: inherit;
	font-size: max(1rem, 16px);
	font-weight: 400;
	color: var(--foreground);
	box-sizing: border-box;
}

.cc-contatti__form textarea {
	min-height: 112px;
	resize: vertical;
}

.cc-contatti__form ::placeholder {
	color: var(--muted-foreground);
	opacity: 1;
}

.cc-contatti__form input:focus-visible,
.cc-contatti__form select:focus-visible,
.cc-contatti__form textarea:focus-visible {
	outline: 3px solid var(--cc-focus);
	outline-offset: 2px;
	border-color: var(--primary);
}

.cc-contatti__form input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: var(--primary);
}

.cc-contatti__form button[type="submit"],
.cc-contatti__form input[type="submit"] {
	min-height: 52px;
	padding: 12px 32px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--primary);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--duration-micro) var(--ease);
}

.cc-contatti__form button[type="submit"]:hover,
.cc-contatti__form input[type="submit"]:hover {
	background: var(--footer);
}

.cc-contatti__form button[type="submit"]:focus-visible,
.cc-contatti__form input[type="submit"]:focus-visible {
	outline: 3px solid var(--cc-focus);
	outline-offset: 3px;
}

@media (max-width: 719px) {
	.cc-contatti__form button[type="submit"],
	.cc-contatti__form input[type="submit"] {
		width: 100%;
	}
}

/* Markup di Contact Form 7 (modulo "Prenotazioni"): campo sotto l'etichetta, consenso
   privacy in testo normale con checkbox allineata, nota, messaggi di errore/esito. */
.cc-contatti__form .wpcf7-form > p {
	margin: 0 0 18px;
}

.cc-contatti__form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.cc-contatti__form .cm-nota {
	margin: -10px 0 18px;
	font-size: 0.9rem;
	color: var(--cc-testo-2);
}

.cc-contatti__form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.5;
	cursor: pointer;
}

.cc-contatti__form .wpcf7-acceptance a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-contatti__form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.cc-contatti__form .wpcf7-acceptance input[type="checkbox"] {
	flex: none;
	margin-top: 1px;
}

/* Errore: non solo colore (bordo più spesso + messaggio testuale di CF7) */
.cc-contatti__form .wpcf7-not-valid {
	border-color: var(--alert);
	border-width: 2px;
}

.cc-contatti__form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--alert);
}

.cc-contatti__form .wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	font-size: 0.95rem;
	color: var(--foreground);
}

.cc-contatti__form .wpcf7 form.invalid .wpcf7-response-output,
.cc-contatti__form .wpcf7 form.unaccepted .wpcf7-response-output,
.cc-contatti__form .wpcf7 form.spam .wpcf7-response-output,
.cc-contatti__form .wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--alert);
	background: var(--alert-soft);
}

.cc-contatti__form .wpcf7-spinner {
	vertical-align: middle;
}

/* ── Dove siamo ── */

/* Mappa senza iframe (nessun dato a Google prima del clic): riquadro con trama "a mappa",
   più basso da telefono. */
.cc-contatti .cc-contatti__mappa {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 240px;
	padding: clamp(20px, 4vw, 28px);
	border-radius: var(--radius-lg);
	text-align: center;
	background-color: var(--primary-soft);
	background-image:
		linear-gradient(118deg, transparent 47%, var(--background) 47%, var(--background) 52%, transparent 52%),
		linear-gradient(28deg, transparent 62%, var(--background) 62%, var(--background) 64.5%, transparent 64.5%),
		linear-gradient(var(--primary-tint) 1px, transparent 1px),
		linear-gradient(90deg, var(--primary-tint) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
}

@media (min-width: 900px) {
	.cc-contatti .cc-contatti__mappa {
		min-height: 320px;
	}
}

.cc-contatti__mappa::before {
	content: '';
	width: 48px;
	height: 48px;
	background: var(--primary);
	-webkit-mask: var(--cc-ico-pin) center / contain no-repeat;
	mask: var(--cc-ico-pin) center / contain no-repeat;
}

.cc-contatti .cc-contatti__mappa p {
	margin: 0;
	padding: 10px 18px;
	background: var(--background);
	border-radius: var(--radius-md);
	box-shadow: 0 1px 2px rgba(15, 36, 71, 0.08);
	color: var(--foreground);
	line-height: 1.5;
}

.cc-contatti__mappa strong {
	color: var(--primary);
}

.cc-contatti__mappa .wp-block-buttons {
	justify-content: center;
}

/* Con la mappa vera (iframe → riquadro "al clic" .cc-embed, inc/embed-consenso.php) la colonna
   è solo il contenitore: niente trama, icona e padding. Da desktop la mappa riempie l'altezza
   della colonna accanto; da telefono tiene la sua proporzione. */
.cc-contatti .cc-contatti__mappa:has(.cc-embed) {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
}

.cc-contatti .cc-contatti__mappa:has(.cc-embed)::before {
	content: none;
}

.cc-contatti .cc-contatti__mappa .cc-embed {
	margin: 0;
	border-radius: var(--radius-lg);
}

.cc-contatti .cc-contatti__mappa .cc-embed__note {
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	box-shadow: none;
	line-height: 1.45;
}

@media (min-width: 900px) {
	.cc-contatti .cc-contatti__mappa .cc-embed {
		aspect-ratio: auto !important; /* batte lo style inline: altezza dalla colonna */
		height: 100%;
		min-height: 320px;
	}
}

.cc-contatti .cc-contatti__info > * {
	margin: 0;
}

.cc-contatti .cc-contatti__info .cc-contatti__label:not(:first-child) {
	margin-top: 22px;
}

.cc-contatti .cc-contatti__info .cc-contatti__label + p {
	margin-top: 4px;
	line-height: 1.55;
	color: var(--foreground);
}

/* Indicazioni "come arrivare" (elenchi Gutenberg sotto ogni etichetta): pallino piccolo
   nel colore primary, testo a piena leggibilità, voci ben distanziate. */
.cc-contatti .cc-contatti__info ul {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.cc-contatti .cc-contatti__info li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 18px;
	line-height: 1.55;
	color: var(--foreground);
}

.cc-contatti .cc-contatti__info li:last-child {
	margin-bottom: 0;
}

.cc-contatti .cc-contatti__info li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary);
}

.cc-contatti .cc-contatti__info li strong {
	color: var(--primary);
}

.cc-contatti .cc-contatti__valore {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--primary);
}

/* Modalità a contrasto elevato di Windows (forced-colors): le icone a mask usano
   background, che il sistema azzera — si forza il colore del testo di sistema. */
@media (forced-colors: active) {
	.cc-contatti__card h3::before,
	.cc-contatti__card--tel .cc-contatti__label::before,
	.cc-contatti__orari::before,
	.cc-contatti__mappa::before {
		forced-color-adjust: none;
		background: CanvasText;
	}

	.cc-contatti .wp-block-button__link {
		border: 2px solid ButtonText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-contatti .wp-block-button__link,
	.cc-contatti__form button[type="submit"],
	.cc-contatti__form input[type="submit"] {
		transition: none;
	}

	.cc-contatti .wp-block-button__link:hover,
	.cc-contatti .wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* ─── Elenco comuni a pillole (.cc-places) ─────────────────────────────────────────────────
   Generato dallo shortcode [cc_area_servita] (inc/dati-centro.php) dall'Area servita del
   Personalizza: stesso elenco in home, contatti e dati strutturati. Stesso aspetto delle
   pillole della home (.cc-home-about__places in home.css, l'elenco scritto a mano di prima). */
.cc-places {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
}

.cc-places li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--muted);
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--primary);
}

.cc-places li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}