/* ── Symmetrisches Breakout-Grid ──────────────────────────────────────────────
 *
 * Spuren:
 *   full ▐ gutter │ wideExtra 11.5rem │ CONTENT 40rem │ wideExtra 11.5rem │ gutter ▌ full
 *   wide = 2×wideExtra + content = 63rem = theme.json wideSize.
 *   Die Lesespalte sitzt exakt mittig; Randnotizen HÄNGEN ab 1200px in den
 *   rechten Rand (content-end → full-end), statt eine Spur zu reservieren.
 *
 * WPs constrained-Layout bleibt aktiv (Wide/Full-Toolbar, margin-basierter
 * Block-Gap). Dessen horizontale Regeln (max-width + margin-inline:auto)
 * stecken in :where() → Spezifität (0,1,0); die Zwei-Klassen-Selektoren hier
 * gewinnen mit (0,2,0) ohne !important.
 *
 * Geladen auf dem Front-End (wp_enqueue_style) UND im Editor
 * (add_editor_style → WP prefixt .editor-styles-wrapper; die
 * .is-root-container-Selektoren greifen nur dort).
 */

.jl-prose,
.wp-block-post-content.is-layout-constrained,
.is-root-container.is-layout-constrained {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--wp--custom--layout--gutter), 1fr)
		[wide-start] minmax(0, var(--wp--custom--layout--wide-extra))
		[content-start] minmax(0, var(--wp--style--global--content-size, 40rem)) [content-end]
		minmax(0, var(--wp--custom--layout--wide-extra)) [wide-end]
		minmax(var(--wp--custom--layout--gutter), 1fr) [full-end];
	padding-block-end: var(--wp--preset--spacing--50);
}

/* Da der Grid-Container die Gutter als Rand-Spuren führt, darf kein
 * zusätzliches Root-Padding wirken. */
.jl-prose,
.wp-block-post-content.is-layout-constrained {
	padding-inline: 0;
}

/* Kinder: Standard = Lesespalte; WPs Zentrierung neutralisieren.
 * margin-block (= Block-Gap) bleibt unangetastet — Grid-Rows wachsen mit
 * der Margin, der vertikale Rhythmus überlebt. */
.jl-prose > *,
.wp-block-post-content.is-layout-constrained > *,
.is-root-container.is-layout-constrained > * {
	grid-column: content;
	max-width: none;
	/* !important kontert Cores eigenes margin auto !important — Auto-Margins
	 * lassen Grid-Items sonst auf fit-content schrumpfen (kurze Absätze
	 * wirkten zentriert). */
	margin-inline: 0 !important;
}

.jl-prose > .alignwide,
.wp-block-post-content.is-layout-constrained > .alignwide,
.is-root-container.is-layout-constrained > .alignwide {
	grid-column: wide;
	max-width: none;
}

.jl-prose > .alignfull,
.wp-block-post-content.is-layout-constrained > .alignfull,
.is-root-container.is-layout-constrained > .alignfull {
	grid-column: full;
	max-width: none;
}

/* Floats wirken nicht auf Grid-Items → alignleft/alignright werden zu
 * nicht-umflossenen Offset-Bildern (kein Textumfluss, bewusste Entscheidung). */
.jl-prose > .alignleft,
.wp-block-post-content.is-layout-constrained > .alignleft,
.is-root-container.is-layout-constrained > .alignleft {
	grid-column: content;
	justify-self: start;
	max-width: 50%;
	margin-inline: 0;
}

.jl-prose > .alignright,
.wp-block-post-content.is-layout-constrained > .alignright,
.is-root-container.is-layout-constrained > .alignright {
	grid-column: wide;
	justify-self: end;
	max-width: 50%;
	margin-inline: 0;
}

/* Editor-Hilfselemente in der Lesespalte halten */
.is-root-container.is-layout-constrained > .block-list-appender {
	grid-column: content;
}

/* ── Randnotiz (Sidenote) ────────────────────────────────────────────────────
 * Default = Inline-Notiz mit Akzent-Border in der Lesespalte.
 * Ab 1200px hängt sie rechts in den Rand (Null-Höhen-Trick: die Grid-Zeile
 * ist 0 hoch, der folgende Absatz startet ohne Lücke, die Notiz überläuft
 * nach unten neben ihn). Konvention: direkt VOR den Bezugsabsatz einfügen. */
.jl-prose > .is-style-sidenote,
.wp-block-post-content.is-layout-constrained > .is-style-sidenote,
.is-root-container.is-layout-constrained > .is-style-sidenote {
	grid-column: content;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2);
}

.is-style-sidenote a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--accent);
}

@media (min-width: 1200px) {
	.jl-prose > .is-style-sidenote,
	.wp-block-post-content.is-layout-constrained > .is-style-sidenote {
		grid-column: content-end / full-end;
		justify-self: start;
		width: var(--wp--custom--layout--sidenote);
		margin-block: 0;
		margin-inline-start: var(--wp--custom--layout--note-gap);
		height: 0;
		overflow: visible;
		padding-inline-start: 0;
		border-inline-start: none;
	}
}

