/* =========================================
   RED ECHO – GALLERY
   RESPONSIVE / MOBILE FIRST

   Navigation, Titel und Logo
   kommen aus style.css.

   Aufbau:
   Die Bilder liegen als Karten auf einer
   Bühne. Das aktive Bild steht farbig in
   der Mitte. Die Nachbarn liegen links und
   rechts dahinter: kleiner, leicht gedreht
   und rot eingefärbt – wie ein Echo.

   Hochformat (Smartphone, Tablet):
   Titel, Bilder und Steuerung untereinander.

   Desktop und Querformat:
   Titel und Steuerung links,
   Bilder rechts.
========================================= */


/* =========================================
   1. VARIABLEN
========================================= */

.gallery {
    /*
       Die Karten ragen seitlich über die
       Seite hinaus. "clip" schneidet sie ab
       und verhindert – anders als "hidden" –
       auch, dass die Seite seitlich
       verrutschen kann.
    */
    overflow: clip;

    /*
       Erlaubte Bildformate (Breite : Höhe).

       Hochformat wird höchstens 4:5,
       Querformat höchstens 3:2 gezeigt.
       So unterscheiden sich die Karten in
       der Grösse nicht zu stark.
    */
    --ratio-min: 0.8;
    --ratio-max: 1.5;

    --card-radius: clamp(1.1rem, 0.9rem + 0.8vw, 1.75rem);

    /* Grösste erlaubte Kartenbreite */
    --card-width: min(82vw, 48rem);

    --arrow-size: clamp(2.75rem, 2.5rem + 0.7vw, 3.25rem);
    --controls-gap: 1.25rem;
    --fs-counter: clamp(1.5rem, 1.3rem + 0.8vw, 2.1rem);

    /*
       Höhe von allem, was ausser den Bildern
       auf der Seite steht: Navigation, Titel,
       Untertitel, Steuerung und Abstände.
    */
    --gallery-overhead: calc(
        var(--header-top) + var(--nav-height)
        + var(--content-top)
        + var(--fs-title) * 1.84 + 0.3rem
        + var(--heading-gap)
        + var(--fs-subtitle) * 1.1 + 1.25rem
        + var(--controls-gap) + var(--arrow-size)
        + var(--page-bottom)
    );

    /*
       Die Karten bekommen die Höhe, die auf
       dem Bildschirm übrig bleibt. So ist
       alles ohne Scrollen sichtbar.

       Sie werden aber nie kleiner als 18rem
       bzw. 60 % der Bildschirmhöhe und
       nie grösser als 46rem.
    */
    --card-height: min(
        calc(var(--card-width) / var(--ratio-min)),
        46rem,
        max(
            calc(100vh - var(--gallery-overhead)),
            min(18rem, 60vh)
        )
    );

    /*
       Abstand zwischen zwei Karten:
       drei Viertel der Breite eines
       Querformat-Bildes.
    */
    --card-step: calc(
        min(
            var(--card-width),
            var(--card-height) * var(--ratio-max)
        ) * 0.75
    );
}

@supports (height: 100svh) {

    .gallery {
        --card-height: min(
            calc(var(--card-width) / var(--ratio-min)),
            46rem,
            max(
                calc(100svh - var(--gallery-overhead)),
                min(18rem, 60svh)
            )
        );
    }
}


/* =========================================
   2. LAYOUT – MOBILE FIRST
========================================= */

.gallery__layout {
    display: flex;
    flex-direction: column;
}

.gallery__subtitle {
    margin-bottom: 1.25rem;

    text-align: center;
}


/* =========================================
   3. BÜHNE

   Alle Karten liegen in der Mitte der
   Bühne übereinander und werden von dort
   aus nach links und rechts verschoben.

   Die Nachbarn dürfen über den Rand der
   Seite hinausragen.
========================================= */

.gallery__stage {
    position: relative;
    z-index: 1;

    width: 100%;
    height: var(--card-height);

    /*
       Seitliches Wischen wechselt das Bild,
       senkrechtes Scrollen bleibt möglich.
    */
    touch-action: pan-y;
}


/* =========================================
   4. KARTE

   js/gallery.js setzt pro Karte:

   --ratio      Bildformat (Breite : Höhe)
   --offset     Position zum aktiven Bild:
                -1 = links, 0 = Mitte,
                1 = rechts usw.
   --distance   dasselbe ohne Vorzeichen
========================================= */

.gallery__card {
    --ratio: 1;
    --offset: 0;
    --distance: 0;

    position: absolute;

    top: 50%;
    left: 50%;

    /*
       Die Karte passt immer in die Fläche
       --card-width x --card-height und
       behält dabei ihr Bildformat.
    */
    height: min(
        var(--card-height),
        calc(var(--card-width) / var(--ratio))
    );

    aspect-ratio: var(--ratio);

    overflow: hidden;
    isolation: isolate;

    border-radius: var(--card-radius);

    background-color: var(--color-dark);

    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.5);

    cursor: pointer;

    /*
       Abstand 0 und 1: voll sichtbar
       Abstand 2:       halb durchsichtig
    */
    opacity: clamp(0, calc(1.6 - var(--distance) * 0.55), 1);

    transform:
        translate(-50%, -50%)
        translateX(calc(var(--offset) * var(--card-step)))
        rotate(calc(var(--offset) * 4deg))
        scale(calc(1 - var(--distance) * 0.2));

    transition:
        transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 400ms ease;

    -webkit-tap-highlight-color: transparent;
}


