/* =========================================================================
   Blocchi delle pagine corso.

   Stesso impianto per tutti i corsi: cambiano solo --corso, --su-corso e
   --corso-tenue. Kids e Teens sono la STESSA pagina, non due che si somigliano.
   ========================================================================= */

/* --- apertura ------------------------------------------------------------- */

.apertura { padding-top: clamp(2.4rem, 6vw, 4rem); padding-bottom: 0; overflow: hidden; }

.apertura-in {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: end;
}

.apertura-testo { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

.apertura-titolo {
	margin: 0 0 var(--s4);
	color: inherit;
	font-size: var(--t-hero);
	letter-spacing: -0.04em;
	max-width: 14ch;
}

.apertura-guida {
	margin: 0 0 var(--s8);
	max-width: 32ch;
	font-size: var(--t-guida);
	font-weight: var(--peso-medio);
}

.apertura-azioni { margin: 0; }

/* Dentro la fascia del corso il bottone rosso spariva: su Online faceva
   1,11:1 col fondo e restava solo il testo bianco a galleggiare. Qui prende i
   due colori gia' validati della coppia corso/su-corso, quindi il contrasto e'
   garantito per costruzione (da 4,9 a 10,9:1). */
.fascia-corso .bottone-pieno {
	background: var(--su-corso);
	color: var(--corso);
}

.fascia-corso .bottone-pieno:hover {
	background: var(--navy);
	color: #fff;
}

/* Il papero poggia sul bordo basso della fascia, come sulla locandina: e'
   dentro la scena, non appoggiato sopra. */
.apertura-papero { align-self: end; }
.apertura-papero img { width: 100%; height: auto; display: block; }

@media (max-width: 60rem) {
	.apertura-in { grid-template-columns: 1fr; }
	.apertura-testo { padding-bottom: var(--s6); }
	.apertura-papero { max-width: 20rem; margin-inline: auto; }
}

/* --- tre motivi ------------------------------------------------------------ */

.motivi { padding-block: clamp(2rem, 4.5vw, 3rem); }

.motivi-in {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.2rem, 3vw, 2.6rem);
}

.motivo-segno {
	display: block;
	width: 1.6rem;
	height: 5px;
	margin-bottom: var(--s4);
	border-radius: 3px;
	background: var(--corso);
}

