/* ==========================================================================
   Pagina Docenti
   ========================================================================== */

.dc-intro { padding: 48px 0; border-bottom: 1px solid #eee; }
.dc-intro__grid { display: flex; flex-direction: column; gap: 24px; }
.dc-intro .body-text strong { font-weight: 700; }

@media (min-width: 1024px) {
	.dc-intro { padding: 80px 0; }
	.dc-intro__grid { flex-direction: row; gap: 60px; }
	.dc-intro__col { flex: 1; }
	.dc-intro .eyebrow { font-size: 24px; letter-spacing: 3.12px; }
	.dc-intro .heading-xl { font-size: 64px; }
	.dc-intro .body-text { font-size: 24px; }
}

.dc-grid { padding: 32px 0 48px; }
.teacher-cards { display: flex; flex-direction: column; gap: 24px; }
.teacher-cards__loadmore { text-align: center; margin-top: 32px; }

.teacher-card { border: 1px solid #c8c8c8; border-radius: 13px; overflow: hidden; background: #fff; }
.teacher-card__media { position: relative; height: 260px; }
.teacher-card__media img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.teacher-card__body h3 { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 18px; text-transform: uppercase; }
.teacher-card__role { font-size: 14px; font-weight: 600; }
.teacher-card__bio { font-size: 14px; line-height: 1.5; }
.teacher-card__link { font-weight: 700; font-size: 14px; }
.teacher-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.teacher-card__tags .tag { border: 1px solid var(--pit-navy); color: var(--pit-navy); font-size: 11px; padding: 5px 10px; }

@media (min-width: 1024px) {
	.dc-grid { padding: 48px 0 80px; }
	.teacher-cards { flex-direction: row; flex-wrap: wrap; gap: 30px; }
	.teacher-cards > * { flex: 0 0 calc(33.333% - 20px); }
	.teacher-card__body h3 { font-size: 24.8px; }
	.teacher-card__role, .teacher-card__bio { font-size: 17px; }
}

/* Profilo singolo docente */
.docente-single__main { padding: 48px 0; }
.docente-single__grid { display: flex; flex-direction: column; gap: 32px; }
/* la foto tiene sempre il taglio verticale 4:5: se quella caricata ha
   proporzioni diverse viene ritagliata, non schiacciata */
.docente-single__photo img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: 12px;
}
.docente-single__role { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.docente-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.docente-single__tags .tag { border: 1px solid var(--pit-navy); color: var(--pit-navy); font-size: 12px; padding: 5px 10px; }
.docente-single__bio { margin-bottom: 24px; }
.docente-single__azioni { display: flex; flex-wrap: wrap; gap: 12px; }

/* Finestra del video del docente */
.dc-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 33, 47, 0.85);
}
.dc-video-modal__box {
	width: min(1100px, 92vw);
	aspect-ratio: 16 / 9;
	max-height: 80vh;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}
.dc-video-modal__box video { display: block; width: 100%; height: 100%; object-fit: contain; }
.dc-video-modal__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--pit-navy);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
body.dc-video-open { overflow: hidden; }

@media (min-width: 1024px) {
	.docente-single__grid { flex-direction: row; gap: 60px; }
	.docente-single__photo { flex: 0 0 320px; }
	.docente-single__content { flex: 1; }
}

