/* ============================================================
   MATRIX.CSS — Domanda a griglia
   ============================================================ */

/* Desktop */
.matrix--mobile  { display: none; }
.matrix--desktop { display: block; overflow-x: auto; }

.matrix-table { width: 100%; border-collapse: collapse; }
.matrix-table th,
.matrix-table td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--clr-border-light);
}
.matrix-table__corner { width: 180px; text-align: left; }
.matrix-table__col-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text-muted);
    min-width: 80px;
}
.matrix-table__row-label {
    text-align: left;
    font-size: var(--text-sm);
    color: var(--clr-text);
    font-weight: 500;
}
.matrix-table__cell { vertical-align: middle; }

.matrix-radio {
    width: 20px; height: 20px;
    accent-color: var(--clr-primary);
    cursor: pointer;
}

/* Mobile: stackata */
@media (max-width: 700px) {
    .matrix--desktop { display: none; }
    .matrix--mobile  { display: block; }

    .matrix-mobile-row {
        padding: var(--space-5) 0;
        border-bottom: 1px solid var(--clr-border-light);
    }
    .matrix-mobile-row:last-child { border-bottom: none; }
    .matrix-mobile-row__label {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--clr-text);
        margin-bottom: var(--space-3);
    }
    .matrix-mobile-row__options { display: flex; flex-direction: column; gap: var(--space-2); }
}