/* ====================================================================== *
 * Ausgeglichene Kartenraster am Desktop
 * Raster mit zehn oder neun Einträgen ließen am Desktop eine einzelne Karte
 * in der letzten Reihe stehen. Die Regeln hier verteilen die Karten so, dass
 * jede Reihe voll ist. Handy und Tablet bleiben unverändert. Nutzt
 * ausschließlich die Tokens aus tailwind/input.css (@theme).
 * ====================================================================== */

/* ---------- Dreierraster: erste Karte als breiter Auftakt --------------- */
/* Bleibt bei drei Spalten eine Karte übrig (4, 7, 10 … Einträge), steht
   die erste Karte über die volle Breite. Ihr Bild nimmt genau eine Spalte
   ein, der Text die beiden übrigen; darunter folgen volle Dreierreihen. */
@media (min-width: 1120px) {
  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child) {
    --grid-gap: 1.75rem;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: calc((100% - 2 * var(--grid-gap)) / 3) minmax(0, 1fr);
  }

  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child) > .card__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child) > .card__body {
    grid-column: 2;
    justify-content: center;
    padding-inline: clamp(2rem, 0.5rem + 2.6vw, 3.25rem);
  }

  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child) .card__title {
    font-size: var(--text-fluid-xl);
    max-width: 30ch;
  }

  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child) .card__text {
    max-width: 62ch;
    font-size: var(--text-fluid-base);
  }

  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child) .card__body > .card__foot {
    margin-top: 0;
  }

  /* Karte ohne Bild (Fachkapitel): Die Themenliste läuft in drei Spalten. */
  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child):not(:has(> .card__media)) {
    display: flex;
  }

  .product-grid--3 > .card:first-child:nth-last-child(3n + 1):not(:only-child):not(:has(> .card__media)) .topic-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

/* ---------- Anlässe: vier Spalten, volle Schlussreihe ------------------- */
/* Zwischen Tablet und Laptop zwei breite Spalten; ab 1200 px vier Kacheln
   je Reihe mit dem Symbol über dem Text. Bleiben in der letzten Reihe zwei
   Kacheln, teilen sie sich die volle Breite. */
@media (min-width: 1080px) and (max-width: 1199.98px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .case-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-grid > .case-card {
    flex-direction: column;
  }

  .case-grid .case-card__body {
    flex: 1;
  }

  /* Bricht ein langer Bereichsname um, folgt der Pfeil dem letzten Wort. */
  .case-grid .case-card__target {
    display: block;
    margin-top: auto;
    padding-top: 0.6rem;
    line-height: 1.45;
  }

  .case-grid .case-card__target svg {
    display: inline-block;
    margin-left: 0.4rem;
    vertical-align: -0.15em;
  }

  .case-grid > .case-card:nth-child(4n + 1):nth-last-child(2),
  .case-grid > .case-card:nth-child(4n + 2):last-child {
    grid-column: span 2;
  }

  .case-grid > .case-card:nth-child(4n + 1):nth-last-child(2),
  .case-grid > .case-card:nth-child(4n + 2):last-child {
    flex-direction: row;
  }

  /* Bleibt eine Kachel allein, steht sie über die volle Breite. */
  .case-grid > .case-card:nth-child(4n + 1):last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

/* ---------- Bundesländer: drei mal drei --------------------------------- */
@media (min-width: 1024px) {
  .region-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}