/* =============================================================================
   MAFAD — SINGLE COURSE VISITOR (pre-iscrizione)
   =============================================================================
   Foglio di stile del template ultimate-learning-pro/single-course-visitor.php.

   REGOLE DI CONVIVENZA
   --------------------
   • Tutto è scoped sotto `.mafad-cv`: questo file non tocca nessun'altra
     pagina, nemmeno la single-course dell'utente iscritto.
   • Enqueue DOPO `mafad-ulp` e `mafad-pay-course` (vedi functions.php): serve
     a spegnere le regole di public.css che vestivano il vecchio markup.
   • `!important` solo su ciò che ULP/public.css dichiara con specificità alta
     (background, border, color, display, float, width, position). Mai su
     padding, font-size, gap.
   • La card di acquisto NON è stilata qui: è di mafad-pay-course.css. Qui si
     prepara soltanto il binario sticky in cui vive.

   INDICE
   ------
   1.  Token
   2.  Reset del markup ULP ereditato
   3.  Hero
   4.  Barra di navigazione (scrollspy)
   5.  Layout a due colonne
   6.  Sezioni e tipografia del contenuto
   7.  Cosa comprende / nota / tag
   8.  Programma (accordion)
   9.  Blocchi shortcode incorporati
   10. Colonna destra
   11. Responsive
   12. Comparsa delle sezioni
   13. Accessibilità

   @package MotusAnimiFAD
   @since   3.0.0
   ========================================================================== */


/* =============================================================================
   1. TOKEN
   -----------------------------------------------------------------------------
   Scoped sul blocco radice, non in :root — stesso approccio di
   mafad-pay-course.css, così i token non inquinano il resto del sito.
   ========================================================================== */
.mafad-cv {
	/* --- COLORE DI ACCENTO ---------------------------------------------------
	   Si chiamano `brand` e non `teal` di proposito: su un corso a pagamento
	   questi stessi token diventano prugna (vedi il blocco più sotto). Un token
	   che si chiama «teal» e contiene #7B2D52 è una bugia che si paga dopo. */
	--mcv-brand:        #1d9b93;
	--mcv-brand-dark:   #17807a;
	--mcv-brand-deep:   #146f69;   /* testo su fondo soft: contrasto AA */
	--mcv-brand-lite:   #2ec4bb;   /* secondo stop dei gradienti */
	--mcv-brand-soft:   rgba(29, 155, 147, .08);
	--mcv-brand-line:   rgba(29, 155, 147, .18);
	--mcv-brand-tint:   rgba(29, 155, 147, .06);
	--mcv-brand-track:  rgba(29, 155, 147, .16);
	--mcv-brand-glow:   rgba(29, 155, 147, .38);
	--mcv-brand-shadow: rgba(29, 155, 147, .70);

	/* Secondario decorativo: badge «Novità», hover dei link. Resta magenta in
	   entrambi i temi — è il colore secondario di theme.json. */
	--mcv-mag:        #c1146e;
	--mcv-mag-dark:   #a00f5a;
	--mcv-mag-soft:   rgba(193, 20, 110, .08);

	/* Urgenza (posti in esaurimento). Tenuto SEPARATO dal secondario: sono due
	   mestieri diversi e sul tema a pagamento prendono strade diverse.
	   Di default coincide col magenta usato da mafad-course-filters.css nella
	   lista corsi, così i due schermi raccontano la stessa cosa. */
	--mcv-alert:       #c1146e;
	--mcv-alert-dark:  #a00f5a;
	--mcv-alert-soft:  rgba(193, 20, 110, .08);
	--mcv-alert-line:  rgba(193, 20, 110, .22);
	--mcv-alert-track: rgba(193, 20, 110, .14);
	--mcv-alert-lite:  #e3459a;

	--mcv-amber:      #b9741a;
	--mcv-amber-soft: #fff7ed;

	/* Inchiostro e superfici */
	--mcv-ink:        #1b1b3a;
	--mcv-body:       #55555f;
	--mcv-muted:      #6b6b7b;
	--mcv-faint:      #9a9aa8;
	--mcv-surface:    #ffffff;
	--mcv-surface-2:  #f7f8fa;
	--mcv-line:       #eceaf0;
	--mcv-line-soft:  #f2f2f6;

	/* Forma */
	--mcv-r-sm:       10px;
	--mcv-r-md:       14px;
	--mcv-r-lg:       20px;
	--mcv-r-xl:       28px;
	--mcv-r-pill:     999px;

	/* Profondità — stessa base cromatica della card di acquisto */
	--mcv-shadow-sm:  0 2px 6px rgba(27, 27, 58, .05);
	--mcv-shadow-md:  0 10px 28px -20px rgba(27, 27, 58, .4);
	--mcv-shadow-lg:  0 18px 50px -26px rgba(27, 27, 58, .3);

	/* Moto */
	--mcv-t:          .18s ease;
	--mcv-t-in:       .28s cubic-bezier(.22, .9, .32, 1);

	/* Larghezza della colonna destra. È un token perché DEVE essere identica
	   nella griglia dell'hero e in quella del corpo: in modalità locandina le
	   due celle di destra formano una colonna sola — locandina in cima, card
	   d'iscrizione subito sotto — e basta un pixel di scarto perché lo stacco
	   si veda. */
	--mcv-col:        372px;

	/* Aggancio verticale. --mcv-header-h e --mcv-nav-h le misura il JS; i
	   valori qui sono il fallback per il primo paint e per il no-JS.

	   NB: NON si ridefinisce --mpc-sticky-top. mafad-pay-course.js scrive un
	   `top` INLINE su .ulp-course-enroll-section (riga 103), che batte
	   qualunque custom property: l'override sarebbe codice morto. La barra di
	   sezione non gli va comunque addosso perché vive nella colonna accanto. */
	--mcv-header-h:   0px;
	--mcv-nav-h:      58px;

	color: var(--mcv-body);
	font-family: 'Roboto', sans-serif;
}