.dc-method { position: relative; overflow: hidden; background: var(--pit-navy); color: #fff; padding: 48px 0; }
.dc-method__grid { display: flex; flex-direction: column; gap: 32px; }
.dc-method__photo { border-radius: 12px; overflow: hidden; }
.dc-method__photo img { width: 100%; display: block; }
.dc-method .body-text { margin-top: 16px; }

@media (min-width: 1024px) {
	.dc-method { padding: 80px 0; }
	.dc-method__grid { flex-direction: row; gap: 60px; align-items: center; }
	.dc-method__photo { flex: 0 0 380px; }
	.dc-method__text { flex: 1; }
	.dc-method .eyebrow { font-size: 24px; letter-spacing: 3.12px; }
	.dc-method .heading-xl { font-size: 64px; }
	.dc-method .body-text { font-size: 24px; }
}

/* ==========================================================================
   Docenti — misure dal Figma (frame 1728x4144)
   ========================================================================== */
/* La scheda del singolo docente non finisce col banner colorato, quindi non le
   serve il margine alto del footer pensato per quelle che ce l'hanno: se no
   resta un buco nero sopra il logo. */
@media (min-width: 768px) { .docente-single ~ .site-footer { padding-top: 96px; } }
@media (max-width: 767px) { .docente-single ~ .site-footer { padding-top: 77px; } }

@media (min-width: 768px) {
	.docenti-page .pagehero { background: none; }
	/* l'immagine ha l'angolo in basso trasparente: il velo scuro va tolto, se no
	   la fascia sotto la testata esce grigia invece che bianca come nelle altre pagine */
	.docenti-page .pagehero__bg::after { display: none; }

	/* --- Intro --- */
	.dc-intro { padding: 117px 0 0; height: 373px; border-bottom: 1px solid #A8A8A8; }
	.dc-intro__grid { display: block; position: relative; }
	.dc-intro__col:first-child { width: 705px; }
	.dc-intro__col:last-child { position: absolute; left: 1013px; top: 17px; width: 372px; }
	.dc-intro .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 15px; }
	.dc-intro .heading-xl { font-size: 64px; line-height: 67px; }
	.dc-intro .body-text { font-size: 24px; line-height: 32.8px; }

	/* --- Griglia docenti --- */
	.dc-grid { padding: 78px 0 68px; }
	.teacher-cards { flex-direction: row; flex-wrap: wrap; gap: 46px; }
	.teacher-cards > .teacher-card { flex: 0 0 448px; min-height: 644px; border-radius: 13.21px; border: 1px solid #C8C8C8; }
	.teacher-card__media { position: relative; height: 392px; border-radius: 13.8px 13.8px 0 0; overflow: hidden; }
	.teacher-card__media img { object-position: center 0.7%; }
	/* alone viola in basso a sinistra sulla foto (Figma: diamante 25%, luce lineare) */
	.teacher-card__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 578px 355px at 21.6% 95.4%, #A600AA 0%, #8900E3 47.6%, rgba(255,255,255,0) 100%);
		opacity: 0.25;
		mix-blend-mode: plus-lighter;
		pointer-events: none;
	}
	.teacher-card { position: relative; }
	/* fascia bianca angolata in fondo alla foto (Figma "Vector 2") */
	.teacher-card::after {
		content: "";
		position: absolute;
		left: 0;
		top: 358px;
		width: 351px;
		height: 46px;
		background: #fff;
		clip-path: polygon(0 0, 318.93px 0, 351px 46px, 0 46px);
		z-index: 1;
		pointer-events: none;
	}
	.teacher-card__body { position: relative; z-index: 2; padding: 0 26.41px 25px; gap: 0; }
	/* linea divisoria fra ruolo e bio (Figma "Line 2", y 1559) */
	.teacher-card__body::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 65px;
		height: 1px;
		background: #CCCCCC;
	}
	.teacher-card__body h3 { font-size: 24.81px; line-height: 26px; }
	.teacher-card__role { font-size: 17.17px; line-height: 23.5px; font-weight: 400; min-height: 52px; }
	.teacher-card__bio { font-size: 17.17px; line-height: 23.5px; min-height: 52px; }
	.teacher-card__link { font-size: 16px; line-height: 21.9px; font-weight: 700; text-transform: uppercase; height: 32px; margin-top: 0; display: flex; align-items: flex-end; }
	.teacher-card__tags { gap: 10px; margin-top: 36px; }
	.teacher-card__tags .tag {
		height: 27.6px;
		padding: 0 8.91px 0 10.56px;
		border-radius: 52.81px;
		border: 0.53px solid var(--pit-navy);
		font-size: 12.67px;
		line-height: 17.3px;
		letter-spacing: 1.65px;
	}
	.teacher-cards__loadmore { margin-top: 40px; }

	/* --- Il metodo --- */
	.dc-method {
		height: 835px;
		padding: 169px 0 0;
		background: #EDF2F7;
		color: var(--pit-navy);
		overflow: hidden;
		/* taglio bianco in alto a sinistra (Figma: da x 337,9 a x 241,4 su 76px) */
		clip-path: polygon(30.71% 0, 100% 0, 100% 100%, 0 100%, 0 76px, calc(30.71% - 96.5px) 76px);
	}
	.dc-method__grid { display: block; position: relative; }
	.dc-method__text { width: 705px; }
	.dc-method .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 15px; }
	.dc-method .heading-xl { font-size: 64px; line-height: 67px; }
	.dc-method .body-text { font-size: 24px; line-height: 32.8px; width: 631px; margin-top: 52px; }
	.dc-method .body-text + .body-text { margin-top: 32.8px; }
	.dc-method__visual { position: absolute; left: 809px; top: -191px; width: 801px; height: 776px; }
	.dc-method__dashboard { position: absolute; left: 0; top: 202px; width: 801px; height: 381px; max-width: none; }
	.dc-method__photo {
		position: absolute;
		left: 46px;
		top: 0;
		width: 625px;
		height: 776px;
		border-radius: 0;
		overflow: hidden;
	}
	.dc-method__photo img { width: 781px; max-width: none; height: 781px; margin: 53px 0 0 -64.6px; }

	/* --- Banner: fascia bianca come nel Figma di questa pagina --- */
	.docenti-page .cta-banner {
		height: 122px;
		margin-top: -110.2px;
		position: relative;
		z-index: 5;
		/* sopra prosegue il fondo della sezione "Il metodo", poi il bianco prima del footer */
		background: linear-gradient(#EDF2F7 0 108.2px, #fff 108.2px);
	}
	/* card alta 297 come nel Figma: titolo a 66, testo a 67, bottone a 188 */
	.docenti-page .cta-banner__card { padding: 67px 0 64px; }
	.docenti-page .cta-banner .heading-xl { top: 66px; }
	.docenti-page .cta-banner .body-text { margin-top: 0; }
	.docenti-page .cta-banner .btn { margin-top: 23px; }
}

