/* ==========================================================
   RUFFUS – ELEMENTOR GALERIE
========================================================== */

.rg-gallery {
    width:100%;

    background:#f6f6f2;
    color:#090909;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.rg-gallery *,
.rg-gallery *::before,
.rg-gallery *::after {
    box-sizing:border-box;
}


/* ==========================================================
   INNER
========================================================== */

.rg-inner {
    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:
        80px
        25px;
}


/* ==========================================================
   HEAD
========================================================== */

.rg-head {
    margin-bottom:30px;
}


.rg-kicker {
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:#090909;

    font-size:12px;
    line-height:1;

    font-weight:700;

    letter-spacing:.9px;

    text-transform:uppercase;
}


.rg-kicker::before {
    content:"";

    width:36px;
    height:4px;

    background:#FEEE02;
}


.rg-title {
    margin:0;

    color:#090909;

    font-size:
        clamp(
            32px,
            3vw,
            44px
        );

    line-height:1.08;

    letter-spacing:-1.2px;

    font-weight:700;
}


/* ==========================================================
   GRID
========================================================== */

.rg-grid {
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:12px;
}


/* ==========================================================
   IMAGE
========================================================== */

.rg-image {
    position:relative;

    width:100%;
    height:385px;

    margin:0;
    padding:0;

    display:block;

    overflow:hidden;

    appearance:none;
    -webkit-appearance:none;

    background:#deded8;

    border:
        1px solid
        rgba(9,9,9,.08);

    border-radius:0 !important;

    outline:0;

    box-shadow:none;

    cursor:pointer;
}


.rg-image img {
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .45s
        cubic-bezier(.22,.8,.24,1),
        filter .3s ease;
}


/* Overlay */

.rg-image::before {
    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            135deg,
            rgba(9,9,9,0) 45%,
            rgba(9,9,9,.24) 100%
        );

    opacity:0;

    pointer-events:none;

    transition:
        opacity .3s ease;
}


/* Gelber Balken */

.rg-image::after {
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    z-index:3;

    width:0;
    height:8px;

    background:#FEEE02;

    pointer-events:none;

    transition:
        width .32s
        cubic-bezier(.22,.8,.24,1);
}


.rg-image:hover img,
.rg-image:focus-visible img {
    transform:
        scale(1.045);

    filter:
        contrast(1.03);
}


.rg-image:hover::before,
.rg-image:focus-visible::before {
    opacity:1;
}


.rg-image:hover::after,
.rg-image:focus-visible::after {
    width:100%;
}


/* ==========================================================
   VIEW ICON
========================================================== */

.rg-view {
    position:absolute;

    top:18px;
    right:18px;

    z-index:4;

    width:50px;
    height:50px;

    display:flex;

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

    background:#090909;

    color:#FEEE02;

    font-size:20px;

    opacity:0;

    transform:
        translateY(-8px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.rg-image:hover
.rg-view,

.rg-image:focus-visible
.rg-view {
    opacity:1;

    transform:
        translateY(0);
}


/* ==========================================================
   POPUP
========================================================== */

.rg-popup {
    position:fixed;

    inset:0;

    z-index:2147483600;

    display:none;

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

    padding:45px;

    background:
        rgba(9,9,9,.96);

    backdrop-filter:
        blur(5px);
}


.rg-popup.is-open {
    display:flex;
}


/* ==========================================================
   POPUP STAGE
========================================================== */

.rg-popup-stage {
    position:relative;

    width:auto;
    max-width:92vw;

    height:auto;
    max-height:88vh;

    padding:10px;

    background:#090909;

    border:
        4px solid
        #FEEE02;

    box-shadow:
        18px
        18px
        0
        rgba(254,238,2,.18);
}


.rg-popup-stage::before {
    content:"";

    position:absolute;

    top:-4px;
    left:-4px;

    width:105px;
    height:15px;

    z-index:5;

    background:#FEEE02;
}


.rg-popup-stage::after {
    content:"";

    position:absolute;

    right:-4px;
    bottom:-4px;

    width:70px;
    height:15px;

    z-index:5;

    background:#FEEE02;
}


/* ==========================================================
   POPUP IMAGE
========================================================== */

.rg-popup-image {
    display:block;

    width:auto;
    height:auto;

    max-width:
        calc(92vw - 28px);

    max-height:
        calc(88vh - 28px);

    object-fit:contain;

    background:#111;
}


/* ==========================================================
   CLOSE
========================================================== */

.rg-popup-close {
    position:fixed;

    top:24px;
    right:28px;

    z-index:20;

    width:56px;
    height:56px;

    padding:0;

    display:flex;

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

    appearance:none;
    -webkit-appearance:none;

    background:#FEEE02;

    border:
        3px solid
        #090909;

    border-radius:0 !important;

    color:#090909;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:32px;

    line-height:1;

    font-weight:400;

    cursor:pointer;

    box-shadow:
        7px
        7px
        0
        rgba(255,255,255,.14);

    transition:
        transform .2s ease,
        background .2s ease;
}


.rg-popup-close:hover {
    transform:
        translate(-3px,3px);

    background:#fff;
}


/* ==========================================================
   OPEN ANIMATION
========================================================== */

.rg-popup.is-open
.rg-popup-stage {
    animation:
        rg-popup-open
        .28s
        cubic-bezier(.22,.8,.24,1)
        both;
}


@keyframes rg-popup-open {

    from {
        opacity:0;

        transform:
            scale(.94)
            translateY(12px);
    }

    to {
        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:700px) {

    .rg-inner {
        padding:
            60px
            18px;
    }


    .rg-head {
        margin-bottom:23px;
    }


    .rg-title {
        font-size:32px;
    }


    .rg-grid {
        grid-template-columns:1fr;

        gap:10px;
    }


    .rg-image {
        height:310px;
    }


    .rg-view {
        width:44px;
        height:44px;

        top:12px;
        right:12px;

        opacity:1;

        transform:none;

        font-size:17px;
    }


    .rg-popup {
        padding:
            65px
            14px
            20px;
    }


    .rg-popup-stage {
        max-width:96vw;

        padding:6px;

        border-width:3px;

        box-shadow:
            8px
            8px
            0
            rgba(254,238,2,.18);
    }


    .rg-popup-image {
        max-width:
            calc(96vw - 20px);

        max-height:
            calc(86vh - 70px);
    }


    .rg-popup-close {
        top:10px;
        right:12px;

        width:48px;
        height:48px;

        font-size:27px;

        box-shadow:none;
    }

}