/* ==========================================================================
   Vergelijkingstabel (list-based, geen <table>)
   Desktop: 4 kolommen via CSS grid
   Mobiel:  elke rij wordt een kaart, met data-labels per waarde
   ========================================================================== */

.vergelijkingstabel {
    margin: 2rem 0;
}

.vergelijkingstabel__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e2e2e2;
    border-radius: var(--radius);
    overflow: hidden;
}

.vergelijkingstabel__rij {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    border-bottom: 1px solid #e2e2e2;
}

.vergelijkingstabel__rij:last-child {
    border-bottom: none;
}

/* Zebra-strepen voor leesbaarheid */
.vergelijkingstabel__rij:nth-child(even) {
    background: var(--wp--preset--color--colorverylightbrown);
}

.vergelijkingstabel__cel {
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Eerste kolom (eigenschap) */
.vergelijkingstabel__cel--eigenschap {
    font-weight: 600;
}

/* Koprij */
.vergelijkingstabel__rij--kop,
.vergelijkingstabel__rij--kop:nth-child(even) {
    background: var(--wp--preset--color--colororange);
}

.vergelijkingstabel__cel--kop {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Data-labels alleen op mobiel tonen */
.vergelijkingstabel__cel[data-label]::before {
    content: none;
}

/* ==========================================================================
   Mobiel (≤ 767px): rijen worden kaarten
   ========================================================================== */
@media (max-width: 767px) {

    .vergelijkingstabel__lijst {
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow: visible;
    }

    /* Koprij verbergen; de labels staan per cel */
    .vergelijkingstabel__rij--kop {
        display: none;
    }

    .vergelijkingstabel__rij {
        display: block;
        border: 1px solid #e2e2e2;
        border-radius: var(--radius);
        overflow: hidden;
        background: #fff;
    }

    .vergelijkingstabel__rij:nth-child(even) {
        background: #fff;
    }

    /* De eigenschap wordt de kaarttitel */
    .vergelijkingstabel__cel--eigenschap {
        display: block;
        background: var(--wp--preset--color--colororange);
        color: #fff;
        font-weight: 700;
        padding: 0.75rem 1rem;
    }

    /* Elke waarde krijgt zijn label ernaast */
    .vergelijkingstabel__cel[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        border-bottom: 1px solid #efefef;
    }

    .vergelijkingstabel__cel[data-label]:last-child {
        border-bottom: none;
    }

    .vergelijkingstabel__cel[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        flex-shrink: 0;
    }
}