/* ==========================================================================
   GRIGLIA DOCENTI — [dazzero_docenti]
   Caricato solo dove lo shortcode è presente (vedi inc/enqueue.php).
   Stessa card cliccabile della griglia dei corsi (corsi.css): un solo link
   per card, non uno sulla foto e uno sul nome.

   1. Contenitore e griglia
   2. Card
   3. Foto in tondo
   4. Nome e informazioni personali
   5. Responsive
   ========================================================================== */

/* 1. Contenitore e griglia ================================================ */
.dz-docenti-wrap {
	--dz-docente-gap: 2.5rem;

	max-width: var(--dz-container, 1280px);
	margin-inline: auto;
}

.dz-docenti {
	display: grid;
	grid-template-columns: repeat(var(--dz-col, 4), minmax(0, 1fr));
	gap: var(--dz-docente-gap);
}

/* 2. Card ================================================================== */
.dz-docente {
	position: relative;
	min-width: 0;
}

.dz-docente__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.dz-docente__link:hover,
.dz-docente__link:focus-visible {
	color: inherit;
}

.dz-docente__link:focus-visible {
	outline: 2px solid var(--dz-link, var(--dz-accento, #141414));
	outline-offset: 6px;
}

/* Senza pagina docente configurata in LearnPress la card non è cliccabile:
   niente sottolineatura al passaggio, niente cursore a manina finto. */
div.dz-docente__link {
	cursor: default;
}

/* 3. Foto in tondo ========================================================== */
.dz-docente__media {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--dz-grigio, #f4f4f4);
}

.dz-docente__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition:
		filter var(--dz-transizione, 240ms ease),
		transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dz-docente__link:hover .dz-docente__media img,
.dz-docente__link:focus-visible .dz-docente__media img {
	filter: grayscale(0);
	transform: scale(1.04);
}

/* 4. Nome e informazioni personali ========================================= */
.dz-docente__nome {
	margin: 0;
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dz-docente__bio {
	margin-top: 0.625rem;
	color: var(--dz-grigio-testo, #6b6b6b);
	font-size: 0.9375rem;
	line-height: 1.65;

	/* Quattro righe al massimo: oltre, le card si sfalsano in altezza —
	   stesso principio del titolo dei corsi (-webkit-line-clamp). */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dz-docente__bio p {
	margin: 0;
}

.dz-docente__bio p + p {
	margin-top: 0.5em;
}

/* 5. Responsive ============================================================= */
@media (max-width: 1024px) {
	.dz-docenti-wrap:not([data-col="1"]):not([data-col="2"]) .dz-docenti {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dz-docenti-wrap {
		--dz-docente-gap: 2rem;
	}

	.dz-docenti {
		grid-template-columns: 1fr;
	}

	.dz-docente__media {
		max-width: 180px;
	}
}