/* ============================================================
   Kartenraster

   Masse aus Prototyp.dc.html Zeile 1990.

   Das Raster gibt die Zeilen vor, die Karte klinkt sich per `subgrid` in
   genau diese Zeilen ein. Deshalb steht die Zeilenzahl hier und nicht in
   der Karte — render.php rechnet sie aus und schreibt sie als Variable an
   das Element.

   Abweichung vom Prototyp: dort steht `minmax(260px, 1fr)`. Unterschreitet
   der Bildschirm 260px zuzueglich Innenabstand, waechst das Raster damit
   ueber den Bildschirm hinaus und die Seite laesst sich seitlich ziehen.
   `min(..., 100%)` deckelt das.
   ============================================================ */

.ps-karten {
  --ps-karten-zeilen: 5;
  --ps-karten-min: 260px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ps-karten-min), 100%), 1fr));
  grid-template-rows: repeat(var(--ps-karten-zeilen), auto);
  gap: var(--space-7) var(--space-8);
  align-items: start;
  margin-block: 0;
}

.ps-karten--abstand-eng     { gap: var(--space-6); }
.ps-karten--abstand-gleich  { gap: var(--space-7); }
.ps-karten--abstand-weit    { gap: var(--space-8) var(--space-9); }

/* ---------- Varianten, die an die Karte durchgereicht werden ----------
   Sie stehen hier und nicht in blocks/karte/style.css, weil sie fuer das
   ganze Raster gelten: Eine Karte mit anderer Linienstaerke als ihre
   Nachbarn waere ein Fehler, keine Einstellung. */

.ps-karten--linie-fein .ps-karte {
  border-top-width: 1px;
  border-top-color: var(--section-line);
  padding-top: var(--space-4);
}

.ps-karten--linie-ohne .ps-karte {
  border-top: 0;
  padding-top: 0;
}

.ps-karten--zeilen-eng .ps-karte { row-gap: var(--space-4); }

.ps-karten--ohne-trennlinien .ps-karte__liste,
.ps-karten--ohne-trennlinien .ps-karte__nutzen {
  padding-top: 0;
  border-top: 0;
}

/*
   Zeilen, die in keiner einzigen Karte gefuellt sind, verschwinden ganz.
   render.php hat sie dann auch aus --ps-karten-zeilen herausgerechnet, die
   Ausrichtung der uebrigen Zeilen bleibt also erhalten.
*/
.ps-karten--ohne-kopf   .ps-karte__kopf,
.ps-karten--ohne-titel  .ps-karte__titel,
.ps-karten--ohne-text   .ps-karte__text,
.ps-karten--ohne-liste  .ps-karte__liste,
.ps-karten--ohne-nutzen .ps-karte__nutzen {
  display: none;
}

/* Nur im Editor: die Schaltflaeche zum Anhaengen einer Karte ist ein
   Rasterfeld wie jedes andere und wuerde sonst ueber die volle Hoehe
   ziehen. Auf der Website trifft der Selektor nie zu. */
.ps-karten > .block-list-appender { align-self: start; }

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

@media (max-width: 768px) {
  .ps-karten { gap: var(--space-6); }
}