/**
 * Events Calendar
 *
 * Month grid beside an agenda list. Stacks below 900px.
 *
 * @package revival
 */

 .events-calendar {
	display: grid;
	grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr);
	width: 100%;
	gap: var(--space-xl);
	align-items: start;
	margin-block: var(--space-l);
}

/* --- Month grid --- */

.events-calendar__grid-panel {
	padding: var(--space-m);
	border: 1px solid var(--card-border-color);
	border-radius: var(--card-radius);
	background: var(--card-surface);
}

.events-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	margin-block-end: var(--space-s);
}

.events-calendar__month {
	margin: 0;
	font-size: var(--card-title-size);
	font-weight: var(--card-title-weight);
	font-family: var(--text-font-family);
	color: var(--text-dark);
}

.events-calendar__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-circle);
	color: var(--neutral-semi-dark);
	text-decoration: none;
	transition: background var(--transition-duration) var(--transition-timing),
	            color var(--transition-duration) var(--transition-timing);
}

.events-calendar__nav-btn:hover {
	background: var(--neutral-ultra-light);
	color: var(--text-dark);
}

.events-calendar__nav-btn svg {
	fill: currentColor;
}

/* Six week rows always — some months need them, and a fixed count keeps
   the panel the same height as you page through. */
   /* Six week rows always — some months need them, and a fixed count keeps
   the panel the same height as you page through.
   Hairlines live on the cells; the container carries the top and left. */
.events-calendar__grid {
	--calendar-weekend-tint: var(--base-semi-dark);

	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: auto repeat(6, 52px);
	gap: 0;
	border-block-start: 1px solid var(--card-border-color);
	border-inline-start: 1px solid var(--card-border-color);
	border-radius: var(--radius-m);
	overflow: hidden;
}

.events-calendar__grid > * {
	border-inline-end: 1px solid var(--card-border-color);
	border-block-end: 1px solid var(--card-border-color);
}

/* Weekend columns — first and last of every seven children, which covers
   the header row too. */
.events-calendar__grid > *:nth-child(7n + 1),
.events-calendar__grid > *:nth-child(7n) {
	background: color-mix(
		in srgb,
		color-mix(in srgb, var(--calendar-weekend-tint) 55%, var(--neutral)) 6%,
		transparent
	);
}

.events-calendar__dow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: calc(var(--space-xs) * .7);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--neutral-semi-dark);
	background: color-mix(in srgb, var(--neutral-ultra-light) 25%, transparent);
}

/* Header cells keep their own fill, weekend or not. */
.events-calendar__grid > .events-calendar__dow:nth-child(7n + 1),
.events-calendar__grid > .events-calendar__dow:nth-child(7n) {
	background: color-mix(in srgb, var(--neutral-ultra-light) 25%, transparent);
}

.events-calendar__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: var(--text-m);
	color: var(--neutral-semi-dark);
	text-decoration: none;
}

/* Days from the neighbouring months stay visible but recede. */
.events-calendar__day--adjacent {
	color: var(--neutral-semi-light);
	opacity: .55;
}

.events-calendar__day.has-event {
	color: var(--text-dark);
	font-weight: 500;
}

.events-calendar__day.is-today .events-calendar__day-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-circle);
	background: var(--primary-semi-dark);
	color: var(--white);
	font-weight: 500;
}

.events-calendar__dots {
	display: flex;
	gap: 3px;
	line-height: 0;
}

.events-calendar__dot {
	width: 5px;
	height: 5px;
	border-radius: var(--radius-circle);
	background: var(--base-semi-dark);
}

/* --- Agenda list --- */

.events-calendar__agenda {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

/* Rule sits on top of each row, so removing it for the first item and for
   any item following a month pill needs no :has(). */
   .events-calendar__event {
	display: flex;
	align-items: flex-start;
	gap: var(--space-s);
	padding-block-start: var(--space-s);
	border-block-start: 1px solid var(--card-border-color);
	text-decoration: none;
	color: var(--text-dark);
	scroll-margin-block-start: var(--space-xl);
}

.events-calendar__event:first-child,
.events-calendar__month-sep + .events-calendar__event {
	border-block-start: none;
	padding-block-start: 0;
}

.events-calendar__event-date {
	flex: 0 0 auto;
	width: 46px;
	text-align: center;
	border: 1px solid var(--card-border-color);
	border-radius: var(--radius-m);
	overflow: hidden;
	line-height: 1.2;
}

.events-calendar__event-month {
	--calendar-weekend-tint: var(--base-semi-dark);
	display: block;
	padding-block: 3px;
	background: color-mix(
		in srgb,
		color-mix(in srgb, var(--calendar-weekend-tint) 55%, var(--neutral)) 6%,
		transparent
	);
	color: var(--neutral-semi-dark);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.events-calendar__event-day {
	display: block;
	padding-block: 4px;
	font-size: var(--text-m);
	font-weight: 500;
}

.events-calendar__event-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.events-calendar__event-title {
	font-size: var(--card-title-size);
	font-weight: var(--card-title-weight);
	line-height: var(--card-title-leading);
}

.events-calendar__event-meta {
	font-size: var(--card-meta-size);
	font-weight: var(--card-meta-weight);
	color: var(--neutral-semi-dark);
	line-height: 1.4;
}

/* --- Empty month --- */

.events-calendar__empty {
	padding-block: var(--space-m);
}

.events-calendar__empty-text {
	margin: 0 0 var(--space-xs);
	font-size: var(--card-meta-size);
	color: var(--neutral-semi-dark);
}

.events-calendar__empty-link {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--space-xs) * .7);
	font-size: var(--card-meta-size);
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
}

.events-calendar__empty-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.events-calendar__empty-link svg {
	fill: currentColor;
}

@media (max-width: 900px) {
	.events-calendar {
		grid-template-columns: 1fr;
		gap: var(--space-m);
	}
}

/* Title cluster — the month, and a way back when you've navigated away. */
.events-calendar__title {
	display: inline-flex;
	align-items: baseline;
	gap: calc(var(--space-xs) * .8);
	min-width: 0;
}

.events-calendar__year {
	color: var(--neutral-semi-light);
}

.events-calendar__today {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	line-height: 1.3;
	border-radius: var(--radius-circle);
	background: var(--primary-semi-light);
	color: var(--white);
	font-size: var(--text-s);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--transition-duration) var(--transition-timing);
}

.events-calendar__today:hover {
	background: color-mix(in srgb, var(--primary) 20%, transparent);
	color: var(--primary);
}

/* Month marker — a solid pill, sized to its label. */
.events-calendar__month-sep {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin-block: var(--space-xs);
	padding-inline: 14px;
	padding-block: 3px;
	border-radius: var(--radius-circle);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.4;
	background: color-mix(in srgb, var(--primary) 12%, transparent);
	color: var(--primary);
}