/* File for general global CSS corrections */
body {
    overflow-x: hidden;
}


#blogg .archive-title {
    margin-top: calc(var(--spacing-l) * -1);
}

@media screen and (min-width: 750px) {
    #blogg .archive-title {
        width: 50%;
    }
}

@media screen and (max-width: 749px) {
    #blogg > .container {
        padding: 0;
    }

    #blogg > .container > *:not(.trixie-archive[data-mobile-layout="slider"]) {
        padding: 0 var(--spacing-l);
    }

    #blogg .archive-title {
        margin-top: var(--spacing-l);
        margin-bottom: var(--spacing-xs);
    }
}

/* –––––––––––––––––––––––––––––– ERBJUDANDEN ––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 749px) {
    #erbjudanden .section-heading {
        font-size: var(--fs-4xl);
    }
}

/* –––––––––––––––––––––––––––––– STORES ––––––––––––––––––––––––––––––––– */
#stores .masked-image-wrapper {
    height: 100%;
}

#stores .background-shape .object {
    fill: var(--trixie-blue);
}

#stores .pins-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    display: grid;
    grid-template-areas: "pin";
    place-items: center;
}

#stores .pins-container > div {
    --translate-x: 0;
    --translate-y: 0;
    transform: translate(calc(var(--translate-x) * var(--e-width)), calc(var(--translate-y) * var(--e-height)));
    z-index: 1;
    grid-area: pin;
}

#stores .pins-container > div > svg {
    height: calc(var(--e-height) * 0.125);
    width: auto;
    opacity: calc(var(--p-ratio) * 10 - 4 - var(--delay-offset) * 2);
    transform: translateY(calc((var(--p-ratio) - var(--delay-offset)) * -50px * var(--delay-offset) * 5));
}

#stores .pins-container .pin-1 {
    --translate-x: -0.5;
    --translate-y: -0.25;
    --translate-offset: 10%;
    --delay-offset: 0;
}

#stores .pins-container .pin-2 {
    --translate-x: 0.5;
    --translate-y: 0;
    --translate-offset: 30%;
    --delay-offset: 0.1;
}

#stores .pins-container .pin-3 {
    --translate-x: -0.25;
    --translate-y: 0.1;
    --translate-offset: 20%;
    --delay-offset: 0.25;
}

#stores .pins-container .pin-4 {
    --translate-x: 0.425;
    --translate-y: 0.325;
    --translate-offset: 25%;
    --delay-offset: 0.35;
}

#stores .masked-image {
    --t: calc(1 - var(--p-ratio));
    --p-eased: calc(1 - var(--t) * var(--t) * var(--t));
    transform: translateY(max(calc(100% - var(--p-eased) * 25% - 75%), 0%));
}

@media screen and (min-width: 2000px) {
    #stores .masked-image-wrapper .background-shape {
        position: absolute;
        left: 0;
        bottom: 0;
        top: unset;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media screen and (max-width: 749px) {
    #stores .pins-container .pin-1 {
        --translate-x: -0.4;
        --translate-y: -0.25;
    }
    
    #stores .pins-container .pin-2 {
        --translate-x: 0.35;
        --translate-y: 0;
    }
    
    #stores .pins-container .pin-3 {
        --translate-x: -0.25;
        --translate-y: 0.1;
    }
    
    #stores .pins-container .pin-4 {
        --translate-x: 0.4;
        --translate-y: 0.25;
    }
}


/* –––––––––––––––––––––––––––––– SENASTE INLÄGGET ––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 749px) {
    #senaste-inlagget .wrapper-heading {
        font-size: var(--fs-xl);
        text-align: center;
    }

    #senaste-inlagget .article-heading {
        justify-content: center;
    }

    #senaste-inlagget .article-excerpt {
        text-align: center;
    }
    
    #senaste-inlagget .article-action {
        text-align: center;
    }
}

/* –––––––––––––––––––––––––––––– SOCIALS ––––––––––––––––––––––––––––––––– */
.socials-icons svg {
    width: 3rem;
    height: 3rem;
}

@media screen and (max-width: 749px) {
    .socials-icons svg {
        width: 2.5rem;
        height: 2.5rem;
    }
}