/**
 * Locatie-filter (blok carmel-core/locatie-filter uit de plugin; Figma
 * TCC: Home, "Vind jouw locatie").
 *
 * Grijs vlak (TCC Grijs, afronding 24, binnenruimte 80); de vraag als H5,
 * daaronder een witte keuzelijst (64 hoog, afronding 16, dunne rand van
 * TCC Blauw 15%) met het gekozen niveau als H3. Na een keuze "Mogelijke
 * locatie(s) voor jou" (Body Small) en de locaties als gekleurde pillen,
 * net als de slider: 346 breed, afronding 200, binnenruimte 24 / 24 /
 * 160, ronde foto, naam (H5, wit) met een wit pijl-rondje en witte labels
 * per niveau. Kleuren om en om Kobalt Blauw, Onderzoekend Oranje, Rugzak
 * Rood, Balpen Blauw. Bollen links en rechts over de rand van het vlak.
 * Hover (zoals de slider): de kaart kantelt 4° en midden in de foto
 * verschijnt het oranje rondje met de aanwijspijl.
 */

.carmel-locatie-filter {
    position: relative;
    box-sizing: border-box;
    margin-block: 0 var(--section-gap, 120px);
    padding: 80px;
    border-radius: var(--carmel-radius-lg, 24px);
    background: var(--tcc-grijs);
    color: var(--tcc-blauw);

    /* bollen over de rand van het vlak */
    &::before,
    &::after {
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background: no-repeat center / 100% 100%;
    }

    /* rand van het vlak tot de schermrand (negatief): de bollen steken
       uit, maar niet verder dan het scherm */
    --tcc-lf-rand: calc((100% - 100vw + var(--carmel-scrollbar-width, 15px)) / 2);

    /* de vormen zijn heel getekend (niet afgesneden aan de rand van de
       svg); tot de schermrand */
    &::before {
        top: 22%;
        left: max(-149px, var(--tcc-lf-rand));
        width: 213px;
        aspect-ratio: 384 / 344;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-96 0 384 344'%3E%3Crect x='-81.5' y='36.5' width='243' height='121' rx='60.5' fill='%230B9EDD' transform='rotate(-15 40 97)'/%3E%3Crect x='28.5' y='189.5' width='243' height='121' rx='60.5' fill='%23FFBE00' transform='rotate(-15 150 250)'/%3E%3Ccircle cx='-28' cy='275' r='60.5' fill='%23D9356B'/%3E%3C/svg%3E");
    }

    &::after {
        top: 18%;
        right: max(-90px, var(--tcc-lf-rand));
        width: 262px;
        aspect-ratio: 332 / 362;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -12 332 362'%3E%3Crect x='6' y='26' width='290' height='150' rx='75' fill='%23FF7D37' transform='rotate(-15 151 101)'/%3E%3Ccircle cx='55' cy='279' r='70' fill='%2314A0DC'/%3E%3Ccircle cx='197' cy='242' r='70' fill='%23CF2C62'/%3E%3C/svg%3E");
    }
}

.carmel-locatie-filter__question label {
    margin: 0 0 24px;
    font-size: var(--carmel-font-size-h5, 24px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tcc-blauw);
}

