/* Pagina gruppo/reparto (template-gruppo.php e "Gruppo — Hero ridotta"); caricato anche su
   page.php quando il contenuto usa le card Team (.cc-gruppo-team, es. segreteria in Servizi).
   Qui solo ciò che è proprio del Gruppo: inquadratura della foto in hero e sezione Team.
   Hero, 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: foto ambiente più larga del riquadro, ancorata in alto a sinistra ───────────── */

.cc-gruppo-hero__photo {
	width: 150%;
	object-position: left top;
}

/* ─── Intro testuale (es. prima della sezione Team) ───────────────────────────────────────
   Blocco editoriale centrato — frase-titolo in corsivo con un piccolo accento sotto, poi un
   paragrafo descrittivo più discreto. Volutamente diverso dal solito eyebrow+h2 delle altre
   sezioni: qui il tono è di accoglienza, non professionale/clinico. */

.cc-gruppo-team-intro {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

/* Modificatore: doppio margine superiore rispetto al margin-top standard tra sezioni
   (.cc-gruppo-team, clamp(40px, 6vw, 64px)) — per separare due gruppi Team consecutivi
   nella stessa pagina (es. "Odontoiatria" seguito da "Igienisti e infermieri"). */
.cc-gruppo-team-intro--gap-top {
	margin-top: clamp(80px, 12vw, 128px);
}

/* Selettore doppio: su page.php .cc-page-body p forzerebbe il font body */
.cc-gruppo-team-intro .cc-gruppo-team-intro__title {
	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);
	margin: 0 0 20px;
	padding-bottom: 20px;
}

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

.cc-gruppo-team-intro__text {
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--muted-foreground);
	margin: 0;
}

/* ─── Team (assistenti/staff senza pagina profilo propria) ───────────────────────────────
   Card compatta ripetibile: foto scontornata (PNG trasparente, come i medici) con il logo
   del centro dietro, nome sotto. Stesso linguaggio visivo della hero profilo medico ma con
   proporzioni pensate per stare in fila, non per l'offset a 250px pensato per quella hero. */

/* Flex con a capo invece della griglia: l'ultima riga incompleta resta centrata (con la
   griglia le card avanzate si allineavano a sinistra). Il numero massimo di card per riga
   (--cc-team-cols: 1 / 2 da 720px / 4 da 1300px, modificatori --tre e --due) lo decide la
   larghezza massima del contenitore: N card da 250px + gli spazi tra loro + il padding.
   */
.cc-gruppo-team {
	--cc-team-cols: 1;
	--cc-team-gap: clamp(12px, 1vw, 25px);
	--cc-team-pad: clamp(10px, 2vw, 25px);
	/* + 120px di margine: con la misura esatta gli arrotondamenti dei decimali (gap in vw)
	   facevano andare a capo l'ultima card (3 invece di 4); 120px non bastano per una card
	   in più (250px), quindi il numero di colonne resta quello voluto. */
	max-width: min(var(--content-max), calc(var(--cc-team-cols) * 250px + (var(--cc-team-cols) - 1) * var(--cc-team-gap) + 2 * var(--cc-team-pad) + 120px));
	margin-inline: auto;
	margin-top: clamp(40px, 6vw, 64px);
	margin-bottom: clamp(10px, 2vw, 25px);
	padding: 0 var(--cc-team-pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cc-team-gap);
}

@media (min-width: 720px) {
	.cc-gruppo-team {
		--cc-team-cols: 2;
	}
}

@media (min-width: 1300px) {
	.cc-gruppo-team {
		--cc-team-cols: 4;
	}
}

.cc-gruppo-team__card {
	position: relative;
	width: 250px;
	max-width: 100%;
	text-align: center;
	padding-left: 90px;
}

/* Come facevano le colonne della griglia (minmax(0, 250px)): 250px, ma se N card per riga
   non ci stanno si stringono quanto basta, invece di andare a capo (es. contenitore da
   1050px: 4 card da ~248px, non 3). Escluso --centrato (team affiancati e pochi membri),
   dove le card restano sempre da 250px come prima. */
.cc-gruppo-team:not(.cc-gruppo-team--centrato) > .cc-gruppo-team__card {
	width: min(250px, calc((100% - (var(--cc-team-cols) - 1) * var(--cc-team-gap)) / var(--cc-team-cols)));
}

/* Logo del centro dietro la foto, stesso trattamento della hero profilo medico ma centrato
   sopra la foto invece che spostato a sinistra (qui la foto non ha l'offset a 250px) */
.cc-gruppo-team__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('/wp-content/uploads/2026/07/iconlogo-centrochirurgico.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	opacity: 0;
	animation: cc-fade-in 700ms var(--ease) both;
}

.cc-gruppo-team__avatar {
	position: relative;
	z-index: 1;
	max-width: 140%;
	height: auto;
	display: block;
	opacity: 0;
	animation: cc-fade-up 700ms var(--ease) 300ms both;
}

@media (prefers-reduced-motion: reduce) {
	.cc-gruppo-team__card::before,
	.cc-gruppo-team__avatar {
		animation: none;
		opacity: 1;
	}
}

