/**
 * TM Event Calendar - structural layout (CSS Grid).
 *
 * Depends on design-system.css and variables.css for design tokens.
 * Selector names are unchanged from the previous layout so existing JS
 * (assets/js/modules/*.js) keeps working without modification.
 */

.tmec-calendar {
	--tmec-grid-columns: 7;

	box-sizing: border-box;
	max-width: 1200px;
	margin: var(--tec-space-6) auto;
	font-family: var(--tec-font-family);
	color: var(--tec-text);
	position: relative;
}

.tmec-calendar *,
.tmec-calendar *::before,
.tmec-calendar *::after {
	box-sizing: inherit;
}

.tmec-calendar__months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--tec-space-6);
	align-items: stretch;
}

.tmec-calendar__month {
	display: flex;
	flex-direction: column;
	background: var(--tec-bg);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius-xl);
	box-shadow: var(--tec-shadow-sm);
	padding: var(--tec-space-6);
	margin-bottom: 0;
	transition: box-shadow var(--tec-transition-base);
}

.tmec-calendar__month:hover {
	box-shadow: var(--tec-shadow-md);
}

.tmec-calendar__grid {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.tmec-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(var(--tmec-grid-columns), minmax(0, 1fr));
	flex: 0 0 auto;
}

.tmec-calendar__days {
	display: grid;
	grid-template-columns: repeat(var(--tmec-grid-columns), minmax(0, 1fr));
	grid-auto-rows: 1fr;
	flex: 1;
	min-height: calc(var(--tmec-day-min-height) * 5);
	gap: 1px;
	background: var(--tec-border);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius-md);
	overflow: hidden;
}

/* Wide desktop viewports: give multi-month views room to breathe. */
@media (min-width: 1300px) {
	.tmec-calendar[data-months="2"],
	.tmec-calendar[data-months="3"] {
		max-width: 1600px;
	}
}

/* Tablet: months stack in a single column, so natural per-month sizing
   reads better than forcing every card to the same stretched height. */
@media (max-width: 900px) {
	.tmec-calendar__month {
		padding: var(--tec-space-4);
	}

	.tmec-calendar__months {
		grid-template-columns: 1fr;
		gap: var(--tec-space-5);
	}

	.tmec-calendar__days {
		grid-auto-rows: minmax(var(--tmec-day-min-height-tablet), auto);
		min-height: 0;
	}
}

/* Mobile */
@media (max-width: 600px) {
	.tmec-calendar {
		margin: var(--tec-space-4) auto;
	}

	.tmec-calendar__month {
		padding: var(--tec-space-3);
		border-radius: var(--tec-radius-lg);
	}

	.tmec-calendar__days {
		grid-auto-rows: minmax(var(--tmec-day-min-height-mobile), auto);
		min-height: 0;
	}
}