/*
 * Longku Events Manager frontend styles.
 */

/*
 * Zentrale CSS-Variablen.
 *
 * --longku-event-list-image-width: Einzige Stellschraube für die Bildbreite
 * in der Veranstaltungsliste. Wird von Grid-Spaltenbreite und Bildgrösse
 * gemeinsam referenziert.
 *
 * --icon-monitor: URL-enkodiertes SVG für das Online/Zoom-Icon.
 * Verwendet dasselbe Muster wie die nativen EM-Icons (background-image
 * mit Data-URL), damit das Icon nahtlos ins EM-Icon-System passt.
 */
:root {
	--longku-event-list-image-width: 200px;
	--icon-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 60 60' fill='%23555'%3E%3Cpath d='M57 3H3C1.346 3 0 4.346 0 6v35c0 1.654 1.346 3 3 3h22v6h-6c-.552 0-1 .447-1 1s.448 1 1 1h22c.552 0 1-.447 1-1s-.448-1-1-1h-6v-6h22c1.654 0 3-1.346 3-3V6c0-1.654-1.346-3-3-3zm1 38c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h54c.551 0 1 .449 1 1v35z'/%3E%3C/svg%3E");
	--icon-organizer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 60 60' fill='%23555'%3E%3Cpath d='M30 32c7.168 0 13-5.832 13-13S37.168 6 30 6s-13 5.832-13 13 5.832 13 13 13zm0-24c6.065 0 11 4.935 11 11s-4.935 11-11 11-11-4.935-11-11 4.935-11 11-11zm-1 28h2c10.477 0 19 8.523 19 19v1H10v-1c0-10.477 8.523-19 19-19zm1-2c-11.58 0-21 9.42-21 21v3h42v-3c0-11.58-9.42-21-21-21z'/%3E%3C/svg%3E");

	/*
	 * Konfiguration des Accordion-Indikators.
	 */
	--longku-accordion-indicator-open: '-';
	--longku-accordion-indicator-closed: '+';
}

/*
 * Erzwingt eine feste, schmale erste Spalte für das Veranstaltungsbild.
 *
 * Das Original-Plugin definiert die erste Spalte als flexibel
 * (minmax(0, 1fr)), wodurch sie unabhängig von der tatsächlichen
 * Bildgrösse immer einen festen Anteil der verfügbaren Breite einnimmt.
 * Diese Regel übernimmt bewusst denselben Selektor wie das Original,
 * damit die gleiche CSS-Spezifität greift und unsere, später geladene
 * Regel zuverlässig gewinnt.
 */
.em.em-list .em-item {
	grid-template-columns: var(--longku-event-list-image-width) 1fr;
}

/*
 * Erzwingt die Bildbreite in der Veranstaltungsliste.
 *
 * Die Höhe wird bewusst nicht fest vorgegeben (height: auto), damit
 * unterschiedlich hohe Originalbilder proportional zur Breite skaliert
 * werden, statt verzerrt oder hart zugeschnitten zu erscheinen.
 */
.em.em-item .em-item-image,
.em.em-list .em-item .em-item-image,
.em.em-list-widget .em-item .em-item-image {
	min-width: var(--longku-event-list-image-width);
	max-width: var(--longku-event-list-image-width);
	width: var(--longku-event-list-image-width);
}

.em.em-item .em-item-image img,
.em.em-list .em-item .em-item-image img,
.em.em-list-widget .em-item .em-item-image img {
	width: var(--longku-event-list-image-width);
	height: auto;
}

/*
 * Entfernt den vertikalen Trennbalken zwischen Bild und Info-Bereich.
 *
 * Die auskommentierte Variante zeigt den ursprünglichen Ansatz mit
 * Trennlinie — bewusst als Referenz belassen.
 */
.em.em-list .em-item .em-item-info {
	/* border-left: 1px solid #d0d0d0; */
	border-left: none;
	border-top: #d0d0d0 !important; /* Übersteuert horizontalen Strich bei Handy-Display */
}

.em-event-categories {
	display: inline !important;
}

