/* Frontend weekly timetable */

.cc-calendar {
	--cc-bg: #0b0b0b;
	--cc-bg-alt: #111;
	--cc-border: #2a2a2a;
	--cc-text: #f5f5f5;
	--cc-muted: #9a9a9a;
	--cc-accent: #ffffff;
	--cc-filter-text: var(--cc-muted);
	--cc-filter-bg-normal: transparent;
	--cc-filter-text-hover: var(--cc-accent);
	--cc-filter-bg-hover: transparent;
	--cc-filter-text-active: var(--cc-accent);
	--cc-filter-bg-active: transparent;
	--cc-row-h: 4.25rem;
	--cc-head-h: 3rem;
	--cc-time-w: 7.5rem;
	color: var(--cc-text);
	background: var(--cc-bg);
	font-family: inherit;
}

.cc-filters {
	border-bottom: 1px solid var(--cc-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	justify-content: center;
	padding: 0.75rem 1rem;
}

.cc-filters__btn {
	appearance: none;
	background: var(--cc-filter-bg-normal);
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--cc-filter-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	padding: 0.5rem 0.6rem;
	text-transform: uppercase;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.cc-filters__btn:hover,
.cc-filters__btn:focus-visible {
	background: var(--cc-filter-bg-hover);
	border-bottom-color: var(--cc-filter-text-hover);
	color: var(--cc-filter-text-hover);
	outline: none;
}

.cc-filters__btn.is-active,
.cc-filters__btn.is-active:hover,
.cc-filters__btn.is-active:focus-visible {
	background: var(--cc-filter-bg-active);
	border-bottom-color: var(--cc-filter-text-active);
	color: var(--cc-filter-text-active);
}

.cc-grid-wrap {
	overflow-x: auto;
}

.cc-grid {
	display: grid;
	grid-template-columns: var(--cc-time-w) minmax(48rem, 1fr);
	min-width: 56rem;
}

.cc-times__corner {
	height: var(--cc-head-h);
	border-bottom: 1px solid var(--cc-border);
	border-right: 1px solid var(--cc-border);
}

.cc-time[hidden],
.cc-day__slot-line[hidden] {
	display: none !important;
}

.cc-time {
	align-items: center;
	border-bottom: 1px solid var(--cc-border);
	border-right: 1px solid var(--cc-border);
	color: var(--cc-muted);
	display: flex;
	font-size: 0.7rem;
	height: var(--cc-row-h);
	justify-content: center;
	letter-spacing: 0.04em;
	padding: 0 0.4rem;
	text-transform: uppercase;
}

.cc-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cc-day {
	border-right: 1px solid var(--cc-border);
	min-width: 0;
}

.cc-day:last-child {
	border-right: 0;
}

.cc-day__head {
	align-items: center;
	border-bottom: 1px solid var(--cc-border);
	color: var(--cc-muted);
	display: flex;
	font-size: 0.7rem;
	height: var(--cc-head-h);
	justify-content: center;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cc-day__body {
	height: calc(var(--cc-hours) * var(--cc-row-h));
	position: relative;
}

.cc-day__slot-line {
	border-bottom: 1px solid var(--cc-border);
	height: var(--cc-row-h);
}

.cc-slot {
	background: var(--cc-bg-alt);
	box-sizing: border-box;
	cursor: default;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 0.35rem 0.45rem;
	position: absolute;
	text-align: center;
	z-index: 1;
	border: 1px solid var(--cc-border);
}

.cc-slot[hidden] {
	display: none !important;
}

.cc-slot__title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cc-slot__meta {
	color: var(--cc-muted);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	margin-top: 0.2rem;
	text-transform: uppercase;
}

.cc-slot__tipologia {
	background: var(--cc-bg-alt);
	border: 1px solid var(--cc-border);
	bottom: 100%;
	color: var(--cc-text);
	font-size: 0.7rem;
	left: 50%;
	letter-spacing: 0.08em;
	margin-bottom: 0.35rem;
	opacity: 0;
	padding: 0.25rem 0.5rem;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
	transform: translateX(-50%);
	transition: opacity 0.15s ease;
	white-space: nowrap;
	z-index: 3;
}

.cc-slot:hover .cc-slot__tipologia,
.cc-slot:focus-visible .cc-slot__tipologia {
	opacity: 1;
}

.cc-slot:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: -2px;
}

.cc-list {
	display: none;
}

.cc-list__day {
	padding: 0 1.25rem 1.5rem;
}

.cc-list__day[hidden] {
	display: none !important;
}

.cc-list__heading {
	color: var(--cc-text);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin: 1.5rem 0 0.75rem;
	text-align: center;
	text-transform: uppercase;
}

.cc-list__slot {
	align-items: baseline;
	border-bottom: 1px solid var(--cc-text);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.95rem 0;
}

.cc-list__slot[hidden] {
	display: none !important;
}

.cc-list__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.cc-list__title {
	color: var(--cc-text);
	font-size: 0.95rem;
	line-height: 1.3;
}

.cc-list__meta {
	color: var(--cc-muted);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cc-list__time {
	color: var(--cc-text);
	flex-shrink: 0;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.cc-grid-wrap {
		display: none;
	}

	.cc-list {
		display: block;
		padding-bottom: 1rem;
	}

	.cc-filters {
		border-bottom: 0;
		gap: 0.85rem 1.35rem;
		padding: 1rem 1.25rem 0.5rem;
	}
}