/**
 * WSJIS Timeline-Layout fuer die Workshop-Uebersicht (/workshops)
 * ------------------------------------------------------------------
 * Gehoert zum Modul-Override templates/gridbox/html/mod_eb_events/improved.php
 * (mod_eb_events, Layout "improved"). Wird VON DIESEM OVERRIDE eingebunden
 * (addStyleSheet mit ?v=filemtime -> immer cache-frisch), NICHT ueber
 * GridboxHelper::checkCustom(). Bewusst NICHT in custom.css, weil dort der
 * Joomla-Media-Version-Hash haengt und Aenderungen im Browser-Cache haengen
 * bleiben. Siehe CLAUDE.md Abschnitt 8.
 */

/* === WSJIS Timeline: zweiseitige Termin-Timeline (JIS links / JIN rechts) ====
   Markup: templates/gridbox/html/mod_eb_events/improved.php (Override von
   mod_eb_events, Layout "improved"). Ersetzt das fruehere einspaltige
   "improved"-Listenlayout inkl. Orts-Faerbung/Filter aus mod_wsjis_locations
   (auf /workshops entfernt, siehe CLAUDE.md Abschnitt 8).
   Farben: JIS = #ff0a00 (Rot), JIN = #32bb9e (Tuerkis); Datums-Knoten anthrazit. */
.wsjis-timeline-wrap {
	--wsjis-tl-jis: #ff0a00;
	--wsjis-tl-jin: #32bb9e;
	--wsjis-tl-node-bg: #2b2f33;   /* dunkles Anthrazit, kategorieunabhaengig */
	margin: 0 0 1.5em;
}

/* Kopf: die zwei Spaltentitel - je mittig ueber den Karten der Seite.
   Das padding spiegelt den Knoten-/Strich-Abstand der Zeilen (3.2em),
   damit die Content-Box exakt der Kartenbreite entspricht. */
.wsjis-tl-head {
	display: flex;
	margin-bottom: 1em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.wsjis-tl-head > span {
	flex: 1 1 0;
	box-sizing: border-box;
	text-align: center;
}
.wsjis-tl-head-left {
	padding-right: 3.2em;
	color: var(--wsjis-tl-jis);
}
.wsjis-tl-head-right {
	padding-left: 3.2em;
	color: var(--wsjis-tl-jin);
}

/* Zeitachse */
.wsjis-timeline {
	position: relative;
}
.wsjis-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #cdd7e0;
}

/* Eine Zeile = halbe Breite, je Seite ausgerichtet.
   Die Karte fuellt die Zeile komplett aus -> alle Karten einer Seite gleich breit. */
.wsjis-tl-row {
	position: relative;
	box-sizing: border-box;
	width: 50%;
	padding: 0 3.2em 1.4em 0;   /* Platz fuer Datums-Knoten (2.2em) + Verbindungsstrich (1em) */
}
.wsjis-tl-row.wsjis-tl-left {
	margin-left: 0;
}
.wsjis-tl-row.wsjis-tl-right {
	margin-left: 50%;
	padding: 0 0 1.4em 3.2em;
}

/* Datums-Knoten auf der Achse, vertikal mittig zur Karte
   (- 0.7em gleicht das padding-bottom der Zeile aus) */
