/*
 * Beitragsseiten (Text und Audio, Schritt 6, Thema 4 „Steckbrief rechts“): Text auf liniertem Blatt (Zeilenhöhe =
 * Linienabstand, Absätze genau eine Zeile Abstand, blauer Rand), rechts der Steckbrief als linierte Karteikarte mit
 * großem Beitragsbild unter zwei Tape-Streifen (ab 900 px mitlaufend). Blatt und Kommentarkarte: studio-sheet.css.
 * Markup: Eltern-Template single-post/single-audio-blog + inc/article.php.
 */

/* ---------- Spalten: Blatt links, Steckbrief rechts ---------- */
.single main#main-page > .wp-block-columns {
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: flex-start;
}

/* Mobil steht der Steckbrief (mit dem Bild) über dem Text: das Eltern-Theme bricht die Spalten mit wrap-reverse um */

@media (min-width: 900px) {
	.single main#main-page > .wp-block-columns {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	}

	.single main#main-page > .wp-block-columns > .wp-block-column:has(> .studio-steckbrief) {
		position: sticky;
		top: calc(var(--stufu-header-offset, 80px) + 1.5rem);
	}
}

/* Leere Podcast-Zeile über dem Titel */
.single main#main-page .audio-post-podcast-title:has(.value:empty) { display: none; }

/* ---------- Steckbrief: linierte Karteikarte, Bild mit zwei Tape-Streifen oben drauf ---------- */
.studio-steckbrief {
	--studio-row-h: 2.25rem;
	position: relative;
	margin-top: 2.2rem;
	padding: 1rem 1.1rem 0.75rem;
	background: var(--studio-grain), var(--studio-paper);
	color: var(--studio-paper-ink);
	rotate: 0.8deg;
	box-shadow: 0 18px 28px -12px oklch(0% 0 0 / 0.75);
}

.studio-steckbrief__photo {
	position: relative;
	margin: -2.2rem -0.4rem 0.8rem;
	padding: 0.55rem 0.55rem 0.9rem;
	background: var(--studio-grain), var(--studio-paper-aged);
	rotate: -2.2deg;
	box-shadow: 0 10px 18px -8px oklch(0% 0 0 / 0.6);
}

.studio-steckbrief__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: sepia(0.12) saturate(0.92);
}

.studio-steckbrief__photo .studio-strip:first-child { top: -10px; left: -4%; rotate: -24deg; }
.studio-steckbrief__photo .studio-strip:nth-child(2) { top: -10px; left: auto; right: -4%; rotate: 22deg; }

.studio-steckbrief__rows {
	margin: 0;
	background:
		linear-gradient(oklch(71.5% 0.135 234 / 0.7), oklch(71.5% 0.135 234 / 0.7)) 0 0 / 100% 2px no-repeat,
		repeating-linear-gradient(transparent 0 calc(var(--studio-row-h) - 1px), oklch(76% 0.03 240 / 0.75) calc(var(--studio-row-h) - 1px) var(--studio-row-h));
}

.studio-steckbrief__rows > div {
	display: grid;
	grid-template-columns: 6rem 1fr;
	align-items: end;
	min-height: var(--studio-row-h);
	padding-bottom: 0.35rem;
}

.studio-steckbrief__rows dt {
	color: var(--studio-paper-ink-2);
	font: 800 0.7rem / 1 var(--studio-font-text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.studio-steckbrief__rows dd { margin: 0; font: 400 1.15rem / 1.25 var(--studio-font-tape); }
.studio-steckbrief__rows a { color: inherit; font: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.studio-steckbrief__rows a:focus-visible { outline: 2px solid oklch(42% 0.13 250); outline-offset: 2px; }