/**
 * DAV Mediathek – Frontend
 *
 * Farben kommen aus den globalen Elementor-Variablen, damit die Boxen
 * mitziehen, wenn im Theme etwas geändert wird. Die Werte hinter dem Komma
 * sind nur Rückfallebene.
 *
 * Schriftarten werden bewusst nicht gesetzt – die erben vom Theme.
 *
 * Haltepunkte entsprechen den Elementor-Standards:
 *   bis 1024px  Tablet – Filterleiste wandert nach oben
 *   bis  767px  Mobil  – Raster einspaltig
 */

/* ---------------------------------------------------------------
   Grundgerüst: Filterleiste links, Liste rechts
   --------------------------------------------------------------- */

.dav-mediathek {
	display: grid;
	grid-template-columns: minmax(200px, 260px) 1fr;
	gap: 2rem;
	align-items: start;
}

/* ---------------------------------------------------------------
   Filterleiste
   --------------------------------------------------------------- */

.dav-filter {
	background-color: var(--e-global-color-ceee563, #f2f4ee);
	border-radius: 1rem;
	padding: 1.5rem;
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.dav-filter__feld {
	min-width: 0;
}

.dav-filter__label {
	display: block;
	margin-bottom: .4rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--e-global-color-secondary);
}

.dav-filter__auswahl {
	width: 100%;
	max-width: 100%;
	padding: .65rem 1rem;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 1rem;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .9375rem;
	line-height: 1.4;
}

.dav-filter__auswahl:focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------
   Liste
   --------------------------------------------------------------- */

.dav-liste {
	min-width: 0;
}

.dav-liste__eintraege {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dav-liste__status {
	margin: 0 0 1rem;
	font-size: .875rem;
	opacity: .7;
}

.dav-liste__leer {
	padding: 2rem;
	border: 1px dashed var(--e-global-color-94ec3a5, #e2e2e2);
	border-radius: 1rem;
	text-align: center;
	opacity: .8;
}

.dav-eintrag[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
   Box – ein Veranstaltungstag
   --------------------------------------------------------------- */

.dav-box {
	border: 1px solid var(--e-global-color-94ec3a5, #e2e2e2);
	border-radius: 1rem;
	padding: 2rem;
}

.dav-box__datum {
	display: block;
	color: var(--e-global-color-accent);
	font-weight: 700;
	margin-bottom: .25rem;
}

.dav-box__titel {
	color: var(--e-global-color-secondary);
	margin: 0;
	overflow-wrap: break-word;
}

.dav-box__untertitel {
	margin: .5rem 0 0;
}

/* ---------------------------------------------------------------
   Raster
   Zeilenweise gefüllt: 1 links, 2 rechts, 3 links …
   --------------------------------------------------------------- */

.dav-box__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: row;
	gap: 2rem 3rem;
	margin-top: 1.5rem;
}

/* ---------------------------------------------------------------
   Einzelner Eintrag im Raster
   Der Button sitzt unten, damit die Buttons einer Zeile auf gleicher
   Höhe stehen, auch wenn die Texte unterschiedlich lang sind.
   --------------------------------------------------------------- */

.dav-vortrag {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.dav-vortrag__inhalt {
	overflow-wrap: break-word;
}

.dav-vortrag__inhalt p {
	margin: 0 0 .2rem;
}

.dav-vortrag__inhalt p:last-child {
	margin-bottom: 0;
}

.dav-vortrag__inhalt ul,
.dav-vortrag__inhalt ol {
	margin: .2rem 0 .2rem 1.2em;
}

/* ---------------------------------------------------------------
   Button und Statushinweis
   --------------------------------------------------------------- */

.dav-aktion {
	margin-top: auto;
	padding-top: 1rem;
}

.dav-aktion--hinweis {
	margin-top: auto;
	padding-top: 1rem;
	font-style: italic;
	opacity: .75;
}

.dav-mediathek .dav-btn {
	background-color: var(--e-global-color-accent);
}

.dav-mediathek .dav-btn:hover,
.dav-mediathek .dav-btn:focus {
	background-color: #1A7426;
}

.dav-mediathek .dav-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Tablet – Filterleiste über die Liste, Rubriken als Reihe
   --------------------------------------------------------------- */

@media (max-width: 1024px) {

	.dav-mediathek {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Die beiden Auswahlfelder nebeneinander, damit die Leiste über der
	   Liste nicht unnötig hoch wird. */
	.dav-filter {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
		padding: 1.25rem;
	}

	.dav-filter__feld {
		flex: 1 1 14rem;
	}

	.dav-box {
		padding: 1.5rem;
	}

	.dav-box__grid {
		gap: 1.75rem 2rem;
	}
}

/* ---------------------------------------------------------------
   Mobil
   --------------------------------------------------------------- */

@media (max-width: 767px) {

	.dav-filter {
		padding: 1rem;
		border-radius: .75rem;
	}

	.dav-filter__feld {
		flex: 1 1 100%;
	}

	/* Fingerfreundliche Höhe */
	.dav-filter__auswahl {
		min-height: 44px;
	}

	.dav-box {
		padding: 1.25rem;
		border-radius: .75rem;
	}

	.dav-box__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		margin-top: 1.25rem;
	}

	/* Einspaltig gibt es keinen Zeilenpartner, dessen Höhe man ausgleichen
	   müsste. Der Button rückt direkt an seinen Text. */
	.dav-aktion,
	.dav-aktion--hinweis {
		margin-top: 0;
		padding-top: .75rem;
	}

	.dav-mediathek .dav-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---------------------------------------------------------------
   Sehr schmale Geräte
   --------------------------------------------------------------- */

@media (max-width: 380px) {

	.dav-box {
		padding: 1rem;
	}

	/* Button über die volle Breite, sonst wird er zu klein zum Treffen. */
	.dav-mediathek .dav-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
   Bewegung reduzieren
   --------------------------------------------------------------- */

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

	.dav-eintrag {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Druck: Filterleiste weg, alles sichtbar, Links ausgeschrieben
   --------------------------------------------------------------- */

@media print {

	.dav-mediathek {
		display: block;
	}

	.dav-filter,
	.dav-liste__status {
		display: none;
	}

	.dav-eintrag[hidden] {
		display: block !important;
	}

	.dav-btn::after {
		content: " (" attr(href) ")";
		font-size: .75rem;
	}
}