/* ============================================================
   Alma Formazione — adattamento agli schermi stretti

   I punti di rottura non sono nomi di dispositivi: sono le
   larghezze in cui una certa griglia smette di funzionare.
   ============================================================ */

/* --- sotto i 1200px: le griglie più fitte si spezzano --- */
@media (max-width: 1200px) {
	:root { --gutter: 32px; }

	.alma-profili { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.alma-aree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.alma-corsi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.alma-prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* La colonna del form scende sotto: a 380px fissi
	   strozzerebbe il testo accanto. */
	.alma-corso-testata__griglia,
	.alma-corso-corpo { grid-template-columns: 1fr; gap: 32px; }
	.alma-corso-main { max-width: none; }
	.alma-archivio { grid-template-columns: 220px 1fr; gap: 28px; }
	.alma-contatti-corpo { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
	.alma-mad { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
	.alma-articolo { grid-template-columns: minmax(0, 1fr) 270px; gap: 32px; }
}

/* --- sotto i 900px: si passa a colonna unica --- */
@media (max-width: 900px) {
	.alma-hero__interno { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 44px; }
	.alma-hero__testo h1 { font-size: 42px; }
	.alma-hero__lead { font-size: 18px; max-width: none; }
	/* Senza la colonna destra la sfumatura orizzontale non serve
	   più: il testo ora sta sopra tutta l'immagine. */
	.alma-hero__velo {
		background: linear-gradient(180deg,
			rgba(27, 33, 80, 0.82) 0%,
			rgba(27, 33, 80, 0.88) 100%);
	}

	.alma-perche,
	.alma-chisiamo { grid-template-columns: 1fr; gap: 36px; }
	.alma-vantaggi { grid-template-columns: 1fr; gap: 18px; }
	.alma-testata-sezione h2 { font-size: 30px; }
	.alma-sezione { padding-top: 44px; padding-bottom: 44px; }

	.alma-piede__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

	/* I filtri diventano un pannello richiudibile: occuperebbero
	   metà schermata prima di arrivare ai risultati. */
	.alma-archivio { grid-template-columns: 1fr; gap: 24px; }
	/* Il modulo sopra, i riquadri sotto: chi e' arrivato qui vuole
	   scrivere, non leggere l'indirizzo. */
	.alma-contatti-corpo { grid-template-columns: 1fr; gap: 26px; }
	/* Il modulo sale sopra il testo: chi arriva da un annuncio
	   vuole attivare il servizio, non rileggere cos'e'. */
	.alma-mad { grid-template-columns: 1fr; gap: 30px; }
	.alma-mad__lato { order: -1; }

	/* L'indice va sopra il testo e smette di seguire lo scorrimento:
	   in colonna unica un riquadro appiccicato coprirebbe meta'
	   schermo mentre si legge. */
	.alma-articolo { grid-template-columns: 1fr; gap: 30px; }
	.alma-indice { position: static; max-height: none; }
	.alma-articolo__lato { order: -1; }
	.alma-articolo__titolo { max-width: none; font-size: 32px; }
	.alma-vie { grid-template-columns: 1fr; gap: 12px; }
	/* In riga il riquadro resta basso e si tocca facile. */
	.alma-via { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
	.alma-via__nota { margin-top: 0; padding-top: 0; margin-left: auto; text-align: right; }
	.alma-filtri { gap: 18px; }
	.alma-filtri[hidden] { display: none; }
	.alma-apri-filtri { display: inline-flex; }
}

/* --- sotto i 700px: telefono --- */
@media (max-width: 700px) {
	/* Le misure dei loghi arrivano dal pannello in un <style> alla
	   fine dell'head, quindi dopo questo foglio: senza :root:root
	   quella del pannello vincerebbe e il logo resterebbe grande
	   anche sul telefono. */
	:root { --gutter: 20px; }
	:root:root { --logo-testata: 34px; }

	.alma-profili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.alma-profilo img { height: 200px; }
	.alma-aree,
	.alma-corsi-griglia,
	.alma-prodotti { grid-template-columns: 1fr; }
	.alma-corso-dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* I marchi restano affiancati, ma su tre colonne da ~110px
	   vanno rimpiccioliti o sfondano la cella. */
	.alma-atenei__griglia,
	.alma-conteggi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Sotto i 700px la nota a destra non ci sta accanto al testo. */
	.alma-via { flex-wrap: wrap; }
	/* Su 390px due colonne lascerebbero righe di tre parole. */
	.alma-destinatari,
	.alma-tagli { grid-template-columns: 1fr; }
	.alma-passi li { padding-left: 46px; }
	.alma-articolo__titolo { font-size: 27px; }
	.alma-articolo__figura img { max-height: 240px; }
	.alma-via__nota { width: 100%; margin-left: 0; text-align: left; padding-left: 56px; }
	.alma-ateneo { padding: 16px 10px; min-height: 84px; }
	.alma-ateneo--pegaso img { width: 88px; }
	.alma-ateneo--mercatorum img { width: 104px; }
	.alma-ateneo--sanraffaele img { width: 108px; }

	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	.alma-hero__testo h1 { font-size: 34px; }
	.alma-corso-testata h1 { font-size: 30px; }
	.alma-testata-sezione h2 { font-size: 26px; }
	.alma-chiusura h2 { font-size: 23px; }

	.alma-form-box { padding: 22px; }
	.alma-campi__coppia { grid-template-columns: 1fr; }

	.alma-servizio__interno { justify-content: center; text-align: center; font-size: 12px; }
	.alma-servizio__destra { display: none; }

	.alma-attribuzione { flex-direction: column; align-items: flex-start; gap: 10px; }
	.alma-rilascio__riga { flex-direction: column; align-items: flex-start; gap: 14px; }
	.alma-rilascio { padding: 18px 20px; }

	.alma-piede__griglia { grid-template-columns: 1fr; gap: 24px; }
	.alma-piede__legale { flex-direction: column; align-items: flex-start; }

	.alma-chiusura { flex-direction: column; align-items: flex-start; }
	.alma-chiusura .alma-bottone { width: 100%; }
}

/* --- sotto i 420px: schermi molto stretti --- */
@media (max-width: 420px) {
	/* Il logo e' largo 2.6 volte la sua altezza: accanto
	   all'etichetta, al carrello e al menu lo spazio finisce e
	   il logo si schiaccia. L'etichetta esce di scena, il nome
	   dell'ateneo resta leggibile nel logo stesso. */
	.alma-marchio__riga,
	.alma-marchio__etichetta { display: none; }
	.alma-marchio { gap: 0; }

	.alma-profili { grid-template-columns: 1fr; }
	.alma-corso-dati { grid-template-columns: 1fr; }
	.alma-atenei__griglia,
	.alma-conteggi { grid-template-columns: 1fr; }
	.alma-hero__prove { flex-direction: column; gap: 6px; }
}

/* --- stampa: via tutto ciò che non è contenuto --- */
@media print {
	.alma-servizio,
	.alma-azioni,
	.alma-panino,
	.alma-form-box,
	.alma-azione-box,
	.alma-filtri,
	.alma-piede__legale { display: none; }

	body { font-size: 11pt; }
	.alma-hero__velo, .alma-hero__sfondo { display: none; }
	.alma-hero__testo h1, .alma-hero__lead { color: #000; }
	a { color: #000; }
	.alma-corso-corpo, .alma-corso-testata__griglia { grid-template-columns: 1fr; }
}

/* --- tabelle e prodotti su schermo stretto --- */
@media (max-width: 700px) {
	/* Il contenitore scorrevole delimita la tabella, ma le celle
	   con il padding pieno la spingono comunque oltre: su schermo
	   stretto lo riduciamo e lasciamo scorrere il resto. */
	.alma-tabella-scorrevole { max-width: 100%; -webkit-overflow-scrolling: touch; }
	.alma-contenuto table { min-width: 0; font-size: 14.5px; }
	.alma-contenuto th,
	.alma-contenuto td { padding: 8px 9px; }

	/* Le card prodotto in colonna singola: prezzo e bottone su
	   una riga sola, senza schiacciarsi a vicenda. */
	.alma-prodotto__piede { flex-wrap: wrap; gap: 10px; }
	.alma-prezzo { font-size: 21px; }
	.alma-prodotto__figura img { aspect-ratio: 4 / 3; }
}