/* ==========================================================================
   MOBILE — stesso impianto delle altre pagine (colonna 440)
   ========================================================================== */
@media (max-width: 767px) {

	/* --- Testata --- */
	.docenti-page .pagehero {
		min-height: 483px;
		padding: 408px 0 0;
		background: none;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 29px), 80.64% calc(100% - 29px), calc(80.64% - 36.7px) 100%, 0 100%);
	}
	.docenti-page .pagehero__bg { background-size: auto 140%; background-position: 58% 0; }
	.docenti-page .pagehero__bg::after { background: rgba(0, 0, 0, 0.38); }
	.docenti-page .pagehero__breadcrumb { display: none; }
	.docenti-page .pagehero__title { font-size: 42px; line-height: 45.7px; }

	/* --- Intro (483 -> 800) --- */
	.dc-intro { padding: 71px 0 0; height: 317px; border-bottom: 1px solid #A8A8A8; }
	.dc-intro__grid { display: block; }
	.dc-intro .eyebrow { font-size: 12px; line-height: 16.4px; letter-spacing: 1.56px; margin-bottom: 7.5px; }
	.dc-intro .heading-xl { font-size: 32px; line-height: 33.5px; }
	.dc-intro .body-text { font-size: 16px; line-height: 21.9px; margin-top: 30.5px; }

	/* --- Schede docenti (800 -> 4350) --- */
	.dc-grid { padding: 59px 0 50px; }
	.teacher-cards { gap: 37.5px; }
	.teacher-card { position: relative; border: 0.82px solid #C8C8C8; border-radius: 10.78px; min-height: 529px; }
	.teacher-card__media { position: relative; height: 319.8px; border-radius: 11.3px 11.3px 0 0; overflow: hidden; }
	.teacher-card__media img { object-position: center 0.7%; }
	.teacher-card__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 472px 290px at 21.6% 95.4%, #A600AA 0%, #8900E3 47.6%, rgba(255,255,255,0) 100%);
		opacity: 0.25;
		mix-blend-mode: plus-lighter;
		pointer-events: none;
	}
	/* fascia bianca angolata in fondo alla foto */
	.teacher-card::after {
		content: "";
		position: absolute;
		left: 0;
		top: 292.1px;
		width: 286.4px;
		height: 37.5px;
		background: #fff;
		clip-path: polygon(0 0, 260.2px 0, 286.4px 37.5px, 0 37.5px);
		z-index: 1;
		pointer-events: none;
	}
	.teacher-card__body { position: relative; z-index: 2; padding: 0 21.55px 18px; gap: 0; }
	.teacher-card__body::before { content: ""; position: absolute; left: 0; right: 0; top: 53.1px; height: 1px; background: #CCCCCC; }
	.teacher-card__body h3 { font-size: 20px; line-height: 21.2px; }
	.teacher-card__role { font-size: 14px; line-height: 19.1px; font-weight: 400; min-height: 42.4px; }
	.teacher-card__bio { font-size: 14px; line-height: 19.1px; min-height: 42.4px; }
	.teacher-card__link { font-size: 14px; line-height: 19.1px; font-weight: 700; text-transform: uppercase; height: 32px; display: flex; align-items: flex-end; }
	.teacher-card__tags { gap: 8.4px; margin-top: 29.4px; }
	.teacher-card__tags .tag {
		height: 22.6px;
		padding: 0 7.3px 0 8.6px;
		border-radius: 43px;
		border: 0.43px solid var(--pit-navy);
		font-size: 10px;
		line-height: 13.7px;
		letter-spacing: 1.3px;
	}
	.teacher-cards__loadmore { margin-top: 49.3px; }
	.teacher-cards__loadmore .btn {
		min-height: 37.9px;
		padding: 1.68px 3.4px 1.68px 13px;
		gap: 8.41px;
		font-size: 12px;
		letter-spacing: 1.68px;
		border-radius: 84.13px;
	}
	.teacher-cards__loadmore .btn img { width: 31.3px; height: 31.3px; }

	/* --- Il metodo (4350 -> 5297) --- */
	.dc-method {
		height: 947px;
		padding: 116px 0 0;
		background: #EDF2F7;
		color: var(--pit-navy);
		overflow: hidden;
		/* taglio bianco in alto a sinistra (Figma: da x 117,3 a x 61,5 su 44px) */
		clip-path: polygon(26.66% 0, 100% 0, 100% 100%, 0 100%, 0 44px, calc(26.66% - 55.8px) 44px);
	}
	.dc-method .pit-container { padding: 0 58px; }
	.dc-method__grid { display: block; position: relative; }
	.dc-method__text { width: auto; }
	.dc-method .eyebrow { font-size: 12px; line-height: 16.4px; letter-spacing: 1.56px; margin-bottom: 7.5px; }
	.dc-method .heading-xl { font-size: 32px; line-height: 33.5px; }
	.dc-method .body-text { font-size: 16px; line-height: 21.9px; width: 324px; max-width: 100%; margin-top: 30.5px; }
	.dc-method .body-text br { display: none; }
	.dc-method .body-text + .body-text { margin-top: 21.9px; }
	.dc-method__visual { position: absolute; left: -58px; top: 237px; width: 440px; height: 531px; }
	.dc-method__dashboard { position: absolute; left: -24px; top: 138px; width: 548px; height: 261px; max-width: none; }
	.dc-method__photo { position: absolute; left: 0; top: 0; width: 444px; height: 531px; overflow: hidden; }
	.dc-method__photo img { width: 555px; max-width: none; height: 555px; margin: 38px 0 0 0px; }

	/* --- Banner: sopra prosegue il fondo della sezione --- */
	.docenti-page .cta-banner { margin-top: -63px; background: #EDF2F7; }
	/* card 365x391 come nel Figma: titolo a 57, testo a 174, bottone a 326, 30 sotto */
	.docenti-page .cta-banner__card { padding: 57px 0 30px; }
	.docenti-page .cta-banner .btn { margin-top: 108.2px; }
}

/* Banner "Nuovi docenti presto in arrivo" (11/11/2026) */
.dc-soon { padding: 0 0 56px; }
.dc-soon__box {
	display: flex;
	align-items: center;
	min-height: 150px;
	padding: 36px 24px;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(90deg, #4A1480 0%, #8A12E0 30%, #B015A8 65%, #E0143C 100%);
	box-shadow: 0 6px 24px rgba(137, 0, 227, 0.22);
}
.dc-soon__titolo {
	margin: 0;
	max-width: 520px;
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.12;
	text-transform: uppercase;
}
@media (min-width: 768px) {
	.dc-soon { padding: 0 0 96px; }
	.dc-soon__box { min-height: 200px; padding: 48px 56px; }
	.dc-soon__titolo { font-size: 46px; line-height: 1.1; }
}