/*
 * Compare table (view.php, script.js): the heading, then rows of features in alternate
 * light grey bands with rounded ends, a tick or cross in each column.
 */

.blk--compare-table {
    --ct-band: var(--neutral-100);
    --ct-cell-x: var(--step-4);
}

.compare-table__heading {
    margin-bottom: var(--step-10);
}

/* (a little more room above the body text than other text groups) */
.compare-table__heading .text-group__heading + .text-group__body {
    margin-top: var(--step-7);
}

.compare-table__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Column heads: a logo or a name */
.compare-table__table thead th {
    padding: 0 var(--ct-cell-x) var(--step-4);
    font-weight: inherit;
    text-align: center;
    vertical-align: bottom;
}

.compare-table__logo {
    display: block;
    width: 90px;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.compare-table__name {
    display: block;
    color: var(--black);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

/* Rows */
.compare-table__table tbody :is(th, td) {
    padding: 14px var(--ct-cell-x);
    border: 0;
    font-weight: inherit;
    vertical-align: middle;
}

.compare-table__table tbody tr:nth-child(odd) > * {
    background-color: var(--ct-band);
}

.compare-table__table tbody tr > :first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.compare-table__table tbody tr > :last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.compare-table__table tbody th.compare-table__feature {
    padding-left: 50px;
    text-align: left;
}

.compare-table__label {
    display: block;
    color: var(--text-strong);
    font-weight: 400;
}

.compare-table__note {
    display: block;
    color: var(--text);
    font-size: .85em;
}

.compare-table__table tbody td {
    width: 33%;
    text-align: center;
}

.compare-table__mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.compare-table__mark--yes circle {
    fill: #027A56;
}

.compare-table__mark--no circle {
    fill: #B42318;
}

@media (max-width: 860px) {
    .compare-table__table tbody th.compare-table__feature {
        padding-left: var(--step-5);
    }
}

@media (max-width: 600px) {
    .blk--compare-table {
        --ct-cell-x: var(--step-2);
    }

    .compare-table__heading {
        margin-bottom: var(--step-8);
    }

    .compare-table__logo {
        width: 52px;
    }

    .compare-table__name {
        font-size: 13px;
    }

    .compare-table__table tbody :is(th, td) {
        padding-block: 12px;
    }

    .compare-table__table tbody th.compare-table__feature {
        width: 34%;
        padding-inline: var(--step-4);
        text-align: center;
    }

    .compare-table__label {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* ---------- Entrance (script.js) ----------
   The heading comes in (up when centred, otherwise from the left), then the rows rise in
   one after another. */

.blk--compare-table {
    --ct-stagger: calc(var(--reveal-stagger) * .8);
}

.blk--compare-table.rv .compare-table__heading,
.blk--compare-table.rv .compare-table__table tr {
    opacity: 0;
}

.blk--compare-table.rv.rv-from-left .compare-table__heading {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.blk--compare-table.rv.rv-from-below .compare-table__heading {
    transform: translateY(var(--reveal-rise));
}

.blk--compare-table.rv .compare-table__table tr {
    transform: translateY(calc(var(--reveal-rise) * .8));
}

.blk--compare-table.rv-armed .compare-table__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.blk--compare-table.rv-armed .compare-table__table tr {
    --ct-delay: calc(var(--rv-start, 0s) + var(--rv-i, 0) * var(--ct-stagger));
    transition:
        opacity var(--reveal-text) ease var(--ct-delay),
        transform calc(var(--reveal-text) + .1s) var(--reveal-ease) var(--ct-delay);
}

.blk--compare-table.rv.rv-heading-in .compare-table__heading,
.blk--compare-table.rv.rv-rows-in .compare-table__table tr {
    opacity: 1;
    transform: none;
}