/* ==========================================================================
   Block: info_slider — beliebig viele gleichwertige Info-Spalten mit Icon.
   Varianten: columns (2|3|4, bei weniger Einträgen automatisch 1|2|3) × theme (default|alt|primary|secondary) × divider

   Diese Datei wird von site/snippets/styles.php als eigenes <link> geladen,
   OHNE Layer-Zuweisung — deshalb deklariert sie @layer blocks selbst.
   Die Reihenfolge der Layer steht in base.css.

   .info-slider__inner ist in 04-layout.css NICHT in der Container-Liste
   enthalten (anders als .text__inner, .card__inner, .text-media__inner) —
   die Datei darf nicht angefasst werden, deshalb übernimmt dieser Block
   Container-Maß und Gutter selbst.
   ========================================================================== */

@layer blocks {
  .info-slider__inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Optionale Block-Überschrift. Größe aus 03-elements.css (level);
     __title statt __headline, weil __headline schon die Spalten trägt. */
  .info-slider__title {
    text-align: center;
    margin-block-end: var(--space-l);
  }

  .info-slider__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* --- Mobile-First: horizontaler Scroller, kein Grid, kein JS ----------
     Karten min-inline-size 80% laut docs/blocks.md. scroll-snap-align auf
     dem Item macht jede Karte zum Rastpunkt. */
  .info-slider__list {
    display: flex;
    gap: var(--space-l);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter);
  }

  @media (prefers-reduced-motion: reduce) {
    .info-slider__list {
      scroll-behavior: auto;
    }
  }

  /* Fix Welle 5 (K2): .info-slider__list trägt jetzt tabindex="0" (siehe
     Snippet), ist als <ul> aber von der globalen :focus-visible-Regel in
     04-layout.css nicht erfasst (die gilt nur für a/button/input/select/
     textarea/summary) — ohne eigene Regel bliebe der Tab-Stopp unsichtbar. */
  .info-slider__list:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  /* flex-basis 80% statt „flex: none“: ein Flex-Item ohne Basis wird
     max-content breit. Die längste Überschrift zog die Karte dadurch auf
     448px (gemessen bei 390px Viewport) — breiter als der Viewport, die
     nächste Karte lugte nicht mehr hervor und der Text brach am Rand ab.
     0 0 80% setzt die geforderten 80% fest, ohne Wachsen und Schrumpfen. */
  .info-slider__item {
    flex: 0 0 80%;
    min-inline-size: 80%;
    scroll-snap-align: start;
  }

  /* Ein einzelner Eintrag hat nichts, was hervorlugen müsste — volle Breite. */
  .info-slider--columns-1 .info-slider__item {
    flex-basis: 100%;
  }

  /* --- Ab Tablet (768px): Grid statt Scroller ---------------------------
     docs/blocks.md nennt für info_slider einen einzigen Breakpoint für
     ALLE Spaltenzahlen (2/3/4) — nicht die allgemeine 64rem-Schwelle für
     drei-/vierspaltige Raster. */
  @media (min-width: 48rem) {
    .info-slider__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-2xl);
      align-items: start;
      overflow-x: visible;
      scroll-snap-type: none;
    }

    /* die ganze Variante — je eine Zeile */
    .info-slider--columns-1 .info-slider__list { grid-template-columns: 1fr; }
    .info-slider--columns-2 .info-slider__list { grid-template-columns: repeat(2, 1fr); }
    .info-slider--columns-4 .info-slider__list { grid-template-columns: repeat(4, 1fr); }

    .info-slider__item {
      min-inline-size: 0;
      scroll-snap-align: none;
    }

    /* Trennlinie nur im Grid — in der Scroll-Ansicht bewusst ausgeblendet,
       weil die Regel außerhalb dieser Media Query nicht existiert.
       Beliebig viele Items: das Grid bricht in weitere Reihen um, deshalb
       bekommt nicht nur das erste Item, sondern das erste jeder Reihe keine
       Linie — je Spaltenzahl ein Selektor (3 = Default). */
    .info-slider--divider:not(.info-slider--columns-1, .info-slider--columns-2, .info-slider--columns-4) .info-slider__item:not(:nth-child(3n + 1)),
    .info-slider--divider.info-slider--columns-2 .info-slider__item:nth-child(even),
    .info-slider--divider.info-slider--columns-4 .info-slider__item:not(:nth-child(4n + 1)) {
      border-inline-start: var(--border-hairline) solid var(--color-border);
      padding-inline-start: var(--space-l);
    }
  }

  /* --- Icon --------------------------------------------------------------
     40px laut docs/blocks.md. Inline-SVG über snippet('svg') übernimmt
     currentColor — deshalb hier nur color setzen, keine eigene Füllfarbe. */
  .info-slider__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-end: var(--space-m);
    color: var(--color-on-surface);
  }

  .info-slider__icon svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  /* --- Typografie ----------------------------------------------------
     Fix Welle 5 (K1): Element ist <h3> (Heading-Hierarchie h2→h3, vorher
     fälschlich <h4> ohne level-Feld — Skip h2→h4). Die 28px/LH 32px-Stufe
     bleibt aber die gewünschte Größe (Design nennt sie „H4", das ist der
     Größen-Name, kein Element-Level) — deshalb hier explizit --text-h4/
     --leading-h4 statt der --text-h3-Größe, die <h3> aus 03-elements.css
     mitbringen würde. */
  .info-slider__headline {
    font-size: var(--text-lead);
    line-height: var(--leading-h4);
    margin-block-end: var(--space-s);
  }

  .info-slider__text > * + * {
    margin-block-start: var(--paragraph-gap);
  }

  /* Listen im Fließtext bekommen ihre Marker zurück (02-reset.css nimmt sie
     global weg, 03-elements.css stellt sie nur für .text__body, .card__text
     und .site-footer__address wieder her — dort nichts ändern). */
  .info-slider__text :where(ul, ol) {
    list-style: revert;
    padding-inline-start: var(--space-m);
  }

  .info-slider__text a {
    color: var(--color-link-on-surface, currentcolor);
  }
}