/* ALLOW-ASCII */
/* ==========================================================================
   Terminübersicht

   Die Filterleiste übernimmt Aufbau und Aussehen vom Beitragsarchiv
   (`.vda-beitragsfilter` in beitraege.css) - hier stehen nur die paar
   Zeilen, die dazukommen. Zwei Übersichten, die sich gleich bedienen,
   sind mehr wert als zwei eigene Entwürfe.

   Die Karten sind kantig und tragen links eine kräftige Farbkante in
   der Farbe ihrer Art. Die Farbe steckt in einer Variablen an der
   Karte, nicht in sechs beinahe gleichen Regelblöcken: wer eine Art
   ergänzt, setzt eine Zeile.
   ========================================================================== */

/* --- 1. Was zur Filterleiste dazukommt ---------------------------------- */

.vda-terminfilter {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Die Trennlinie kommt schon von der Leiste selbst; eine zweite darüber
   ergäbe ein Doppelband. */
.vda-terminfilter__stand {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Während nachgeladen wird, treten die alten Treffer zurück - man sieht
   sofort, dass etwas passiert, ohne dass der Inhalt wegspringt. */
.vda-terminausgabe {
	position: relative;
	transition: opacity var(--wp--custom--transition);
}

.vda-terminausgabe.is-laedt {
	opacity: 0.4;
	pointer-events: none;
}

/* Ein Balken am oberen Rand läuft, solange die Antwort aussteht. Er
   sagt nur „es passiert etwas" - eine Fortschrittsanzeige wäre
   erfunden, denn die Dauer kennt niemand. */
.vda-terminausgabe.is-laedt::before {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--wp--preset--color--vda-blue) 40%,
		var(--wp--preset--color--vda-blue) 60%,
		transparent 100%);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: vda-terminbalken 1.1s ease-in-out infinite;
}

@keyframes vda-terminbalken {
	0% { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}

/* Beim ersten Filtern gibt es noch nichts zum Zurücktreten - dann
   stehen Platzhalter in der Form der Karten, damit die Seite nicht
   leer wirkt und nichts springt. */
.vda-terminskelett {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.vda-terminskelett__karte {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 6px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
}

.vda-terminskelett__block,
.vda-terminskelett__zeile {
	background: var(--wp--preset--color--line);
	animation: vda-terminpuls 1.2s ease-in-out infinite;
}

.vda-terminskelett__block {
	height: 58px;
}

.vda-terminskelett__zeile {
	height: 12px;
	margin-block-end: 10px;
}

.vda-terminskelett__zeile--kurz { width: 35%; }
.vda-terminskelett__zeile--lang { width: 85%; height: 16px; }
.vda-terminskelett__zeile--mittel { width: 60%; margin-block-end: 0; }

@keyframes vda-terminpuls {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {

	.vda-terminausgabe.is-laedt::before,
	.vda-terminskelett__block,
	.vda-terminskelett__zeile {
		animation: none;
	}
}

/* --- 2. Monatsgruppen --------------------------------------------------- */

.vda-terminarchiv__monat {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--display-6);
	line-height: 1.2;
}

.vda-terminarchiv__monat:first-child {
	margin-block-start: 0;
}

/* Die Linie füllt den Rest der Zeile und macht aus der Überschrift eine
   sichtbare Trennung zwischen den Monaten. */
.vda-terminarchiv__monat::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--line);
}

.vda-terminarchiv__gruppe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.vda-terminarchiv__leer {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* --- 3. Terminkarte ----------------------------------------------------- */

.vda-terminkarte {
	--art: var(--wp--preset--color--vda-blue-dark);

	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 6px solid var(--art);
	background: var(--wp--preset--color--white);
	transition: box-shadow var(--wp--custom--transition);
}

.vda-terminkarte:hover {
	box-shadow: var(--wp--preset--shadow--soft);
}

.vda-terminkarte--boerse { --art: var(--wp--preset--color--vda-blue); }
.vda-terminkarte--vortrag { --art: var(--wp--preset--color--success); }
.vda-terminkarte--messe { --art: var(--wp--preset--color--warning); }
.vda-terminkarte--online { --art: var(--wp--preset--color--info); }
.vda-terminkarte--sachkunde { --art: var(--wp--preset--color--vda-blue-deep); }

/* Datumsblock */

.vda-terminkarte__datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-block: 8px;
	background: var(--wp--preset--color--paper-blue);
	color: var(--wp--preset--color--vda-blue-dark);
	text-align: center;
}

.vda-terminkarte__tag {
	font-size: 1.55rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
}

.vda-terminkarte__monat {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Bei einem Termin, der schon läuft, zeigt der Block den letzten Tag.
   Ohne das kleine „bis" läse sich das Datum wie ein Beginn. */
.vda-terminkarte__bis {
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1;
	opacity: 0.75;
}

/* Inhalt */

.vda-terminkarte__inhalt {
	min-width: 0;
}

.vda-terminkarte__art {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 4px;
	color: var(--art);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* „Aktueller Termin" steht neben der Art, nicht in der Datumszeile:
   dort wäre es eine dritte Angabe, die auf schmalen Geräten umbricht. */
.vda-terminkarte__jetzt {
	padding: 1px 6px;
	background: var(--wp--preset--color--vda-blue-dark);
	color: var(--wp--preset--color--white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.vda-terminkarte__titel {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.35;
}

.vda-terminkarte__titel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.vda-terminkarte__titel a:hover,
.vda-terminkarte__titel a:focus-visible {
	color: var(--wp--preset--color--vda-blue);
	text-decoration: underline;
}

.vda-terminkarte__meta {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* Der Ort in eigener Zeile, mit einem kleinen Nadelkopf davor. Er ist
   Schmuck, kein Inhalt, deshalb aus dem Vorlesefluss genommen. */
.vda-terminkarte__ort {
	display: flex;
	gap: 6px;
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.vda-terminkarte__ort::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 1.4em;
	background: currentColor;
	opacity: 0.55;
	mask: var(--vda-nadel) center / 12px 12px no-repeat;
	-webkit-mask: var(--vda-nadel) center / 12px 12px no-repeat;
}

.vda-terminkarte {
	--vda-nadel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 6.3 12.4 6.6 12.7.2.2.6.2.8 0C12.7 21.4 19 14.2 19 9c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* --- 4. Blättern -------------------------------------------------------- */

.vda-terminblaettern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.vda-terminblaettern__knopf {
	height: 48px;
	display: inline-flex;
	align-items: center;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-small);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--vda-blue-dark);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.vda-terminblaettern__knopf:hover,
.vda-terminblaettern__knopf:focus-visible {
	border-color: var(--wp--preset--color--vda-blue);
	background: var(--wp--preset--color--vda-blue);
	color: var(--wp--preset--color--white);
}

.vda-terminblaettern__stand {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Steht nur ein Knopf da, gehört er nicht in die Mitte. */
.vda-terminblaettern__stand:first-child {
	margin-inline-end: auto;
}

/* --- 5. Mobil ----------------------------------------------------------- */

@media (max-width: 782px) {

	.vda-terminarchiv__gruppe,
	.vda-terminskelett {
		grid-template-columns: minmax(0, 1fr);
	}

	.vda-terminkarte {
		grid-template-columns: 56px minmax(0, 1fr);
	}
}