.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;
}

/* -- 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;
    /* Standard kolonne antall for desktop hvis ikke overstyrt av PHP */
    --sgg-cols: var(--sgg-cols-desktop, 5);
}

/* ---------------------------------- */
/* Layout: Carousel */
/* ---------------------------------- */
.sgg-layout-carousel {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
    padding-bottom: 15px;
    /* plass til scrollbar */
}

.sgg-layout-carousel::-webkit-scrollbar {
    height: 8px;
}

.sgg-layout-carousel::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.sgg-layout-carousel .sgg-track {
    display: flex;
    gap: var(--sgg-gap, 40px);
}

.sgg-layout-carousel .sgg-logo-wrapper {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* For carousel we might want them slightly wider than grid, letting overflow happen */
    width: clamp(150px, 30vw, 250px) !important;
}

/* ---------------------------------- */
/* Layout: Ticker (Infinite Scroll) */
/* ---------------------------------- */
.sgg-layout-ticker {
    flex-wrap: nowrap;
    overflow-x: hidden;
    justify-content: flex-start;
    position: relative;
    padding-bottom: 20px;
}

.sgg-layout-ticker .sgg-track {
    display: flex;
    gap: var(--sgg-gap, 40px);
    width: max-content;
    animation: sggTickerScroll var(--sgg-ticker-speed, 30s) linear infinite;
}

.sgg-layout-ticker:hover .sgg-track {
    animation-play-state: paused;
}

.sgg-layout-ticker .sgg-logo-wrapper {
    flex: 0 0 auto;
    /* Static widths for ticker */
    width: clamp(150px, 20vw, 250px) !important;
}

@keyframes sggTickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Translate left exactly half the width of the track (since contents are duplicated) */
        transform: translateX(calc(-50% - (var(--sgg-gap, 40px) / 2)));
    }
}

.sgg-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sgg-logo-padding, 5px);
    aspect-ratio: 3 / 2;
    /* Allows height to grow when width grows */
    height: auto;
    min-height: 80px;
    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);
    }

    /* aspect-ratio håndterer skalering automatisk nå */

    .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;
    }

    /* aspect-ratio håndterer skalering automatisk nå */

    .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;
    }
}