/* Block: Bildreihe
   ------------------------------------------------------------------
   Drei Bilder über die volle Inhaltsbreite – so im Entwurf der Dion-Seite.
   Abstand 16 px wie im übrigen Raster.

   Mobil stehen sie seit 2.9.0 untereinander (Figma-Stand 2026-09-16).
   ------------------------------------------------------------------ */

.block-image-row {
    background-color: var(--color-white);
}

/* Abstand zwischen den Bildern – User aus Figma, 2026-09-16:
   Desktop 8 · Tablet 16 · Mobil 8.
   ⚠️ `.row.` davor ist Pflicht: base.css setzt mit `.row:not([class*="g-"])`
   (höhere Spezifität) den Rastergutter – auf Desktop kamen sonst 24 an. */
.row.image-row-row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

@media (min-width: 1200px) {
    .row.image-row-row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }
}

.image-row-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

/* ── Ecken (seit 2.9.0, Figma-Stand 2026-09-16) ─────────────────────────────
   Nicht jedes Bild ist gerundet: Nur die beiden äußeren Bilder tragen EINE
   runde Ecke mit 32px, das mittlere ist eckig. Welche Ecke, hängt an der
   Breite – so steht es in Dion_Serie.png und Dion_Serie_Mobile.png:
     Desktop  erstes unten links · letztes oben rechts
     Mobil    erstes oben rechts · letztes unten links
   Bis 2.8.0 hatten alle Bilder ringsum 8px. */
.image-row-col:first-child .image-row-img {
    border-bottom-left-radius: 32px;
}

.image-row-col:last-child .image-row-img {
    border-top-right-radius: 32px;
}

/* Mobil: untereinander, 342 × 241, 8px Abstand (User aus Figma, 2026-09-16).
   Vorher zwei nebeneinander. */
@media (max-width: 767.98px) {
    .row.image-row-row {
        --bs-gutter-y: 8px;
    }

    .block-image-row .image-row-col {
        width: 100%;
    }

    .image-row-img {
        aspect-ratio: 342 / 241;
    }

    .image-row-col:first-child .image-row-img {
        border-bottom-left-radius: 0;
        border-top-right-radius: 32px;
    }

    .image-row-col:last-child .image-row-img {
        border-top-right-radius: 0;
        border-bottom-left-radius: 32px;
    }
}