/*
 * Gebruik nested CSS in je wrapper div: .awcf-usp-balk
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 *
 * Alles is gescoped op .awcf-usp-balk, zodat dit bestand niets kan
 * overschrijven wat je elders in Elementor instelt. Kleuren en typografie
 * komen uit de Elementor-globals; er staat geen enkele merkkleur hardcoded.
 * Mobile-first: één kolom is de basis, drie kolommen vanaf 768px.
 */

.awcf-usp-balk {
    display: block;

    & .awcf-usp-balk__kop {
        margin: 0 0 1.25rem;
        color: var(--e-global-color-primary, currentColor);
        font-family: var(--e-global-typography-primary-font-family, inherit);
        font-weight: var(--e-global-typography-primary-font-weight, 700);
        text-align: center;
    }

    & .awcf-usp-balk__lijst {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & .awcf-usp-balk__item {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    & .awcf-usp-balk__icoonhouder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-bottom: 0.75rem;
        border-radius: 50%;
        background-color: var(--e-global-color-surface, rgba(0, 0, 0, 0.04));
        color: var(--e-global-color-accent, currentColor);
    }

    & .awcf-usp-balk__icoon {
        width: 1.75rem;
        height: 1.75rem;
        display: block;
    }

    & .awcf-usp-balk__titel {
        margin: 0 0 0.5rem;
        color: var(--e-global-color-primary, currentColor);
        font-family: var(--e-global-typography-primary-font-family, inherit);
        font-weight: var(--e-global-typography-primary-font-weight, 700);
        font-size: 1.125rem;
        line-height: 1.3;
    }

    & .awcf-usp-balk__tekst {
        margin: 0;
        color: inherit;
        font-family: var(--e-global-typography-text-font-family, inherit);
        line-height: var(--e-global-typography-text-line-height, 1.7);
    }

    /* Instapanimatie, alleen als de bezoeker daar geen bezwaar tegen heeft */
    & .awcf-usp-balk__item {
        opacity: 1;
    }

    &.awcf-usp-balk--js .awcf-usp-balk__item {
        opacity: 0;
        transform: translateY(0.5rem);
        transition: opacity 240ms ease, transform 240ms ease;
    }

    &.awcf-usp-balk--js .awcf-usp-balk__item.is-zichtbaar {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 768px) {
    .awcf-usp-balk {
        & .awcf-usp-balk__lijst {
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .awcf-usp-balk {
        &.awcf-usp-balk--js .awcf-usp-balk__item {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
}