/* Karten ausserhalb des sichtbaren Bereichs */

.gallery__card--hidden {
    opacity: 0;

    pointer-events: none;
}


/* -----------------------------------------
   Roter Schleier

   Die rote Fläche liegt über dem Bild.
   Mit mix-blend-mode: color übernimmt das
   Bild nur die Farbe, Licht und Schatten
   bleiben erhalten.

   Beim aktiven Bild verschwindet der
   Schleier, das Foto wird farbig.
----------------------------------------- */

.gallery__card::after {
    content: "";

    position: absolute;
    inset: 0;

    background-color: var(--color-red);

    mix-blend-mode: color;

    opacity: 1;

    transition:
        opacity 500ms ease;
}

.gallery__card--active::after {
    opacity: 0;
}


/* =========================================
   5. GALERIEBILD
========================================= */

.gallery__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    user-select: none;
    -webkit-user-drag: none;

    /* Nachbarn etwas dunkler, damit das aktive Bild heraussticht */
    filter: brightness(0.72);

    transition:
        transform 250ms ease,
        filter 500ms ease;
}

.gallery__card--active .gallery__image {
    filter: none;
}


/* kleine Effekte beim Hover */

@media (hover: hover) {

    .gallery__card--active:hover .gallery__image {
        transform: scale(1.02);
    }

    .gallery__card:not(.gallery__card--active):hover::after {
        opacity: 0.55;
    }
}


/* =========================================
   6. STEUERUNG
   Pfeil | Zähler | Pfeil
========================================= */

.gallery__controls {
    position: relative;
    z-index: 2;

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

    gap: 1.4rem;

    margin-top: var(--controls-gap);
}


/* -----------------------------------------
   Pfeile
----------------------------------------- */

.gallery__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--arrow-size);
    height: var(--arrow-size);

    padding: 0;

    border: 1.5px solid var(--color-white);
    border-radius: 50%;

    background-color: transparent;

    color: var(--color-white);

    font-family: inherit;

    font-size: calc(var(--arrow-size) * 0.4);
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


/* Hover umgekehrt wie bei Listen now */

.gallery__arrow:hover,
.gallery__arrow:focus-visible {
    background-color: var(--color-white);

    color: var(--color-red);

    transform: scale(1.08);
}


/* -----------------------------------------
   Zähler
   aktuelle Zahl gefüllt, Gesamtzahl outlined
----------------------------------------- */

.gallery__counter {
    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: 0.3em;

    min-width: 4.6em;

    margin: 0;

    font-size: var(--fs-counter);
    font-weight: 700;

    line-height: 1;
    letter-spacing: -0.035em;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}

.gallery__counter-current {
    color: var(--color-white);
}

.gallery__counter-total {
    color: transparent;

    -webkit-text-stroke: 1px var(--color-white);
}


/* =========================================
   DESKTOP + QUERFORMAT
   ab 1100px, im Querformat schon ab 700px

   Wie auf Home und About us:
   Text links, Bilder rechts.

   Die Bilder dürfen fast die ganze
   Bildschirmhöhe nutzen.
========================================= */

@media (min-width: 1100px), (min-width: 700px) and (orientation: landscape) {

    .gallery {
        --content-width: calc(100vw - 2 * var(--page-padding));

        --card-width: min(calc(var(--content-width) * 0.42), 46rem);

        /* Neben den Bildern steht nur noch die Navigation darüber */
        --gallery-overhead: calc(
            var(--header-top) + var(--nav-height)
            + var(--content-top)
            + var(--page-bottom)
            + 3.25rem
        );

        /* Platz für den Schatten der Karten */
        --stage-bleed: 2rem;
    }

    .gallery__layout {
        display: grid;

        grid-template-columns:
            minmax(0, 36fr)
            minmax(0, 64fr);

        grid-template-rows:
            auto
            auto
            auto
            1fr;

        grid-template-areas:
            "heading stage"
            "subtitle stage"
            "controls stage"
            ". stage";

        align-items: start;
    }

    .gallery__heading {
        position: relative;
        z-index: 2;

        grid-area: heading;
    }

    .gallery__subtitle {
        position: relative;
        z-index: 2;

        grid-area: subtitle;

        margin-bottom: 0;

        text-align: left;
    }

    .gallery__controls {
        grid-area: controls;

        justify-content: flex-start;

        margin-top: 1.6rem;
    }


    /*
       Die Bühne reicht rechts bis an den
       Bildschirmrand.

       Links blendet eine Maske die Bilder
       weich aus, damit sie nicht unter den
       Text laufen.
    */

    .gallery__stage {
        grid-area: stage;

        width: auto;
        height: calc(var(--card-height) + 2 * var(--stage-bleed));

        margin:
            calc(1.25rem - var(--stage-bleed))
            calc(-1 * var(--page-padding))
            calc(-1 * var(--stage-bleed))
            0;

        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%);
        mask-image: linear-gradient(to right, transparent 0%, #000 12%);
    }
}


/* =========================================
   7. REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .gallery__card,
    .gallery__card::after,
    .gallery__image {
        transition: none;
    }
}