/* Selettore doppio: stesso motivo di .cc-gruppo-team-intro__title */
.cc-gruppo-team .cc-gruppo-team__name {
	position: absolute;
	bottom: -5px;
	left: 0px;
	z-index: 1;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--primary);
	margin: 14px 0 0;
	width: 100%; /* larga quanto la card (250px o meno se la riga si stringe) */
}

/* Modificatore — nome sotto la foto e più spazio tra le righe (es. 2 segretarie). Il
   centraggio ora è di base per tutti i Team; qui la larghezza resta libera (tante card
   quante ne stanno, come prima), senza il limite di colonne del Team standard. */
.cc-gruppo-team--centrato {
	max-width: var(--content-max);
	row-gap: clamp(48px, 5vw, 64px);
}

/* Nome sotto la foto invece che sovrapposto al suo bordo inferiore: spazio riservato in
   fondo alla card (padding) per non invadere la riga successiva / la sezione sotto. */
.cc-gruppo-team--centrato .cc-gruppo-team__card {
	padding-bottom: 40px;
}

.cc-gruppo-team--centrato .cc-gruppo-team__name {
	bottom: 0;
}

/* Modificatore — con --centrato: massimo 4 card per riga (4 × 250px + 3 gap), senza padding
   laterale; ultima riga incompleta resta centrata. Sotto questa larghezza il flex va a capo
   da solo. */
.cc-gruppo-team--quattro {
	max-width: calc(4 * 250px + 3 * clamp(12px, 1vw, 25px));
	padding-inline: 0;
}

/* Modificatore — 3 card (es. Igienisti): stessa griglia, padding e nome sovrapposto
   dell'Equipe, ma su desktop 3 colonne invece di 4, così non resta una colonna vuota a
   destra e le card restano centrate nel contenitore (le colonne sono centrate dal
   limite di colonne del Team, vedi --cc-team-cols sopra). */
@media (min-width: 1300px) {
	.cc-gruppo-team--tre {
		--cc-team-cols: 3;
	}
}

/* Modificatore — 2 card (es. Addette alla sterilizzazione): stesso principio di --tre,
   2 colonne anche su desktop, card centrate. */
@media (min-width: 1300px) {
	.cc-gruppo-team--due {
		--cc-team-cols: 2;
	}
}

/* Nome NON cliccabile (persone senza pagina profilo, es. assistenti): grigio invece del
   blu dei nomi cliccabili, così si capisce a colpo d'occhio cosa è un link e cosa no. */
.cc-gruppo-team .cc-gruppo-team__name:not(:has(a)) {
	color: var(--muted-foreground);
}

/* Due gruppi Team affiancati (titolo + card per colonna, es. Fisioterapisti | Infermieri):
   impilati su mobile, due colonne da 720px. */
.cc-gruppo-team-affiancati {
	max-width: 900px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: clamp(80px, 12vw, 128px);
}

/* Larghezza libera: la colonna è già stretta, il limite di card per riga non serve */
.cc-gruppo-team-affiancati .cc-gruppo-team {
	max-width: var(--content-max);
	padding-inline: 0;
}

@media (min-width: 720px) {
	.cc-gruppo-team-affiancati {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(24px, 4vw, 48px);
	}
}

/* Modificatore — card con una riga specialità in più sotto al nome (es. Equipe Centro
   Polispecialistico, dove ogni medico ha una specialità diversa da mostrare, a differenza di
   Equipe Odontoiatrica dove il gruppo è già la specialità): serve più spazio tra le righe
   della griglia, altrimenti il testo in più si sovrappone alla riga sotto. */
.cc-gruppo-team--con-ruolo {
	row-gap: clamp(38px, 4vw, 55px);
}

/* Specialità in alto a sinistra sulla card, sopra la foto (z-index 2 > avatar). */
.cc-gruppo-team__role {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 2;
	margin: 0;
	text-align: left;
	font-family: var(--font-body);
	font-size: 0.82rem;
	color: var(--muted-foreground);
}

/* Nome medico cliccabile (stessa pagina profilo della foto): resta nel colore del titolo,
   hover/focus in accento. */
.cc-gruppo-team__name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease);
}

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

/* Specialità: stesso badge del profilo medico (.cc-specialita-badge, base.css), qui più
   piccolo per stare sulla card e con sfondo bianco invece di trasparente, per restare
   leggibile sopra foto/logo. Hover ripetuto qui perché questa regola, più specifica, ne
   coprirebbe lo sfondo. */
.cc-gruppo-team__role .cc-specialita-badge {
	font-size: 0.78rem;
	background: var(--background);
}

.cc-gruppo-team__role a.cc-specialita-badge:hover,
.cc-gruppo-team__role a.cc-specialita-badge:focus {
	background: var(--primary);
}

/* Variante non cliccabile (<span>, es. ruolo senza pagina visita collegata): stessa pillola
   a contorno ma "disabilitata" — bordo e testo grigi, niente hover. Grigio
   --muted-foreground invece di opacity, per mantenere il contrasto AA del testo. */
.cc-specialita-badge--static,
.cc-specialita-badge--static:hover,
.cc-specialita-badge--static:focus {
	background: var(--background);
	color: var(--muted-foreground);
	border-color: var(--muted-foreground);
	font-weight: 500;
	cursor: default;
}

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