/* This is the index CSS document */


/* =============== Block: introduction - mobile =============== */

/* ===== introduction__banner */

.introduction__banner {
    display: flex;
    justify-content: center;
    overflow: hidden;

}

.intro-image {
    height: 350px;
    object-fit: contain;
    align-self: flex-start;
}

.intro-heading {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 320px;

    position: absolute;
    top: 75px;


    .intro-heading__text {
        line-height: 64px;
    }
}


/* ===== introduction-content */

.introduction-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
    padding: 30px 15px 30px 15px;

    .introduction-content__subheader {
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-align: center;
        max-width: 540px;
    }

    .introduction-content__box {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
}

.intro-paw-prints {
    height: 104px;
}

.intro-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 540px;
}

.logo-collab {
    display: flex;
    flex-direction: row;
    gap: 10px;

    .logo-collab__dyrenes-beskyttelse {
        width: 82px;
        height: 88px;
    }
}

.logo-composition {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;

    .logo-composition__cross {
        width: 18px;
    }

    .logo-composition__en-af-os {
        width: 148px;
        height: 44.411px;
    }
}


/* =============== Block: introduction - desktop =============== */

/* ===== introduction-desktop__banner */

.introduction-desktop__banner {
    display: none;
    justify-content: center;
    overflow: hidden;

}

.intro-desktop-image {
    height: 500px;
    object-fit: contain;
    align-self: flex-start;
}

.intro-desktop-heading {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 209px;

    position: absolute;
    top: 235px;


    .intro-heading__text {
        line-height: 92px;
    }
}


/* ===== introduction-content-desktop */

.introduction-content-desktop {
    display: none;
    flex-direction: column;
    justify-content: center;

    .introduction-content-desktop__text-billeder {
        display: flex;
        padding: 60px 0px;
        flex-direction: column;
        align-items: center;
        gap: 60px;

        background-color: var(--color-light-blue);
    }

    .introduction-content-desktop__logo-samling {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 48px 0px;
        gap: 50px;
    }
}

.text-image-gallery-desktop {
    display: flex;
    max-width: 1200px;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding: 0px 24px;

    .text-image-gallery-desktop-box {
        display: flex;
        align-items: center;
        gap: 60px;
    }
}

.introduction-desktop-image {
    max-width: 600px;
    min-width: 400px;
    border-radius: 2px;
}

.logo-collab__dyrenes-beskyttelse {
    width: 200px;
}

.cta-text-desktop {
    width: 680px;
    text-align: center;
}


/* =============== Block: ensomhed-section - mobile =============== */

.ensomhed-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    .ensomhed-section__content {
        padding: 0px 15px 30px 15px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        max-width: 540px;
    }
}


/* ===== banner*/
.banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;

    .banner__image {
        height: 175px;
    }

    .banner__text {
        position: absolute;
        top: 61px;
        color: var(--color-light-blue);
    }

    &.banner--text-yellow {
        .banner__text {
            color: var(--color-yellow);
        }
    }
}



/* ===== ensomhed-introduction */

.ensomhed-introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}


/* ===== ensomhed-signs-content */