/* -----------------------------------------------------------------------------
   CORSO A PAGAMENTO → PAGINA PRUGNA
   -----------------------------------------------------------------------------
   La condizione NON è calcolata in PHP: è la card stessa a dichiararsi.
   mafad-pay-course.css:218 marca la variante gratuita con .mafad-pay-card--free
   e le ridà i token in teal; qui si legge quella stessa marcatura al contrario.

   Il vantaggio è che pagina e pulsante non possono contraddirsi. Duplicando la
   logica in PHP (ulp_course_payment, prezzo, utente che ha già pagato…) prima o
   poi si arriva a una pagina prugna con un pulsante teal, o viceversa: ULP
   decide a runtime quale dei due template d'iscrizione servire — enroll.php
   (gratuito) o pay_course_bttn_woo.php (a pagamento) — e quella decisione
   dipende anche dall'utente, non solo dal corso.

   I valori sono quelli di mafad-pay-course.css:15-17, così la pagina e la card
   condividono esattamente lo stesso prugna.

   Senza supporto a :has() la pagina resta teal e la card prugna: è la resa di
   prima, leggibile e coerente. Non è un errore, è il fallback.
-------------------------------------------------------------------------------- */
.mafad-cv:has(.mafad-pay-card:not(.mafad-pay-card--free)) {
	--mcv-brand:        #7b2d52;
	--mcv-brand-dark:   #641f42;
	--mcv-brand-deep:   #5a1a3a;
	--mcv-brand-lite:   #a64272;
	--mcv-brand-soft:   rgba(123, 45, 82, .08);
	--mcv-brand-line:   rgba(123, 45, 82, .20);
	--mcv-brand-tint:   rgba(123, 45, 82, .06);
	--mcv-brand-track:  rgba(123, 45, 82, .16);
	--mcv-brand-glow:   rgba(123, 45, 82, .38);
	--mcv-brand-shadow: rgba(123, 45, 82, .70);

	/* L'urgenza deve restare distinguibile dall'accento: su una pagina prugna
	   il magenta le somiglia troppo e «ultimi posti» smetterebbe di saltare
	   all'occhio. Qui l'allarme vira al rosso.

	   --mcv-mag NON si tocca: il badge «Novità» e l'hover dei link restano
	   magenta anche sul tema a pagamento, perché non segnalano un pericolo. */
	--mcv-alert:       #c62828;
	--mcv-alert-dark:  #a01b1b;
	--mcv-alert-soft:  rgba(198, 40, 40, .08);
	--mcv-alert-line:  rgba(198, 40, 40, .22);
	--mcv-alert-track: rgba(198, 40, 40, .14);
	--mcv-alert-lite:  #e05353;
}

.mafad-cv *,
.mafad-cv *::before,
.mafad-cv *::after { box-sizing: border-box; }

.mafad-cv .mafad-cv-icon { flex: 0 0 auto; }


/* =============================================================================
   2. RESET DEL MARKUP ULP EREDITATO
   -----------------------------------------------------------------------------
   Restano in pagina cinque classi `ulp-*` perché mafad-pay-course (CSS + JS)
   ci si aggancia. Vanno però svestite: public.css le disegnava per un layout
   che qui non esiste più.
   ========================================================================== */
/* `margin` con !important perché public.css:411 lo dichiara a sua volta
   !important (`.ulp-course-wrapp { margin: 10px auto !important }`): lì la
   specificità non basta, serve pareggiare la priorità. */
.mafad-cv.ulp-course-wrapp {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 0 20px 64px;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   LA GRIGLIA DELLA PAGINA — da flex (public.css) a griglia esplicita.
   -----------------------------------------------------------------------------
   Due colonne, due righe. A sinistra l'hero (riga 1) e sotto il contenuto
   (riga 2); a destra una cella sola che scavalca entrambe le righe.

   Serve proprio così: se la colonna destra partisse dalla riga 2, fra la
   locandina e il blocco d'iscrizione ci sarebbe un vuoto alto quanto l'hero.
   Scavalcando, la colonna destra comincia in cima alla pagina e locandina e
   card si toccano.
-------------------------------------------------------------------------------- */
.mafad-cv.ulp-course-wrapp .ulp-main-section {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) var(--mcv-col);
	grid-template-rows: auto 1fr;
	align-items: start;
	column-gap: 48px;
	row-gap: 0;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	float: none !important;
}