.wsjis-tl-node {
	position: absolute;
	top: calc(50% - 0.7em);
	transform: translateY(-50%);
	width: 4.4em;
	padding: .35em 0;
	border-radius: 8px;
	background: var(--wsjis-tl-node-bg);   /* anthrazit, unabhaengig von der Kategorie */
	color: #fff;
	text-align: center;
	line-height: 1.15;
	z-index: 1;
}
.wsjis-tl-left .wsjis-tl-node {
	right: -2.2em;
}
.wsjis-tl-right .wsjis-tl-node {
	left: -2.2em;
}
/* Verbindungsstrich vom Knoten zur Karte (vertikal auf Knoten-Mitte) */
.wsjis-tl-node::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1em;
	height: 2px;
	background: #cdd7e0;
	transform: translateY(-50%);
}
.wsjis-tl-left .wsjis-tl-node::after {
	right: 100%;
}
.wsjis-tl-right .wsjis-tl-node::after {
	left: 100%;
}
.wsjis-tl-node-wd {
	display: block;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.wsjis-tl-node-day {
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
}
.wsjis-tl-node-mon {
	display: block;
	font-size: .8rem;
	text-transform: uppercase;
}

/* Event-Karte: fuellt die Zeile (gleiche Breite) und hat eine Mindesthoehe
   (gleiche Hoehe). Flex-Spalte, damit die Preis/Button-Zeile immer unten sitzt. */
.wsjis-tl-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 9.5em;         /* -> alle Karten optisch gleich gross; bei Bedarf anpassen */
	box-sizing: border-box;
	text-align: left;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-left: 4px solid var(--wsjis-tl-jis);
	border-radius: 8px;
	padding: .9em 1.1em;
	box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .10);
}
.wsjis-tl-right .wsjis-tl-card {
	border-left-color: var(--wsjis-tl-jin);
}
.wsjis-tl-featured .wsjis-tl-card {
	box-shadow: 0 12px 26px -6px rgba(0, 0, 0, .30), 0 3px 7px rgba(0, 0, 0, .12);
}
.wsjis-tl-thumb {
	display: block;
	margin-bottom: .5em;
	border-radius: 6px;
}
.wsjis-tl-title {
	display: block;
	font-weight: 500;
	font-size: 1.3rem;
}
.wsjis-tl-cats,
.wsjis-tl-loc {
	display: block;
	font-size: .9rem;
	color: #555;
	margin-top: .15em;
}
.wsjis-tl-loc {
	font-size: 1.1rem;
}
.wsjis-tl-time {
	display: block;
	font-size: 1.1rem;
	color: #000;
	margin-top: .15em;
}
/* Preiszeile: im Info-Block der Karte (nicht mehr in der Button-Zeile) */
.wsjis-tl-priceline {
	display: block;
	font-size: 1.1rem;
	margin-top: .15em;
}
.wsjis-tl-priceline .ebm-event-price {
	font-weight: 500;
}

/* Button-Zeile ganz unten in der Karte, Buttons rechtsbuendig gruppiert */
.wsjis-tl-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .6em;
	flex-wrap: wrap;
	margin-top: auto;            /* immer am unteren Kartenrand */
	padding-top: .8em;
}
.wsjis-tl-bottom .ebm-register-btn {
	display: inline-block;
	background-color: #1e8e3e;   /* gruen wie der Anmelde-Button der Registrierung */
	color: #fff;
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .03em;
	padding: .2em .7em;
	border-radius: 6px;
	transition: background-color .2s ease;
}
.wsjis-tl-bottom .ebm-register-btn:hover,
.wsjis-tl-bottom .ebm-register-btn:focus {
	background-color: #007df7;   /* Hover blau */
	color: #fff;
}
/* "Mehr erfahren": gleiches Styling wie ANMELDEN, aber blau */
.wsjis-tl-bottom .wsjis-tl-btn-more {
	background-color: #007df7;
}
.wsjis-tl-bottom .wsjis-tl-btn-more:hover,
.wsjis-tl-bottom .wsjis-tl-btn-more:focus {
	background-color: #005fbb;
}
.wsjis-tl-bottom .ebm-event-closed {
	font-weight: 500;
	color: #c62828;             /* rot - signalisiert "zu" */
}
.wsjis-tl-row.wsjis-tl-closed {
	opacity: .55;
}

/* Handy: alles einspaltig, Achse nach links, Seite als Mini-Label auf der Karte */
@media (max-width: 600px) {
	.wsjis-tl-head {
		display: none;
	}
	.wsjis-timeline::before {
		left: 2.2em;
	}
	.wsjis-tl-row,
	.wsjis-tl-row.wsjis-tl-left,
	.wsjis-tl-row.wsjis-tl-right {
		width: 100%;
		margin-left: 0;
		text-align: left;
		padding: 0 0 1.6em 5.4em;
	}
	.wsjis-tl-left .wsjis-tl-node,
	.wsjis-tl-right .wsjis-tl-node {
		left: 0;
		right: auto;
	}
	/* Strich zeigt gestapelt immer nach rechts zur Karte */
	.wsjis-tl-left .wsjis-tl-node::after,
	.wsjis-tl-right .wsjis-tl-node::after {
		left: 100%;
		right: auto;
	}
	.wsjis-tl-card {
		min-height: 0;           /* gestapelt keine erzwungene Hoehe */
	}
	.wsjis-tl-card::before {
		display: block;
		margin-bottom: .3em;
		font-size: .7rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .04em;
	}
	.wsjis-tl-left .wsjis-tl-card::before {
		content: "Just in Style";
		color: var(--wsjis-tl-jis);
	}
	.wsjis-tl-right .wsjis-tl-card::before {
		content: "Just in Nature";
		color: var(--wsjis-tl-jin);
	}
}