/* ============================================================================
 * Longevity — Journal: Metazeile des Seitenkopfs + Theme-Skin fuer
 * „Ggf. fuer Sie interessant" (CType `atomicplan_blogrelatedrecords`).
 *
 * Diese Datei ist THEME-CSS, kein Block-CSS: sie wird ueber `page.includeCSS`
 * geladen (Bucket 2, NACH theme.css und nach den `priority="1"`-Blockdateien)
 * und darf deshalb bewusst OHNE `priority` laufen — sonst koennte sie die
 * Block-Defaults nicht ueberschreiben (Skill css, 2c).
 *
 * Kein Sektions-Hintergrund, kein Sektions-Padding, KEINE eigene
 * Container-Breite: die Breite kommt fuer beide Elemente ausschliesslich aus
 * dem generischen `.frame-container` (harte Workspace-Regel). Ueberschriften-
 * Groessen kommen aus den plate_bootstrap-Slots (`hN-font-size`) und werden
 * hier NICHT wiederholt.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Metazeile: Datum · Autor · Thema · Lesezeit
 *
 * Sie bildet den Fuss des Seitenkopfs. Typografisch bewusst zurueckhaltend —
 * Laufweite und gedaempfte Ink-Farbe statt Groesse; sie soll den Titel nicht
 * konkurrenzieren.
 * ------------------------------------------------------------------------ */

.lr-main > .frame-container > .plb-articlemeta.lr-journal-meta {
    margin: 2rem 0 0;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--lr-line);
    font-family: var(--lr-font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--lr-ink-soft);
}

/* Die Trenner setzt das CSS, damit ein fehlendes Element (kein Autor, keine
   Kategorie) keinen verwaisten Punkt hinterlaesst. */
/* Die Metazeile bricht auf schmalen Bildschirmen um. Sie darf dabei zwischen
   den Angaben umbrechen, aber NICHT mitten im Wort: die globale Silbentrennung
   des Themes machte aus „Diagnostik" sonst „DIA-GNOSTIK" (gemessen bei 375px). */
.plb-articlemeta .plb-articlemeta__item {
    display: inline-block;
    hyphens: none;
    overflow-wrap: normal;
}

.plb-articlemeta .plb-articlemeta__item + .plb-articlemeta__item::before {
    content: "·";
    display: inline-block;
    margin: 0 0.6em;
    color: var(--lr-ink-faint);
}

.plb-articlemeta .plb-articlemeta__topic {
    color: var(--lr-bronze-ink);
}

.plb-articlemeta .plb-articlemeta__readtime {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .lr-main > .frame-container > .plb-articlemeta.lr-journal-meta {
        margin-top: 1.4rem;
        letter-spacing: 0.08em;
    }
}

/* --------------------------------------------------------------------------
 * 2. „Ggf. fuer Sie interessant" — Theme-Skin ueber die Slots des Blocks.
 *
 * Es werden AUSSCHLIESSLICH die `--plb-related-*`-Slots gesetzt, die der Block
 * dafuer vorsieht — keine Eigenschaft des Blocks wird hier nachgeschrieben.
 * Die wenigen zusaetzlichen Regeln betreffen Typografie-Familien und den
 * Eyebrow-Strich, fuer die es im Block bewusst keinen Slot gibt.
 * ------------------------------------------------------------------------ */

.frame-type-atomicplan_blogrelatedrecords {
    --plb-related-gap: 2rem;
    --plb-related-min: 16.5rem;
    --plb-related-radius: 0;
    --plb-related-ratio: 4 / 3;
    --plb-related-line: var(--lr-line);
    --plb-related-muted: var(--lr-ink-soft);
}

/* Auf invertierten Flaechen (forest/dark/primary) drehen die Ink-Tokens
   bereits ueber das Theme-Remap in theme.css — die Slots folgen automatisch,
   weil sie auf denselben Tokens stehen. Nur die beiden Linien-Tokens haben
   dort einen eigenen Namen. */
.frame.-colorized .frame-type-atomicplan_blogrelatedrecords,
.frame-type-atomicplan_blogrelatedrecords.-colorized {
    --plb-related-line: var(--lr-line-on-dark);
    --plb-related-muted: var(--lr-on-dark-soft);
}

.frame-type-atomicplan_blogrelatedrecords .plb-related__source {
    font-family: var(--lr-font-body);
    color: var(--lr-bronze-ink);
    opacity: 1;
}

.frame-type-atomicplan_blogrelatedrecords .plb-related__topics {
    font-family: var(--lr-font-body);
}

/* Die Groesse des Kartentitels kommt aus dem plate_bootstrap-Slot `h5-font-size`
   (das Template setzt dafuer die Utility-Klasse `h5`), die Familie global aus
   theme.css — hier steht deshalb WEDER font-size NOCH font-family (Skill css, 2d). */

.frame-type-atomicplan_blogrelatedrecords .plb-related__sub,
.frame-type-atomicplan_blogrelatedrecords .plb-related__teaser {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--lr-ink-soft);
}

.frame-type-atomicplan_blogrelatedrecords .plb-related__meta {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
}