/* keuzelijst: wit vak met een driehoekje rechts */
.carmel-locatie-filter__select,
.carmel-locatie-filter__select:focus {
    height: 64px;
    padding: 0 64px 0 24px;
    border: 0.5px solid rgb(0 0 85 / 0.15);
    border-radius: 16px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") right 24px center / 20px no-repeat,
        var(--tcc-neutral-0);
    color: var(--tcc-blauw);
    font-family: var(--carmel-font-family-heading, inherit);
    font-size: var(--carmel-font-size-h3, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    appearance: none;
    cursor: pointer;

    option {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0;
    }
}

.carmel-locatie-filter__select:focus-visible {
    outline: 2px solid var(--tcc-kobalt-blauw);
    outline-offset: 2px;
}

.carmel-locatie-filter__intro {
    margin: 40px 0 16px !important; /* het thema zet een eigen marge op p */
    font-size: var(--carmel-font-size-body-small, 16px);
    line-height: 1.2;
    color: var(--tcc-blauw);
}

/* de locaties: pillen van 346 naast elkaar */
.carmel-locatie-filter__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.carmel-locatie-filter__card {
    display: flex;
    flex: 0 1 346px;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    min-width: 0;
    padding: 24px 24px 160px;
    overflow: hidden;
    border-radius: 200px;
    background: var(--tcc-kobalt-blauw);
    color: var(--tcc-neutral-0);
    transition: rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

    &:nth-child(4n + 2) {
        background: var(--tcc-oranje);
        --tcc-lf-hover: var(--tcc-rood);
    }

    &:nth-child(4n + 3) {
        background: var(--tcc-rood);
    }

    &:nth-child(4n + 4) {
        background: var(--tcc-balpen-blauw);
    }
}

.carmel-locatie-filter__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;

    img {
        border-radius: 50%;
    }

    /* hover: oranje rondje met de aanwijspijl (Brand Icons) */
    &::after {
        content: '';
        position: absolute;
        inset: 15%;
        border-radius: 50%;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 207' fill='none'%3E%3Cpath d='M105.987 118.924L123.774 148.288C125.344 150.887 129.257 150.376 130.108 147.461L156.703 56.4226C157.801 52.6641 154.313 49.1686 150.555 50.2745L59.5169 76.8698C56.6014 77.7205 56.091 81.6258 58.6894 83.2035L88.0533 100.99L50.3759 138.668C48.1255 140.918 48.1255 144.561 50.3759 146.803L55.2789 151.706L60.1819 156.609C62.4324 158.86 66.0748 158.86 68.3175 156.609L105.987 118.924Z' stroke='white' stroke-width='3.71' stroke-miterlimit='10'/%3E%3C/svg%3E") center / 100% no-repeat,
            var(--tcc-lf-hover, var(--tcc-oranje));
        opacity: 0;
        scale: 0.4;
        transition: opacity 0.3s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
    }
}

.carmel-locatie-filter__card:has(.carmel-locatie-filter__card-link):is(:hover, :focus-within) {
    rotate: 4deg;

    .carmel-locatie-filter__image::after {
        opacity: 1;
        scale: 1;
    }
}

.carmel-locatie-filter__name {
    margin: 0 !important;
    font-size: var(--carmel-font-size-h5, 24px) !important;
    line-height: 1.2 !important;
    color: var(--tcc-neutral-0) !important;
}

/* wit rondje met pijl naast de naam */
.carmel-locatie-filter__link {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000055' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / 20px no-repeat,
        var(--tcc-neutral-0);
}

.carmel-locatie-filter__badges {
    gap: 8px;
}

.carmel-locatie-filter__badge {
    padding: 8px 12px;
    border-radius: 9999px;
    background: var(--tcc-neutral-0);
    color: var(--tcc-blauw);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .carmel-locatie-filter__card,
    .carmel-locatie-filter__image::after {
        transition: none;
    }

    .carmel-locatie-filter__card:is(:hover, :focus-within) {
        rotate: none !important;
    }
}

@media (max-width: 1024px) {
    .carmel-locatie-filter {
        padding: 48px;
    }
}

@media (max-width: 767px) {
    .carmel-locatie-filter {
        padding: 24px;

        /* klein in de bovenhoeken, half buiten het vlak (anders over de
           kaarten) */
        &::before {
            top: -40px;
            width: 95px;
        }

        &::after {
            top: -56px;
            width: 110px;
        }
    }

    .carmel-locatie-filter__select,
    .carmel-locatie-filter__select:focus {
        height: 56px;
        padding-left: 16px;
        font-size: 24px;
    }

    .carmel-locatie-filter__card {
        flex-basis: 100%;
        padding-bottom: 120px;
    }
}