/*
 * Terminsache – Single Event Styles
 *
 * Wird per the_content-Filter in den Post-Content injiziert.
 * Das Theme steuert das gesamte Seitenlayout (Header, Footer,
 * Content-Breite). Dieses CSS kümmert sich nur um die
 * Event-Details-Box, CTA und Spacing.
 *
 * Keine eigenen Fonts, Farben nur als transparente Abstufungen.
 * Alle Selektoren in :where() → Spezifität 0: jede Einzelklassen-Regel
 * aus Customizer/Child-Theme überschreibt das Plugin-CSS, unabhängig
 * von der Ladereihenfolge.
 */

/* ── Container ────────────────────────────────────────────── */

:where(.bb-ts-single) {
	margin: 1.5em 0;
}

/* Erster Block: kein Top-Margin (direkt unter Titel/Bild) */
:where(.entry-content > .bb-ts-single:first-child) {
	margin-top: 0;
}

/* ── Kategorie-Badges ────────────────────────────────────── */

:where(.bb-ts-single__categories) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

:where(.bb-ts-single__cat-badge) {
	display: inline-block;
	font-size: 0.8125rem;
	line-height: 1;
	padding: 0.35em 0.85em;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	color: inherit;
	font-weight: 500;
}

/* ── Detail-Zeilen ────────────────────────────────────────── */

:where(.bb-ts-single__details) {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.015);
	overflow: hidden;
}

:where(.bb-ts-single__detail-row) {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
}

:where(.bb-ts-single__detail-row + .bb-ts-single__detail-row) {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

:where(.bb-ts-single__detail-icon) {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	background: rgba(0, 0, 0, 0.05);
	color: inherit;
	opacity: 0.65;
}

:where(.bb-ts-single__detail-icon svg) {
	display: block;
}

:where(.bb-ts-single__detail-text) {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

:where(.bb-ts-single__detail-text strong) {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.5;
	font-weight: 600;
}

:where(.bb-ts-single__detail-text span, .bb-ts-single__detail-text a) {
	font-size: 0.9375rem;
	line-height: 1.4;
}

:where(.bb-ts-single__detail-text a) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:where(.bb-ts-single__detail-text a:hover) {
	opacity: 0.7;
}

:where(.bb-ts-single__detail-address) {
	font-size: 0.8125rem;
	opacity: 0.6;
}

/* ── CTA-Button ───────────────────────────────────────────── */

:where(.bb-ts-single__actions) {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

:where(.bb-ts-single__cta) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 0.375rem;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.1s ease;
	cursor: pointer;
}

:where(.bb-ts-single__cta:hover) {
	transform: translateY(-1px);
}

:where(.bb-ts-single__cta svg) {
	flex-shrink: 0;
	stroke: currentColor;
}

/* ── GeneratePress-spezifisch ─────────────────────────────── */

/* Abstand zwischen Featured Image und Content vergrößern */
:where(.single-bb_event .post-image) {
	margin-bottom: 2rem;
}

/* Titel-Spacing */
:where(.single-bb_event .entry-title) {
	margin-bottom: 0.5rem;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
	:where(.bb-ts-single__detail-row) {
		padding: 0.875rem 1rem;
	}

	:where(.bb-ts-single__detail-icon) {
		width: 2.25rem;
		height: 2.25rem;
	}

	:where(.bb-ts-single__cta) {
		width: 100%;
		justify-content: center;
	}
}

/* ── Dark-Theme-Unterstützung ─────────────────────────────── */

@media (prefers-color-scheme: dark) {
	:where(.bb-ts-single__details) {
		border-color: rgba(255, 255, 255, 0.1);
		background: rgba(255, 255, 255, 0.03);
	}

	:where(.bb-ts-single__detail-row + .bb-ts-single__detail-row) {
		border-top-color: rgba(255, 255, 255, 0.06);
	}

	:where(.bb-ts-single__cat-badge) {
		background: rgba(255, 255, 255, 0.1);
	}

	:where(.bb-ts-single__detail-icon) {
		background: rgba(255, 255, 255, 0.08);
	}

	/* Button-Farben kommen vom Theme (GP Customizer → Buttons). */
}

/* ── Video statt Beitragsbild ─────────────────────────────── */

:where(.bb-ts-single__video) {
	aspect-ratio: 16 / 9;
	margin-bottom: 1.5em;
}

:where(.bb-ts-single__video iframe) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}