/* ============================================================
   Personenraster

   Masse aus Prototyp.dc.html Zeile 2117.

   Zwei Formen im selben Markup: Bis vier Personen ein Raster, ab fuenf ein
   Slider. Die Huelle .ps-team__spur ist im Raster `display: contents` und
   damit unsichtbar fuers Layout — die Karten sind dann direkte Rasterfelder
   von .ps-team. Im Slider wird dieselbe Huelle zum Scrollbereich.
   ============================================================ */

.ps-team {
  --ps-team-min: 260px;
  --ps-team-gap: var(--space-6);

  margin-block: 0;
}

.ps-team--abstand-eng  { --ps-team-gap: var(--space-5); }
.ps-team--abstand-weit { --ps-team-gap: var(--space-7); }

/* ---------- Raster ----------

   Auf schmalen Geraeten laesst `auto-fit` die Portraits von selbst
   untereinander rutschen — bei drei Personen ist genau das richtig.
*/

.ps-team--raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ps-team-min), 100%), 1fr));
  gap: var(--ps-team-gap);
}

.ps-team--raster .ps-team__spur { display: contents; }

/* ---------- Slider ----------

   Gescrollt wird nativ mit `scroll-snap` statt mit JavaScript: Auf dem
   Telefon gibt es damit Wischen samt Schwung und ohne eine Zeile Code, und
   ohne JavaScript bleibt der Bereich benutzbar. Die Pfeile kommen obendrauf
   und blenden sich selbst ein — sie sind fuer Maus und Tastatur da, nicht
   fuer den Daumen.
*/

.ps-team--slider {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ps-team--slider .ps-team__spur {
  display: flex;
  gap: var(--ps-team-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;

  /* Die Leiste stoert das Bild und wird von den Pfeilen ersetzt. */
  scrollbar-width: none;
}

.ps-team--slider .ps-team__spur::-webkit-scrollbar { display: none; }

.ps-team--slider .ps-team__spur:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.ps-team--slider .ps-person {
  flex: 0 0 clamp(220px, 30%, 340px);
  scroll-snap-align: start;
}

/* ---------- Feste Anzahl nebeneinander ----------

   Statt "so viele wie passen" eine Zahl: drei oder vier. Die Portraits
   werden dann schmaler, statt umzubrechen.

   Der Kniff steckt im `max()`. Die Wunschbreite ist die Spur minus die
   Luecken, geteilt durch die Anzahl — sie schrumpft mit dem Fenster. Faellt
   sie unter die Untergrenze, gewinnt diese, und es passt eine Karte
   weniger nebeneinander.

   Das ersetzt Haltepunkte: Von vier auf drei auf zwei geht es dort, wo es
   eng wird, und nicht bei einer runden Zahl, die mit dem Inhalt nichts zu
   tun hat. Ohne das Ganze sprang die Darstellung von zwei direkt auf vier.
*/

.ps-team[data-team-spalten] {
  --ps-team-eng: 220px;
  --ps-team-wunsch: calc(
    (100% - (var(--ps-team-spalten, 3) - 1) * var(--ps-team-gap))
    / var(--ps-team-spalten, 3)
  );
}

.ps-team--raster[data-team-spalten] {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(max(var(--ps-team-eng), var(--ps-team-wunsch)), 100%), 1fr)
  );
}

@media (min-width: 601px) {
  .ps-team--slider[data-team-spalten] .ps-person {
    flex-basis: max(var(--ps-team-eng), var(--ps-team-wunsch));
  }
}

/* ---------- Die Pfeile ----------

   Mittig an den beiden Raendern und ueber der Spur, nicht darunter: So
   liegt der Griff dort, wo geschoben wird, und die Richtung ist ohne
   Nachdenken klar. Sie sind fuer Maus und Tastatur da — auf dem Telefon
   wischt man, und dort waeren sie nur im Weg.

   Die Huelle reicht die Ausrichtung durch (`display: contents`), damit
   sich beide Knoepfe am Slider selbst orientieren und nicht an ihr.
*/

.ps-team--slider .ps-team__steuerung { display: contents; }
.ps-team--slider .ps-team__steuerung[hidden] { display: none; }

.ps-team__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-page);
  color: var(--text-strong);
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.ps-team--slider .ps-team__pfeil {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
}

.ps-team--slider [data-team-zurueck] { left: 10px; }
.ps-team--slider [data-team-vor]     { right: 10px; }

.ps-team__pfeil:hover { border-color: var(--highlight); }

/* Am Ende der Spur verschwindet der Pfeil ganz, statt blass ueber dem
   Portrait zu liegen. */
.ps-team__pfeil[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ps-team__pfeil { transition: none; }
}

/* ---------- Schmale Breiten ---------- */

@media (max-width: 600px) {
  .ps-team--slider .ps-person { flex-basis: 82%; }

  /* Auf dem Telefon wird gewischt — die Pfeile laegen nur ueber dem Bild. */
  .ps-team--slider .ps-team__steuerung { display: none; }
}

/* ---------- Im Editor ----------

   Auch im Slider bleiben alle Karten erreichbar: Ein Scrollbereich im
   Editor waere eine Falle — was ausserhalb liegt, laesst sich schlecht
   anklicken und noch schlechter finden.
*/
.editor-styles-wrapper .ps-team--slider .ps-team__spur {
  flex-wrap: wrap;
  overflow-x: visible;
}

.editor-styles-wrapper .ps-team--slider .ps-person {
  flex-basis: clamp(200px, 30%, 300px);
}

.ps-team > .block-list-appender,
.ps-team__spur > .block-list-appender { align-self: start; }