/* Pagina visita/servizio (template-visita.php). Qui solo ciò che è proprio del template:
   tipografia del corpo pagina, intro allineata a sinistra e colori del testo nelle sezioni
   scure. Hero, sezioni, CTA, box prenotazione e badge specialità sono condivisi con gli altri
   template e definiti in base.css. Il corpo pagina usa ancora le classi cc-page-* (ponte
   temporaneo: pagina.css è caricato anche qui, vedi functions.php).
   Vedi CLAUDE.md > Design system / Animazioni. */

.cc-visita-body {
	padding-bottom: 0;
}

/* L'indice generato da cc_generate_content_toc() (functions.php) riusa lo stile .cc-toc già
   definito in single.css per gli articoli blog (caricato anche qui, vedi enqueue), compreso
   il comportamento sticky/float da desktop — nessun override qui, per restare visivamente
   identico al blog. Se le sezioni full-bleed sotto (100vw, margini negativi) risultassero
   sovrapposte o rotte in presenza del box fluttuante, va reintrodotta una regola che lo renda
   statico solo qui (vedi cronologia file). */

/* ─── Intro testuale (corpo pagina) ────────────────────────────────────── */

.cc-visita-intro {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) clamp(10px, 2vw, 24px);
	text-align: center;
}

.cc-visita-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;
}

.cc-visita-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);
}

/* Sulle pagine visita l'intro non è centrata né ristretta come sulle pagine generiche
   (page.php): stessa larghezza del resto del corpo pagina, testo e titolo allineati a
   sinistra — tra l'altro così reagisce bene se preceduta dall'indice fluttuante (.cc-toc),
   comportandosi come un normale paragrafo di corpo invece di un blocco centrato che si
   stringe storto vicino al float. cc-page-intro è la classe attualmente in uso (ponte
   temporaneo, vedi functions.php); cc-visita-intro è già coperta per quando il contenuto
   passerà alle classi native del template. */
.cc-visita-body .cc-page-intro,
.cc-visita-body .cc-visita-intro {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 clamp(15px, 2vw, 24px) clamp(24px, 4vw, 48px);
	text-align: left;
}

.cc-visita-body .cc-page-intro h2,
.cc-visita-body .cc-visita-intro h2 {
	text-align: left;
}

.cc-visita-body .cc-page-intro h2::after,
.cc-visita-body .cc-visita-intro h2::after {
	left: 0;
	transform: none;
}

.cc-visita-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);
	text-align: center;
	margin: 0 0 16px;
}

.cc-visita-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 motivo di pagina.css: colore/dimensione
   come i paragrafi, ma allineato a sinistra invece che centrato. */
.cc-visita-intro ul,
.cc-visita-intro ol {
	display: inline-block;
	text-align: left;
	margin: 0 0 14px;
}

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

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

/* ─── Sezioni scure: colori del testo "nudo" ───────────────────────────
   Struttura della sezione in base.css; qui solo i colori del contenuto, che devono restare
   dopo le regole tipografiche del template nella cascata. */

.cc-visita-section--dark :where(h1, h2, h3, h4, h5, h6) {
	color: #ffffff;
}

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

/* .cc-medico-cta su sfondo scuro — stessa motivazione di pagina.css: senza questa regola il
   bottone userebbe var(--primary), uguale allo sfondo della sezione, e ci sparirebbe sopra. */
.cc-visita-section--dark .cc-medico-cta ,
.cc-visita-section--dark .cc-btn {
	background: var(--footer);
}

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

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

.cc-visita-section--dark a:not(.cc-medico-cta):not(.cc-btn):hover,
.cc-visita-section--dark a:not(.cc-medico-cta):not(.cc-btn):focus {
	color: #8fb2ea;
}

/* ─── Specialisti collegati ────────────────────────────────────────────
   La card (foto ad arco + nome + link) riusa .cc-author-card, lo stesso componente della
   card autore in fondo agli articoli del blog (single.css) — nessuno stile proprio qui,
   vedi functions.php per l'enqueue di single.css su questo template.
   Unico adattamento: qui le card sono più d'una affiancate. Il margin: 0 auto della card
   (pensato per la card singola dell'articolo) in una riga flex distribuisce lo spazio
   libero tra le card allontanandole: azzerato, le card restano vicine (gap) e centrate
   nel contenitore, e vanno a capo se non ci stanno. */
.cc-visita-section .cc-author-wrap {
	flex-direction: row; /* anche su mobile: con wrap va comunque una card per riga */
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2vw, 24px);
}

.cc-visita-section .cc-author-wrap .cc-author-card {
	flex: 0 1 260px;
	width: 100%;
	margin: 0;
}