/* ============================================================================
   MEEC — Componenti
   ----------------------------------------------------------------------------
   1. componenti del design system (Figma "Master MEEC", pagina Design System,
      riquadro COMPLETATI: Button, Chip) e quelli ricorrenti nelle schermate
      (sezioni, occhiello, badge, card);
   2. veste MEEC dei componenti serviti dai plugin (area download, area
      riservata, widget AI): stesse classi del plugin, il markup resta suo;
   3. componenti del tema (percorso, schede docente e documento).
   Le fondamenta stanno in base.css. Nessun valore fisso qui dentro: dove un
   valore del Figma non e' un token (es. raggio 12px) si usa il token piu'
   vicino e lo scarto e' annotato in docs/2026-09-11_token-da-figma.md.
   ============================================================================ */

/* ==========================================================================
   1. Design system
   ========================================================================== */

/* --- Contenitore ----------------------------------------------------------
   1296px di contenuto (Figma: sezioni a 1440 con 72px per lato), margine
   laterale che scende a 16px sul mobile. Uno solo per tutto il sito:
   intestazione e piede compresi. */
.meec-contenitore{
	width:100%;
	max-width:calc(var(--meec-contenitore) + 2 * var(--meec-margine));
	margin-inline:auto;
	padding-inline:var(--meec-margine);
	box-sizing:border-box;
}

/* --- Sezioni (Figma: Tokens / Surface / Section) -------------------------- */
.meec-sezione{
	padding-block:var(--meec-sezione);
	background:var(--meec-sup-sezione-bianca);
}
.meec-sezione--grigia{background:var(--meec-sup-sezione-grigia)}
.meec-sezione--rosa{background:var(--meec-sup-sezione-rosa)}
.meec-sezione--verde{background:var(--meec-sup-sezione-verde)}
.meec-sezione--scura{background:var(--meec-sup-sezione-verde-scura)}

/* Testata di sezione: occhiello + titolo + sottotitolo, 64px prima del contenuto. */
.meec-sezione__testata{max-width:53.5rem;margin-bottom:var(--meec-sp-9)}
.meec-sezione__testata--centro{margin-inline:auto;text-align:center}
.meec-sezione__testata > :last-child{margin-bottom:0}
.meec-sezione__titolo{margin-bottom:var(--meec-sp-3)}

/* Superfici scure: testo, link e occhiello si invertono insieme. */
.meec-su-scuro,
.meec-sezione--scura{color:var(--meec-testo-invertito)}
.meec-su-scuro a:not(.meec-bottone),
.meec-sezione--scura a:not(.meec-bottone){color:var(--meec-testo-invertito)}
.meec-su-scuro .meec-occhiello,
.meec-sezione--scura .meec-occhiello{color:var(--meec-testo-invertito)}
.meec-su-scuro .meec-sottotitolo,
.meec-sezione--scura .meec-sottotitolo{color:var(--meec-testo-invertito)}

/* --- Bottoni (Figma: Design System / Button) ------------------------------
   Gerarchie: primario (una sola azione principale per vista), secondario,
   link. Taglie: sm 36, md 40, lg 44 (predefinita, e' quella dell'intestazione),
   xl 48. Stati: hover, premuto, disabilitato + focus visibile, che il Figma
   non disegna ma la norma richiede. */
