.sgg-main-container {
    padding: 0;
}

.sgg-gallery {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    /* Standard gap for desktop */
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
}

/* -- Styling for overskrifter -- */
.sgg-section-header {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 15px;
}

.sgg-section-title {
    /* Hovedtittel */
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 700;
}

.sgg-section-separator {
    /* Skillelinje */
    border: 0;
    margin: 8px auto 8px auto;
    /* Vertikal og horisontal sentrering */
    width: 100px;
    /* Standard bredde */
    max-width: 80%;
}

.sgg-section-subtitle {
    /* Undertittel */
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    /* Litt lettere */
}


/* ---------------------------------- */
/* Basis Layout og Desktop */
/* ---------------------------------- */
.sgg-gallery {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sgg-gap, 40px);
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    /* Standard kolonne antall for desktop hvis ikke overstyrt av PHP */
    --sgg-cols: var(--sgg-cols-desktop, 5);
}

.sgg-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sgg-logo-padding, 5px);
    height: 120px;
    box-sizing: border-box;

    /* Dynamisk bredde: (100% - totalt gap) / antall kolonner */
    width: calc((100% - ((var(--sgg-cols) - 1) * var(--sgg-gap, 40px))) / var(--sgg-cols)) !important;
    max-width: var(--sgg-logo-max-width, 200px) !important;
}

.sgg-logo-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sgg-logo {
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;

    --current-grayscale: 0%;
    --current-saturate: 100%;
    --current-blur: 0px;
    --current-opacity: 1;

    opacity: var(--hover-opacity, var(--current-opacity));
    filter: grayscale(var(--hover-grayscale, var(--current-grayscale))) saturate(var(--hover-saturate, var(--current-saturate))) blur(var(--hover-blur, var(--current-blur)));
    transform: scale(var(--hover-scale, 1));

    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.sgg-logo-wrapper:hover .sgg-logo {
    --hover-grayscale: 0%;
    --hover-saturate: 100%;
    --hover-blur: 0px;
    --hover-opacity: 1;
    --hover-scale: var(--sgg-hover-scale, 1.05);
}

/* ---------------------------------- */
/* Dynamiske Effekter */
/* ---------------------------------- */

.sgg-effect-grayscale .sgg-logo {
    --current-grayscale: var(--sgg-base-grayscale, 100%);
}

.sgg-effect-desaturated .sgg-logo {
    --current-saturate: var(--sgg-base-desaturate, 70%);
}

.sgg-effect-transparent .sgg-logo {
    --current-opacity: var(--sgg-base-opacity, 0.7);
}

.sgg-effect-blurry .sgg-logo {
    --current-blur: var(--sgg-base-blur, 1px);
}

/* Skru av hover-effekter på touch-enheter (hvis aktivert i innstillinger) */
@media (hover: none) and (pointer: coarse) {
    .sgg-disable-hover-touch .sgg-logo-wrapper:hover .sgg-logo {
        --hover-grayscale: var(--current-grayscale);
        --hover-saturate: var(--current-saturate);
        --hover-blur: var(--current-blur);
        --hover-opacity: var(--current-opacity);
        --hover-scale: 1;
    }
}

/* ---------------------------------- */
/* Scroll Animations */
/* ---------------------------------- */
.sgg-animate {
    opacity: 0;
    will-change: transform, opacity, filter;
}

/* Fade In */
.sgg-animate-fade-in.sgg-animated {
    animation: sggFadeIn 0.8s ease forwards;
    animation-delay: var(--sgg-delay, 0s);
}

@keyframes sggFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Blur In */
.sgg-animate-blur-in.sgg-animated {
    animation: sggBlurIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--sgg-delay, 0s);
}

@keyframes sggBlurIn {
    from {
        opacity: 0;
        filter: blur(8px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Slide Up */
.sgg-animate-slide-up.sgg-animated {
    animation: sggSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--sgg-delay, 0s);
}

@keyframes sggSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In */
.sgg-animate-zoom-in.sgg-animated {
    animation: sggZoomIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--sgg-delay, 0s);
}

@keyframes sggZoomIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip In */
.sgg-animate-flip-in.sgg-animated {
    animation: sggFlipIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--sgg-delay, 0s);
}

@keyframes sggFlipIn {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/* ---------------------------------- */
/* Tablet Responsivitet (769px til 1024px) */
/* ---------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .sgg-gallery {
        --sgg-gap: 20px;
        --sgg-cols: var(--sgg-cols-tablet, 4);
    }

    .sgg-logo-wrapper {
        height: 100px;
    }

    .sgg-section-title {
        font-size: 1.6rem;
    }

    .sgg-section-subtitle {
        font-size: 1rem;
    }
}

/* ---------------------------------- */
/* Mobil Responsivitet (under 768px) */
/* ---------------------------------- */
@media (max-width: 768px) {
    .sgg-gallery {
        --sgg-gap: 15px;
        --sgg-cols: var(--sgg-cols-mobile, 2);
        padding: 15px 0;
    }

    .sgg-logo-wrapper {
        height: 90px;
    }

    .sgg-section-title {
        font-size: 1.4rem;
    }

    .sgg-section-subtitle {
        font-size: 0.9rem;
        margin-top: 5px;
    }

    .sgg-section-separator {
        margin: 5px auto 5px auto;
    }
}