/* Im Editor bleibt die Notiz inline (Canvas ist schmaler als das Front-End)
 * und braucht eine sichtbare Mindesthöhe zum Anklicken. */
.is-root-container.is-layout-constrained > .is-style-sidenote {
	min-height: 1.5rem;
	outline: 1px dashed var(--wp--preset--color--border);
	outline-offset: 4px;
}

/* ── ≤1024px: schmalere Breakout-Reserve ────────────────────────────────────
 * Benannte Lines bleiben erhalten → keine impliziten Spalten. */
@media (max-width: 1024px) {
	.jl-prose,
	.wp-block-post-content.is-layout-constrained,
	.is-root-container.is-layout-constrained {
		grid-template-columns:
			[full-start] minmax(var(--wp--custom--layout--gutter), 1fr)
			[wide-start] minmax(0, 4rem)
			[content-start] minmax(0, var(--wp--style--global--content-size, 40rem)) [content-end]
			minmax(0, 4rem) [wide-end]
			minmax(var(--wp--custom--layout--gutter), 1fr) [full-end];
	}
}

/* ── ≤640px: auch die Zwischenspuren kollabieren — der Grid-Algorithmus
 * füllt minmax(0, 4rem)-Spuren VOR der Content-Spalte und würde dem Text
 * auf dem Handy ~130px stehlen. Nur die Gutter bleiben. */
@media (max-width: 640px) {
	.jl-prose,
	.wp-block-post-content.is-layout-constrained,
	.is-root-container.is-layout-constrained {
		grid-template-columns:
			[full-start] minmax(var(--wp--custom--layout--gutter), 1fr)
			[wide-start] 0
			[content-start] minmax(0, var(--wp--style--global--content-size, 40rem)) [content-end]
			0 [wide-end]
			minmax(var(--wp--custom--layout--gutter), 1fr) [full-end];
	}
}

/* ── Legacy-Content (Classic-Editor-Ära): Inline-Breiten neutralisieren ────── */

/* WPs alte [caption]-Ausgabe schreibt style="width:800px" inline — nur
 * !important kommt da ran (Alternative wäre ein the_content-Filter). */
.wp-block-post-content .wp-caption {
	width: auto !important;
	max-width: 100%;
}

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* Solo-Bilder in Absätzen (Alt-Posts) auf Spaltenbreite ziehen — kleine
 * 2007er-Thumbnails blieben sonst 420px schmal. Floats (alignleft/right)
 * bleiben klein neben dem Text. */
.wp-block-post-content p > img:only-child:not(.alignleft):not(.alignright),
.wp-block-post-content p > a:only-child > img:not(.alignleft):not(.alignright) {
	width: 100%;
}

/* Alte .wp-caption-text an den Block-Caption-Stil angleichen */
.wp-block-post-content .wp-caption-text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin: 0.5rem 0 0;
}

/* Video-Embeds: der Wrapper (via the_content-Filter jl_wrap_legacy_embeds)
 * trägt das Seitenverhältnis, das iframe füllt ihn — wie WPs
 * .wp-block-embed__wrapper. */
.wp-block-post-content iframe {
	max-width: 100%;
}

.jl-embed {
	/* width explizit — sonst kollabiert die Auto-Breite auf die
	 * Intrinsic-Größe des iframes (300×150), weil dessen 100%-Maße
	 * gegen eine indefinite Höhe auflösen. Grid-Areas sind definit. */
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-inline: 0;
}

.jl-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Editorial-Kopf im Single-Layout: Kicker → Titel → Meta ───────────────── */
.jl-prose > .jl-kicker {
	margin-block-start: var(--wp--preset--spacing--50);
}

.jl-prose > .wp-block-post-title {
	margin-block-start: 0.75rem;
	line-height: 1.05;
}

/* Meta-Satz »Veröffentlicht am … unter …« — kursiv unter der Headline. */
.jl-post-meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.35ch;
	row-gap: 0.1rem;
	align-items: baseline;
	margin-block-start: 0.35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

/* Kinder (Absatz, Datum, Tags) übernehmen Größe/Farbe des Satzes —
 * theme.json setzt post-date/post-terms sonst auf »small«; die
 * blockGap-Margins der Flow-Gruppe erzeugten mobil große Lücken. */
.jl-post-meta > * {
	margin: 0;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}

/* Gleiche animierte Unterstreichung wie die Fließtext-Links (editorial.css). */
.jl-post-meta a {
	color: var(--wp--preset--color--accent);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--wp--preset--color--accent) 40%, transparent);
	text-underline-offset: 3px;
	transition:
		text-decoration-color 0.2s ease,
		text-decoration-thickness 0.2s ease,
		text-underline-offset 0.2s ease,
		color 0.2s ease;
}

.jl-post-meta a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.jl-post-meta a {
		transition: none;
	}
}

/* Luft zwischen Meta-Satz und Content-Beginn */
.jl-prose > .wp-block-post-content {
	margin-block-start: 2.75rem;
}