.meec-bottone,
.wp-element-button,
.wp-block-button__link{
	--_sfondo:var(--meec-sup-bottone-primario);
	--_sfondo-hover:var(--meec-sup-bottone-primario-hover);
	--_testo:var(--meec-testo-invertito);
	--_bordo:var(--meec-sup-bottone-primario);
	--_bordo-hover:var(--meec-sup-bottone-primario-hover);
	--_anello:var(--meec-bordo-secondario);
	display:inline-flex;align-items:center;justify-content:center;gap:var(--meec-sp-2);
	min-height:2.75rem;
	padding:calc(0.625rem - 1px) calc(1rem - 1px);
	border:1px solid var(--_bordo);
	border-radius:var(--meec-raggio-sm);
	background:var(--_sfondo);
	color:var(--_testo);
	font-family:var(--meec-font-testo);
	font-size:var(--meec-corpo);
	font-weight:600;
	line-height:1.5;
	text-decoration:none;
	text-align:center;
	cursor:pointer;
	/* Il Figma lega Shadow/md a _Button base, su tutte e quattro le taglie e su
	   tutti gli stati, primario e secondario compresi. Il link button non ha
	   una cassa, quindi la toglie piu' sotto. */
	box-shadow:var(--meec-ombra-md);
	transition:background-color var(--meec-durata),border-color var(--meec-durata),color var(--meec-durata);
	box-sizing:border-box;
}
.meec-bottone:hover,
.wp-element-button:hover,
.wp-block-button__link:hover{
	background:var(--_sfondo-hover);border-color:var(--_bordo-hover);color:var(--_testo);
	text-decoration:none;
}
/* Premuto: il Figma disegna un bordo di 2px in Accent/200 dentro la cassa. Qui
   e' un anello esterno, che non cambia l'ingombro del bottone; si somma
   all'ombra invece di sostituirla. */
.meec-bottone:active,
.wp-block-button__link:active{box-shadow:0 0 0 2px var(--_anello),var(--meec-ombra-md)}
/* GeneratePress colora i bottoni del core con un selettore piu' specifico
   (a.wp-block-button__link:not(.has-background)): qui si riprende il controllo. */
.wp-block-button > a.wp-block-button__link:not(.has-background){background:var(--_sfondo);color:var(--_testo)}
/* GeneratePress impone anche 10px 20px di spazio interno: si torna alla taglia md (44px). */
.wp-block-button > .wp-block-button__link{padding:calc(0.625rem - 1px) calc(1rem - 1px)}
.wp-block-button > a.wp-block-button__link:not(.has-background):hover,
.wp-block-button > a.wp-block-button__link:not(.has-background):focus-visible{background:var(--_sfondo-hover);color:var(--_testo)}
.wp-block-button > a.wp-block-button__link:not(.has-background):active{background:var(--_sfondo);color:var(--_testo)}
.meec-bottone .meec-icona{width:1.5rem;height:1.5rem}

.meec-bottone--secondario,
.is-style-outline > .wp-block-button__link{
	--_sfondo:var(--meec-sup-bottone-secondario);
	--_sfondo-hover:var(--meec-sup-bottone-secondario-hover);
	--_testo:var(--meec-testo-accento);
	--_bordo:var(--meec-bordo-primario);
	--_bordo-hover:var(--meec-sup-bottone-secondario-hover);
}
/* Grigio terziario. Era la variante di "Area riservata" nell'intestazione fino
   all'header vecchio; nel component set "Header" del Design System quel
   pulsante e' ora la variante secondaria (fondo bianco, bordo e testo accento,
   peso 600). La variante resta perche' e' del Design System, non nostra.    */
.meec-bottone--terziario{
	--_sfondo:transparent;
	--_sfondo-hover:var(--meec-sup-sezione-grigia);
	--_testo:var(--meec-testo-primario);
	--_bordo:transparent;
	--_bordo-hover:var(--meec-sup-sezione-grigia);
	font-weight:400;
	padding-inline:calc(1.125rem - 1px);
	/* Variante nostra, non del Design System: senza cassa piena l'ombra
	   galleggerebbe sotto un fondo trasparente. */
	box-shadow:none;
}
.meec-bottone--terziario:active{box-shadow:0 0 0 2px var(--_anello)}
.meec-bottone--link{
	--_sfondo:transparent;--_sfondo-hover:transparent;
	--_bordo:transparent;--_bordo-hover:transparent;
	--_testo:var(--meec-testo-accento);
	min-height:0;padding:0;border-width:0;box-shadow:none;
}
.meec-bottone--link:hover{color:var(--meec-testo-hover)}
.meec-bottone--link:active{box-shadow:none}
/* Bianco su fondo scuro o su foto (hero): il Figma usa bottone bianco + primario. */
.meec-bottone--chiaro{
	--_sfondo:var(--meec-sup-bottone-secondario);
	--_sfondo-hover:var(--meec-sup-bottone-secondario-hover);
	--_testo:var(--meec-testo-primario);
	--_bordo:var(--meec-sup-bottone-secondario);
	--_bordo-hover:var(--meec-sup-bottone-secondario-hover);
}

