/* cyclos Salonabend – Sektion "Termine" + Rückblick (1.2.0) */

.sa-termine {
	--sa-ink: #141414;
	--sa-accent: #FF0029;
	--sa-muted: #959595;
	--sa-rule: #E5E5E5;
	--sa-hover: #F5F5F5;
	--sa-arrow-fg: #5F5F5F; /* Slider-Pfeile */

	--sa-fs-h2: 60px;
	--sa-fs-feat: 60px;
	--sa-fs-h3: 38px;
	--sa-fs-title: 38px;
	--sa-fs-card-title: 28px;
	--sa-fs-day: 72px;
	--sa-fs-month: 28px;
	--sa-fs-card-day: 56px;
	--sa-fs-card-month: 22px;
	--sa-fs-teaser: 22px;
	--sa-fs-small: 19px;

	--sa-after-h2: 56px;
	--sa-row-y: 40px;
	--sa-card-top: 0px; /* seit 1.1.6: keine Linie über der Karte */
	--sa-row-x: 24px; /* Innenabstand der Zeile, Hover-Fläche bleibt zwischen den Linien */
	--sa-divider-top: 112px;
	--sa-gap: 24px;
	--sa-date-col: 216px;
	--sa-img-col: 280px; /* Speaker-Bild im aufgeklappten Folgetermin */
	--sa-card-w: 392px;

	font-family: Aeonik, sans-serif;
	font-weight: 400;
	color: var(--sa-ink);
	-webkit-font-smoothing: antialiased;
}

.sa-termine *,
.sa-termine *::before,
.sa-termine *::after { box-sizing: border-box; }

.sa-termine p,
.sa-termine h2,
.sa-termine h3,
.sa-termine h4,
.sa-termine ul { margin: 0; padding: 0; }
.sa-termine ul { list-style: none; }
.sa-termine a { color: inherit; text-decoration: none; }

/* Kopf (nur ohne kopf="0") */
.sa-overline { font-size: var(--sa-fs-small); margin-bottom: 12px !important; }
.sa-h2 { font-size: var(--sa-fs-h2); font-weight: 500; line-height: 1.1; margin-bottom: var(--sa-after-h2) !important; }

/* Gemeinsame Bausteine */
.sa-topline { font-size: var(--sa-fs-small); line-height: 1.4; margin-bottom: 8px !important; }
.sa-topline__accent { color: var(--sa-accent); }
.sa-topline__muted { color: var(--sa-muted); }

.sa-speaker { font-size: var(--sa-fs-small); line-height: 1.4; }
.sa-speaker__name { color: var(--sa-ink); }
.sa-speaker__pos { color: var(--sa-muted); }

.sa-date__main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sa-date__day { font-size: var(--sa-fs-day); font-weight: 500; line-height: .9; letter-spacing: -.02em; }
.sa-date__month { font-size: var(--sa-fs-month); font-weight: 500; line-height: 1; }
.sa-date__sub { font-size: var(--sa-fs-small); color: var(--sa-muted); line-height: 1.4; margin-top: 12px; }
.sa-m-only { display: none; }

.sa-textlink { display: inline-block; font-size: var(--sa-fs-small); margin-top: 16px; border-bottom: 1px solid currentColor; line-height: 1.3; }
.sa-textlink__close { display: none; }
.sa-row__details[open] .sa-textlink__open { display: none; }
.sa-row__details[open] .sa-textlink__close { display: inline; }

/* A) Nächster Termin */
.sa-next {
	border-top: 3px solid var(--sa-accent);
	padding: var(--sa-row-y) var(--sa-row-x); /* gleiche Einrückung wie die Folgetermine */
	display: grid;
	grid-template-columns: var(--sa-date-col) minmax(0, 1fr);
	column-gap: var(--sa-gap);
	align-items: start;
}
.sa-next--leer { display: block; }
.sa-empty { font-size: var(--sa-fs-teaser); }

.sa-next__title { font-size: var(--sa-fs-feat); font-weight: 500; line-height: 1.05; max-width: 640px; margin-bottom: 16px !important; }
.sa-next .sa-speaker { margin-bottom: 24px; }
.sa-next__text { font-size: var(--sa-fs-teaser); line-height: 1.45; max-width: 640px; margin-bottom: 32px !important; }

/* Button wie die übrigen roten Buttons der Seite.
   Animation (Marquee) und Hover kommen aus dem Theme über .hover-button. */
