/****************************************************************************
 * TEMPLATE: Galerie  (typo_cpt_content-gallery.php)
 *
 * INFO: Horizontaler Bilderstreifen. Die Items teilen sich per Flexbox
 *       gleichmäßig auf die tatsächliche Bildanzahl auf (1-5 Stück).
 *       Bei Mouseover wächst das aktive Bild auf ein Quadrat, die
 *       übrigen schrumpfen entsprechend.
 *
 * HTML: .gallery_wrapper
 *          > .gallery_expand.gallery_expand--count-N
 *              > .gallery_expand__item
 *                  > a.figure.swipebox > img
 ****************************************************************************/

.gallery_expand {
    /* Höhe des Streifens = Kantenlänge des aufgehenden Quadrats */
    --gallery-expand-size: clamp(18rem, 40vw, 32rem);
    --gallery-expand-gap: 0.625rem;

    display: flex;
    flex-flow: row nowrap;
    gap: var(--gallery-expand-gap);
    width: 100%;
    height: var(--gallery-expand-size);
    overflow: hidden;
}

.gallery_expand__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 0.25rem;
    transition: flex-grow 0.45s ease, flex-basis 0.45s ease;
}

.gallery_expand__item .figure,
.gallery_expand__item > img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.gallery_expand__item .figure img,
.gallery_expand__item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

/****************************************************************************
 * Hover: aktives Bild -> Quadrat, Rest schrumpft
 ****************************************************************************/
@media (hover: hover) and (min-width: 40em) {
    .gallery_expand:hover .gallery_expand__item {
        flex-grow: 0.35;
    }
    .gallery_expand:hover .gallery_expand__item:hover:not(:only-child) {
        flex: 0 0 var(--gallery-expand-size);
    }
    .gallery_expand:hover .gallery_expand__item:hover .figure img,
    .gallery_expand:hover .gallery_expand__item:hover > img {
        transform: scale(1.03);
    }
}

/****************************************************************************
 * Mobil: gleichmäßiges Raster statt Streifen
 ****************************************************************************/
@media (max-width: 39.9375em) {
    .gallery_expand {
        flex-flow: row wrap;
        height: auto;
    }
    .gallery_expand__item {
        flex: 1 1 calc(50% - var(--gallery-expand-gap));
        height: 0;
        padding-bottom: calc(50% - var(--gallery-expand-gap));
    }
    .gallery_expand--count-1 .gallery_expand__item {
        flex-basis: 100%;
        padding-bottom: 75%;
    }
    .gallery_expand__item .figure,
    .gallery_expand__item > img {
        position: absolute;
        top: 0;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery_expand__item,
    .gallery_expand__item .figure img,
    .gallery_expand__item > img {
        transition: none;
    }
}