/* ============================= */
/* CALENDAR BASE */
/* ============================= */

.topic-calendar .calendar {
	margin-top: 2rem;
}

/* ============================= */
/* TABS */
/* ============================= */

.topic-calendar .calendar-tabs {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.topic-calendar .calendar-tabs button {
	background: none;
	border: none;
	padding: 0.6rem 1rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.topic-calendar .calendar-tabs button:hover {
	opacity: 1;
}

.topic-calendar .calendar-tabs button.is-active {
	opacity: 1;
}

.topic-calendar .calendar-tabs button.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: currentColor;
}

/* ============================= */
/* PANELS */
/* ============================= */

.topic-calendar .calendar-panel {
	display: none;
	padding-top: 2rem;
}

.topic-calendar .calendar-panel.is-active {
	display: block;
}

/* ============================= */
/* PANEL HEADER */
/* ============================= */

.topic-calendar .calendar-panel-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.topic-calendar .calendar-panel-header h3 {
	margin: 0;
}

/* ============================= */
/* METRICS */
/* ============================= */

.topic-calendar .calendar-metrics {
	display: flex;
	gap: 1rem;
}

.topic-calendar .metric {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-weight: 600;
}

.topic-calendar .metric small {
	font-size: 0.8rem;
	opacity: 0.7;
}

/* ============================= */
/* MOBILE TWEAK */
/* ============================= */

@media (max-width: 768px) {

	.topic-calendar .calendar-panel-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

}