body .sa-termine .sa-cta a.elementor-button {
	display: inline-block;
	background-color: var(--sa-accent);
	color: var(--sa-ink);
	border-radius: 0 50px 50px 0;
	/* gleiche Größe wie die übrigen Buttons (globale Typografie "Text") */
	font-family: var(--e-global-typography-text-font-family, "Aeonik"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 1.5rem) !important;
	line-height: var(--e-global-typography-text-line-height, 2rem) !important;
	font-weight: 400;
	text-decoration: none;
	padding: 0;
}
body .sa-termine .sa-cta a.elementor-button:hover { color: var(--sa-ink); }
body .sa-termine .sa-cta .elementor-button-content-wrapper { display: flex; justify-content: center; padding: .75rem 1.8rem; } /* = 56px Höhe */

/* B) Folgetermine – aufklappbar über <details>/<summary> (seit 1.2.0) */
.sa-upcoming { border-top: 1px solid var(--sa-rule); }
.sa-row { border-bottom: 1px solid var(--sa-rule); }
.sa-row__link {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: var(--sa-date-col) minmax(0, 1fr);
	column-gap: var(--sa-gap);
	padding: var(--sa-row-y) var(--sa-row-x);
	align-items: start;
	cursor: pointer;
	list-style: none;
}
.sa-row__link::-webkit-details-marker { display: none; }
.sa-row__link::marker { content: ""; }

.sa-row__panel {
	display: grid;
	grid-template-columns: var(--sa-date-col) minmax(0, 1fr);
	column-gap: var(--sa-gap);
	padding: 0 var(--sa-row-x) var(--sa-row-y);
	align-items: start;
}
.sa-row__panel--bild { grid-template-columns: var(--sa-date-col) minmax(0, 1fr) var(--sa-img-col); }
.sa-row__panel-body { grid-column: 2; max-width: 640px; }
.sa-row__text { font-size: var(--sa-fs-teaser); line-height: 1.45; }
.sa-row__text p { margin-bottom: 1em; }
.sa-row__text p:last-child { margin-bottom: 0; }
.sa-row__profil { margin-top: 32px; }
.sa-row__profil-label { font-size: var(--sa-fs-small); color: var(--sa-muted); line-height: 1.4; }
.sa-row__profil-text { font-size: var(--sa-fs-small); line-height: 1.45; margin-top: 8px !important; max-width: 560px; }
.sa-row__bild { grid-column: 3; aspect-ratio: 4 / 5; overflow: hidden; }
.sa-row__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-row__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sa-hover);
	opacity: 0;
	z-index: -1;
	transition: opacity .15s ease;
}
.sa-row__title { font-size: var(--sa-fs-title); font-weight: 500; line-height: 1.1; max-width: 640px; margin-bottom: 8px !important; }
.sa-row__link:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 4px; }

@media (hover: hover) and (min-width: 768px) {
	.sa-row__link:hover::before { opacity: 1; }
}

/* C) Rückblick (seit 1.3.0: Speaker-Bild, Pfeile im Kopf, nur bei Bedarf) */
.sa-termine {
	--sa-card-w: 320px;
	--sa-card-img: 176px;
	--sa-arrow-size: 56px;
	--sa-ink-inverse: #FFFFFF; /* Pfeil-Hover: Schrift auf gefülltem Kreis */
}

.sa-past { margin-top: var(--sa-divider-top); }
.sa-termine--rueckblick .sa-past { margin-top: 0; } /* eigener Container: Abstand kommt aus Elementor */

/* Dunkles Thema ([salonabend_rueckblick thema="dunkel"]): Hintergrund setzt der Elementor-Container */
.sa-termine--dunkel {
	--sa-ink: #FFFFFF;
	--sa-ink-inverse: #141414;
	--sa-muted: #A6A6A6;
	--sa-rule: #3A3A3A;
	--sa-hover: #262626;
	--sa-arrow-fg: #FFFFFF;
	color: var(--sa-ink);
}

/* Kopf: Überschrift links, Pfeile rechts */
.sa-past__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-bottom: var(--sa-after-h2);
}
.sa-past__head--ohne-titel { justify-content: flex-end; }
.sa-past--static .sa-past__head--ohne-titel { display: none; }

body .sa-termine .sa-past__title {
	font-size: var(--sa-fs-h2);
	font-weight: 500;
	line-height: 1.1;
	color: var(--sa-ink);
	margin: 0 !important;
}
body .sa-termine .sa-past__title em {
	font-family: "Gestura-Text", serif;
	font-style: italic;
	font-weight: 400;
}

