/*
 * Calendar archive (THM8). Only --occ-* tokens. Event rows reuse .occ-home-event* from pages.css;
 * this adds the type tabs, the month groups (4/8, sticky label from 52rem = the DS grid collapse) and the filter line.
 */

@layer occ.components {
	/* Type tabs: a row of links (not an ARIA tablist: each tab is its own URL). Wraps instead of scrolling so focus rings are never clipped. */
	.occ-cal__tabs {
		margin-block-end: var(--occ-space-12);
		border-bottom: var(--occ-border-width) solid var(--occ-border-strong);
	}

	.occ-cal__tablist {
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--occ-space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.occ-cal__tab {
		display: flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		padding-block: var(--occ-space-2);
		border-bottom: 2px solid transparent;
		margin-block-end: calc(-1 * var(--occ-border-width));
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
	}

	.occ-cal__tab:hover {
		color: var(--occ-fg);
	}

	.occ-cal__tab[aria-current="page"] {
		border-bottom-color: var(--occ-accent-ink);
		color: var(--occ-fg);
	}

	.occ-cal__eyebrow {
		margin: 0;
		color: var(--occ-accent-ink);
	}

	.occ-cal__filter {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-3);
		margin: calc(-1 * var(--occ-space-6)) 0 var(--occ-space-8);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.occ-cal__filter a {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		color: var(--occ-fg);
	}

	/* Month groups */
	.occ-cal__group {
		row-gap: var(--occ-space-4);
		align-items: start;
	}

	.occ-cal__group + .occ-cal__group {
		margin-block-start: var(--occ-space-12);
	}

	.occ-cal__group > * {
		min-width: 0;
	}

	.occ-cal__month {
		margin: 0;
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: 1.15;
	}

	.occ-cal__month::first-letter {
		text-transform: uppercase; /* nl month names are lower case ("september 2026"). */
	}

	.occ-cal__tags {
		margin: 0;
		gap: var(--occ-space-2);
	}

	/* The badge sits above the stretched title link; keep it from eating the row click. */
	.occ-cal__tags .occ-badge {
		pointer-events: none;
	}

	.occ-cal__empty {
		max-width: var(--occ-container-sm);
	}

	@media (min-width: 52.0625rem) {
		.occ-cal__month {
			position: sticky;
			top: var(--occ-space-24);
			padding-block-start: var(--occ-space-8);
			font-size: var(--occ-text-3xl);
		}

		.occ-cal__group + .occ-cal__group {
			margin-block-start: var(--occ-space-16);
		}
	}
}