/* =================================================================== MATRIX section css =================================================================== */
/* Comparison table (configurations, contract types, sectors). Below 768px each
   row becomes a card and every cell shows its column name from data-label. */
.matrix {
    & .matrix__wrap {
        background: var(--white);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    & .matrix__table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    & .matrix__th {
        padding: var(--sp20) var(--sp25);
        background: var(--ink);
        font-family: var(--font-mona);
        font-weight: 500;
        color: var(--white);
        vertical-align: bottom;
    }

    & .matrix__rowhead,
    & .matrix__td {
        padding: var(--sp20) var(--sp25);
        border-bottom: 1px solid var(--line);
        vertical-align: top;
    }

    & .matrix__rowhead {
        font-family: var(--font-mona);
        font-weight: 500;
        color: var(--ink);
    }

    & .matrix__row {
        transition: var(--transition);

        &:last-child :is(.matrix__rowhead, .matrix__td) { border-bottom: 0; }
        &:hover { background: var(--surface-light); }
    }

    & .matrix__note {
        max-width: 760px;
        margin: var(--sp30) auto 0;
        text-align: center;

        & a { color: var(--primary); text-decoration: underline; }
        & a:hover { color: var(--ink); }
    }
}

/* =================================================================== MATRIX responsive =================================================================== */
@media (max-width: 767.98px) {
    .matrix {
        & .matrix__wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
        & .matrix__table,
        & .matrix__table tbody,
        & .matrix__row,
        & .matrix__rowhead,
        & .matrix__td { display: block; width: 100%; }

        & .matrix__table thead {
            position: absolute;
            width: 1px; height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
        }

        & .matrix__row {
            margin-bottom: var(--sp15);
            background: var(--white);
            border-radius: var(--r-lg);
            overflow: hidden;
        }

        & .matrix__rowhead {
            background: var(--ink);
            border-bottom: 0;
            color: var(--white);
        }

        & .matrix__td {
            padding-block: var(--sp12);

            &::before {
                display: block;
                font-size: var(--f12);
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: .04em;
                color: var(--primary);
                content: attr(data-label);
            }
        }
    }
}