/* =========================================================================
   Copertina.
   ========================================================================= */

/* --- il carosello ------------------------------------------------------------
   Quattro immagini su un giro di 24 secondi, sei ciascuna, con 0,9 s di
   sovrapposizione. Nessun JavaScript: sono fotogrammi chiave.

   I conti: 6s su 24s sono il 25% del giro; 0,9s sono il 3,75%. Quindi ogni
   slide sale da 0 a 1 fra 0 e 3,75%, resta piena fino al 25%, e scende entro
   il 28,75%. C'e' sempre almeno una slide visibile: nessun fotogramma vuoto.
   (A meta' dissolvenza due livelli a 0,5 lasciano trasparire un quarto del
   fondo rosso: si nota appena e il fondo e' comunque quello della campagna.)

   Il ritardo negativo della prima serve a partire con l'immagine gia' in
   pagina invece che su un fondo rosso.
   ========================================================================= */

.copertina {
	position: relative;
	background: var(--rosso);
	overflow: hidden;
}

.copertina-pista {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	aspect-ratio: 1920 / 900;
}

.copertina-pista > li {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* Durata e ritardo arrivano da PHP (bsc_copertina_tempi), che li calcola sul
	   numero di slide. I valori di ripiego valgono per quattro slide: se il CSS
	   in linea non arrivasse, il carosello girerebbe comunque bene. */
	animation: bsc-copertina var(--giro, 24s) linear infinite;
	animation-delay: calc(var(--slide, 0) * var(--durata, 6s) - 0.9s);
}

.copertina-pista img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ripiego per quattro slide: 0,9s/24s = 3,75%, 6s/24s = 25%, 6,9s/24s = 28,75%.
   PHP riscrive questi stessi fotogrammi quando le slide non sono quattro. */
@keyframes bsc-copertina {
	0%      { opacity: 0; }
	3.75%   { opacity: 1; }
	25%     { opacity: 1; }
	28.75%  { opacity: 0; }
	100%    { opacity: 0; }
}

.copertina-comandi {
	position: absolute;
	left: 50%;
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--s4);
	z-index: 2;
}

.copertina-punti { display: flex; gap: var(--s2); }

.copertina-punti i {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--raggio-pil);
	background: rgba(255, 255, 255, .45);
	animation: bsc-punto var(--giro, 24s) linear infinite;
	animation-delay: calc(var(--slide, 0) * var(--durata, 6s) - 0.9s);
}

@keyframes bsc-punto {
	0%, 28.75%, 100% { background: rgba(255, 255, 255, .45); width: 0.5rem; }
	3.75%, 25%       { background: #fff; width: 1.5rem; }
}

/* --- il comando di pausa ------------------------------------------------------ */

.copertina-pausa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: var(--raggio-pil);
	background: rgba(0, 0, 0, .38);
	color: #fff;
	cursor: pointer;
	transition: background var(--transizione);
}

.copertina-pausa:hover { background: rgba(0, 0, 0, .62); }
.copertina-pausa:focus-visible { outline-color: #fff; }

.copertina-pausa-segno {
	width: 0.85rem;
	height: 0.85rem;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>') center / contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>') center / contain no-repeat;
}

/* Premuto: il simbolo diventa «riprendi». */
.copertina-pausa[aria-pressed="true"] .copertina-pausa-segno {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 4l13 8-13 8Z"/></svg>') center / contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 4l13 8-13 8Z"/></svg>') center / contain no-repeat;
}

/* Fermo: l'animazione si mette in pausa dov'e', non riparte da capo. */
.copertina-ferma .copertina-pista > li,
.copertina-ferma .copertina-punti i { animation-play-state: paused; }

/* Chi ha chiesto meno movimento vede la prima immagine, ferma. */
@media (prefers-reduced-motion: reduce) {
	.copertina-pista > li,
	.copertina-punti i { animation: none; }
	.copertina-pista > li:first-child { opacity: 1; }
	.copertina-punti i:first-child { background: #fff; width: 1.5rem; }
	.copertina-pausa { display: none; }
}

@media (max-width: 46rem) {
	.copertina-pista { aspect-ratio: 1 / 1; }
}

/* --- le sei porte d'ingresso -------------------------------------------------
   Ogni scheda porta il colore del suo corso: il colore non decora, dice dove
   stai andando. Il token --corso arriva dalla classe della scheda, la stessa
   che usano le pagine — nessuna regola duplicata per corso.
   ========================================================================= */

.corsi-titolo { margin: 0 0 var(--s10); max-width: 20ch; }

.corsi-griglia {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--s5);
}

