/* =====================================================
   WORDPRESS-GALERIE
   FDP ANHALT-BITTERFELD

   Verwendung:
   Im Gutenberg-Editor einfach den normalen
   WordPress-Block "Gallery" einfügen.

   Im Frontend wird daraus automatisch ein Slider.
===================================================== */


/* =====================================================
   WRAPPER
===================================================== */

.fdp-gallery {
    position: relative;

    width: 100%;

    min-width: 0;

    margin:
        36px
        0
        44px;

    font-family:
        "Public Sans",
        Arial,
        sans-serif;
}


/* =====================================================
   GALERIE ALS SLIDER-TRACK
===================================================== */

.fdp-gallery
.wp-block-gallery {
    display: flex !important;

    box-sizing: border-box;

    width: 100% !important;
    max-width: 100% !important;

    flex-wrap: nowrap !important;

    align-items: stretch !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-inline:
        contain;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
        touch;
}


.fdp-gallery
.wp-block-gallery::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   EINZELNES GALERIEBILD
===================================================== */

.fdp-gallery
.wp-block-gallery.has-nested-images
> figure.wp-block-image,
.fdp-gallery
.wp-block-gallery
> figure.wp-block-image,
.fdp-gallery
.wp-block-gallery
> .wp-block-image {
    position: relative;

    display: flex !important;

    box-sizing: border-box;

    width: 100% !important;
    max-width: none !important;

    flex:
        0
        0
        100% !important;

    flex-direction: column;

    align-items: stretch !important;

    justify-content: flex-start;

    margin: 0 !important;
    padding: 0 !important;

    scroll-snap-align: start;

    scroll-snap-stop: always;
}


/* =====================================================
   BILDFLÄCHE
===================================================== */

.fdp-gallery
.wp-block-gallery
> figure.wp-block-image
> a {
    display: block;

    width: 100%;

    overflow: hidden;

    border-radius: 18px;
}


.fdp-gallery
.wp-block-gallery
> figure.wp-block-image
> img,
.fdp-gallery
.wp-block-gallery
> figure.wp-block-image
> a
> img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;

    aspect-ratio: 16 / 9;

    margin: 0 !important;

    border-radius: 18px;

    object-fit: cover;

    object-position: center;
}


/* =====================================================
   BILDUNTERSCHRIFT
===================================================== */

.fdp-gallery
.wp-block-gallery
figure.wp-block-image
figcaption,
.fdp-gallery
.wp-block-gallery
.wp-block-image
figcaption {
    position: static !important;

    display: block;

    width: 100% !important;

    margin:
        10px
        0
        0 !important;

    padding:
        0
        3px !important;

    background: transparent !important;

    color: #505861 !important;

    font-family:
        "Public Sans",
        Arial,
        sans-serif;

    font-size: 0.8rem;

    font-weight: 500;

    line-height: 1.5;

    text-align: left !important;
}


/* =====================================================
   STEUERUNG

   Die Pfeile sitzen bewusst unten rechts im Bild
   und nicht mehr mittig.
===================================================== */

.fdp-gallery__controls {
    position: absolute;

    z-index: 8;

    right: 16px;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    pointer-events: none;
}


/* =====================================================
   PFEIL-BUTTON
===================================================== */

.fdp-gallery__button {
    display: inline-flex;

    box-sizing: border-box;

    width: 46px;
    height: 46px;

    flex:
        0
        0
        46px;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(
            3,
            45,
            103,
            0.10
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color: var(--fdp-blue);

    box-shadow:
        0
        4px
        18px
        rgba(
            3,
            45,
            103,
            0.13
        );

    cursor: pointer;

    pointer-events: auto;

    transition:
        background var(--transition),
        color var(--transition),
        opacity var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


/* =====================================================
   SVG
===================================================== */

.fdp-gallery__button svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =====================================================
   HOVER
===================================================== */

@media (hover: hover) and (pointer: fine) {

    .fdp-gallery__button:not(:disabled):hover {
        background: var(--fdp-blue);

        color: var(--fdp-white);

        transform:
            translateY(-1px);

        box-shadow:
            0
            7px
            22px
            rgba(
                3,
                45,
                103,
                0.18
            );
    }

}


/* =====================================================
   DEAKTIVIERTER PFEIL
===================================================== */

.fdp-gallery__button:disabled {
    border-color:
        rgba(
            3,
            45,
            103,
            0.06
        );

    background:
        rgba(
            238,
            240,
            242,
            0.90
        );

    color:
        rgba(
            3,
            45,
            103,
            0.45
        );

    box-shadow: none;

    cursor: default;

    opacity: 0.9;
}


/* =====================================================
   FOCUS
===================================================== */

.fdp-gallery__button:focus-visible {
    outline:
        3px solid
        rgba(
            0,
            167,
            231,
            0.42
        );

    outline-offset: 3px;
}


/* =====================================================
   NUR EIN BILD
===================================================== */

.fdp-gallery.is-single
.fdp-gallery__controls {
    display: none;
}


/* =====================================================
   VISUELL VERSTECKTER STATUS
===================================================== */

.fdp-gallery__status {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   SMARTPHONE
===================================================== */

@media (max-width: 767px) {

    .fdp-gallery {
        margin:
            30px
            0
            38px;
    }


    .fdp-gallery
    .wp-block-gallery
    > figure.wp-block-image
    > a {
        border-radius: 14px;
    }


    .fdp-gallery
    .wp-block-gallery
    > figure.wp-block-image
    > img,
    .fdp-gallery
    .wp-block-gallery
    > figure.wp-block-image
    > a
    > img {
        aspect-ratio: 16 / 9;

        border-radius: 14px;
    }


    /* Pfeile unten rechts */

    .fdp-gallery__controls {
        right: 10px;
        bottom: 12px;

        gap: 8px;
    }


    .fdp-gallery__button {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .fdp-gallery__button svg {
        width: 19px;
        height: 19px;
    }


    .fdp-gallery
    .wp-block-gallery
    figure.wp-block-image
    figcaption {
        margin-top: 8px !important;

        font-size: 0.76rem;
    }

}


/* =====================================================
   KLEINE SMARTPHONES
===================================================== */

@media (max-width: 440px) {

    .fdp-gallery__controls {
        right: 8px;
        bottom: 10px;

        gap: 7px;
    }


    .fdp-gallery__button {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .fdp-gallery__button svg {
        width: 18px;
        height: 18px;
    }

}