.motivo-titolo { margin: 0 0 var(--s2); font-size: var(--t-h4); color: #fff; }
.motivo-testo { margin: 0; font-size: var(--t-picc); line-height: 1.55; opacity: .78; }

@media (max-width: 55rem) { .motivi-in { grid-template-columns: 1fr; } }

/* --- scala Cambridge --------------------------------------------------------
   E' il blocco che nessun'altra scuola della zona puo' mostrare: dimostra a
   colpo d'occhio che i corsi non sono uno diverso dall'altro ma un percorso. */

.scala { padding-block: var(--fascia); }

/* Fuori dalle pagine corso --corso vale rosso, e la versione lavata usciva
   rosa: sulla copertina la scala non e' di UN corso, e' il percorso di tutti.
   Li' prende la carta calda del resto del sito. */
body:not(.ha-corso) .scala { background: var(--carta-calda); }
body:not(.ha-corso) .gradino { border-bottom-color: var(--navy); }

@media (max-width: 46rem) {
	body:not(.ha-corso) .gradino { border-bottom: 0; border-left-color: var(--navy); }
}
.scala-titolo { margin: 0 0 var(--s3); }
.scala-guida { max-width: 56ch; margin: 0 0 var(--s10); font-weight: var(--peso-medio); }

.scala-gradini {
	display: flex;
	align-items: flex-end;
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0 0 var(--s2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gradino {
	flex: 1 0 9.5rem;
	min-height: var(--altezza, 100px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.1rem;
	padding: var(--s4) var(--s4) var(--s5);
	background: var(--carta);
	border-radius: var(--raggio-g) var(--raggio-g) 0 0;
	border-bottom: 6px solid var(--corso);
	box-shadow: var(--ombra-1);
}

.gradino-livello {
	font-size: 1.5rem;
	font-weight: var(--peso-nero);
	letter-spacing: -0.03em;
	color: var(--navy);
	line-height: 1;
}

.gradino-nome { font-size: var(--t-picc); font-weight: var(--peso-forte); color: var(--inchiostro); }

.gradino-nota {
	/* Era 0.6875rem = 11px: una misura inventata, fuori dalla scala. Sotto i
	   12px si smette di leggere e si inizia a indovinare — ed e' esattamente
	   la lamentela della cliente. --t-mini e' il gradino piu' piccolo che la
	   scala prevede: 13px. */
	font-size: var(--t-mini);
	font-weight: var(--peso-forte);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grigio);
	line-height: 1.35;
}

/* La scala si raddrizza gia' sul tablet, non solo sul telefono: sulla
   copertina i gradini sono SETTE e a 150px l'uno fanno oltre 1000px. Sotto i
   992px finivano in uno scorrimento laterale che nasconde meta' del percorso —
   e il percorso e' proprio quello che il blocco deve far vedere. */
@media (max-width: 62rem) {
	.scala-gradini { flex-direction: column; align-items: stretch; gap: var(--s2); overflow: visible; }

	.gradino {
		flex: none;
		min-height: 0;
		flex-direction: row;
		align-items: baseline;
		flex-wrap: wrap;
		gap: var(--s2) var(--s3);
		border-radius: var(--raggio-g);
		border-bottom: 0;
		border-left: 6px solid var(--corso);
		padding: var(--s4);
	}

	.gradino-livello { font-size: 1.2rem; min-width: 2.6rem; }
	.gradino-nota { flex: 1 0 100%; }
}

/* --- domande ---------------------------------------------------------------- */

.domande { padding-block: var(--fascia); }
.domande-titolo { margin: 0 0 var(--s8); }
.domande-elenco { margin: 0; }

.domande-elenco dt {
	padding: var(--s5) 0 var(--s2);
	border-top: 1px solid var(--filo);
	font-size: var(--t-grande);
	font-weight: var(--peso-forte);
	color: var(--navy);
}

.domande-elenco dd {
	margin: 0 0 var(--s4);
	max-width: var(--misura);
	color: var(--inchiostro-2);
}

/* --- credenziali -------------------------------------------------------------
   Con i marchi veri invece delle sigle. I loghi hanno proporzioni molto
   diverse — Cambridge e' largo, Carta del Docente e' alto — quindi stanno
   dentro un riquadro di altezza fissa con `object-fit: contain`: si allineano
   otticamente senza deformarsi. */

.credenziali {
	padding-block: var(--fascia);
	background: var(--carta-calda);
	border-top: 4px solid var(--rosso);
}

.credenziali-titolo { margin: 0 0 var(--s12); max-width: 22ch; }

.credenziali-elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--s10) var(--s8);
	align-items: start;
}

.credenziale { display: flex; flex-direction: column; gap: var(--s3); }

.credenziale picture {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 4.5rem;
}

.credenziale img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.credenziale-sigla {
	font-size: var(--t-picc);
	font-weight: var(--peso-nero);
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--navy);
}

.credenziale-testo {
	font-size: var(--t-mini);
	line-height: 1.5;
	color: var(--grigio);
	max-width: 26ch;
}

/* --- chiamata all'azione ----------------------------------------------------- */

.chiamata { background: var(--rosso); color: #fff; padding-block: var(--fascia); }

.chiamata-in {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s6) var(--s10);
	align-items: center;
	justify-content: space-between;
}

.chiamata-titolo { margin: 0 0 var(--s2); color: #fff; font-size: var(--t-h2); }
.chiamata-testo { margin: 0; max-width: 44ch; opacity: .9; }

.chiamata-bottoni { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.chiamata .bottone-vuoto { color: #fff; }
.chiamata .bottone-vuoto:hover { background: #fff; color: var(--rosso-scuro); }

/* --- fascia titolo per le pagine senza corso ---------------------------------- */

/* Sulle pagine che non sono corsi la fascia e' navy: il rosso e' l'accento
   del marchio e le chiamate all'azione, non un fondo da mezzo schermo. */
.fascia-titolo-semplice,
.fascia-titolo-negozio { background: var(--navy); color: #fff; }

.fascia-titolo-semplice .titolo-pagina,
.fascia-titolo-negozio .titolo-pagina { color: #fff; }