/* ==========================================================================
   events.css — Genva Craft

   Upcoming events with the date set large, so a stale one shows at a glance.
   An ended event carries events__item--past: grey, with the day struck.
   ========================================================================== */

.events__list > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.events__item {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.events__item:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.events__item > *,
.events__date > *,
.events__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.events__body > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.events .events__month {
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	line-height: 1.1;
	white-space: nowrap;
}

.events .events__day {
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.1;
	font-variant-numeric: lining-nums;
}

.events .events__name {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

.events .events__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.events .events__item--past .events__date,
.events .events__item--past .events__name {
	color: var(--wp--preset--color--secondary);
}

.events .events__item--past .events__day {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}