.mafad-cv.ulp-course-wrapp .ulp-main-section > .mafad-cv-hero {
	grid-column: 1;
	grid-row: 1;
}

.mafad-cv.ulp-course-wrapp .ulp-main-section > .ulp-left-content {
	grid-column: 1;
	grid-row: 2;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: none !important;
	border: 0 !important;
}

.mafad-cv.ulp-course-wrapp .ulp-main-section > .ulp-right-sidebar.mafad-cv-aside {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: static !important;
	top: auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;   /* annulla il margin-top:-24px di mafad-pay-course */
	padding: 0 !important;
	float: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

/* Residui del vecchio template che potrebbero arrivare da shortcode */
.mafad-cv .ulp-clear { display: none !important; }

/* position:sticky muore dentro un antenato con overflow hidden/auto/scroll.
   `clip` ritaglia identico ma non crea uno scroll container. */
.mafad-cv,
.mafad-cv .ulp-main-section { overflow: visible !important; }


/* =============================================================================
   3. HERO
   ========================================================================== */
.mafad-cv-hero {
	margin: 0 0 4px;
	padding: 28px 0 0;
}

.mafad-cv-hero__body { min-width: 0; }

/* Banner orizzontale: fascia in testa alla colonna sinistra. La locandina
   verticale non passa di qui — sta in colonna destra (.mafad-cv-poster). */
.mafad-cv-hero__media {
	position: relative;
	margin-bottom: 26px;
	border-radius: var(--mcv-r-lg);
	box-shadow: var(--mcv-shadow-lg);
}

/* --- Breadcrumb ----------------------------------------------------------- */
.mafad-cv-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	color: var(--mcv-faint);
	font-size: 13px;
	line-height: 1.4;
}

.mafad-cv-crumbs a {
	color: var(--mcv-muted);
	text-decoration: none;
	transition: color var(--mcv-t);
}

.mafad-cv-crumbs a:hover,
.mafad-cv-crumbs a:focus-visible { color: var(--mcv-brand); }

