/* ==========================================================================
   PAGINA SINGOLA DEL CORSO — LearnPress
   Caricato solo su single lp_course (vedi inc/learnpress.php).

   Nessun template del plugin è stato toccato: qui si riveste il markup che
   LearnPress stampa da sé. Le variabili --lp-* sono ridichiarate sul
   contenitore .lp-single-course, non su :root: così il resto del sito (e le
   altre pagine del plugin) restano com'erano.

   0. Token e variabili LearnPress
   1. Testata: briciole, titolo, docente
   2. Impaginato a due colonne
   3. Colonna destra: scheda d'acquisto
   4. Descrizione e titoli di sezione
   5. Curriculum
   6. Docente
   7. Corsi correlati
   8. Elementi rimossi (rete di sicurezza)
   9. Responsive
   ========================================================================== */

/* 0. Token e variabili LearnPress ========================================= */
.lp-single-course {
	/* Palette: solo bianco, nero e due grigi di servizio. */
	--dzc-nero:    #000000;
	--dzc-testo:   #111111;
	--dzc-muto:    #6b6b6b;
	--dzc-bordo:   #e2e2e2;
	--dzc-grigio:  #f4f4f4;
	--dzc-bianco:  #ffffff;

	/* Padding interno della scheda d'acquisto. L'immagine di copertina lo
	   annulla con un margine negativo di pari valore: se cambi questo, si
	   adegua da sola. */
	--dzc-card-pad: 1.5rem;

	/* Le due colonne. La scheda ha larghezza fissa, il contenuto si prende
	   quello che resta: così il gap si può cambiare senza far cadere una
	   colonna sotto l'altra (vedi sezione 2). */
	--dzc-scheda:      360px;
	--dzc-colonne-gap: clamp(2rem, 4vw, 4rem);

	/* --- Copertina della testata --- */
	/* Percorso dalla radice del sito: cambia questa riga per cambiare la
	   foto. Vale per tutte le pagine corso. */
	--dzc-hero-img: url("/wp-content/uploads/2024/01/onlineheader.webp");

	/* Velo nero sfumato sopra la foto, stessa logica di assets/css/hero.css:
	   tre tappe, dalla più chiara in alto alla più carica in fondo, dove sta
	   il testo. Per alleggerirlo o caricarlo si toccano solo le opacità. */
	--dzc-hero-velo-alto:  rgba(0, 0, 0, 0.30);
	--dzc-hero-velo-medio: rgba(0, 0, 0, 0.55);
	--dzc-hero-velo-basso: rgba(0, 0, 0, 0.86);
	--dzc-hero-testo:      #ffffff;
	--dzc-hero-muto:       rgba(255, 255, 255, 0.68);
	--dzc-hero-h:          clamp(300px, 34vw, 460px);

	/* Altezza della barra sticky dell'header (assets/css/header.css).
	   Serve alla scheda che si incolla in alto: senza, ci finisce sotto. */
	--dzc-sticky: 64px;

	/* --- Variabili di LearnPress, riscritte in bianco e nero ---
	   Il plugin le legge con var(--lp-…, fallback): ridichiararle qui
	   ricolora icone, bordi e bottoni senza inseguire ogni singola regola. */
	--lp-primary-color:        var(--dzc-nero);
	--lp-secondary-color:      var(--dzc-nero);
	--lp-color-base:           var(--dzc-testo);
	--lp-color-meta:           var(--dzc-muto);
	--lp-color-white:          var(--dzc-bianco);
	--lp-border-color:         var(--dzc-bordo);
	--lp-white-grey:           var(--dzc-bianco);
	--lp-border-radius:        0;
	--lp-border-radius-avatar: 50%;

	/* Stessa gabbia del resto del sito. Il margine laterale respira sui
	   monitor larghi invece di restare inchiodato a 1rem. */
	--lp-container-max-width: var(--dz-container, 1280px);
	--lp-cotainer-padding:    clamp(1.25rem, 4vw, 2.5rem);

	background: var(--dzc-bianco);
	color: var(--dzc-testo);
	font-family: var(--dz-font-testo, inherit);
}

/* I link ereditano l'accento della palette Elementor (vedi custom.css):
   dentro la pagina corso non c'è accento, c'è il nero. */