.meec-bottone--sm{min-height:2.25rem;padding:calc(0.5rem - 1px) calc(1rem - 1px);font-size:var(--meec-testo-sm);line-height:1.43}
.meec-bottone--md{min-height:2.5rem;padding:calc(0.625rem - 1px) calc(1rem - 1px);font-size:var(--meec-testo-sm);line-height:1.43}
.meec-bottone--xl{min-height:3rem;padding:calc(0.75rem - 1px) calc(1.5rem - 1px)}
.meec-bottone--sm .meec-icona,
.meec-bottone--md .meec-icona{width:1rem;height:1rem}

.meec-bottone[disabled],
.meec-bottone[aria-disabled="true"]{
	--_sfondo:var(--meec-sup-bottone-disabilitato);--_sfondo-hover:var(--meec-sup-bottone-disabilitato);
	--_bordo:var(--meec-sup-bottone-disabilitato);--_bordo-hover:var(--meec-sup-bottone-disabilitato);
	--_testo:var(--meec-testo-secondario);
	cursor:not-allowed;
}

/* --- Chip (Figma: Design System / Chip) -----------------------------------
   Filtri e selezioni. Lo stato "attivo" si dichiara con aria-pressed o
   aria-current, non con una classe: cosi' lettore di schermo e aspetto non
   possono divergere. */
.meec-chip{
	display:inline-flex;align-items:center;gap:var(--meec-sp-1);
	padding:calc(var(--meec-sp-1) - 1px) calc(var(--meec-sp-3) - 1px);
	border:1px solid var(--meec-bordo-terziario);
	border-radius:var(--meec-raggio-xxl);
	background:var(--meec-sup-chip);
	color:var(--meec-testo-primario);
	font:500 var(--meec-testo-sm)/1.375rem var(--meec-font-testo);   /* 30px (sm: 26px) come nel Figma */
	text-decoration:none;
	cursor:pointer;
	transition:background-color var(--meec-durata),border-color var(--meec-durata),color var(--meec-durata);
}
.meec-chip:hover{background:var(--meec-sup-chip-hover);border-color:var(--meec-bordo-primario);color:var(--meec-testo-accento);text-decoration:none}
.meec-chip[aria-pressed="true"],
.meec-chip[aria-current]:not([aria-current="false"]){
	background:var(--meec-sup-chip-attivo);border-color:var(--meec-bordo-primario);color:var(--meec-testo-accento);
}
.meec-chip--sm{padding:calc(var(--meec-sp-0) - 1px) calc(var(--meec-sp-2) - 1px)}
.meec-chip .meec-icona{width:1rem;height:1rem}

/* --- Badge ---------------------------------------------------------------
   Etichetta non interattiva. Variante verde: quella dell'hero (Figma: Badge
   group, fondo Brand/Dark/600). Varianti per le categorie delle notizie:
   colori "Bagdes/*" dei Primitivi. */
/* Figma "Badges": raggio 8 (Radius/SM), bordo 1px, spazio 2/8 (sm, md) o 4/8
   (lg), Inter Medium 14/20 (sm) o 16/24 (md, lg). Sei famiglie di colore, ognuna
   con fondo, bordo e testo propri. Il badge nudo prende la famiglia Grey, che
   nel sistema e' quella neutra. */
