/**
 * TicketSoft Evenementen
 *
 * Bewust terughoudend: dit bestand regelt alleen de structuur. Lettertype,
 * kleur en knopstijl komen uit het thema, zodat het blok op elke klantsite
 * in de eigen huisstijl staat.
 *
 * Alles is bij te sturen met de variabelen hieronder, bijvoorbeeld in het
 * thema of via extra CSS:
 *
 *   .tsev-events { --tsev-accent: #0b5; --tsev-radius: 0; }
 */

.tsev-events {
	--tsev-gap: 1.5rem;
	--tsev-line: color-mix(in srgb, currentColor 15%, transparent);
	--tsev-muted: color-mix(in srgb, currentColor 65%, transparent);
	--tsev-accent: currentColor;
	--tsev-radius: 4px;

	list-style: none;
	margin: 0;
	padding: 0;
}

/* Lijst: elk evenement een rij, gescheiden door een fijne lijn. */

.tsev-events--list .tsev-event {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tsev-gap);
	padding: var(--tsev-gap) 0;
	border-block-end: 1px solid var(--tsev-line);
}

.tsev-events--list .tsev-event:first-child {
	border-block-start: 1px solid var(--tsev-line);
}

.tsev-events--list .tsev-event__media {
	flex: 0 0 8rem;
}

.tsev-events--list .tsev-event__body {
	flex: 1 1 16rem;
}

.tsev-events--list .tsev-event__action {
	flex: 0 0 auto;
	margin-inline-start: auto;
	text-align: end;
}

/* Raster: kaarten naast elkaar. */

.tsev-events--grid {
	display: grid;
	gap: var(--tsev-gap);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.tsev-events--grid .tsev-event {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--tsev-gap);
	border: 1px solid var(--tsev-line);
	border-radius: var(--tsev-radius);
}

.tsev-events--grid .tsev-event__action {
	margin-block-start: auto;
}

@media (min-width: 40em) {
	.tsev-events--cols-1 {
		grid-template-columns: 1fr;
	}
	.tsev-events--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.tsev-events--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.tsev-events--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Onderdelen van een evenement. */

.tsev-event__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tsev-radius);
}

.tsev-event__date {
	margin: 0 0 0.25em;
	font-size: 0.875em;
	color: var(--tsev-muted);
}

.tsev-event__title {
	margin: 0;
	font-size: inherit;
	line-height: 1.3;
}

.tsev-event__place {
	margin: 0.25em 0 0;
	font-size: 0.875em;
	color: var(--tsev-muted);
}

.tsev-event__description {
	margin: 0.5em 0 0;
	max-width: 62ch;
	font-size: 0.9375em;
}

.tsev-event__price {
	margin: 0 0 0.5em;
	font-size: 0.875em;
	color: var(--tsev-muted);
}

.tsev-event__status {
	margin: 0;
	font-size: 0.875em;
	color: var(--tsev-muted);
}

.tsev-event__button {
	display: inline-block;
	padding: 0.6em 1.2em;
	border: 1px solid var(--tsev-accent);
	border-radius: var(--tsev-radius);
	text-decoration: none;
	white-space: nowrap;
}

.tsev-event__button:focus-visible {
	outline: 2px solid var(--tsev-accent);
	outline-offset: 2px;
}

.tsev-event--sold-out .tsev-event__title,
.tsev-event--sold-out .tsev-event__media {
	opacity: 0.6;
}

.tsev-empty {
	margin: 0;
	color: var(--tsev-muted);
}

/* Melding die alleen beheerders zien. */

.tsev-notice {
	padding: 1rem;
	border: 1px dashed var(--tsev-line);
	border-radius: var(--tsev-radius);
}

/* Oudere browsers zonder color-mix krijgen een leesbare terugval. */

@supports not (color: color-mix(in srgb, currentColor 15%, transparent)) {
	.tsev-events {
		--tsev-line: rgba(128, 128, 128, 0.3);
		--tsev-muted: inherit;
	}
}