.lp-single-course a {
	color: var(--dzc-nero);
}

.lp-single-course a:hover,
.lp-single-course a:focus {
	color: var(--dzc-nero);
}

.lp-single-course a:focus-visible {
	outline: 2px solid var(--dzc-nero);
	outline-offset: 2px;
}

/* Niente angoli arrotondati: il sito è impaginato piatto (--dz-radius: 0). */
.lp-single-course img,
.lp-single-course input,
.lp-single-course button,
.lp-single-course .lp-button,
.lp-single-course .course-section {
	border-radius: 0;
}

/* 1. Testata ============================================================== */
/* Copertina a tutta larghezza con il testo appoggiato in basso, come l'hero
   delle pagine. Il velo nero non è decorazione: senza, un titolo bianco su
   una foto chiara non si legge. */
.lp-single-course .lp-single-course__header {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--dzc-hero-h);
	border-bottom: 0;
	color: var(--dzc-hero-testo);

	/* Il nero sotto si vede finché la foto carica, e resta se il file manca. */
	background-color: var(--dzc-nero);
	background-image: var(--dzc-hero-img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.lp-single-course .lp-single-course__header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		var(--dzc-hero-velo-alto) 0%,
		var(--dzc-hero-velo-medio) 52%,
		var(--dzc-hero-velo-basso) 100%
	);
}

/* Il contenuto sta sopra il velo. */
.lp-single-course .lp-single-course__header__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Tutto il testo della testata è bianco. */
.lp-single-course .lp-single-course__header a {
	color: var(--dzc-hero-testo);
}

.lp-single-course .lp-single-course__header a:focus-visible {
	outline-color: var(--dzc-hero-testo);
}

/* LearnPress restringe la testata per lasciare posto alla scheda che le
   sale sopra. Qui la scheda non sale (vedi sezione 2), quindi la testata
   si riprende tutta la larghezza. */
@media (min-width: 992px) {
	.lp-single-course .lp-single-course__header__inner > * {
		width: 100%;
	}
}

/* --- Briciole di pane --- */
/* Stesso trattamento di .dz-crumbs: separatore generato dal CSS, non
   l'icona del font di LearnPress. */