.meec-badge{
	--_badge-sfondo:var(--wp--custom--colore--badge--grigio-sfondo);
	--_badge-bordo:var(--wp--custom--colore--badge--grigio-bordo);
	--_badge-testo:var(--wp--custom--colore--badge--grigio-testo);
	display:inline-flex;align-items:center;gap:var(--meec-sp-1);
	padding:var(--meec-sp-0) var(--meec-sp-2);
	border:1px solid var(--_badge-bordo);
	border-radius:var(--meec-raggio-sm);
	background:var(--_badge-sfondo);
	color:var(--_badge-testo);
	font:500 var(--meec-testo-sm)/1.43 var(--meec-font-testo);
}
.meec-badge--lg{padding:var(--meec-sp-1) var(--meec-sp-2);font-size:var(--meec-corpo);line-height:1.5}
/* Il badge verde dell'hero non e' una delle sei famiglie: e' il "Badge group"
   delle schermate, con un fondo pieno e nessun bordo proprio. */
.meec-badge--verde{
	--_badge-sfondo:var(--wp--custom--colore--brand-dark--600);
	--_badge-bordo:var(--wp--custom--colore--brand-dark--600);
	--_badge-testo:var(--meec-testo-invertito);
	padding:var(--meec-sp-2) var(--meec-sp-3);
	font:600 var(--meec-corpo)/1.5 var(--meec-font-titoli);
}
/* Le sei famiglie del Design System. */
.meec-badge--blu,      a.meec-cat-eventi{--_badge-sfondo:var(--wp--custom--colore--badge--blu-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--blu-bordo);--_badge-testo:var(--wp--custom--colore--badge--blu-testo)}
.meec-badge--giallo{--_badge-sfondo:var(--wp--custom--colore--badge--giallo-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--giallo-bordo);--_badge-testo:var(--wp--custom--colore--badge--giallo-testo)}
.meec-badge--viola,    a.meec-cat-iniziative{--_badge-sfondo:var(--wp--custom--colore--badge--viola-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--viola-bordo);--_badge-testo:var(--wp--custom--colore--badge--viola-testo)}
.meec-badge--rosa{--_badge-sfondo:var(--wp--custom--colore--badge--rosa-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--rosa-bordo);--_badge-testo:var(--wp--custom--colore--badge--rosa-testo)}
.meec-badge--primario{--_badge-sfondo:var(--wp--custom--colore--badge--primario-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--primario-bordo);--_badge-testo:var(--wp--custom--colore--badge--primario-testo)}
.meec-badge--grigio{--_badge-sfondo:var(--wp--custom--colore--badge--grigio-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--grigio-bordo);--_badge-testo:var(--wp--custom--colore--badge--grigio-testo)}
/* Categorie delle notizie. Eventi → Blue e Iniziative → Purple sono le due
   corrispondenze cromatiche ovvie con le famiglie del sistema. **Attivita' non
   ha una famiglia**: il Design System non contiene un verde chiaro, e l'unica
   famiglia verde e' Primario (verde pieno, testo bianco), che cambierebbe il
   peso visivo della categoria. Resta il colore attuale, con un bordo ricavato
   dalla stessa tinta, in attesa di una decisione. */
.meec-badge--eventi{--_badge-sfondo:var(--wp--custom--colore--badge--blu-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--blu-bordo);--_badge-testo:var(--wp--custom--colore--badge--blu-testo)}
.meec-badge--iniziative{--_badge-sfondo:var(--wp--custom--colore--badge--viola-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--viola-bordo);--_badge-testo:var(--wp--custom--colore--badge--viola-testo)}
.meec-badge--attivita, a.meec-cat-attivita{--_badge-sfondo:var(--wp--custom--colore--badge--attivita-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--attivita-bordo);--_badge-testo:var(--wp--custom--colore--badge--attivita-testo)}

/* --- Card ----------------------------------------------------------------
   Figma: "_Feature text" (32px di spazio interno, raggio 16, bordo terziario).
   Variante in evidenza: fondo con gradiente verde e testo invertito.
   Una card che porta a una pagina e' un titolo con link, mai un div cliccabile:
   l'intera superficie diventa cliccabile col ::after del link. */