.corso-scheda {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	height: 100%;
	padding: var(--s6) var(--s6) var(--s8);
	background: var(--corso);
	color: var(--su-corso);
	border-radius: var(--raggio-g);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform var(--transizione), box-shadow var(--transizione);
}

.corso-scheda:hover,
.corso-scheda:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--ombra-2);
	color: var(--su-corso);
}

/* Niente opacita' sul testo: su Online scendeva a 2,95:1 e su Adults a 3,37.
   Il distacco si ottiene con la dimensione e il peso, non sbiadendo. */
.corso-eta {
	font-size: var(--occhiello);
	font-weight: var(--peso-nero);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.corso-nome {
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	font-weight: var(--peso-nero);
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.corso-testo {
	font-size: var(--t-picc);
	line-height: 1.5;
	margin-top: var(--s1);
}

/* La freccia si sposta al passaggio: dice «si va di la'» senza scriverlo. */
.corso-freccia {
	margin-top: auto;
	padding-top: var(--s5);
	width: 1.6rem;
	height: 1.6rem;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') left bottom / 1.6rem 1.6rem no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') left bottom / 1.6rem 1.6rem no-repeat;
	transition: transform var(--transizione);
}

.corso-scheda:hover .corso-freccia { transform: translateX(4px); }

/* Nota: la fascia col titolo sulla copertina non si nasconde da qui — non
   viene proprio stampata, se ne occupa bsc_blocco_titolo_semplice(). */

/* --- punti di forza -----------------------------------------------------------
   Erano sei paragrafi di fila: un muro proprio dove chi guarda decide se
   restare. Sono un elenco, e come elenco si leggono in un colpo d'occhio.
   Niente numeri: fra «insegnanti qualificati» e «classi ridotte» non c'e' un
   ordine, e numerarli sarebbe decorazione travestita da informazione. */

.griglia-punti {
	list-style: none;
	margin: var(--s8) 0 var(--s10);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--s8) var(--s10);
}

.griglia-punti > li {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding-top: var(--s5);
	border-top: 4px solid var(--corso);
	max-width: none;
}

.griglia-punti b {
	font-size: var(--t-h4);
	font-weight: var(--peso-nero);
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--navy);
}

.griglia-punti span { font-size: var(--t-picc); line-height: 1.55; color: var(--inchiostro-2); }

/* Il colore delle sei linee segue quello dei sei corsi: la stessa scala di
   colori che il visitatore ha appena visto nelle schede sopra. */
.griglia-punti > li:nth-child(1) { border-top-color: var(--kids); }
.griglia-punti > li:nth-child(2) { border-top-color: var(--teens); }
.griglia-punti > li:nth-child(3) { border-top-color: var(--adults); }
.griglia-punti > li:nth-child(4) { border-top-color: var(--uno-a-uno); }
.griglia-punti > li:nth-child(5) { border-top-color: var(--certificazioni); }
.griglia-punti > li:nth-child(6) { border-top-color: var(--online); }

/* --- il saluto delle direttrici ------------------------------------------------
   Due righe firmate: e' la sola voce umana della pagina e merita di staccarsi
   dal resto invece di sparire in un paragrafo. */

.saluto {
	margin: var(--s12) 0;
	padding: var(--s8) var(--s10);
	background: var(--carta-calda);
	border-left: 5px solid var(--rosso);
	border-radius: var(--raggio-g);
	max-width: 46rem;
}

.saluto p {
	margin: 0;
	font-size: var(--t-guida);
	font-weight: var(--peso-forte);
	line-height: 1.4;
	color: var(--navy);
	max-width: none;
}

.saluto footer {
	margin-top: var(--s5);
	font-size: var(--t-picc);
	line-height: 1.6;
	color: var(--grigio);
}

.saluto footer i { font-style: normal; }

/* --- nota in coda --------------------------------------------------------------
   Accreditamenti e numeri di certificato: informazione vera ma da consultare,
   non da leggere. Piu' piccola e piu' calma del resto. */

.nota-fine {
	margin-top: var(--s8);
	padding-top: var(--s5);
	border-top: 1px solid var(--filo);
	font-size: var(--t-mini);
	line-height: 1.6;
	color: var(--grigio);
	max-width: 72ch !important;
}