.mafad-cv-crumbs [aria-current="page"] {
	max-width: 40ch;
	overflow: hidden;
	color: var(--mcv-body);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Badge ---------------------------------------------------------------- */
.mafad-cv-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.mafad-cv-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 11px;
	border-radius: var(--mcv-r-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
}

.mafad-cv-badge--ecm     { background: var(--mcv-brand); color: #fff; }
.mafad-cv-badge--new     { background: var(--mcv-mag-soft); color: var(--mcv-mag-dark); }
.mafad-cv-badge--limited { background: var(--mcv-surface-2); color: var(--mcv-muted); }

/* --- Titolo e lead -------------------------------------------------------- */
/* `text-transform: none` è necessario: public.css:417 impone
   `.ulp-course-wrapp h1 { text-transform: uppercase }`, e un titolo di corso
   tutto maiuscolo vanifica sia il clamp sia il tracking negativo. */
.mafad-cv .mafad-cv-hero__title {
	margin: 0 0 14px;
	color: var(--mcv-ink);
	font-size: clamp(32px, 3.6vw, 46px);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.12;
	text-transform: none;
}

.mafad-cv-hero__lead {
	max-width: 62ch;
	margin: 0 0 24px;
	color: var(--mcv-body);
	font-size: 17px;
	line-height: 1.6;
}

/* --- Riga meta: docente, rating, categorie -------------------------------- */
.mafad-cv-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-bottom: 26px;
}

.mafad-cv-author {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.mafad-cv-author__avatar {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	background: var(--mcv-brand-soft);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--mcv-brand-line);
}

.mafad-cv-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mafad-cv-author__initial {
	color: var(--mcv-brand-dark);
	font-size: 17px;
	font-weight: 700;
}

.mafad-cv-author__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mafad-cv-author__label {
	color: var(--mcv-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mafad-cv-author__name {
	overflow: hidden;
	color: var(--mcv-ink);
	font-size: 15px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mafad-cv-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mcv-ink);
	font-size: 15px;
}

.mafad-cv-rating__stars { display: inline-flex; gap: 1px; }

.mafad-cv-rating__star { color: #dcdce4; line-height: 0; }

.mafad-cv-rating__star.is-on { color: #f2a900; }

.mafad-cv-rating__star.is-on svg { fill: currentColor; }

.mafad-cv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mafad-cv-chip {
	padding: 5px 12px;
	background: var(--mcv-surface-2);
	border-radius: var(--mcv-r-pill);
	color: var(--mcv-muted);
	font-size: 12.5px;
	font-weight: 500;
}

/* --- Striscia numeri ------------------------------------------------------ */
.mafad-cv-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 2px;
	margin: 0;
	padding: 20px 4px;
	border-top: 1px solid var(--mcv-line);
	border-bottom: 1px solid var(--mcv-line);
	list-style: none;
}

.mafad-cv-stat {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	gap: 2px 12px;
	min-width: 0;
	padding: 4px 16px 4px 0;
}

.mafad-cv-stat .mafad-cv-icon {
	grid-row: span 2;
	color: var(--mcv-brand);
}

/* Niente nowrap + ellipsis: un valore lungo ma legittimo come «31 dicembre
   2026» verrebbe troncato in «31 dicembre …», che è peggio di due righe. */
.mafad-cv-stat__value {
	min-width: 0;
	color: var(--mcv-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.mafad-cv-stat__label {
	color: var(--mcv-faint);
	font-size: 12.5px;
	line-height: 1.3;
}

/* --- Posti ---------------------------------------------------------------- */
.mafad-cv-seats {
	margin-top: 22px;
	padding: 14px 18px 15px;
	background: var(--mcv-brand-soft);
	border: 1px solid var(--mcv-brand-line);
	border-radius: var(--mcv-r-md);
}

.mafad-cv-seats__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 9px;
}

.mafad-cv-seats__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--mcv-brand-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.mafad-cv-seats__count {
	color: var(--mcv-ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.mafad-cv-seats__count strong { font-size: 16px; font-weight: 700; }

.mafad-cv-seats__bar {
	position: relative;
	height: 7px;
	overflow: hidden;
	background: var(--mcv-brand-track);
	border-radius: var(--mcv-r-pill);
}

.mafad-cv-seats__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--mcv-brand), var(--mcv-brand-lite));
	border-radius: inherit;
	transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.mafad-cv-seats__left {
	margin: 9px 0 0;
	color: var(--mcv-brand-deep);
	font-size: 13px;
	font-weight: 600;
}

.mafad-cv-seats--warning {
	background: var(--mcv-amber-soft);
	border-color: rgba(185, 116, 26, .22);
}
.mafad-cv-seats--warning .mafad-cv-seats__label,
.mafad-cv-seats--warning .mafad-cv-seats__left { color: var(--mcv-amber); }
.mafad-cv-seats--warning .mafad-cv-seats__bar  { background: rgba(185, 116, 26, .16); }
.mafad-cv-seats--warning .mafad-cv-seats__fill { background: linear-gradient(90deg, #f0a53d, #f5c144); }

.mafad-cv-seats--urgent {
	background: var(--mcv-alert-soft);
	border-color: var(--mcv-alert-line);
}
.mafad-cv-seats--urgent .mafad-cv-seats__label,
.mafad-cv-seats--urgent .mafad-cv-seats__left { color: var(--mcv-alert-dark); }
.mafad-cv-seats--urgent .mafad-cv-seats__bar  { background: var(--mcv-alert-track); }
.mafad-cv-seats--urgent .mafad-cv-seats__fill { background: linear-gradient(90deg, var(--mcv-alert), var(--mcv-alert-lite)); }

/* --- Immagine ------------------------------------------------------------- */
.mafad-cv-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: cover;
	border-radius: inherit;
}

.mafad-cv-hero__ecm {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 8px 16px;
	background: var(--mcv-brand);
	border-radius: var(--mcv-r-pill);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 4px 14px -4px var(--mcv-brand-shadow);
}


/* -----------------------------------------------------------------------------
   LOCANDINA — testa della colonna destra
   -----------------------------------------------------------------------------
   Il PHP la stampa qui, e non nell'hero, quando la featured image risulta più
   alta che larga (soglia 0,9). Si mostra INTERA: niente ritaglio, niente
   altezza imposta. È un documento da leggere, non un'immagine da inquadrare.
-------------------------------------------------------------------------------- */
.mafad-cv .mafad-cv-poster {
	margin: 0 0 18px;
	padding: 0;
	overflow: hidden;
	background: var(--mcv-surface-2);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-lg);
	box-shadow: var(--mcv-shadow-md);
	line-height: 0;
}

.mafad-cv .mafad-cv-poster__img {
	display: block;
	width: 100%;
	height: auto;
}


/* =============================================================================
   4. BARRA DI NAVIGAZIONE (scrollspy)
   -----------------------------------------------------------------------------
   Senza JavaScript resta una lista di àncore perfettamente funzionante:
   `is-active` è solo l'evidenziazione, non il meccanismo.
   ========================================================================== */
/* Vive DENTRO .ulp-left-content: è larga quanto la colonna, quindi non passa
   mai sopra la card di acquisto, che si aggancia nella colonna accanto.

   Si aggancia A FILO dell'header, senza stacco: con un `top` maggiore si apre
   una feritoia fra header e barra in cui si vede scorrere il testo, e la
   pagina sembra rotta. L'aria attorno alle voci la dà il padding, che sta
   dentro il fondo opaco e quindi copre. */
.mafad-cv-nav {
	position: -webkit-sticky;
	position: sticky;
	top: var(--mcv-header-h);
	z-index: 30;
	margin: 0 0 36px;
	/* Fondo pieno, non vetro smerigliato: sopra un corpo di testo fitto la
	   traslucenza lascia trasparire i fantasmi delle righe e sembra un errore
	   di rendering. In più backdrop-filter costa, e non è ovunque. */
	background: var(--mcv-surface);
	border-bottom: 1px solid var(--mcv-line);
	transition: box-shadow var(--mcv-t);
}

.mafad-cv-nav.is-stuck { box-shadow: 0 6px 20px -16px rgba(27, 27, 58, .5); }

.mafad-cv-nav__scroll {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.mafad-cv-nav__scroll::-webkit-scrollbar { display: none; }

.mafad-cv-nav__link {
	position: relative;
	flex: 0 0 auto;
	padding: 18px 18px 16px;
	color: var(--mcv-muted);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--mcv-t);
}

.mafad-cv-nav__link::after {
	content: "";
	position: absolute;
	right: 18px;
	bottom: 0;
	left: 18px;
	height: 2px;
	background: var(--mcv-brand);
	border-radius: 2px 2px 0 0;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--mcv-t-in);
}

.mafad-cv-nav__link:hover { color: var(--mcv-ink); }

.mafad-cv-nav__link.is-active { color: var(--mcv-brand); }

.mafad-cv-nav__link.is-active::after { transform: scaleX(1); }

/* --- Indicatore scorrevole -----------------------------------------------
   Con il JS attivo la sottolineatura non appare più sotto la voce: è una sola
   barretta che scivola da una all'altra. Posizione e larghezza arrivano dal
   JS in due custom property.

   Le sottolineature per-voce restano definite qui sopra e servono da
   fallback: senza JS `.mafad-cv--js` non c'è, l'indicatore resta invisibile
   (--mcv-ink-o vale 0) e torna a funzionare quella statica. */
.mafad-cv--js .mafad-cv-nav__link::after { content: none; }

.mafad-cv--js .mafad-cv-nav__scroll { position: relative; }

.mafad-cv--js .mafad-cv-nav__scroll::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;             /* la larghezza vera la dà scaleX */
	height: 2px;
	background: var(--mcv-brand);
	border-radius: 2px 2px 0 0;
	opacity: var(--mcv-ink-o, 0);
	transform: translateX(var(--mcv-ink-x, 0)) scaleX(var(--mcv-ink-w, 0));
	transform-origin: left center;
	transition: transform .26s cubic-bezier(.22, .9, .32, 1),
	            opacity .2s ease;
	pointer-events: none;
}


/* =============================================================================
   5. LAYOUT
   ========================================================================== */
.mafad-cv-main { display: flow-root; }


/* =============================================================================
   6. SEZIONI E TIPOGRAFIA DEL CONTENUTO
   ========================================================================== */
/* scroll-margin-top: l'unico motivo per cui le àncore funzionano anche senza
   JavaScript. Deve valere header + barra + il suo offset + un po' d'aria. */
.mafad-cv-section {
	margin: 0 0 52px;
	scroll-margin-top: calc(var(--mcv-header-h) + var(--mcv-nav-h) + 24px);
}

.mafad-cv-section:last-child { margin-bottom: 0; }

.mafad-cv-section:focus { outline: none; }

.mafad-cv-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 18px;
	margin-bottom: 20px;
}

.mafad-cv .mafad-cv-section__title {
	margin: 0 0 20px;
	color: var(--mcv-ink);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
}

.mafad-cv .mafad-cv-section__head .mafad-cv-section__title { margin-bottom: 0; }

.mafad-cv-section__sub {
	margin: 0;
	color: var(--mcv-faint);
	font-size: 14px;
}

/* --- Contenuto redazionale (the_content) ---------------------------------- */
.mafad-cv-prose {
	color: var(--mcv-body);
	font-size: 16.5px;
	line-height: 1.7;
}

.mafad-cv-prose > *:first-child { margin-top: 0; }
.mafad-cv-prose > *:last-child  { margin-bottom: 0; }

.mafad-cv .mafad-cv-prose h2,
.mafad-cv .mafad-cv-prose h3,
.mafad-cv .mafad-cv-prose h4 {
	margin: 32px 0 12px;
	color: var(--mcv-ink);
	font-weight: 700;
	line-height: 1.3;
}

.mafad-cv .mafad-cv-prose h2 { font-size: 22px; }
.mafad-cv .mafad-cv-prose h3 { font-size: 19px; }
.mafad-cv .mafad-cv-prose h4 { font-size: 17px; }

.mafad-cv-prose p { margin: 0 0 18px; }

.mafad-cv-prose ul,
.mafad-cv-prose ol { margin: 0 0 18px; padding-left: 22px; }

.mafad-cv-prose li { margin-bottom: 8px; }

.mafad-cv-prose a {
	color: var(--mcv-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mafad-cv-prose a:hover { color: var(--mcv-mag); }

.mafad-cv-prose img,
.mafad-cv-prose iframe,
.mafad-cv-prose video {
	max-width: 100%;
	height: auto;
	border-radius: var(--mcv-r-md);
}

.mafad-cv-prose blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--mcv-brand);
	color: var(--mcv-muted);
	font-style: italic;
}

.mafad-cv-prose table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 15px;
}