.meec-card{
	position:relative;
	display:flex;flex-direction:column;gap:var(--meec-sp-4);
	padding:calc(var(--meec-sp-5) - 1px);
	border:1px solid var(--meec-bordo-terziario);
	border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);
}
.meec-card__icona{width:4rem;height:4rem;color:var(--meec-testo-accento)}
.meec-card__icona .meec-icona{width:100%;height:100%}
.meec-card__titolo{
	margin:0 0 var(--meec-sp-2);
	font-family:var(--meec-font-testo);
	font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;
}
.meec-card__testo{margin:0;color:var(--meec-testo-secondario)}
.meec-card__titolo a{color:inherit;text-decoration:none}
.meec-card__titolo a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.meec-card__titolo a:hover{text-decoration:underline}
.meec-card:has(.meec-card__titolo a:focus-visible){outline:3px solid var(--meec-focus);outline-offset:2px}
.meec-card__titolo a:focus-visible{outline:none}
.meec-card--evidenza{
	border-color:var(--meec-verde);
	background:var(--meec-gradiente-verde);
	color:var(--meec-testo-invertito);
	--meec-focus:var(--meec-testo-invertito);
}
.meec-card--evidenza .meec-card__testo,
.meec-card--evidenza .meec-card__icona{color:var(--meec-testo-invertito)}

/* Griglia di card: 3 colonne a 1296px (416 + 24 + 416 + 24 + 416), poi a capo. */
.meec-griglia{
	display:grid;
	gap:var(--meec-sp-4);
	grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));
}
.meec-griglia--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
/* Niente card orfana (verifica dello staging del 30/09/2026, U3): con auto-fit
   tre card finivano 2+1 fra ~710 e ~1055px. Da 56rem (896px) restano su tre
   colonne, sotto vanno in colonna singola. */
@media (min-width:56rem) and (max-width:66rem){
	.meec-griglia--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:55.99rem){
	.meec-griglia--3{grid-template-columns:minmax(0,1fr)}
}

/* --- Barra del bando (Figma: fascia sotto l'intestazione della Home) ------ */
.meec-avviso-bando{
	background:var(--meec-avviso-sfondo);
	border-left:4px solid var(--meec-avviso);
	color:var(--meec-testo-primario);
}
.meec-avviso-bando__interno{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:var(--meec-sp-2) var(--meec-sp-4);
	padding-block:var(--meec-sp-4);
}
.meec-avviso-bando__messaggio{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--meec-sp-2) var(--meec-sp-4);
	margin:0;
}
.meec-avviso-bando__etichetta{
	display:inline-flex;align-items:center;gap:var(--meec-sp-4);
	font:600 var(--meec-corpo)/1.5 var(--meec-font-titoli);
	color:var(--meec-avviso);
	text-transform:uppercase;
}
.meec-avviso-bando__etichetta .meec-icona{width:1.5rem;height:1.5rem}

/* --- Briciole di pane (Figma: "Breadcrumbs" 1161:8886) ---------------------
   Fascia bianca alta 56: padding 16, testo sm 14/20 secondario, separatore a
   barra obliqua da 24 (icone/separatore.svg) con gap 4, pagina corrente in
   Text-accent. Su tutte le pagine tranne la Home (inc/testata-piede.php).
   L'elenco e' anche .meec-contenitore: il margine deve restare "auto" sui lati,
   altrimenti sopra i 1440 le briciole si incollano al bordo sinistro invece di
   allinearsi alla griglia del contenuto (segnalato da Zona-p il 28/09/2026). */
