/* ==========================================================================
   Block: tag_list — zentrierte Überschrift, darunter unverlinkte Schlagworte
   als Pills untereinander, optional eine Grafik am rechten Rand.
   Varianten: theme × image (Grafik vorhanden ja/nein)

   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.

   .tag-list__inner ist in 04-layout.css NICHT in der Container-Liste
   enthalten — die Datei darf nicht angefasst werden, deshalb übernimmt
   dieser Block Container-Maß und Gutter selbst (wie info_slider).
   ========================================================================== */

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

  .tag-list__body {
    text-align: center;
  }

  /* Größe und Zeilenhöhe der Überschrift kommen aus 03-elements.css (level). */
  .tag-list__headline {
    margin-block-end: var(--space-l);
  }

  /* --- Tags ---------------------------------------------------------------
     Untereinander, jeweils so breit wie ihr Text, zentriert. Die Farbe kommt
     aus dem eigenen Theme-Modifier am <li> (siehe Snippet) — hier nur die
     semantischen Tokens, keine Farbe. */
  .tag-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
  }

  .tag-list__tag {
    background: var(--color-surface);
    color: var(--color-on-surface);
    border-radius: var(--radius-full);
    padding-block: var(--space-s);
    padding-inline: var(--space-l);
    line-height: var(--leading-small);
  }

  /* --- Grafik -------------------------------------------------------------
     Mobil und Tablet ausgeblendet (rein dekorativ). Ab Desktop drei Spalten:
     die Mitte nimmt so viel Breite, wie die Tags brauchen, die beiden
     Außenspalten teilen sich den Rest gleich — die leere linke hält
     Überschrift und Tags exakt mittig, rechts sitzt die Grafik unten. */
  .tag-list__media {
    display: none;
  }

  @media (min-width: 64rem) {
    .tag-list--image .tag-list__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
      gap: var(--space-l);
    }

    .tag-list--image .tag-list__body {
      grid-column: 2;
    }

    /* 192px Maximalbreite, schrumpft mit der Außenspalte */
    .tag-list__media {
      display: block;
      grid-column: 3;
      align-self: end;
      justify-self: end;
      inline-size: 100%;
      max-inline-size: calc(var(--space-2xl) * 3);
      translate: 0 5rem;
    }

    .tag-list__media img {
      display: block;
      inline-size: 100%;
      block-size: auto;
      max-height: 150px;
    }
  }
}