.em-event-categories li {
	display: inline !important;
}

.em.em-list .em-item .em-item-meta .em-item-meta-line.em-event-categories a {
	text-decoration: none !important;
	font-style: normal !important;
	color: #fff !important;
}

/*
 * Erzwingt einspaltiges Layout für alle Meta-Zeilen.
 *
 * EM definiert .em-item-meta > div mit flex: 1 1 50%, was zu einem
 * zweispaltigen Layout führt und Kategorien/Tags unvorhersehbar rechts
 * platziert. Diese Regel setzt alle Meta-Zeilen auf volle Breite,
 * damit die Reihenfolge immer dem Format-String entspricht.
 */
.em.em-list .em-item .em-item-info .em-item-meta > div {
	flex: 1 1 100%;
	min-width: unset;
}

/*
 * Blendet leere Meta-Zeilen aus.
 *
 * Gilt für alle .em-item-meta-line ohne Inhalt, z. B. wenn kein
 * Online-Status gesetzt ist. Greift nur bei absolut leerem Element —
 * Meta-Zeilen mit Whitespace werden separat via PHP-Placeholder
 * behandelt (kein div-Wrapper wenn leer).
 */
.em-item-meta-line:empty {
	display: none;
}

/*
 * Online/Zoom-Icon für die Veranstaltungsliste.
 *
 * Verwendet dasselbe background-image-Muster wie die nativen EM-Icons
 * (.em-icon-calendar, .em-icon-clock usw.), damit Grösse, Ausrichtung
 * und Farbe automatisch konsistent sind.
 */
.em .em-icon.em-icon-monitor {
	background-image: var(--icon-monitor);
}

.em .em-icon.em-icon-organizer {
	background-image: var(--icon-organizer);
}

/**
 * Weitere Informationen kleiner machen
 */
.em.em-list .em-item .em-item-actions .em-item-read-more.button {
	font-size: 0.8em !important;
	padding: 0.4em 0.8em !important;
	line-height: normal !important;
	height: auto !important;
	min-height: unset !important;
/*	text-transform: none !important; */
}

/*
 * Accordion-Struktur für die monatliche Gruppierung der Eventliste.
 *
 * .longku-accordion-header: Klickbare Monatsüberschrift mit Indikator,
 * optionalem Toggle-Button. Flexbox damit alle Elemente auf einer Linie
 * bleiben, Toggle-Button automatisch rechtsbündig via margin-left: auto.
 *
 * .longku-accordion-indicator: +/- Zeichen links vom Monatsnamen.
 * Konfigurierbar über --longku-accordion-indicator-open/closed in :root.
 *
 * .longku-accordion-title: Der Monatsname als visuelle Zwischenüberschrift.
 *
 * .longku-accordion-toggle: Diskrete Schaltfläche zum Aufklappen aller
 * Monate. Rechtsbündig via margin-left: auto.
 *
 * .longku-accordion-panel: Der ausklappbare Bereich mit den Events eines
 * Monats.
 */

.longku-accordion-header {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid #d0d0d0;
	cursor: pointer;
	margin-bottom: 16px;
}

.longku-accordion-indicator {
	font-size: 1.2em;
	font-weight: normal;
	padding-right: 0.5em;
/*	color: #888; */
}

.longku-accordion-indicator::before {
	content: var(--longku-accordion-indicator-closed);
}

.longku-accordion-header.is-open .longku-accordion-indicator::before {
	content: var(--longku-accordion-indicator-open);
}

.longku-accordion-title {
	font-size: 1.2em;
	font-weight: 600;
	color: #333;
}

.longku-accordion-toggle {
	position: sticky;
	top: 50px;
	display: block;
	margin-left: auto;
	text-align: right;
	background: none;
	border: none;
	font-size: 0.85em;
	color: #888;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	z-index: 10;
}

.longku-accordion-toggle:hover {
	color: #555;
}

.longku-accordion-toggle:hover {
	color: #555;
}

.longku-accordion-panel {
	margin-bottom: 8px;
}