/**
 * Upcoming events list.
 *
 * Two themes. The dark one matches the band on the homepage, the light one is
 * for the calendar page on a cream background. Everything is driven by custom
 * properties, so a theme can retune it without overriding rules.
 */

.snof-events {
	--snof-ev-text: #ffffff;
	--snof-ev-muted: rgba(255, 255, 255, 0.68);
	--snof-ev-rule: rgba(255, 255, 255, 0.17);
	--snof-ev-badge-bg: rgba(255, 255, 255, 0.1);
	--snof-ev-accent: #e3a468;
	--snof-ev-hover: rgba(255, 255, 255, 0.04);
	--snof-ev-date-soft: rgba(255, 255, 255, 0.85);

	color: var(--snof-ev-text);
}

.snof-events--light {
	--snof-ev-text: #20211f;
	--snof-ev-muted: #575a56;
	--snof-ev-rule: #e0dbd1;
	--snof-ev-badge-bg: #efede6;
	--snof-ev-accent: #b25f28;
	--snof-ev-hover: rgba(32, 33, 31, 0.03);
	--snof-ev-date-soft: #4a4d48;
}

.snof-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--snof-ev-rule);
}

.snof-events__item {
	margin: 0;
	border-bottom: 1px solid var(--snof-ev-rule);
}

.snof-events__row {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr) 210px 150px 160px;
	align-items: center;
	gap: 24px;
	padding: 26px 8px;
	/* Explicit, not inherit: these rows are often links, and a theme's `a`
	   colour would otherwise win and wash out the title and date badge. */
	color: var(--snof-ev-text);
	text-decoration: none;
}

/* Same reason. Themes commonly style a:hover and a:visited too. */
.snof-events a.snof-events__row,
.snof-events a.snof-events__row:visited,
.snof-events a.snof-events__row:hover,
.snof-events a.snof-events__row:focus {
	color: var(--snof-ev-text);
	text-decoration: none;
}

/* Without the seats column the remaining four should spread, not leave a gap. */
.snof-events--no-spots .snof-events__row {
	grid-template-columns: 118px minmax(0, 1fr) 240px 170px;
}

a.snof-events__row:hover,
a.snof-events__row:focus-visible {
	background: var(--snof-ev-hover);
}

a.snof-events__row:focus-visible {
	outline: 2px solid var(--snof-ev-accent);
	outline-offset: -2px;
}

/* ---------- date badge ---------- */

.snof-events__date {
	display: block;
	padding: 10px 0;
	border-radius: 12px;
	background: var(--snof-ev-badge-bg);
	color: var(--snof-ev-text);
	text-align: center;
	line-height: 1.15;
}

.snof-events__month,
.snof-events__weekday {
	display: block;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.snof-events__weekday {
	text-transform: none;
	letter-spacing: 0;
	/* A real colour rather than opacity: opacity on top of a translucent badge
	   compounds and quietly drops the text below AA. */
	color: var(--snof-ev-date-soft);
}

.snof-events__month {
	color: var(--snof-ev-date-soft);
}

.snof-events__day {
	display: block;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ---------- main ---------- */

.snof-events__main {
	display: block;
	min-width: 0;
}

.snof-events__name {
	display: block;
	color: var(--snof-ev-text);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.snof-events__desc {
	display: block;
	margin-top: 3px;
	font-size: 14.5px;
	color: var(--snof-ev-muted);
}

.snof-events__location,
.snof-events__time {
	display: block;
	font-size: 15px;
	color: var(--snof-ev-muted);
}

/* ---------- status ---------- */

.snof-events__status {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.snof-events__status--open {
	color: var(--snof-ev-accent);
}

.snof-events__status--full {
	color: var(--snof-ev-muted);
	font-weight: 500;
}

.snof-events__empty {
	margin: 0;
	padding: 26px 0;
	color: var(--snof-ev-muted);
	font-size: 17px;
}

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
	.snof-events__row {
		/* Location and time share a line but need their own columns, otherwise
		   a long location name runs straight into the time. */
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"date main   main"
			"date loc    time"
			"date status status";
		gap: 4px 18px;
		padding: 22px 4px;
	}

	.snof-events__date {
		grid-area: date;
		align-self: start;
		padding: 8px 0;
	}

	.snof-events__main {
		grid-area: main;
		margin-bottom: 4px;
	}

	.snof-events__name {
		font-size: 19px;
	}

	.snof-events__location {
		grid-area: loc;
		min-width: 0;
	}

	.snof-events__time {
		grid-area: time;
		justify-self: end;
		white-space: nowrap;
		padding-left: 12px;
	}

	.snof-events__status {
		grid-area: status;
		margin-top: 6px;
	}

	.snof-events--no-spots .snof-events__row {
		grid-template-columns: 84px minmax(0, 1fr) auto;
		grid-template-areas:
			"date main main"
			"date loc  time";
	}

	.snof-events__day {
		font-size: 23px;
	}
}