/**
 * Griglia orari — front-end.
 *
 * I colori sono variabili CSS: per adattarli al tema basta ridefinirle
 * su .jaya-orari nel foglio di stile del tema, senza toccare il plugin.
 *
 * @package Jaya_Orari
 */

.jaya-orari {
	--jaya-orari-red: #a32316;
	--jaya-orari-card: #ffffff;
	--jaya-orari-ink: #262b3c;
	--jaya-orari-muted: #6b7280;
	--jaya-orari-dashed: #d9d5e0;
	--jaya-orari-radius: 18px;
	--jaya-orari-gap: 14px;
	--jaya-orari-cols: 6;

	box-sizing: border-box;
	margin: 0 0 32px;
	font-family: inherit;
}

.jaya-orari *,
.jaya-orari *::before,
.jaya-orari *::after {
	box-sizing: inherit;
}

.jaya-orari__title {
	margin: 0 0 18px;
	color: var( --jaya-orari-ink );
	font-size: clamp( 22px, 3vw, 28px );
	line-height: 1.2;
}

/* Griglia */

.jaya-orari__grid {
	display: grid;
	grid-template-columns: repeat( var( --jaya-orari-cols ), minmax( 0, 1fr ) );
	gap: var( --jaya-orari-gap );
	align-items: stretch;
}

.jaya-orari__head {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 10px;
	border-radius: 999px;
	background: var( --jaya-orari-red );
	color: #fff;
	font-size: clamp( 12px, 1.1vw, 15px );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.jaya-orari__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 22px 14px;
	border-radius: var( --jaya-orari-radius );
	background: var( --jaya-orari-card );
	box-shadow: 0 1px 2px rgba( 38, 43, 60, 0.05 );
	text-align: center;
}

.jaya-orari__cell--empty {
	border: 2px dashed var( --jaya-orari-dashed );
	background: transparent;
	box-shadow: none;
}

.jaya-orari__time {
	margin: 0;
	color: var( --jaya-orari-red );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.jaya-orari__name {
	margin: 2px 0 0;
	color: var( --jaya-orari-ink );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.jaya-orari__level {
	margin: 0;
	color: var( --jaya-orari-muted );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
}

.jaya-orari__teacher {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	padding: 6px 15px;
	border-radius: 999px;
	background: var( --jaya-orari-badge, #ece9f2 );
	color: var( --jaya-orari-badge-text, #333 );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.jaya-orari__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* Tab e messaggi: solo su mobile */

.jaya-orari__tabs,
.jaya-orari__none {
	display: none;
}

.jaya-orari-notice {
	padding: 12px 16px;
	border-left: 4px solid #a32316;
	background: #fdf3f2;
	color: #6b2119;
	font-size: 14px;
}

/* Tablet: colonne un po' più strette */

@media ( max-width: 1100px ) {
	.jaya-orari {
		--jaya-orari-gap: 10px;
		--jaya-orari-radius: 14px;
	}

	.jaya-orari__cell {
		padding: 18px 10px;
	}

	.jaya-orari__name {
		font-size: 16px;
	}

	.jaya-orari__time,
	.jaya-orari__level,
	.jaya-orari__teacher {
		font-size: 13px;
	}
}

/* Mobile: una colonna sola, con le tab dei giorni */

@media ( max-width: 860px ) {
	.jaya-orari__tabs {
		display: flex;
		gap: 6px;
		margin: 0 0 16px;
		padding-bottom: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.jaya-orari__tabs::-webkit-scrollbar {
		display: none;
	}

	.jaya-orari__tab {
		/* Si restringono per far stare tutti i giorni nello schermo:
		   una tab fuori campo è una tab che nessuno trova. */
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 10px 4px;
		border: 1px solid var( --jaya-orari-dashed );
		border-radius: 999px;
		background: transparent;
		color: var( --jaya-orari-ink );
		font-family: inherit;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.jaya-orari__tab[aria-selected="true"] {
		border-color: var( --jaya-orari-red );
		background: var( --jaya-orari-red );
		color: #fff;
	}

	.jaya-orari__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.jaya-orari__head,
	.jaya-orari__cell,
	.jaya-orari__cell--empty {
		display: none;
	}

	.jaya-orari__cell {
		padding: 20px 16px;
	}

	.jaya-orari__name {
		font-size: 18px;
	}

	.jaya-orari__time,
	.jaya-orari__level,
	.jaya-orari__teacher {
		font-size: 14px;
	}

	.jaya-orari[data-active="lun"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="lun"],
	.jaya-orari[data-active="mar"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="mar"],
	.jaya-orari[data-active="mer"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="mer"],
	.jaya-orari[data-active="gio"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="gio"],
	.jaya-orari[data-active="ven"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="ven"],
	.jaya-orari[data-active="sab"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="sab"],
	.jaya-orari[data-active="dom"] .jaya-orari__cell:not( .jaya-orari__cell--empty )[data-day="dom"] {
		display: flex;
	}

	.jaya-orari[data-active="lun"] .jaya-orari__none[data-day="lun"],
	.jaya-orari[data-active="mar"] .jaya-orari__none[data-day="mar"],
	.jaya-orari[data-active="mer"] .jaya-orari__none[data-day="mer"],
	.jaya-orari[data-active="gio"] .jaya-orari__none[data-day="gio"],
	.jaya-orari[data-active="ven"] .jaya-orari__none[data-day="ven"],
	.jaya-orari[data-active="sab"] .jaya-orari__none[data-day="sab"],
	.jaya-orari[data-active="dom"] .jaya-orari__none[data-day="dom"] {
		display: block;
		margin: 0;
		padding: 26px 16px;
		border: 2px dashed var( --jaya-orari-dashed );
		border-radius: var( --jaya-orari-radius );
		color: var( --jaya-orari-muted );
		font-size: 14px;
		text-align: center;
	}
}

/* Stampa: torna sempre alla griglia completa */

@media print {
	.jaya-orari__tabs,
	.jaya-orari__none {
		display: none !important;
	}

	.jaya-orari__grid {
		grid-template-columns: repeat( var( --jaya-orari-cols ), minmax( 0, 1fr ) );
	}

	.jaya-orari__head,
	.jaya-orari__cell {
		display: flex !important;
	}
}