.meec-briciole{background:var(--meec-sup-sezione-bianca)}
.meec-briciole__elenco{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--meec-sp-1);
	margin-block:0;padding-block:var(--meec-sp-3);list-style:none;
	font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario);
}
.meec-briciole__voce{display:inline-flex;align-items:center;gap:var(--meec-sp-1);margin:0}
.meec-briciole__voce + .meec-briciole__voce::before{
	content:"";flex:none;width:1.5rem;height:1.5rem;background:currentColor;
	-webkit-mask:url("icone/separatore.svg") center/contain no-repeat;mask:url("icone/separatore.svg") center/contain no-repeat;
}
.meec-briciole a{color:inherit;text-decoration:none}
.meec-briciole a:hover{color:var(--meec-testo-accento);text-decoration:underline}
.meec-briciole [aria-current="page"]{color:var(--meec-testo-accento)}
@media (forced-colors:active){.meec-briciole__voce + .meec-briciole__voce::before{background:CanvasText}}

/* ==========================================================================
   2. Veste dei componenti dei plugin
   ========================================================================== */

.meec-dl-invia,
.meec-dl-card__azione,
.meec-ar-scarica,
.meec-ai-lancia{
	background:var(--meec-sup-bottone-primario);
	color:var(--meec-testo-invertito);
	border-radius:var(--meec-raggio-sm);
	font-weight:600;
}
.meec-dl-invia:hover,
.meec-dl-card__azione:hover,
.meec-ar-scarica:hover,
.meec-ai-lancia:hover{
	background:var(--meec-sup-bottone-primario-hover);
	color:var(--meec-testo-invertito);
}

.meec-dl-form,
.meec-dl-libero,
.meec-dl-card,
.meec-ar-risorsa,
.meec-ar-login{
	border-color:var(--meec-bordo-terziario);
	border-radius:var(--meec-raggio-l);
	box-shadow:var(--meec-ombra-sm);
}

/* Messaggi di stato: mai affidati al solo colore, serve anche il testo. */
.meec-dl-errore,.meec-ar-errore{color:var(--meec-errore)}
.meec-dl-ok,.meec-ar-ok{color:var(--meec-successo)}
.meec-dl-avviso,.meec-ar-avviso{color:var(--meec-avviso)}

/* Pulsante flottante «Preferenze cookie» del plugin elabografica-cookie-consent:
   stessa veste e misura del lanciatore «Assistente MEEC» (.meec-ai__lanciatore
   in meec-ai.css), specchiato a sinistra. Il plugin stampa sfondo e colore
   inline dal suo pannello, quindi qui servono gli !important per imporre i
   token del tema; per il resto basta il tag nel selettore, perche' il plugin
   stampa il suo <style> nel piede, dopo questo foglio. Il tema lo accende
   sempre (filtro option_elabografica_cc_settings in inc/testata-piede.php). */
button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left{
	left:max(16px,env(safe-area-inset-left));
	bottom:max(16px,env(safe-area-inset-bottom));
	z-index:9990; /* come l'assistente: sotto il banner dei cookie, sopra la testata sticky */
	gap:8px;
	min-height:48px;padding:12px 20px;
	border-radius:var(--meec-raggio-pillola,999px);
	background:var(--meec-sup-bottone-primario) !important;
	color:var(--meec-testo-invertito) !important;
	font:600 var(--meec-testo-sm,.875rem)/1.2 var(--meec-font-testo,Inter,system-ui,sans-serif);
	letter-spacing:0;
	box-shadow:var(--meec-ombra-xl);
}
button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left:hover{
	background:var(--meec-sup-bottone-primario-hover) !important;
	transform:none;
	box-shadow:var(--meec-ombra-xl);
}
button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left:focus-visible{
	outline:3px solid var(--meec-verde-scuro);outline-offset:3px;
}
button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left svg{width:20px;height:20px;max-width:none}
/* Sotto i 768px icona tonda da 48px, come l'assistente: la pillola copriva
   «Candidati ora» nell'hero (verifica dello staging del 30/09/2026). Il testo
   resta nel DOM per i lettori di schermo. */
