/* Pagina profilo membro dell'equipe (template-medico.php), es. francesco-damiano-odontoiatra.
   Qui solo la hero, con il layout proprio del profilo (ritratto + logo a sinistra, testo a
   destra). 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. */

/* ─── Hero ──────────────────────────────────────────────────────────── */

/* overflow-x: clip — la foto (__avatar, width 170%) sborda volutamente dal suo riquadro: su
   mobile usciva dallo schermo e allargava la pagina. clip (non hidden) taglia solo in
   orizzontale senza creare un contenitore di scroll. */
.cc-medico-hero {
	position: relative;
	background: var(--muted);
	overflow-x: clip;
}

/* Larghezza di riferimento condivisa con le altre hero (base.css). flex-wrap: nowrap —
   foto e info restano affiancati fino al breakpoint mobile. */
.cc-medico-hero__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 6vw, 72px);
	flex-wrap: nowrap;
	padding: clamp(32px, 6vw, 72px) clamp(10px, 2vw, 24px) 0;
}

.cc-medico-hero__bkg {
	position: relative;
	flex-shrink: 0;
	width: 480px;
	max-width: 100%;
	padding: 32px 32px 0 250px;
}

/* Logo su ::before separato dalla foto: così il suo fade-in non coinvolge
   .cc-medico-hero__avatar, che è un elemento a parte */
.cc-medico-hero__bkg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/wp-content/uploads/2026/07/iconlogo-centrochirurgico.png') no-repeat left center / 90%;
	opacity: 0;
	animation: cc-fade-in 700ms var(--ease) both;
}

.cc-medico-hero__avatar {
	position: relative;
	display: block;
	width: 170%;
	max-width: none;
	height: auto;
	border-radius: var(--radius-md);
	opacity: 0;
	animation: cc-fade-up 700ms var(--ease) 300ms both;
}

/* Foto vecchie importate da Elementor (jpg, classe aggiunta da template-medico.php) */
.old-photo {
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
}

/* Padding e sfumatura in base.css, comuni alle altre hero */
.cc-medico-hero__info {
	max-width: 480px;
}

.cc-medico-hero__subtitle {
	color: var(--muted-foreground);
}

/* Contenitore dei badge verso le visite collegate (.cc-specialita-badge, base.css) */
.cc-medico-hero__specialita {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
}

/* ─── Tablet e portatili piccoli (≤1100px) ──────────────────────────── */
@media (max-width: 1100px) {
	

	.cc-medico-hero__bkg {
		padding-left: 120px;
	}

	.cc-medico-hero__avatar {
		width: 120%;
	}

}

/* ─── Mobile (≤640px): foto sopra il testo ─────────────────────────────
   Meno spazio a sinistra del logo e foto meno sbordante, così il ritratto è più grande e
   resta dentro lo schermo (2026-10-13). */
@media (max-width: 640px) {
		.cc-medico-hero__inner {
		flex-wrap: wrap;
	}
	

}

/* ─── Movimento ridotto: niente animazioni d'ingresso, elementi subito visibili ─── */
@media (prefers-reduced-motion: reduce) {
	.cc-medico-hero__bkg::before,
	.cc-medico-hero__avatar {
		animation: none;
		opacity: 1;
	}
}