/* =============================================================================
 * atomicplan/icon-feature-grid — Block-CSS
 *
 * Regeln (Harte Regel Workspace-CLAUDE.md / Skill css):
 *  - komplett gescoped auf `.frame-type-atomicplan_iconfeaturegrid`
 *  - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE Container-Breite
 *    (das macht ausschliesslich das Frame-System: background_color_class,
 *     space_*, frame_layout_inner_*, .frame-container)
 *  - keine Heading-Typografie (font-family/-size/-weight an h1..h6) — die kommt
 *    aus den Site-Settings des Themes
 *  - Farben ausschliesslich ueber Bootstrap-Tokens (--bs-*), damit die
 *    Frame-Invert-Logik (`.frame.-colorized`) automatisch greift
 * ========================================================================== */

.frame-type-atomicplan_iconfeaturegrid {

  /* Block-lokale Slots — auf dem Frame deklariert, damit ein Theme-Remap in
     `.frame.-colorized` sie erreicht (`:root`-Aliase wuerden einfrieren). */
  --pl-ifg-cols: 3;
  --pl-ifg-gap: 2rem;
  --pl-ifg-line: color-mix(in srgb, var(--bs-body-color, #333) 16%, transparent);
  --pl-ifg-muted: color-mix(in srgb, var(--bs-body-color, #333) 72%, transparent);
  --pl-ifg-accent: var(--bs-primary, #0d6efd);
  --pl-ifg-card-bg: color-mix(in srgb, var(--bs-body-color, #333) 4%, transparent);

  .pl-ifg__intro {
    /* Reine Text-Zeilenlaenge innerhalb der Sektion — KEIN Sektions-Container. */
    max-width: 60rem;
    margin-block: 0 var(--pl-ifg-gap);
  }
  .pl-ifg__intro > *:last-child { margin-bottom: 0; }

  .pl-ifg__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--pl-ifg-gap);
    grid-template-columns: 1fr;
    counter-reset: pl-ifg-step;
  }

  .pl-ifg__item {
    counter-increment: pl-ifg-step;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
  }

  .pl-ifg__icon {
    display: inline-flex;
    color: var(--bs-icon-color, currentColor);
  }
  /* Das Partial `Atoms/Icon` rendert <figure><div class="mask-svg">. Die Flaeche
     traegt die Farbe (mask-Technik) — deshalb background-color, nicht color. */
  .pl-ifg__icon .mask-svg {
    background-color: var(--bs-icon-color, currentColor);
  }

  .pl-ifg__tag {
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-ifg-accent);
  }
  /* Ohne gepflegtes Tag bleibt der Marker in `cards`/`plain` unsichtbar. */
  .pl-ifg__tag.-auto { display: none; }

  .pl-ifg__title { margin: 0; }

  .pl-ifg__text {
    margin: 0;
    color: var(--pl-ifg-muted);
  }

  /* Ganze Karte klickbar, ohne den Link aus dem Titel zu loesen. */
  .pl-ifg__link { text-decoration: none; color: inherit; }
  .pl-ifg__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .pl-ifg__item.-linked { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .pl-ifg__item.-linked:hover .pl-ifg__title { color: var(--pl-ifg-accent); }

  /* ---- Variante: cards -------------------------------------------------- */
  .pl-ifg.-cards .pl-ifg__item {
    /* Karten-Innenpolster ist Komponenten-CSS (echte Karte), NICHT Sektions-Padding. */
    padding: 1.75rem;
    border: 1px solid var(--pl-ifg-line);
    background: var(--pl-ifg-card-bg);
  }
  .pl-ifg.-cards .pl-ifg__item.-linked:hover {
    box-shadow: 0 0.75rem 2rem -1rem rgb(0 0 0 / 35%);
  }

  /* ---- Variante: plain -------------------------------------------------- */
  /* nur Raster, keine Flaeche — Default-Regeln oben genuegen */

  /* ---- Variante: steps (nummeriert 1–n) --------------------------------- */
  .pl-ifg.-steps .pl-ifg__item {
    padding-top: 1rem;
    border-top: 2px solid var(--pl-ifg-line);
  }
  .pl-ifg.-steps .pl-ifg__tag.-auto {
    display: block;
    /* Nummer per CSS-Counter statt Inline-Mathematik in Fluid. */
    font-variant-numeric: tabular-nums;
  }
  .pl-ifg.-steps .pl-ifg__tag.-auto::before {
    content: counter(pl-ifg-step, decimal-leading-zero);
  }
  .pl-ifg.-steps .pl-ifg__tag {
    order: -1;
    font-size: 1rem;
    letter-spacing: 0.08em;
  }

  /* ---- Responsives Raster ----------------------------------------------- */
  @media (min-width: 576px) {
    .pl-ifg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 992px) {
    .pl-ifg__grid {
      grid-template-columns: repeat(var(--pl-ifg-cols), minmax(0, 1fr));
    }
  }
}