/*
    Author: TedSite
    Date: 22-09-2025
    Description: Succeed About Us Stylesheet
*/

/* ===== Container ===== */
.container-1 {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 5rem;
    max-height: max-content;
    margin: 0 auto;
    position: relative;
    background-color: var(--pink-color)
}

/* Titel */
.container-1 h2 {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    color: var(--orange-color, --light-orange-color);
    margin: 0 0 .25rem 0;
}


/* Body copy */
.container-1 .title-block
{
    padding: 120px 5% 0 5%;
}

.container-1a
{
    padding: 0 5%;
}

.container-1 .wave-divider svg
{
    height: 96px;
    width: 100%;
}

.container-1 .title-block p
{
    color: #fff;
}
.container-1a p {
    font-size: 1.5rem;
    line-height: 1.75;

    max-width: 80%;
    margin: 0
}

.container-1a h4 {
    font-size: 2.5rem;
    line-height: 1.75;
    color: var(--orange-color);
    margin-top: 1rem;
}

.text-right p
{
    margin-left: auto;
}

.container-1a p strong {
    color: var(--orange-color, #f3c846);
}

.container-1a.two-col {
    column-count: 2;
    column-gap: 48px;
}

.container-1a.two-col p {
    break-inside: avoid;
}

.flexbox-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2rem;
}


.flexbox-1 .wave-orange
{
    margin: 4rem 0 0rem auto;
}

.flexbox-1 .text-right, .flexbox-1 .text-left {
    max-width: 50%;
}

.flexbox-1 .team-container, .flexbox-1 .value-container
{
    display: flex;
    flex-direction: row;
    gap: 2rem;
    height: max-content;
    align-self: center;
    width: 70%;
}

    .flexbox-1 .value-container {
        align-self: flex-end;
    }



    .container-1c {
        width: 90%;
    }

.container-1d .wave-green {
    margin-left: auto;
}


/* Responsive fine-tuning */
    @media (max-width: 640px) {

    }
    /* Lijsten in de over-ons sectie */
    .container-1a ul {
    color: #e9eef5; /* wit/lichtgrijs */
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
    list-style-type: disc; /* standaard bullets */
}

.container-1a li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.container-1a ul li::marker {
    color: var(--orange-color, #f3c846);
}

/*==================================
            MEDIA QUERIES
==================================*/
@media (max-width: 1460px) {
    .flexbox-1
    {
        display: flex;
        flex-direction: column;
    }

    .flexbox-1:nth-child(even)
    {
        flex-direction: column-reverse;
    }

    .flexbox-1 .text-left
    {
        max-width: 65%;
        margin-bottom: 5rem;
    }

    .flexbox-1 .text-right {
        max-width: 65%;
        margin: 0 0 5rem auto;
    }

    .flexbox-1 .value-container, .flexbox-1 .team-container
    {
        width: 100%;
        justify-content: space-between;
    }
}

/* <= 1200px: geen 2 kolommen meer in paragrafen */
@media (max-width: 1200px) {
    .container-1a.two-col {
        column-count: 1;
        column-gap: 0;
    }
}

/* <= 1024px: flex-secties stapelen, reverse neutraliseren */
@media (max-width: 1024px) {
    /* Container breathing room */
    .container-1 {
        width: 100%;
        min-height: auto;
        padding: 96px 0 64px;
    }

        .container-1 .title-block {
            padding: 0 5% 0; /* je hebt al padding via .container-1 */
        }

    /* Sectie met tekst + accordion/team/value */
    .flexbox-1 {
        display: block; /* stapelen */
        margin-top: 2rem;
    }

        /* Neutraliseer reverse + alignments */
        .flexbox-1:nth-child(even) {
            flex-direction: row; /* reset reverse */
        }

        .flexbox-1 article,
        .flexbox-1 .accordion {
            width: inherit;
            order: 0; /* geen omkering */
            text-align: left;
        }

        .flexbox-1:nth-child(even) article {
            text-align: left; /* terug van right naar left */
        }

        .flexbox-1:nth-child(even) p {
            margin-left: 0; /* reset auto margin */
        }

        /* Tekstbreedtes volledig */
        .flexbox-1 .text-right,
        .flexbox-1 .text-left {
            max-width: 100%;
        }

        /* Team/values naast elkaar -> onder elkaar */
        .flexbox-1 .team-container,
        .flexbox-1 .value-container {
            flex-direction: column;
            align-items: center;
            width: 90%;
            margin: 0 auto;
            gap: 4rem;
            align-self: stretch;
            margin-top: 4rem;
        }

        /* Waves centreren/ruimte compacter */
        .flexbox-1 .wave-orange {
            margin: 2rem 0 0 0;
        }

        .flexbox-1:nth-child(even) .wave-orange {
            margin: 2rem 0 0 0; /* geen auto rechts meer */
        }

    /* Info-lijsten onder elkaar */
    .info-list {
        display: block;
    }

        .info-list > div {
            margin-bottom: 2rem;
        }

    /* Cards full width */
    .info {
        flex: none;
        width: 100%;
    }

    /* Typo schalen voor comfort */
    .container-1a p {
        line-height: 1.7;
        max-width: 100%;
    }

    .container-1a h4 {
        font-size: clamp(1.5rem, 5.2vw, 2rem);
        line-height: 1.3;
    }
}

/* <= 767px: extra compact en veilig stapelen */
@media (max-width: 767px) {
    .container-1 {
        padding: 80px 0 64px;
    }

    /* Zorg dat kaarten geen overlap/hover-push geven op touch */
    .info:hover,
    .menu-item:hover {
        transform: none;
        box-shadow: 4px 4px 10px rgba(0,0,0,.2);
    }

    /* Menu-box items ook full width */
    .menu-box {
        display: block;
    }

    .menu-item {
        width: 100%;
        margin: 0 0 1.5rem 0;
        display: block;
    }

    /* Afbeeldingen in kaarten iets lager voor ergonomie */
    .info img {
        height: 200px;
        object-fit: cover;
    }
}