.mafad-cv-prose th,
.mafad-cv-prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mcv-line);
	text-align: left;
}


/* =============================================================================
   7. COSA COMPRENDE / NOTA / TAG
   ========================================================================== */
.mafad-cv-includes {
	margin-top: 32px;
	padding: 26px 28px 24px;
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-lg);
	box-shadow: var(--mcv-shadow-md);
}

.mafad-cv .mafad-cv-includes__title {
	margin: 0 0 18px;
	color: var(--mcv-ink);
	font-size: 18px;
	font-weight: 700;
}

.mafad-cv-includes__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mafad-cv-include {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--mcv-body);
	font-size: 15px;
	line-height: 1.5;
}

.mafad-cv-include .mafad-cv-icon {
	margin-top: 1px;
	color: var(--mcv-brand);
}

.mafad-cv-include strong { color: var(--mcv-ink); font-weight: 700; }

/* --- Nota (numero chiuso) ------------------------------------------------- */
.mafad-cv-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 24px;
	padding: 18px 20px;
	background: var(--mcv-brand-soft);
	border-radius: var(--mcv-r-md);
	color: var(--mcv-brand-deep);
}

.mafad-cv-note strong {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
	font-weight: 700;
}

.mafad-cv-note p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
}

/* --- Tag (shortcode ULP) -------------------------------------------------- */
/* Attenzione al livello: views/templates/course/tags.php avvolge i tag in
   .ulp-list-tags-wrapp, quindi il flex va messo LÌ — su .mafad-cv-tags
   avrebbe un solo figlio e il gap non farebbe nulla. */
