/* ============================================================
   Longevity — Feature-Grid  (CType atomicplan_lrfeaturegrid)
   Ein Block, zwei Optiken: hell = umrahmtes cap-grid, forest/dark = pillars.
   Heading-Typo + Invert = generisch (theme.css); hier nur Layout/Raster/Akzent.
   ============================================================ */
.frame-type-atomicplan_lrfeaturegrid .lr-fg-head { position: relative; z-index: 1; }

.frame-type-atomicplan_lrfeaturegrid .lr-fg-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--lr-line);
    counter-reset: lrfg;
}
.frame-type-atomicplan_lrfeaturegrid .lr-fg-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.frame-type-atomicplan_lrfeaturegrid .lr-fg-item {
    /* EINE Quelle fuers Zell-Padding — das randabfallende Bild hebt genau diesen
       Wert per negativer Margin wieder auf. */
    --lr-fg-pad: clamp(1.8rem, 3vw, 2.8rem);
    counter-increment: lrfg;
    padding: var(--lr-fg-pad);
    border-right: 1px solid var(--lr-line);
    border-bottom: 1px solid var(--lr-line);
    transition: background 0.5s var(--lr-ease-soft);
}

/* ---- Optionales Bild (Eintrags-Typ „Karte") ----
   Randabfallend bis an die Zell-Hairlines, Zuschnitt 3:2 ueber aspect-ratio +
   object-fit (nicht per fixer Hoehe). Zellen ohne Bild bleiben unveraendert —
   gemischte Reihen sind ausdruecklich erlaubt. */
.frame-type-atomicplan_lrfeaturegrid .lr-fg-media {
    margin: calc(-1 * var(--lr-fg-pad)) calc(-1 * var(--lr-fg-pad)) clamp(1.4rem, 2.4vw, 2rem);
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.frame-type-atomicplan_lrfeaturegrid .lr-fg-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.2s var(--lr-ease-out);
}
.frame-type-atomicplan_lrfeaturegrid .lr-fg-item:hover .lr-fg-media img { transform: scale(1.05); }

/* Sobald IRGENDEINE Zelle des Rasters ein Bild hat, haengt der Textblock aller
   Zellen am Zellenboden — sonst stuenden in einer gemischten Reihe die Titel auf
   drei verschiedenen Hoehen. Raster ganz ohne Bild bleiben unveraendert
   (Text oben), deshalb die :has()-Bedingung statt einer pauschalen Regel. */
.frame-type-atomicplan_lrfeaturegrid .lr-fg-grid:has(.lr-fg-media) .lr-fg-item {
    display: flex;
    flex-direction: column;
}
.frame-type-atomicplan_lrfeaturegrid .lr-fg-grid:has(.lr-fg-media) .lr-fg-idx { margin-top: auto; }
.frame-type-atomicplan_lrfeaturegrid .lr-fg-item:hover { background: var(--lr-ivory-deep); }
.frame-type-atomicplan_lrfeaturegrid .lr-fg-grid.cols-3 .lr-fg-item:nth-child(3n) { border-right: 0; }
.frame-type-atomicplan_lrfeaturegrid .lr-fg-grid.cols-2 .lr-fg-item:nth-child(2n) { border-right: 0; }

/* Roemischer Index automatisch via CSS-Counter (i, ii, iii …). */
.frame-type-atomicplan_lrfeaturegrid .lr-fg-idx {
    font-family: var(--lr-font-display);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--lr-bronze-deep);
    margin-bottom: 1.2rem;
}
.frame-type-atomicplan_lrfeaturegrid .lr-fg-idx::before { content: counter(lrfg, lower-roman); }

.frame-type-atomicplan_lrfeaturegrid .lr-fg-item h3 { margin-bottom: 0.7rem; }
.frame-type-atomicplan_lrfeaturegrid .lr-fg-item p { font-size: 0.95rem; color: var(--lr-ink-soft); margin: 0; }

/* ---- Optik auf forest/dark: borderless pillars mit Ober-Linie ---- */
.frame-type-atomicplan_lrfeaturegrid.frame-background-forest .lr-fg-grid,
.frame-type-atomicplan_lrfeaturegrid.frame-background-dark .lr-fg-grid,
.frame-type-atomicplan_lrfeaturegrid.-colorized .lr-fg-grid {
    border: 0;
    border-top: 1px solid var(--lr-line-on-dark);
}
.frame-type-atomicplan_lrfeaturegrid.frame-background-forest .lr-fg-item,
.frame-type-atomicplan_lrfeaturegrid.frame-background-dark .lr-fg-item,
.frame-type-atomicplan_lrfeaturegrid.-colorized .lr-fg-item {
    border-right-color: var(--lr-line-on-dark);
    border-bottom-color: var(--lr-line-on-dark);
}
.frame-type-atomicplan_lrfeaturegrid.frame-background-forest .lr-fg-item:hover,
.frame-type-atomicplan_lrfeaturegrid.frame-background-dark .lr-fg-item:hover,
.frame-type-atomicplan_lrfeaturegrid.-colorized .lr-fg-item:hover { background: rgba(243, 239, 237, 0.04); }
.frame-type-atomicplan_lrfeaturegrid.frame-background-forest .lr-fg-item p,
.frame-type-atomicplan_lrfeaturegrid.frame-background-dark .lr-fg-item p,
.frame-type-atomicplan_lrfeaturegrid.-colorized .lr-fg-item p { color: var(--lr-on-dark-soft); }

/* Der roemische Index traegt einen Akzent-Token, der fuer HELLE Flaechen
   abgestimmt ist (--lr-bronze-deep). Auf dunklem Grund ergab das 2,92:1 —
   waehrend Ueberschriften und Fliesstext daneben bei 10,58:1 lagen; genau das
   sah aus wie „nicht alle Texte invertieren".
   Das Theme remappt die Index-Ziffern der plate_*-Generika (.plp-row__num,
   .plp-card__idx, …) fuer dunkle Frames laengst auf --lr-stone (theme.css,
   Abschnitt „Overrides fuer Generika") — der EIGENE Index des Themes fehlte in
   dieser Liste. Hier nachgezogen, mit demselben Ton. */
.frame-type-atomicplan_lrfeaturegrid.frame-background-forest .lr-fg-idx,
.frame-type-atomicplan_lrfeaturegrid.frame-background-dark .lr-fg-idx,
.frame-type-atomicplan_lrfeaturegrid.-colorized .lr-fg-idx { color: var(--lr-stone); }

/* ---- Responsive ---- */
@media (max-width: 820px) {
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-grid,
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-item:nth-child(2n) { border-right: 0; }
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-grid.cols-3 .lr-fg-item:nth-child(3n) { border-right: 1px solid var(--lr-line); }
}
@media (max-width: 520px) {
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-grid,
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-grid.cols-3 { grid-template-columns: 1fr; }
    .frame-type-atomicplan_lrfeaturegrid .lr-fg-item { border-right: 0 !important; }
}