@media (max-width:767px){
	button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left{
		width:48px;height:48px;min-height:0;padding:0;justify-content:center;border-radius:50%;
	}
	button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left svg{width:24px;height:24px}
	button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left span{
		position:absolute;width:1px;height:1px;padding:0;margin:-1px;
		overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
	}
}
@media (max-width:480px){
	button.elabografica-cc-fab.elabografica-cc-fab--pos-bottom-left{left:12px;bottom:12px}
}
@media (forced-colors:active){.elabografica-cc-fab{border:1px solid ButtonText}}
@media print{.elabografica-cc-fab{display:none}}

/* ==========================================================================
   3. Componenti del tema
   ========================================================================== */

/* (Il vecchio percorso di navigazione delle schede, .meec-percorso__elenco, e'
   stato tolto il 29/09/2026: le briciole sono quelle dell'intestazione,
   .meec-briciole. Il nome .meec-percorso oggi e' del componente a tappe.) */

/* --- Scheda docente ------------------------------------------------------- */
.meec-docente__intestazione{
	display:flex;flex-wrap:wrap;gap:var(--meec-sp-5);
	align-items:flex-start;margin-bottom:var(--meec-sp-5);
}
.meec-docente__ritratto{margin:0;flex:0 0 min(100%,18rem)}
.meec-docente__ritratto img{
	display:block;width:100%;height:auto;
	aspect-ratio:4/5;object-fit:cover;      /* stesso rapporto di 'meec-ritratto' (600x750):
	                                           ritratti quadrati o orizzontali non sfondano
	                                           la colonna ne' scompaginano le griglie */
	background:var(--meec-sup-sezione-grigia);
	border-radius:var(--meec-raggio-l);
}
.meec-docente__identita{flex:1 1 20rem}
.meec-docente__nome{margin:0 0 var(--meec-sp-2)}
.meec-docente__ruolo{
	margin:0;font-size:var(--meec-testo-lg);
	color:var(--meec-testo-secondario);
}

.meec-docente__moduli{margin-top:var(--meec-sp-7)}
.meec-docente__moduli h2{margin-top:0;margin-bottom:var(--meec-sp-4)}
.meec-docente__elenco-moduli{list-style:none;margin:0;padding:0;display:grid;gap:var(--meec-sp-3)}
.meec-docente__elenco-moduli a{
	display:block;padding:var(--meec-sp-3);
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-sm);
	color:var(--meec-testo-primario);text-decoration:none;
}
.meec-docente__elenco-moduli a:hover{background:var(--meec-sup-sezione-grigia);color:var(--meec-testo-accento)}
.meec-docente__numero{
	display:block;font-size:var(--meec-testo-sm);
	color:var(--meec-testo-secondario);
}
.meec-docente__ritorno{margin-top:var(--meec-sp-7)}

/* --- Scheda documento ----------------------------------------------------- */
.meec-documento__caratteristiche{
	display:grid;grid-template-columns:auto 1fr;gap:var(--meec-sp-2) var(--meec-sp-4);
	margin:var(--meec-sp-5) 0;padding:var(--meec-sp-4);
	background:var(--meec-sup-sezione-grigia);border-radius:var(--meec-raggio-sm);
	font-size:var(--meec-testo-sm);
}
.meec-documento__caratteristiche dt{color:var(--meec-testo-secondario);margin:0}
.meec-documento__caratteristiche dd{margin:0;font-weight:600}

/* --- Card docente --------------------------------------------------------- */
.meec-card-docente__ritratto img{
	display:block;width:100%;height:auto;
	aspect-ratio:4/5;object-fit:cover;
	background:var(--meec-sup-sezione-grigia);
	border-radius:var(--meec-raggio-l);margin-bottom:var(--meec-sp-3);
}
.meec-card-docente__nome{margin:0 0 var(--meec-sp-1);font-size:var(--meec-testo-xl)}
.meec-card-docente__nome a{color:var(--meec-testo-primario);text-decoration:none}
.meec-card-docente__nome a:hover{color:var(--meec-testo-accento);text-decoration:underline}
.meec-card-docente__ruolo{
	margin:0;font-size:var(--meec-testo-sm);
	color:var(--meec-testo-secondario);
}