/**
 * LT Events — structural CSS only.
 *
 * THE LINE THIS FILE DRAWS. What is here is the CSS without which the markup does not *work*:
 * the month grid needs to be a grid, and a seven-column table of dates needs to survive a
 * phone. Everything about how it LOOKS — colour, type, spacing scale, the category palette —
 * belongs to the theme, and this file deliberately does not express an opinion about it.
 *
 * That split matters because the alternative fails silently. A calendar whose grid CSS lives in
 * a theme becomes seven stacked divs the day somebody switches theme, and nothing errors.
 *
 * Everything here is one class deep and prefixed, so a theme overrides it with any selector at
 * all. Category colours: target `.lt-events__cat--<slug>` and `.lt-cal__event--<slug>`.
 */

/* --- The month grid ------------------------------------------------------ */

.lt-cal__weekdays,
.lt-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
}

.lt-cal__day {
	min-height: 5.5rem;
	padding: 0.25rem;
	/* min-width:0 stops a long event title forcing the column wider than its 1fr share,
	   which is what silently breaks a CSS grid of unknown content. */
	min-width: 0;
}

.lt-cal__daynum {
	display: block;
	font-variant-numeric: tabular-nums;
}

.lt-cal__event {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lt-cal__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.lt-cal__key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.lt-cal__key-swatch {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	vertical-align: baseline;
}

/*
 * Below roughly a tablet's width a seven-column grid of readable cells is not possible. The
 * default is to STACK: one column, weekday headings hidden, so the month reads as a list. This
 * is what most calendar UIs do on a phone and it needs no horizontal scrolling.
 *
 * It is deliberately NOT a min-width-plus-overflow scroll. A theme that wants to stack cannot
 * cleanly undo a min-width, whereas a theme that wants to scroll can override these two rules
 * with one selector each. Choose the default a theme can most easily change.
 */
@media (max-width: 48rem) {
	.lt-cal__weekdays {
		display: none;
	}

	.lt-cal__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, an empty day is a bare number with nothing under it. Hide those. */
	.lt-cal__day--outside,
	.lt-cal__day:not(.lt-cal__day--has-events):not(.lt-cal__day--today) {
		display: none;
	}

	.lt-cal__day {
		min-height: 0;
	}
}

/* --- The upcoming list --------------------------------------------------- */

.lt-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lt-events__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
}

.lt-events__date {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Pushes anything after the title to the end of the row without the theme needing to know. */
.lt-events__title {
	flex: 1 1 12rem;
}

/* --- Status ---------------------------------------------------------------- */

/*
 * Cancelled is the one status that MUST be visible without a theme's help, because an event that
 * looks live and is not sends people to a locked gate. A line through the title and reduced
 * emphasis is the minimum; a theme can do more. Postponed and rescheduled get the badge only —
 * they are still happening, just not as first announced.
 */
.lt-cal__event.is-cancelled,
.lt-events__item.is-cancelled .lt-events__title {
	text-decoration: line-through;
	opacity: 0.6;
}

.lt-event-status {
	display: inline-block;
	padding: 0 0.4em;
	border: 1px solid currentColor;
	border-radius: 0.25em;
	font-size: 0.75em;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: middle;
}

.lt-event-meta__status {
	padding: 0.75em 1em;
	border-left: 4px solid currentColor;
	margin-bottom: 1rem;
}

/* --- Single event details -------------------------------------------------- */

/*
 * A definition list laid out as label / value rows. Grid rather than floats so a long value
 * wraps under itself rather than under the label, and so the label column has one width for
 * every row.
 */
.lt-event-meta__rows {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 1.25rem;
	margin: 0 0 1rem;
}

.lt-event-meta__row {
	display: contents;
}

.lt-event-meta__rows dt {
	font-weight: 600;
}

.lt-event-meta__rows dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
	.lt-event-meta__rows {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}

	.lt-event-meta__rows dd {
		margin-bottom: 0.5rem;
	}
}

/* --- Add to calendar ------------------------------------------------------- */

.lt-event-add {
	margin: 1rem 0;
}

.lt-event-add__link {
	white-space: nowrap;
}