/* ============================================================
   Longevity — lr-textmedia (exp-block). Bild-Text-Split mit Feature-Liste.
   Nur blockspezifisches Layout: Grid, Media-Rahmen, Feature-Pills.
   KEINE Heading-Typo (generisch im Theme) · KEIN Sektions-Hintergrund/-Padding
   (Frame-System). Alles unter .frame-type-atomicplan_lrtextmedia gescoped.
   ============================================================ */
/* Zickzack-Mechanik: die Bildspalte laeuft OHNE Grid-Gap bis an die Mittellinie und
   (siehe unten) bis an Ober-/Unterkante der Sektion. Stapelt man zwei lr-textmedia
   ohne Zwischenabstand (space_*_class = no-space) mit gespiegelter Variante, ecken
   die Bilder an der Naht exakt Ecke an Ecke an. Den Abstand zum Bild bekommt der
   TEXT ueber eigenes Innen-Padding auf der bildzugewandten Seite (--lr-tm-inset). */
.frame-type-atomicplan_lrtextmedia .exp-block {
  --lr-tm-inset: clamp(2rem, 5vw, 5.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.frame-type-atomicplan_lrtextmedia .exp-block.is-reverse .exp-media { order: 2; }

/* figure bringt einen Browser-Default-margin mit — der wuerde die Buendigkeit brechen. */
.frame-type-atomicplan_lrtextmedia .exp-media {
  margin: 0;
  aspect-ratio: auto;
  min-height: clamp(18rem, 40vw, 26rem);
}

/* Textspalte: vertikal zentriert (die Bildspalte streckt sich, der Text nicht),
   Abstand zum Bild als eigenes Padding auf der Bildseite.
   `default` = Bild links  -> Padding links;  `reverse` = Bild rechts -> Padding rechts. */
.frame-type-atomicplan_lrtextmedia .exp-text {
  align-self: center;
  padding-inline-start: var(--lr-tm-inset);
}
.frame-type-atomicplan_lrtextmedia .exp-block.is-reverse .exp-text {
  padding-inline-start: 0;
  padding-inline-end: var(--lr-tm-inset);
}

.frame-type-atomicplan_lrtextmedia .exp-text .eyebrow { margin-bottom: 1.6rem; }
/* h2 traegt die generische .h2-Groesse (Theme) — hier nur Layout. */
.frame-type-atomicplan_lrtextmedia .exp-text h2 { margin-bottom: 1.4rem; max-width: 16ch; }
.frame-type-atomicplan_lrtextmedia .lr-textmedia__body { color: var(--lr-ink-soft); margin-bottom: 1.6rem; }
.frame-type-atomicplan_lrtextmedia .lr-textmedia__body p { color: inherit; }
.frame-type-atomicplan_lrtextmedia .lr-textmedia__body > :last-child { margin-bottom: 0; }

/* Feature-Liste: 2-spaltig umbrechend, Bronze-Bullet */
.frame-type-atomicplan_lrtextmedia .exp-features {
  list-style: none; margin: 1.8rem 0 2.2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
}
.frame-type-atomicplan_lrtextmedia .exp-features li {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lr-ink-faint); display: flex; align-items: center; gap: 0.6em;
}
.frame-type-atomicplan_lrtextmedia .exp-features li::before {
  content: ""; width: 4px; height: 4px; background: var(--lr-bronze); border-radius: 50%; flex: none;
}
.frame-type-atomicplan_lrtextmedia .link-arrow { margin-top: 0.4rem; }

/* Invertierende Frames: Fliesstext + Feature-Labels aufhellen (schlaegt die Theme-Regel via Reihenfolge). */
.frame-background-forest.frame-type-atomicplan_lrtextmedia .lr-textmedia__body,
.frame-background-dark.frame-type-atomicplan_lrtextmedia .lr-textmedia__body,
.frame.-colorized.frame-type-atomicplan_lrtextmedia .lr-textmedia__body { color: var(--lr-on-dark-soft); }
.frame-background-forest.frame-type-atomicplan_lrtextmedia .exp-features li,
.frame-background-dark.frame-type-atomicplan_lrtextmedia .exp-features li,
.frame.-colorized.frame-type-atomicplan_lrtextmedia .exp-features li { color: var(--lr-on-dark-soft); }

/* Bild buendig an Ober-/Unterkante der Sektion — fuer GEFAERBTE UND UNGEFAERBTE
   Frames gleichermassen (Voraussetzung fuer das Anecken an der Naht).
   Der Innenabstand kommt generisch ueber frame_layout_inner_top/bottom als
   Utility-Klasse am .frame: gefaerbte Sektionen (und Hintergrundbild) bekommen
   pt-/pb-xlarge, hintergrundlose pt-0/pb-0. Nur der xlarge-Default wird an der
   Bildspalte per negativer Margin zurueckgenommen — wer am CE ein abweichendes
   frame_layout_inner_* setzt, bekommt bewusst wieder den Padding-Rand. */
.frame-type-atomicplan_lrtextmedia.pt-xlarge .exp-media { margin-top: calc(-1 * var(--bs-gap-xlarge, 4rem)); }
.frame-type-atomicplan_lrtextmedia.pb-xlarge .exp-media { margin-bottom: calc(-1 * var(--bs-gap-xlarge, 4rem)); }

/* Sektion ohne Innenabstand (Hintergrund `none` -> pt-0/pb-0): das Bild laeuft
   bis an die Sektionskante, der TEXT bringt seinen vertikalen Abstand selbst mit,
   damit er an einer no-space-Naht nicht an der Kante klebt. Gefaerbte Sektionen
   haben ihr Frame-Padding und bleiben unveraendert. */
.frame-type-atomicplan_lrtextmedia.pt-0 .exp-text { padding-top: clamp(1.5rem, 3vw, 2.75rem); }
.frame-type-atomicplan_lrtextmedia.pb-0 .exp-text { padding-bottom: clamp(1.5rem, 3vw, 2.75rem); }

@media (max-width: 800px) {
  /* Gestapelt (Bild steht immer oben): Bild oben buendig an die Sektionskante,
     zum Text hin normaler Abstand — das Anecken gilt erst ab der 2-Spalt-Breite. */
  .frame-type-atomicplan_lrtextmedia .exp-block { grid-template-columns: 1fr; gap: 1.8rem; }
  .frame-type-atomicplan_lrtextmedia .exp-block.is-reverse .exp-media { order: 0; }
  .frame-type-atomicplan_lrtextmedia .exp-text,
  .frame-type-atomicplan_lrtextmedia .exp-block.is-reverse .exp-text {
    padding-inline: 0;
  }
  .frame-type-atomicplan_lrtextmedia.pb-xlarge .exp-media { margin-bottom: 0; }
}