/*
    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: 75%;
    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;
}

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

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

.flexbox-1 .text-right, .flexbox-1 .text-left {
    max-width: 35%;
    display: flex;
    flex-direction: column;
    align-self: center;
}

.accordion
{
    padding: 0;
}

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

.container-1a .embed-map-responsive {
    position: relative;
    text-align: right;
    width: 100%;
    height: 0;
    padding-bottom: 40%;
    margin-top: 1rem;
}

/* Sectie */
.availability-section {
    padding: 2rem 0;
    display: none;
}

    .availability-section h2 {
        color: var(--orange-color);
        font-size: 2.25rem;
        margin: 0 0 1rem
    }

/* Layout: groen smal, paars breed */
.availability-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 2rem;
    align-items: start; /* << voorkomt uitrekken */
}

/* Groen blok */
.availability-filter {
    background: var(--green-color);
    padding: 1.25rem 1.5rem;
    border-radius: .75rem;
    box-shadow: 0 6px 0 rgba(0,0,0,.12);
    position: sticky;
    top: 10rem;
    height: fit-content;
}

    .availability-filter h4 {
        margin: 0 0 2rem;
        color: var(--orange-color);
        font-weight: 800;
        letter-spacing: .1em;
    }

.range-label {
    display: block;
    margin: .25rem 0 .5rem;
    font-weight: 700
}

.range-wrap {
    position: relative
}

/* Slider */
#spotsRange {
    width: 100%;
    appearance: none;
    height: 3px;
    background: #222;
    border-radius: 999px;
    outline: none;
}

    #spotsRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--orange-color);
        cursor: pointer;
        border: 0;
    }

    #spotsRange::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--orange-color);
        cursor: pointer;
        border: 0;
    }

/* Bubble boven de thumb */
#spotsOutput {
    position: absolute;
    top: -34px;
    left: 0;
    transform: translateX(-50%);
    padding: .2rem .5rem;
    border-radius: .35rem;
    background: #fff;
    border: 2px solid var(--orange-color);
    font-weight: 700;
    font-size: .9rem;
    color: #333;
    pointer-events: none;
}

.range-values {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
    font-weight: 700;
}

/* Paarse kaart */
.availability-card {
    background: var(--purple-color);
    color: #fff;
    border-radius: .75rem;
    padding: 1rem 1rem 1.25rem;
    box-shadow: 0 10px 0 rgba(0,0,0,.15);
    position: relative;
    width: 70%;
    margin-left: auto;
}

/* Vast 16:9 venster zodat de kaart nooit te hoog wordt */
.card-image {
    width: 100%;
    aspect-ratio: 16/9; /* << houd hoogte in toom */
    background: #2b1c27;
    border: 6px solid #3a2130; /* donkere rand zoals in mockup */
    border-radius: .6rem;
    overflow: hidden;
}

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.card-content {
    text-align: center;
    padding: .9rem .5rem 0;
    margin: 1rem auto;
}

    .card-content h3 {
        margin: .3rem 0 .4rem;
        font-weight: 800
    }

    .card-content p {
        margin: .2rem auto;
        opacity: .95
    }

/* Nav-knoppen links/rechts gecentreerd */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid var(--orange-color);
    background: transparent;
    color: var(--orange-color);
    border-radius: .5rem;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

    .nav-btn:hover {
        background: rgba(236,106,66,.1);
        transform: translateY(-50%) scale(1.03)
    }

.nav-prev {
    left: 12px
}

.nav-next {
    right: 12px
}

.valueCards
{
    width: 30%;
}

/*==================================
            MEDIA QUERIES
==================================*/
@media (max-width: 1700px) {

    .availability-card {
        width: 90%;
        box-sizing: border-box;
    }
}

@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;
        align-self:auto;
    }

    .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) {
    .availability-grid {
        grid-template-columns: 1fr
    }

    .availability-filter {
        position: static;
        width: 100%;
        box-sizing: border-box;
    }

    .availability-card {
        width: 100%;
        box-sizing: border-box;
    }
}

/* <= 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 .text-right p
        {
            margin-left: 0;
        }

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


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