.mafad-cv-tags { margin-top: 24px; }

.mafad-cv-tags,
.mafad-cv-tags .ulp-list-tags-wrapp {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.mafad-cv-tags .ulp-course-tag {
	float: none !important;
	margin: 0 !important;
	padding: 5px 12px !important;
	border-radius: var(--mcv-r-pill) !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}


/* =============================================================================
   8. PROGRAMMA — accordion su <details> nativo
   ========================================================================== */
.mafad-cv-curriculum {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mafad-cv-module {
	overflow: hidden;
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-md);
	transition: border-color var(--mcv-t), box-shadow var(--mcv-t);
}

.mafad-cv-module[open] {
	border-color: var(--mcv-brand-line);
	box-shadow: var(--mcv-shadow-md);
}

/* --- Testata cliccabile --------------------------------------------------- */
.mafad-cv-module__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--mcv-surface-2);
	cursor: pointer;
	list-style: none;
	transition: background-color var(--mcv-t);
}

/* Nasconde il triangolo nativo (Safari usa ::-webkit-details-marker) */
.mafad-cv-module__summary::-webkit-details-marker { display: none; }
.mafad-cv-module__summary::marker { content: ""; }

.mafad-cv-module__summary:hover { background: var(--mcv-brand-tint); }

.mafad-cv-module[open] .mafad-cv-module__summary {
	background: var(--mcv-surface);
	border-bottom: 1px solid var(--mcv-line);
}

.mafad-cv-module__index {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--mcv-brand-soft);
	border-radius: var(--mcv-r-sm);
	color: var(--mcv-brand-dark);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mafad-cv-module__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mafad-cv-module__name {
	color: var(--mcv-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.mafad-cv-module__meta {
	color: var(--mcv-faint);
	font-size: 13px;
}

.mafad-cv-module__chevron {
	flex: 0 0 auto;
	color: var(--mcv-muted);
	line-height: 0;
	transition: transform var(--mcv-t-in), color var(--mcv-t);
}

/* `:not(.is-closing)` — il JS toglie l'attributo `open` solo a fine
   animazione, altrimenti il contenuto sparirebbe prima di scorrere via.
   Senza questa esclusione il chevron resterebbe voltato in su fino
   all'ultimo fotogramma, come se il blocco fosse ancora aperto. */
.mafad-cv-module[open]:not(.is-closing) .mafad-cv-module__chevron {
	color: var(--mcv-brand);
	transform: rotate(180deg);
}

/* --- Elenco lezioni / questionari ---------------------------------------- */
/* `overflow: hidden` non è cosmetico: è ciò che permette al JS di animare
   l'altezza da 0 senza che le righe debordino durante la chiusura. */
.mafad-cv-items {
	margin: 0;
	padding: 6px 0;
	overflow: hidden;
	list-style: none;
}

.mafad-cv-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px 11px 20px;
	font-size: 15px;
	line-height: 1.45;
}

.mafad-cv-item + .mafad-cv-item { border-top: 1px solid var(--mcv-line-soft); }

/* Micro-interazione: la riga si illumina appena al passaggio. Serve a dire
   «questa è una riga, non un paragrafo» — sulle lezioni in anteprima, che
   sono cliccabili, è anche un invito. Col dito non esiste, ed è giusto così. */
.mafad-cv-item {
	transition: background-color var(--mcv-t);
}

@media (hover: hover) {
	.mafad-cv-item:hover { background: var(--mcv-brand-tint); }
}

.mafad-cv-item__icon { color: var(--mcv-faint); line-height: 0; }

.mafad-cv-item--preview .mafad-cv-item__icon { color: var(--mcv-brand); }

.mafad-cv-item__title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--mcv-body);
}

