/**
 * Textblog-Gattung Inkrement 3 – Steckbrief, Revisions-Hinweis und
 * Verwandte-Fragen-Sektion auf Entscheidungsgeschichten-Beitraegen.
 *
 * Enqueued nur, wenn einer der Textblog-Bloecke tatsaechlich rendert
 * (compendion_textblog_enqueue_style(), includes/textblog/textblog-steckbrief.php).
 *
 * Farben ausschliesslich ueber Tokens (--wp--preset--color--*, --c-*),
 * kein Hex/rgb. Flaeche <-> Ink immer als Paar:
 *   - Steckbrief-Card:      surface       <-> --c-on-surface / --c-on-surface-muted
 *   - Revisions-Balken:     --c-badge-bg  <-> --c-badge-text  (kontrastgeprueftes Paar)
 *   - Verwandte-Sektion:    base (Seitenhintergrund) <-> --c-on-base
 *
 * Radius-Skala: 1rem (Steckbrief-Card), 0.5rem (Revisions-Balken, Inline-Hinweis).
 *
 * Klassen-Praefix: .cmp-textblog__
 */

/* Steckbrief -------------------------------------------------------- */

.cmp-textblog__steckbrief {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0;
	margin: 1.25rem 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--surface);
	color: var(--c-on-surface);
	border: 1px solid var(--c-card-border);
	border-radius: 1rem;
	font-size: 0.9rem;
}

.cmp-textblog__steckbrief-item {
	display: inline-flex;
	align-items: center;
}

.cmp-textblog__steckbrief-item + .cmp-textblog__steckbrief-item {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--c-card-border);
}

.cmp-textblog__thema {
	color: var(--c-on-surface);
	font-weight: 600;
	text-decoration: none;
}

.cmp-textblog__thema:hover,
.cmp-textblog__thema:focus {
	text-decoration: underline;
}

.cmp-textblog__datum,
.cmp-textblog__lesezeit {
	color: var(--c-on-surface-muted);
}

/* Revisions-Hinweis --------------------------------------------------
 * Deutlich abgesetzter Balken vor dem Steckbrief, garantiert lesbares
 * Badge-Paar (site-palette.php prueft --c-badge-bg/--c-badge-text auf
 * Kontrast >= 3:1 bzw. >= 4.5:1). */

.cmp-textblog__revision-banner {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.25rem;
	background: var(--c-badge-bg);
	color: var(--c-badge-text);
	border-radius: 0.5rem;
	font-weight: 600;
}

.cmp-textblog__revision-banner p {
	margin: 0;
}

.cmp-textblog__revision-link {
	color: inherit;
	text-decoration: underline;
}

/* Verwandte Fragen ---------------------------------------------------
 * Liegt auf der normalen Seitenflaeche (base), darum das --c-on-base-Paar
 * statt der Surface-Inks des Steckbriefs. */

.cmp-textblog__verwandte {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-card-border);
	color: var(--c-on-base);
}

.cmp-textblog__verwandte-heading {
	margin: 0 0 0.75rem;
}

.cmp-textblog__verwandte-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cmp-textblog__verwandte-item a {
	color: var(--c-on-base);
	text-decoration: underline;
}

.cmp-textblog__verwandte-item a:hover,
.cmp-textblog__verwandte-item a:focus {
	color: var(--c-on-base-muted);
}

/* Einstieg (Startseite) ----------------------------------------------
 * Inkrement 4. Gleiche Surface-Card-Optik wie der Steckbrief (Flaeche
 * <-> --c-on-surface-Paar), damit die kuratierte Einstiegsliste auf der
 * Startseite sichtbar heraussticht. */

.cmp-textblog__einstieg {
	margin: 1.5rem 0 2.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--surface);
	color: var(--c-on-surface);
	border-radius: 1rem;
}

.cmp-textblog__einstieg-heading {
	margin: 0 0 1rem;
}

.cmp-textblog__einstieg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cmp-textblog__einstieg-link {
	color: var(--c-on-surface);
	font-weight: 600;
	text-decoration: underline;
}

.cmp-textblog__einstieg-link:hover,
.cmp-textblog__einstieg-link:focus {
	color: var(--c-on-surface-muted);
}

.cmp-textblog__einstieg-excerpt {
	margin: 0.25rem 0 0;
	color: var(--c-on-surface-muted);
}

/* Verzeichnis (Startseite) --------------------------------------------
 * Inkrement 4. Liegt auf der normalen Seitenflaeche (base) – ruhige
 * Kategorie-Listen, kein Surface-Card-Look wie beim Einstieg. */

.cmp-textblog__verzeichnis-gruppe {
	margin-top: 2.5rem;
}

.cmp-textblog__verzeichnis-gruppe:first-child {
	margin-top: 1.5rem;
}

.cmp-textblog__verzeichnis-heading {
	margin: 0 0 0.75rem;
	color: var(--c-on-base);
}

.cmp-textblog__verzeichnis-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cmp-textblog__verzeichnis-item a {
	color: var(--c-on-base);
	text-decoration: underline;
}

.cmp-textblog__verzeichnis-item a:hover,
.cmp-textblog__verzeichnis-item a:focus {
	color: var(--c-on-base-muted);
}