/**
 * KW Stop-Motion-Card Block-Styles
 *
 * WAS:    Card mit Stop-Motion-Animation oben + Text unten.
 *         Bild rendert in seinem natürlichen Aspect-Ratio (kein fester
 *         Container-Aspect mehr). Folgende Frames lagern sich absolute auf
 *         dem ersten Frame (Animation overlap) — somit ist die Höhe vom
 *         echten Bild bestimmt, kein Letterboxing, kein Cropping.
 * WARUM:  1 Block = 1 Look. Vorher gab's page-id-Hacks (cover) gegen den
 *         globalen contain-Default — beim Page-Duplizieren brach das.
 *         Bild groß, einfach abbilden — Gregor 2026-06-02.
 *
 * FELDER: keine — pure CSS.
 * WPML:   neutral.
 */

/* Card-Layout in flex-Columns: gleiche Höhe + voll-breit. */
.wp-block-columns > .wp-block-column > .kw-stop-motion-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Container OHNE festes Aspect-Ratio — erstes Frame bestimmt die Höhe. */
.kw-stop-motion-card__image .kw-stop-motion {
    aspect-ratio: auto !important;
    height: auto;
}

/* Erstes Frame: relativ positioniert + natürliche Höhe → definiert Container. */
.kw-stop-motion-card__image .kw-stop-motion > picture:first-of-type,
.kw-stop-motion-card__image .kw-stop-motion > img.kw-stop-motion__frame:first-of-type {
    position: relative !important;
    width: 100%;
    height: auto;
    display: block;
}
.kw-stop-motion-card__image .kw-stop-motion > picture:first-of-type > img {
    position: static !important;
    width: 100%;
    height: auto;
    object-fit: unset !important;
    display: block;
}

/* Folgende Frames: absolute übereinander, fitten auf 1.-Frame-Box. */
.kw-stop-motion-card__image .kw-stop-motion > picture:not(:first-of-type),
.kw-stop-motion-card__image .kw-stop-motion > img.kw-stop-motion__frame:not(:first-of-type) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.kw-stop-motion-card__image .kw-stop-motion > picture:not(:first-of-type) > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}