a.mafad-cv-item__title {
	color: var(--mcv-brand-dark);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--mcv-t);
}

a.mafad-cv-item__title:hover { color: var(--mcv-mag); text-decoration: underline; }

.mafad-cv-item__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: var(--mcv-brand-soft);
	border-radius: var(--mcv-r-pill);
	color: var(--mcv-brand-dark);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.mafad-cv-item__right {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.mafad-cv-item__time {
	color: var(--mcv-faint);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mafad-cv-item__lock { color: #c4c4d0; line-height: 0; }

.mafad-cv-pagination { margin-top: 22px; }


/* =============================================================================
   9. BLOCCHI SHORTCODE INCORPORATI
   -----------------------------------------------------------------------------
   L'HTML lo genera ULP: qui si armonizza soltanto la cornice, senza entrare
   nel dettaglio del markup interno (che può cambiare con gli aggiornamenti).
   ========================================================================== */
.mafad-cv-embed { min-width: 0; }

.mafad-cv-embed + .mafad-cv-embed { margin-top: 24px; }

.mafad-cv-embed--instructor,
.mafad-cv-embed--ratingbox {
	padding: 24px 26px;
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-lg);
	box-shadow: var(--mcv-shadow-md);
}

/* Gli shortcode portano il proprio titolo — «About the Instructor», «Course
   Reviews» — in inglese e subito sotto al nostro <h2> italiano. Il primo
   heading di questi due blocchi è quindi un doppione: via. Gli altri heading
   interni restano, e vengono solo armonizzati. */
.mafad-cv-embed--instructor > :first-child:is(h1, h2, h3),
.mafad-cv-embed--instructor > * > :first-child:is(h1, h2, h3),
.mafad-cv-embed--ratingbox > :first-child:is(h1, h2, h3),
.mafad-cv-embed--ratingbox > * > :first-child:is(h1, h2, h3),
.mafad-cv-embed--reviews > :first-child:is(h1, h2, h3),
.mafad-cv-embed--reviews > * > :first-child:is(h1, h2, h3) {
	display: none !important;   /* non solo visivamente: sarebbe un titolo
	                               duplicato anche per gli screen reader */
}

.mafad-cv .mafad-cv-embed h2,
.mafad-cv .mafad-cv-embed h3 {
	margin: 0 0 14px;
	color: var(--mcv-ink);
	font-size: 18px;
	font-weight: 700;
}

.mafad-cv-embed img { max-width: 100%; height: auto; }

.mafad-cv-embed a { color: var(--mcv-brand); }

.mafad-cv-embed a:hover { color: var(--mcv-mag); }

.mafad-cv-section--related { padding-top: 8px; border-top: 1px solid var(--mcv-line); }


/* =============================================================================
   10. COLONNA DESTRA
   -----------------------------------------------------------------------------
   Lo sticky vero e proprio arriva da mafad-pay-course.css (che si aggancia a
   .ulp-course-enroll-section quando trova .mafad-pay-card). Qui si copre il
   caso in cui la card non ci sia, e si veste la wishlist.
   ========================================================================== */
@media (min-width: 783px) {
	/* Rete di sicurezza: mafad-pay-course.css rende sticky questo blocco solo
	   `:has(.mafad-pay-card)`. Il fallback vale se un giorno lo shortcode non
	   produce la card. Il `top` resta quello, ma mafad-pay-course.js lo
	   sovrascrive inline quando la card c'è: è lui l'autorità. */
	.mafad-cv-aside > .ulp-course-enroll-section {
		position: -webkit-sticky;
		position: sticky;
		top: calc(var(--mcv-header-h) + 24px);
		z-index: 2;
	}

	.mafad-cv-aside > .mafad-cv-wishlist {
		position: relative;
		z-index: 1;
	}
}

/* Fallback: si vede solo se lo shortcode non produce la card (altrimenti
   mafad-pay-course.css:828 lo nasconde). Anche così deve seguire il tema —
   public.css lo colora del teal di ULP, che su un corso a pagamento
   stonerebbe. */
.mafad-cv-aside .price-box {
	margin: 0 0 14px;
	color: var(--mcv-brand) !important;
}

.mafad-cv-aside .mafad-pay-card { max-width: 100%; }

/* Il contenitore viene stampato dal PHP solo se lo shortcode ha prodotto
   qualcosa (per i non loggati non produce nulla): niente `:empty`, che con il
   whitespace del markup non scatterebbe comunque. */
.mafad-cv .mafad-cv-wishlist {
	top: auto !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	text-align: center;
}


/* =============================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.mafad-cv { --mcv-col: 336px; }

	.mafad-cv.ulp-course-wrapp .ulp-main-section { column-gap: 36px; }
}

@media (max-width: 900px) {
	.mafad-cv-hero__img { max-height: 260px; }
}

@media (max-width: 782px) {
	.mafad-cv.ulp-course-wrapp { padding-bottom: 40px; }

	/* -------------------------------------------------------------------------
	   Colonna unica, e l'ordine va riscritto a mano.
	   Le righe della griglia qui non contano più: quello che conta è la
	   sequenza di lettura, che deve restare

	       titolo del corso  →  locandina e iscrizione  →  contenuto

	   Mostrare la card d'acquisto PRIMA del titolo sarebbe aggressivo;
	   relegarla in fondo la renderebbe invisibile. Sta in mezzo.
	   ---------------------------------------------------------------------- */
	.mafad-cv.ulp-course-wrapp .ulp-main-section {
		display: flex !important;
		flex-direction: column;
		gap: 32px;
	}

	.mafad-cv.ulp-course-wrapp .ulp-main-section > .mafad-cv-hero { order: 1; }
	.mafad-cv.ulp-course-wrapp .ulp-main-section > .ulp-right-sidebar.mafad-cv-aside { order: 2; }
	.mafad-cv.ulp-course-wrapp .ulp-main-section > .ulp-left-content { order: 3; }

	/* La locandina non va allargata a tutta pagina: a 780px sarebbe alta
	   1100px e occuperebbe da sola due schermate. */
	.mafad-cv .mafad-cv-poster {
		max-width: 380px;
		margin-left: auto;
		margin-right: auto;
	}

	.mafad-cv-hero { padding: 18px 0 0; margin-bottom: 0; }

	.mafad-cv-nav { margin-bottom: 28px; }

	.mafad-cv-section { margin-bottom: 40px; }
}

@media (max-width: 600px) {
	.mafad-cv.ulp-course-wrapp { padding: 0 16px 32px; }

	.mafad-cv-hero__lead { font-size: 16px; }

	.mafad-cv-stats {
		grid-template-columns: 1fr 1fr;
		gap: 14px 0;
		padding: 18px 0;
	}

	.mafad-cv-stat { padding-right: 10px; }

	.mafad-cv .mafad-cv-section__title { font-size: 22px; }

	.mafad-cv-prose { font-size: 16px; }

	.mafad-cv-includes { padding: 20px 20px 18px; }

	.mafad-cv-includes__list { grid-template-columns: 1fr; gap: 13px; }

	.mafad-cv-module__summary { gap: 11px; padding: 14px; }

	.mafad-cv-module__name { font-size: 15px; }

	.mafad-cv-item {
		flex-wrap: wrap;
		padding: 12px 14px;
	}

	.mafad-cv-item__right { margin-left: 0; padding-left: 30px; }

	.mafad-cv-item__title { flex: 1 1 100%; order: -1; }

	.mafad-cv-item__icon { order: -2; }

	.mafad-cv-embed--instructor,
	.mafad-cv-embed--ratingbox { padding: 20px; }
}

@media (max-width: 420px) {
	.mafad-cv-stats { grid-template-columns: 1fr; }

	.mafad-cv-nav__link { padding: 15px 13px 13px; font-size: 13.5px; }

	.mafad-cv-hero__meta { gap: 12px 18px; }
}


/* =============================================================================
   12. COMPARSA DELLE SEZIONI
   -----------------------------------------------------------------------------
   Lo stato di partenza lo applica il JS (classe .mcv-reveal) e solo agli
   elementi che al caricamento stanno SOTTO la piega. Quindi:

   • senza JS non c'è nessuno stato iniziale da annullare — la pagina è
     semplicemente visibile, che è il comportamento giusto;
   • quello che è già a schermo non viene mai nascosto, nemmeno per un
     fotogramma.

   `will-change` non serve: sono elementi che si animano una volta e mai più,
   tenerli su un layer di composizione a vita è peggio del problema.
   ========================================================================== */
.mafad-cv--js .mcv-reveal {
	opacity: 0;
	transform: translateY(10px);
}

.mafad-cv--js .mcv-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .38s ease var(--mcv-reveal-delay, 0ms),
	            transform .38s cubic-bezier(.22, .9, .32, 1) var(--mcv-reveal-delay, 0ms);
}


/* =============================================================================
   13. ACCESSIBILITÀ
   ========================================================================== */
.mafad-cv a:focus-visible,
.mafad-cv summary:focus-visible,
.mafad-cv button:focus-visible {
	outline: 3px solid var(--mcv-brand-glow);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Il focus di default su <summary> è un rettangolo che taglia gli angoli */
.mafad-cv .mafad-cv-module__summary:focus-visible {
	outline-offset: -3px;
	border-radius: var(--mcv-r-md) var(--mcv-r-md) 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.mafad-cv *,
	.mafad-cv *::before,
	.mafad-cv *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	/* Rete di sicurezza. Il JS non applica .mcv-reveal quando l'utente chiede
	   meno movimento, ma se ci arrivasse per qualunque via — un cambio di
	   preferenza a pagina aperta, un bug futuro — la regola qui sopra
	   azzererebbe la transizione lasciando il blocco invisibile per sempre.
	   Questo lo riporta visibile. */
	.mafad-cv .mcv-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media print {
	.mafad-cv-nav,
	.mafad-cv-aside { display: none !important; }

	.mafad-cv.ulp-course-wrapp .ulp-main-section { grid-template-columns: 1fr; }

	.mafad-cv-module { break-inside: avoid; }
}