/*
 * Griglia settimanale delle classi.
 *
 * I colori arrivano dalle variabili del tema quando ci sono; i valori dopo
 * la virgola sono la riserva, così la griglia resta leggibile anche se
 * un domani il tema cambia.
 */

/* I giorni stanno su una riga sola, sempre.
   Con le colonne automatiche la settimana non può spezzarsi a metà: se lo
   spazio non basta si scorre di lato, che è comunque meglio di un calendario
   che va a capo dopo il mercoledì e sembra rotto. */
.atalis-settimana {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(170px, 1fr);
	gap: 1px;
	background: var(--wp--preset--color--bordo, #DED6C7);
	border: 1px solid var(--wp--preset--color--bordo, #DED6C7);
	border-radius: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.atalis-settimana__giorno {
	background: var(--wp--preset--color--bianco, #fff);
	padding: 1rem 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.atalis-settimana__nome {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde, #55581F);
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--wp--preset--color--crema-scuro, #EAE2D5);
}

.atalis-settimana__fasce {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.atalis-fascia {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: var(--wp--preset--color--crema, #F5F0E9);
	border-radius: 4px;
	padding: 0.7rem 0.8rem;
	border-left: 3px solid var(--wp--preset--color--arancione, #F27221);
}

.atalis-fascia__ora {
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--testo-tenue, #5B5648);
}

.atalis-fascia__titolo {
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
}

.atalis-fascia__titolo:hover,
.atalis-fascia__titolo:focus-visible {
	text-decoration: underline;
}

.atalis-fascia__insegnante {
	font-size: 0.875rem;
	color: var(--wp--preset--color--testo-tenue, #5B5648);
}

/* Da telefono la griglia diventa un elenco: i giorni uno sotto l'altro,
   che è come si legge un calendario sullo schermo stretto. Niente
   scorrimento laterale, che su un telefono nessuno si aspetta. */
@media (max-width: 760px) {
	.atalis-settimana {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow-x: visible;
	}
}