/* =============================================================================
   Leistungen — Raster aus Service-Kacheln mit runden Icons (ACF: acf/leistungen)
   -----------------------------------------------------------------------------
   @scope kapselt auf .leistungen. Jede Kachel: rundes Icon im weissen Kreis mit
   weicher Schattierung, darunter ein Label in Grossbuchstaben.
   ========================================================================== */

@scope (.leistungen) {
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap) var(--grid-gap);
    row-gap: 2.5rem;
    /* Listen-Reset + Abstand zum Text darueber */
    margin: 0;
    margin-block-start: 3.5rem;
    padding: 0;
    list-style: none;
  }

  .item {
    /* min-inline-size:0 verhindert, dass lange Labels die 1fr-Spalten
       aufweiten — sonst werden die Kreise unterschiedlich gross. */
    min-inline-size: 0;
    margin: 0;
    text-align: center;
    list-style: none;
  }

  .circle {
    inline-size: 78%;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* Kreisfarbe folgt dem Sektions-Hintergrund (kontrastiert immer): auf
       blauem Grund weiss, auf weissem Grund hellblau. Default weiss. */
    background: var(--circle-bg, var(--color-white));
    box-shadow: var(--shadow-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  /* Kontrast-Spiegelung je Hintergrund (vgl. section_background_class()). */
  :scope.section-white {
    --circle-bg: var(--color-blue-light);
  }

  :scope.section-blue {
    --circle-bg: var(--color-white);
  }

  /* Icon einheitlich auf 55% des Kreises, unabhaengig vom PNG-Seitenverhaeltnis. */
  .circle img {
    inline-size: 55%;
    block-size: 55%;
    object-fit: contain;
  }

  .item p,
  .item-name {
    display: block;
    /* 35px oben, 20px seitlich, luftige Zeile */
    margin-block-start: 2rem;
    margin-inline: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-transform: uppercase;
    /* lange Komposita sauber trennen (nutzt ­ im Markup, sonst automatisch) */
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Klickbare Leistung: Button ohne eigene Optik. */
  .item-toggle {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }

  .is-clickable .item-toggle:hover .item-name,
  .is-clickable .item-toggle:focus-visible .item-name {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Auf schmalen Viewports zwei Kacheln pro Reihe. */
  @media (width <= 767px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* -----------------------------------------------------------------------------
       Umbruch der Labels ohne automatische Silbentrennung
       -----------------------------------------------------------------------------
       Bei zwei Spalten bleiben pro Label nur ~114px. Mit `hyphens: auto` (oben)
       trennt der Browser dann selbsttaetig mitten im Wort — gemessen wurde
       "WURZELKA-NAL-BEHANDLUNG" ueber drei Zeilen. Gewuenscht ist stattdessen,
       dass nie automatisch getrennt wird (hyphens: manual, overflow-wrap: normal)
       und nur an Bindestrichen und Leerzeichen umbricht: "WURZELKANAL-BEHANDLUNG"
       auf zwei Zeilen.

       Die Automatik ist hier auch nicht durch Redaktion ersetzbar: die Titel kommen
       per esc_html() aus ACF, ein &shy; wuerde als sichtbarer Text ausgegeben. Statt
       Trennstellen zu pflegen, bekommen die Labels also mehr Breite (seitlicher
       Rand 20px -> 8px, das sind +24px) und die Trennung wird abgeschaltet. Damit
       passt auch "KINDERBEHANDLUNG" wieder in EINE Zeile. */
    .item p,
    .item-name {
      margin-inline: 0.5rem;
      hyphens: manual;
      overflow-wrap: normal;
    }
  }
}