.ensomhed-signs-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.ensomhed-all-signs {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ensomhed-sign {
    display: flex;
    flex-direction: row;
    gap: 20px;

    .ensomhed-sign__description {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


/* ===== ensomhed-closing-text */

.ensomhed-closing-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* =============== Block: ensomhed-section - desktop =============== */

.banner-desktop {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;

    .banner__image {
        height: 500px;
    }

    .banner__text {
        position: absolute;
        top: 205px;
        color: var(--color-light-blue);
    }

    &.banner--text-yellow {
        .banner__text {
            color: var(--color-yellow);
        }
    }
}

/* ===== tegn på ensomhed */

.ensomhed-signs-content-desktop {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 96px;
    padding-bottom: 48px;
}

.ensomhed-signs-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.ensomhed-sign-card-desktop {
    max-width: 368px;
    height: 482px;

    border-radius: 40px;
    background: #D2DFFF;

    .ensomhed-sign-card-desktop__inner {
        display: flex;
        padding: 24px 30px;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
}

.ensomhed-sign-card-desktop-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}



/* =============== Block: eventet =============== */

.eventet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;

    .eventet__description {
        padding: 0px 15px 40px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        max-width: 540px;
    }
}


.event-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}


/* ===== sådan-foregår-eventet */

.sådan-foregår-eventet {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .sådan-foregår-eventet__bodytext {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


/* ===== forventninger */

.forventninger {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.forventninger-bulletpoints {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.forventninger-bulletpoint {
    display: flex;
    flex-direction: row;
    gap: 15px;

    .forventninger-bulletpoint__icon {
        width: 30px;
        height: 31.383px;
    }

    .forventninger-bulletpoint__icon-desktop {
        display: none;
        width: 50px;
        margin-top: -3px;
    }
}


/* =============== Block: andres-oplevelser =============== */

.andres-oplevelser {
    background-color: var(--color-light-blue);
    padding: 40px 15px;
    gap: 40px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.oplevelser-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 540px;
}

.oplevelser-card {
    display: flex;
    padding: 15px;
    flex-direction: column;
    gap: 15px;
    border-radius: 2px;
    background-color: var(--color-pastel-pink);

    .oplevelser-card__image {
        width: 100%;
        border-radius: 2px;
    }

    .oplevelser-card__image-desktop {
        display: none;
    }

    .oplevelser-card__description {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    &.oplevelser-card--yellow {
        background-color: var(--color-yellow);
    }

    &.oplevelser-card--white {
        background-color: var(--color-white);
    }
}


/* =============== Block: vil-du-vide-mere =============== */

.vil-du-vide-mere {
    padding: 30px 15px;

    .vil-du-vide-mere__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}


/* ========================================================================================== */

/* =============== Media Query =============== */

@media only screen and (min-width: 901px) {

    /* =============== section | introduction =============== */

    .introduction__banner {
        display: none;
    }


    .introduction-desktop__banner {
        display: flex;
    }

    .introduction-content {

        .introduction-content__subheader {
            max-width: 1200px;
            padding: 72px;
            gap: 96px;
        }

        .introduction-content__box {
            display: none;
        }
    }

    .intro-paw-prints {
        display: none;
    }


    .introduction-content-desktop {
        display: flex;
    }

    .logo-composition {
        .logo-composition__cross {
            width: 32px;
        }
    
        .logo-composition__en-af-os {
            width: 320px;
            height: 96.024px;
        }
    }

    /* =============== section | ensomhed =============== */

    .banner {
        display: none;
    }

    .banner-desktop {
        display: flex;
    }

    .ensomhed-introduction {
        text-align: center;
    }

    .ensomhed-introduction p {
        font-size: 32px;
    }

    .ensomhed-section__content {
        .ensomhed-closing-text {
            display: none;
        }
    }

    .ensomhed-signs-content {
        display: none;
    }

    .ensomhed-signs-content-desktop {
        display: flex;
    }


    /* =============== section | eventet =============== */

    .eventet {
        .eventet__description {
            max-width: 1200px;
        }
    }

    .event-information {
        align-items: flex-start;
        flex-direction: row;
        gap: 96px;
    }
    
    .sådan-foregår-eventet, .forventninger {
        max-width: 540px;
    }

    .forventninger-bulletpoint {
        align-items: flex-start;

        .forventninger-bulletpoint__icon {
            display: none;
        }

        .forventninger-bulletpoint__icon-desktop {
            display: unset;
        }
    }



    /* =============== section | andres oplevelser =============== */

    .andres-oplevelser {
        padding: 48px 24px;
    }

    .oplevelser-cards {
        max-width: 1200px;
        width: 100%;
    }

    .oplevelser-card {
        flex-direction: row;
        padding: 40px;
        gap: 40px;
        align-items: center;
        border-radius: 200px;

        .oplevelser-card__image {
            display: none;
        }

        .oplevelser-card__image-desktop {
            display: flex;
            max-width: 428px;
            height: 300px;
            border-radius: 200px 0px 0px 200px;
            flex-shrink: 0;
        }
    }


    .oplevelser-card__description {
        gap: 24px;
        max-width: 500px;
    }


    /* =============== section | vil du vide mere =============== */

    .vil-du-vide-mere {
        padding: 48px 0px;

        .vil-du-vide-mere__content {
            gap: 24px;
        }
    }


}