/* Slider läuft rechts bis zum Viewport-Rand (Abstand setzt termine.js als --sa-bleed-right) */
.sa-slider { margin-right: calc(-1 * var(--sa-bleed-right, 0px)); }
.sa-slider__track {
	display: flex;
	gap: var(--sa-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0 var(--sa-gap) 0 0;
}
.sa-slider__track::-webkit-scrollbar { display: none; }
.sa-slider__track:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 4px; }

/* Karte */
.sa-card {
	flex: 0 0 var(--sa-card-w);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body .sa-termine img.sa-card__bild {
	display: block;
	width: var(--sa-card-img);
	height: var(--sa-card-img);
	max-width: 100%;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 16px;
}
body .sa-termine .sa-card__title {
	font-size: var(--sa-fs-card-title);
	font-weight: 500;
	line-height: 1.15;
	color: var(--sa-ink);
	margin: 0 !important;
}
.sa-card__nr {
	font-size: .55em;
	font-weight: 400;
	color: var(--sa-muted);
	margin-right: 8px;
	white-space: nowrap;
}
body .sa-termine .sa-card p { margin: 0 !important; } /* Kit-Abstand unter Absätzen aufheben, Abstand kommt über gap */
.sa-card__text { font-size: var(--sa-fs-small); line-height: 1.45; color: var(--sa-muted); }
.sa-card__speaker { font-size: var(--sa-fs-small); line-height: 1.45; color: var(--sa-ink); }

/* Pfeile: runde Kreise im Kopf. Nur sichtbar, wenn es etwas zu scrollen gibt –
   termine.js entfernt dann das hidden-Attribut.
   Selektor bewusst stark, damit die Kit-Styles für <button> nicht greifen. */
.sa-slider__nav { display: flex; gap: 12px; flex-shrink: 0; }
.sa-slider__nav[hidden] { display: none !important; }
body .sa-termine button.sa-arrow {
	width: var(--sa-arrow-size);
	height: var(--sa-arrow-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--sa-arrow-fg) !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 22px !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
body .sa-termine button.sa-arrow:hover:not(:disabled),
body .sa-termine button.sa-arrow:focus-visible {
	background: var(--sa-ink) !important;
	border-color: var(--sa-ink) !important;
	color: var(--sa-ink-inverse) !important;
}
body .sa-termine button.sa-arrow:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; }
body .sa-termine button.sa-arrow:disabled { opacity: .3; cursor: default; }

@media (max-width: 767px) {
	.sa-termine {
		--sa-card-img: 140px;
		--sa-arrow-size: 44px;
	}
	body .sa-termine button.sa-arrow { font-size: 18px !important; }
}

/* Tablet */
@media (max-width: 1024px) {
	.sa-termine {
		--sa-fs-feat: 48px;
		--sa-fs-day: 60px;
		--sa-date-col: 160px;
		--sa-img-col: 200px;
	}
}

/* Mobil */
@media (max-width: 767px) {
	.sa-termine {
		--sa-fs-h2: 40px;
		--sa-fs-feat: 32px;
		--sa-fs-h3: 28px;
		--sa-fs-title: 26px;
		--sa-fs-card-title: 22px;
		--sa-fs-day: 40px;
		--sa-fs-month: 18px;
		--sa-fs-card-day: 36px;
		--sa-fs-card-month: 16px;
		--sa-fs-teaser: 17px;
		--sa-fs-small: 15px;

		--sa-after-h2: 32px;
		--sa-row-y: 24px;
		--sa-card-top: 0px;
		--sa-divider-top: 56px;
		--sa-gap: 16px;
		--sa-date-col: 84px;
		--sa-card-w: 280px;
		--sa-row-x: 0px;
	}

	/* Nächster Termin einspaltig */
	.sa-next { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }

	/* Folgetermine: aufgeklappter Teil einspaltig, Bild unter dem Text */
	.sa-row__panel,
	.sa-row__panel--bild { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.sa-row__panel-body { grid-column: 1; }
	.sa-row__bild { grid-column: 1; max-width: 240px; }

	/* Folgetermine: Tag und Monat untereinander */
	.sa-row .sa-date__main { flex-direction: column; align-items: flex-start; gap: 4px; }
	.sa-row .sa-date__sub { margin-top: 8px; }
	.sa-row .sa-date--monat .sa-date__month { display: none; }
	.sa-row .sa-m-only { display: inline; }
	.sa-next .sa-date--monat .sa-date__month { display: none; }
	.sa-next .sa-m-only { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	.sa-slider__track { scroll-behavior: auto; }
	.sa-termine * { transition: none !important; }
}