.lp-single-course .lp-single-course__header .learn-press-breadcrumb {
	align-items: center;
	gap: 0 0.5rem;
	margin: 0 0 1.5rem;
	color: var(--dzc-hero-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lp-single-course .lp-single-course__header .learn-press-breadcrumb li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.lp-single-course .lp-single-course__header .learn-press-breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-single-course__header .learn-press-breadcrumb a:hover,
.lp-single-course .lp-single-course__header .learn-press-breadcrumb a:focus-visible {
	color: var(--dzc-hero-testo);
	border-bottom-color: currentColor;
}

.lp-single-course .learn-press-breadcrumb .breadcrumb-delimiter i {
	display: none;
}

.lp-single-course .learn-press-breadcrumb .breadcrumb-delimiter::before {
	content: "/";
	opacity: 0.55;
	user-select: none;
}

/* --- Titolo --- */
.lp-single-course .lp-single-course__header .course-title {
	max-width: 24ch;
	margin: 0 0 1.5rem;
	color: var(--dzc-hero-testo);
	font-family: var(--dz-font-titoli, inherit);
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.06;
	text-transform: uppercase;
}

/* --- Riga docente / categoria --- */
.lp-single-course .lp-single-course__header .course-instructor-category {
	align-items: center;
	column-gap: 1.5rem;
	row-gap: 0.5rem;
	margin-bottom: 0;
	color: var(--dzc-hero-testo);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lp-single-course .lp-single-course__header .course-instructor-category > div {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.lp-single-course .lp-single-course__header .course-instructor-category label {
	color: var(--dzc-hero-muto);
	letter-spacing: 0.14em;
}

.lp-single-course .lp-single-course__header .course-instructor-category a {
	color: var(--dzc-hero-testo);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-single-course__header .course-instructor-category a:hover {
	color: var(--dzc-hero-testo);
	border-bottom-color: currentColor;
}

/* Avatar del docente accanto al nome (lo aggiunge inc/learnpress.php).
   LearnPress mette display:inline su tutto quello che sta in questa riga:
   qui torna flex, se no immagine e nome non si allineano. */
.lp-single-course .lp-single-course__header .course-instructor,
.lp-single-course .lp-single-course__header .course-instructor a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

.lp-single-course .lp-single-course__header .instructor-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	/* Il filetto stacca la foto dallo sfondo qualunque cosa ci sia dietro. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.16);
}

.lp-single-course .lp-single-course__header .instructor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	filter: grayscale(1);
}

/* --- Riga "ultimo aggiornamento" --- */
/* Di norma non esce: la toglie il filtro in inc/learnpress.php. Lo stile
   resta per il caso in cui un aggiornamento del plugin la rimetta. */
.lp-single-course .lp-single-course-info-one {
	margin-top: 1.25rem;
	color: var(--dzc-hero-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Bottoni della testata: "Condividi" e "Contatta il docente" ---
   Stesso linguaggio a pillola bianca-su-nero-che-si-inverte usato ovunque
   nel sito (freccia della card, bottone d'acquisto, link "leggi di più" dei
   correlati). "Condividi" è il widget di LearnPress spostato qui dalla
   scheda d'acquisto (vedi inc/learnpress.php); "Contatta il docente" apre
   il modale con il form di Contact Form 7 (vedi inc/contact-docente.php e
   assets/css/dz-modal.css). Selettori identici così i due bottoni restano
   sempre alla pari, anche se uno dei due manca (plugin disattivato). */
.lp-single-course .dz-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.lp-single-course .dz-azioni .social-share-toggle {
	margin: 0;
}

.lp-single-course .dz-azioni__btn,
.lp-single-course .dz-azioni .social-share-toggle .share-toggle-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: var(--dzc-hero-testo);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		border-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.lp-single-course .dz-azioni__btn:hover,
.lp-single-course .dz-azioni__btn:focus-visible,
.lp-single-course .dz-azioni .social-share-toggle .share-toggle-icon:hover,
.lp-single-course .dz-azioni .social-share-toggle.social-share-toggle__open .share-toggle-icon {
	background: var(--dzc-hero-testo);
	border-color: var(--dzc-hero-testo);
	color: var(--dzc-nero);
}

.lp-single-course .dz-azioni__icona {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.lp-single-course .dz-azioni .share-label {
	cursor: inherit;
}

/* 2. Impaginato a due colonne ============================================= */
/* Scheda d'acquisto a SINISTRA, contenuto a destra.
 *
 * Attenzione a come sono definite le larghezze qui sotto, perché è il punto
 * dove è facile rompere tutto. LearnPress dimensiona le due colonne con
 * un'aritmetica esatta — sinistra `calc(100% - 410px)`, destra `380px`,
 * `column-gap: 30px` — che fa 100% tondo tondo. Cambiare solo il gap manda
 * la somma oltre il 100% e, con `flex-wrap: wrap` attivo, la seconda colonna
 * cade sotto la prima invece di stringersi.
 *
 * Quindi non tocchiamo il gap dentro quell'aritmetica: la sostituiamo. La
 * scheda ha una base fissa, il contenuto prende quello che avanza
 * (`flex: 1 1 0`). Così il gap si può cambiare a piacere senza far cadere
 * niente. L'ordine visivo lo decide `order`, non l'ordine nel markup: per
 * chi naviga da tastiera o con lo screen reader la descrizione resta prima
 * della scheda.
 */
.lp-single-course .lp-single-course-main {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 992px) {
	.lp-single-course .lp-single-course-main {
		column-gap: var(--dzc-colonne-gap);
	}

	.lp-single-course .lp-single-course-main__left {
		order: 2;
		width: auto;
		flex: 1 1 0;
		min-width: 0; /* senza, un titolo lungo allarga la colonna e sfonda */
	}

	/* LearnPress tira la scheda 280px verso l'alto per sovrapporla alla
	   testata. Adesso la testata è una copertina con la sua foto: farci
	   salire sopra un riquadro bianco la taglierebbe a metà. */
	.lp-single-course .lp-single-course-main__right {
		order: 1;
		width: var(--dzc-scheda);
		flex: 0 0 var(--dzc-scheda);
		margin-top: 0;
	}
}

/* I messaggi di LearnPress (iscrizione completata, errori del carrello) sono
   fratelli delle due colonne: senza questo si infilerebbero nella riga come
   terza colonna. */
.lp-single-course .lp-single-course-main > .learn-press-message {
	flex: 0 0 100%;
	order: 0;
}

.lp-single-course .lp-single-course-main__left > div {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* 3. Colonna destra: scheda d'acquisto ==================================== */
.lp-single-course .lp-single-course-main__right__inner {
	top: calc(var(--dzc-sticky) + 1.25rem);
	padding: var(--dzc-card-pad);
	border: 1px solid var(--dzc-nero);
	background: var(--dzc-bianco);
}

/* --- Copertina a filo dei bordi --- */
/* Nessuna proporzione forzata: le copertine dei corsi hanno il titolo
   stampato dentro, e un ritaglio ne mangerebbe un pezzo. */
.lp-single-course .lp-single-course-main .course-img {
	margin: calc(var(--dzc-card-pad) * -1) calc(var(--dzc-card-pad) * -1) var(--dzc-card-pad);
	background: var(--dzc-grigio);
}

.lp-single-course .lp-single-course-main .course-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Prezzo --- */
.lp-single-course .lp-single-course-main .course-price {
	margin-bottom: 1.25rem;
	color: var(--dzc-nero);
	font-family: var(--dz-font-titoli, inherit);
	line-height: 1;
}

.lp-single-course .lp-single-course-main .course-price .price {
	font-size: 2.25rem;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* Gratis: niente verde, la differenza la fa il maiuscoletto. */
.lp-single-course .lp-single-course-main .course-price .free {
	color: var(--dzc-nero);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lp-single-course .lp-single-course-main .course-price .origin-price {
	color: var(--dzc-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 1rem;
	opacity: 1;
}

/* --- Etichetta "in evidenza" --- */
.lp-single-course .course-featured {
	margin-bottom: 1.25rem;
	padding: 0.375rem 0.75rem;
	background: var(--dzc-nero);
	color: var(--dzc-bianco);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
}

/* --- Righe informative --- */
/* Il filetto sta sopra ogni riga, non sotto: così separa l'elenco
   dall'etichetta "in evidenza" e non lascia una riga orfana appesa
   sopra il bottone d'acquisto. */
.lp-single-course .lp-single-course-main .info-metas .info-meta-item {
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem 0;
	border-top: 1px solid var(--dzc-bordo);
	font-size: 0.875rem;
}

.lp-single-course .lp-single-course-main .info-metas .info-meta-left {
	color: var(--dzc-muto);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lp-single-course .lp-single-course-main .info-metas .info-meta-right {
	color: var(--dzc-nero);
	font-weight: 600;
	text-align: right;
}

.lp-single-course .lp-single-course-main .info-metas i {
	color: var(--dzc-nero);
	font-size: 0.9375rem;
}

/* --- Bottone d'acquisto --- */
.lp-single-course .lp-single-course-main .course-buttons {
	margin-top: 1.5rem;
}

.lp-single-course .lp-single-course-main .course-buttons .lp-button,
.lp-single-course .lp-single-course-main .course-buttons button {
	width: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dzc-nero);
	background: var(--dzc-nero);
	color: var(--dzc-bianco);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-single-course-main .course-buttons .lp-button:hover,
.lp-single-course .lp-single-course-main .course-buttons .lp-button:focus-visible,
.lp-single-course .lp-single-course-main .course-buttons button:hover,
.lp-single-course .lp-single-course-main .course-buttons button:focus-visible {
	background: var(--dzc-bianco);
	color: var(--dzc-nero);
}

/* --- Condividi: il pannello che si apre ---
   Il bottone che lo apre non sta più qui — è nella testata, insieme a
   "Contatta il docente" (sezione "Bottoni della testata" più sotto). Il
   pannello resta bianco qualunque cosa ci sia dietro il bottone che lo
   apre, quindi queste regole non sono cambiate. */
.lp-single-course .content-widget-social-share {
	border: 1px solid var(--dzc-bordo);
	background: var(--dzc-bianco);
}

.lp-single-course .clipboard-post .btn-clipboard {
	border: 0;
	background: var(--dzc-nero);
	color: var(--dzc-bianco);
}

.lp-single-course .lp-social-media a {
	color: var(--dzc-testo);
}

.lp-single-course .lp-social-media a:hover {
	color: var(--dzc-nero);
}

/* 4. Descrizione e titoli di sezione ====================================== */
/* Un solo trattamento per tutti i titoli di blocco: Kiona maiuscolo con un
   filetto sotto, come le altre sezioni del sito. */
.lp-single-course .lp-single-course-main__left .lp-course-curriculum__title,
.lp-single-course .lp-single-course-main__left .section-title,
.lp-single-course .lp-single-course-main__left .course-material__title,
.lp-single-course .lp-single-course-main__left .course-faqs__title,
.lp-single-course .lp-single-course-main__left .extra-box__title,
.lp-single-course .lp-list-courses-related .section-title {
	margin: 0 0 1.5rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--dzc-nero);
	color: var(--dzc-nero);
	font-family: var(--dz-font-titoli, inherit);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lp-single-course .lp-course-description {
	max-width: 68ch;
	color: var(--dzc-testo);
	font-size: 1rem;
	line-height: 1.75;
}

.lp-single-course .lp-course-description a {
	color: var(--dzc-nero);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 5. Curriculum =========================================================== */
.lp-single-course .course-curriculum-info {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.25rem;
	color: var(--dzc-muto);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lp-single-course .course-curriculum-info__left {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-single-course .course-curriculum-info__left li {
	margin: 0;
}

/* Le voci vuote (LearnPress stampa il <li> anche senza contenuto)
   lascerebbero un buco nella riga insieme al loro gap. */
.lp-single-course .course-curriculum-info__left li:empty {
	display: none;
}

.lp-single-course .course-toggle-all-sections {
	border-bottom: 1px solid currentColor;
	color: var(--dzc-nero);
	font-weight: 600;
}

/* --- Sezioni --- */
/* Niente riquadri: righe separate da filetti, come la griglia dei corsi. */
.lp-single-course .lp-course-curriculum .course-sections {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-single-course .lp-course-curriculum .course-section {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--dzc-bordo);
	overflow: visible;
}

.lp-single-course .lp-course-curriculum .course-section:first-child {
	border-top-color: var(--dzc-nero);
}

.lp-single-course .lp-course-curriculum .course-section:last-child {
	border-bottom: 1px solid var(--dzc-bordo);
}

.lp-single-course .lp-course-curriculum .course-section .course-section-header {
	align-items: center;
	padding: 1.125rem 0;
	background: var(--dzc-bianco);
	transition: opacity var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-course-curriculum .course-section .course-section-header:hover {
	opacity: 0.62;
}

.lp-single-course .lp-course-curriculum .course-section .section-toggle i {
	color: var(--dzc-nero);
	font-size: 1.125rem;
}

.lp-single-course .lp-course-curriculum .course-section__title {
	color: var(--dzc-nero);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lp-single-course .lp-course-curriculum .course-section__description {
	color: var(--dzc-muto);
	font-size: 0.8125rem;
}

.lp-single-course .lp-course-curriculum .course-section .section-count-items {
	color: var(--dzc-muto);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
}

/* --- Lezioni --- */
.lp-single-course .lp-course-curriculum .course-section__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-single-course .lp-course-curriculum .course-section .course-item {
	padding: 0.875rem 0 0.875rem 2.125rem;
	border-top: 1px solid var(--dzc-bordo);
}

.lp-single-course .lp-course-curriculum .course-section .course-item__link {
	color: var(--dzc-testo);
	font-size: 0.9375rem;
	text-decoration: none;
}

.lp-single-course .lp-course-curriculum .course-section .course-item__left {
	transition: opacity var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-course-curriculum .course-section .course-item__left:hover {
	color: var(--dzc-nero);
	opacity: 0.62;
}

.lp-single-course .lp-course-curriculum .course-section .course-item__right,
.lp-single-course .lp-course-curriculum .course-section .duration {
	color: var(--dzc-muto);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lp-single-course .lp-course-curriculum .course-section .course-item-ico::before,
.lp-single-course .lp-course-curriculum .course-section .course-item-ico.locked::before,
.lp-single-course .lp-course-curriculum .course-section .course-item-ico.preview::before {
	color: var(--dzc-muto);
}

/* 6. Docente ============================================================== */
.lp-single-course .lp-instructor-info {
	align-items: flex-start;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
}

.lp-single-course .lp-instructor-info > a {
	flex: 0 0 auto;
	line-height: 0;
}

.lp-single-course .lp-instructor-info .instructor-avatar {
	width: clamp(96px, 12vw, 140px);
	height: clamp(96px, 12vw, 140px);
	max-width: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--dzc-grigio);
}

.lp-single-course .lp-instructor-info .instructor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	filter: grayscale(1);
	transition: filter var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-instructor-info:hover .instructor-avatar img {
	filter: grayscale(0);
}

.lp-single-course .lp-instructor-info a {
	color: var(--dzc-nero);
	text-decoration: none;
}

.lp-single-course .lp-instructor-info .instructor-display-name {
	color: var(--dzc-nero);
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lp-single-course .lp-instructor-meta {
	margin-top: 0.875rem;
	column-gap: 1.5rem;
	color: var(--dzc-testo);
	font-size: 0.875rem;
}

.lp-single-course .lp-instructor-meta .instructor-item-meta {
	align-items: baseline;
	gap: 0.375rem;
	padding-left: 1.5rem;
	border-left: 1px solid var(--dzc-bordo);
	font-weight: 600;
}

/* Etichetta aggiunta da inc/learnpress.php: senza, restano due numeri nudi. */
.lp-single-course .lp-instructor-meta .dz-instructor-label {
	color: var(--dzc-muto);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lp-single-course .lp-instructor-info .instructor-description {
	max-width: 62ch;
	color: var(--dzc-muto);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.lp-single-course .lp-instructor-info .instructor-social > a i {
	border-color: var(--dzc-bordo);
	color: var(--dzc-testo);
}

.lp-single-course .lp-instructor-info .instructor-social > a i:hover {
	background: var(--dzc-nero);
	border-color: var(--dzc-nero);
	color: var(--dzc-bianco);
}

/* 7. Corsi correlati ====================================================== */
.lp-single-course .lp-list-courses-related {
	margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.lp-single-course .lp-courses-related {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* L'!important qui serve davvero, e per un motivo preciso — non è pigrizia.
   Il markup dei correlati è lo stesso <li class="course"> che LearnPress usa
   nella sua griglia a flex: quella griglia calcola la larghezza della card
   con un width in percentuale sulla riga intera (25% in versione desktop,
   50%/100% nei suoi media query), non con grid-template-columns come
   facciamo qui. Il nostro selettore su misura per la pagina corso
   (.lp-single-course .lp-courses-related > li) è comunque più specifico di
   quello base di LearnPress (.learn-press-courses .course), ma non del più
   mirato .learn-press-courses.lp-courses-related .course — tre classi contro
   le nostre due classi più il tipo li. Senza !important quella regola
   resterebbe più specifica ai breakpoint di LearnPress e le card
   tornerebbero strette o impilate a metà — esattamente il bug che vedevi.
   Lo stesso vale per il padding: 0 16px, residuo del suo margine negativo
   per il gutter tra le card (tecnica da flexbox, qui inutile perché il gap
   lo fa già .lp-courses-related). */
.lp-single-course .lp-courses-related > li {
	width: 100% !important;
	margin: 0;
	padding: 0 !important;
	min-width: 0;
}

.lp-single-course .lp-courses-related .course-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 0;
	background: none;
	box-shadow: none;
}

.lp-single-course .lp-courses-related .course-thumbnail {
	position: relative;
	overflow: hidden;
	background: var(--dzc-grigio);
	aspect-ratio: 4 / 3;
}

/* L'immagine è dentro un link: senza questo il link resta alto quanto una
   riga di testo e l'altezza al 100% dell'immagine non ha su cosa appoggiarsi. */
.lp-single-course .lp-courses-related .course-thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
}

.lp-single-course .lp-courses-related .course-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-single-course .lp-courses-related .course-item:hover .course-thumbnail img {
	transform: scale(1.04);
}

.lp-single-course .lp-courses-related .course-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.875rem 0 0;
}

.lp-single-course .lp-courses-related .wap-course-title {
	margin: 0;
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.35;

	/* Massimo tre righe: oltre, le card si sfalsano in altezza. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lp-single-course .lp-courses-related .wap-course-title a {
	color: var(--dzc-nero);
	text-decoration: none;
}

.lp-single-course .lp-courses-related .course-instructor-category,
.lp-single-course .lp-courses-related .course-wrap-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	color: var(--dzc-muto);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lp-single-course .lp-courses-related .course-instructor-category a {
	color: var(--dzc-muto);
	text-decoration: none;
}

.lp-single-course .lp-courses-related .course-instructor-category a:hover {
	color: var(--dzc-nero);
}

.lp-single-course .lp-courses-related .course-wrap-meta .meta-item:empty {
	display: none;
}

.lp-single-course .lp-courses-related .course-short-description {
	margin: 0;
	color: var(--dzc-muto);
	font-size: 0.875rem;
	line-height: 1.6;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Prezzo e bottone in fondo alla card: restano allineati anche con titoli
   di lunghezza diversa. */
.lp-single-course .lp-courses-related .course-info {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.875rem;
	border-top: 1px solid var(--dzc-bordo);
}

.lp-single-course .lp-courses-related .course-price {
	color: var(--dzc-nero);
	font-family: var(--dz-font-ui, inherit);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lp-single-course .lp-courses-related .course-price .free {
	color: var(--dzc-nero);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lp-single-course .lp-courses-related .course-price .origin-price {
	color: var(--dzc-muto);
	font-size: 0.875em;
	font-weight: 400;
}

.lp-single-course .lp-courses-related .course-readmore a {
	display: block;
	padding: 0.75rem 1rem;
	border: 1px solid var(--dzc-nero);
	color: var(--dzc-nero);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

.lp-single-course .lp-courses-related .course-readmore a:hover,
.lp-single-course .lp-courses-related .course-readmore a:focus-visible {
	background: var(--dzc-nero);
	color: var(--dzc-bianco);
}

/* Nelle card correlate l'etichetta "in evidenza" non deve rubare la scena
   a quella della scheda del corso. */
.lp-single-course .lp-courses-related .course-featured {
	align-self: flex-start;
	margin-bottom: 0;
}

/* Scheletro di caricamento: le barrette grigie mentre arriva l'AJAX. */
.lp-single-course .lp-skeleton-animation li {
	background: var(--dzc-grigio);
}

/* 8. Elementi rimossi (rete di sicurezza) ================================= */
/* La rimozione vera la fanno i filtri PHP in inc/learnpress.php. Queste
   regole servono se un aggiornamento di LearnPress rinomina quei filtri:
   meglio un blocco nascosto che una sezione recensioni ricomparsa. */
.lp-single-course .lp-course-comment,
.lp-single-course .course-featured-review,
.lp-single-course .lp-single-course-info-one .star-info,
.lp-single-course .course-rate,
.lp-single-course .course-review {
	display: none !important;
}

/* Test (quiz) e Livello: fuori dalla colonna informazioni. */
.lp-single-course .info-metas .info-meta-item:has(.lp_quiz),
.lp-single-course .info-metas .info-meta-item:has(.course-level) {
	display: none;
}

/* 9. Responsive =========================================================== */
@media (max-width: 1200px) {
	.lp-single-course .lp-courses-related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	/* Sotto i 992px LearnPress inverte le colonne e la scheda va sopra:
	   incollarla in alto non ha più senso e ruberebbe schermo. */
	.lp-single-course .lp-single-course-main__right__inner {
		position: static;
	}

	.lp-single-course .lp-courses-related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (max-width: 560px) {
	.lp-single-course .lp-single-course__header .course-title {
		max-width: none;
	}

	.lp-single-course .lp-courses-related {
		grid-template-columns: 1fr;
	}

	.lp-single-course .lp-course-curriculum .course-section .course-item {
		padding-left: 1.5rem;
	}
}