/**
 * Artikel-Rubrik (Blog-Posts, z.B. "Cases + Gossip").
 *
 * Editoriales Modul-System im isarcode-Look. Breiten/Spacing kommen aus den
 * zentralen Tokens (isrcd-tokens.css): --isrcd-text-max / --isrcd-text-rail /
 * --isrcd-module-max / --page-padding. Farben/Fonts ueber Theme-Variablen
 * (Dark/Light-Mode). Nur auf is_singular('post') geladen.
 *
 * Layout: Sektion volle Breite (--page-padding-Rand wie Header/Page-Templates).
 * Fliesstext eingerueckt in lesbarer Spalte (--isrcd-text-max) mit Marker-Rail.
 * Breite Module (Stat, Bento) und eingebettete ACF-Sektionen (Formular)
 * laufen ueber die volle Breite mit eigener Ausrichtung.
 */

.isrcd-article {
	color: rgb(var(--primary-color));
}

.isrcd-article__inner {
	max-width: none;
	margin: 0;
	padding: clamp(2.5rem, 6vw, 5rem) var(--page-padding) clamp(3rem, 8vw, 6rem);
}

/* Gemeinsame eingerueckte Textspalte (Kopf + Fliesstext + schmale Module) */
.isrcd-article__header,
.isrcd-article__body > p,
.isrcd-article__body > h2,
.isrcd-article__body > h3,
.isrcd-article__body > ul,
.isrcd-article__body > ol,
.isrcd-article__body > blockquote,
.isrcd-article__body > .isrcd-tldr,
.isrcd-article__body > .isrcd-infobox {
	margin-left: var(--isrcd-text-rail);
	max-width: var(--isrcd-text-max);
}

/* ============================ Kopf ============================ */
.isrcd-article__header {
	margin-bottom: var(--isrcd-space-xl);
}

.isrcd-article__eyebrow {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	margin: 0 0 1.2rem;
}
.isrcd-article__eyebrow a { color: rgb(var(--primary-color)); text-decoration: none; }

.isrcd-article__title {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-h);
	text-transform: none;
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	line-height: 1.06;
	margin: 0 0 1.1rem;
}

.isrcd-article__meta { font-size: 0.85rem; opacity: 0.55; margin: 0; }

/* ===================== Fliesstext (eingerueckt) ===================== */
.isrcd-article__body {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight);
	font-size: 1.18rem;
	line-height: 1.72;
}

.isrcd-article__body > * + * { margin-top: 1.45em; }

.isrcd-article__body h2 {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-h);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.14;
	margin-top: 2.6em;
	margin-bottom: 0;
	position: relative;
}
.isrcd-article__body h2::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--isrcd-text-rail));
	top: 0.18em;
	width: 2px;
	height: 1.25em;
	background: rgb(var(--primary-color));
}

.isrcd-article__body h3 {
	font-family: var(--font-prime-family);
	font-weight: var(--font-prime-weight-h);
	font-size: 1.32rem;
	line-height: 1.25;
	margin-top: 1.8em;
}

.isrcd-article__body p { margin-bottom: 0; }

.isrcd-article__body a {
	color: rgb(var(--primary-color));
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}
.isrcd-article__body a:hover { text-decoration-thickness: 2px; }

.isrcd-article__body ul,
.isrcd-article__body ol { padding-left: 1.3em; }
.isrcd-article__body li + li { margin-top: 0.5em; }
.isrcd-article__body strong { font-weight: var(--font-prime-weight-bold); }

.isrcd-article__body hr {
	border: 0;
	border-top: 1px solid rgba(var(--primary-color), 0.18);
	margin: 3em 0;
}

/* ===================== Redaktions-Module (TL;DR, Infobox, Stat, Bento) =====================
   Intrinsisches Aussehen lebt jetzt in den jeweiligen Block-CSS (__blocks/module-*.css),
   die per ACF-Block enqueued werden. Hier nur noch der Artikel-Kontext (Einrueckung der
   schmalen Module in die Textspalte, siehe gemeinsame Regel oben). Breite Module (Stat,
   Bento) bringen ihre max-width selbst mit und laufen ausserhalb der Textspalte. */

/* ===================== Eingebettete ACF-Sektionen (z.B. Kontaktformular) =====================
   Volle Breite, eigene Ausrichtung; NICHT in die Textspalte einruecken. */
.isrcd-article__body > .section,
.isrcd-article__body > [class*="section__"] {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	margin-top: var(--isrcd-space-xl);
}

/* ===================== responsive ===================== */
@media (max-width: 700px) {
	.isrcd-article { --isrcd-text-rail: 0rem; }
	.isrcd-article__body { font-size: 1.08rem; }
	.isrcd-article__body h2::before { display: none; }
}