/* Default styles (Mobile-first, for smaller screens) */

/* Ensure no extra padding */
.LiveField--matrix > .LiveField__container {
    padding: 0.5; /* Ensure no extra padding */
}

/* Adjust row label width and ensure text wrapping */
.Matrix__row-label {
    max-width: 188px !important; /* Cap the width for desktop */
    width: 200px; /* Set the width where text should wrap */
    word-wrap: break-word; /* Allow text to break and wrap */
    white-space: normal; /* Ensure wrapping */
    text-align: left; /* Align text to the left */
    font-size: 1.02rem !important; /* Adjusted font size */
    line-height: 3.0; /* Double increased line spacing */
}

/* Target the column labels to make them narrow */
.Matrix__column-label.Matrix__column--desktop {
    width: 10px !important; /* Set the smallest possible width */
    min-width: 10px;
    max-width: 10px;
    text-align: center; /* Center-align the text */
    overflow: hidden; /* Prevent overflow */
    white-space: normal; /* Prevent wrapping */
    font-size: 1.0rem !important; /* Adjusted font size */
    line-height: 3.6; /* Double increased line spacing */
}

/* Ensure Matrix__item elements are as narrow as possible and align with .Matrix__column-label */
.Matrix__item {
    width: 10px !important; /* Set the same width as the column labels for alignment */
    min-width: 10px;
    max-width: 10px;
    text-align: center; /* Center-align content */
    overflow: hidden; /* Prevent overflow */
    white-space: normal; /* Prevent wrapping of content */
    font-size: 1.0rem !important; /* Adjusted font size */
    line-height: 3.6; /* Double increased line spacing */
}

/* ============================ */

/* Styles for Desktop and Larger Screens */
@media (min-width: 768px) {
    /* Adjust row label width, ensure text wrapping, and increase font size for desktop */
    .Matrix__row-label {
        max-width: 600px !important; /* Cap the width for desktop */
        width: 450px; /* Set the width where text should wrap */
        word-wrap: break-word; /* Allow text to break and wrap */
        white-space: normal; /* Ensure wrapping */
        text-align: left; /* Align text to the left */
        font-size: 1.18rem !important; /* Adjusted font size for larger screens */
        line-height: 6; /* Double increased line spacing */
    }

    /* Target the column labels to make them narrow on desktop */
    .Matrix__column-label.Matrix__column--desktop {
        width: 25px !important; /* Set the smallest possible width */
        min-width: 20px;
        max-width: 20px;
        text-align: center; /* Center-align the text */
        overflow: hidden; /* Prevent overflow */
        white-space: nowrap; /* Prevent wrapping */
        font-size: 1.4rem !important; /* Adjusted font size */
        line-height: 4; /* Double increased line spacing */
    }

    /* Ensure Matrix__item elements are as narrow as possible and align with .Matrix__column-label */
    .Matrix__item {
        width: 25px !important; /* Set the same width as the column labels for alignment */
        min-width: 20px;
        max-width: 20px;
        text-align: center; /* Center-align content */
        overflow: hidden; /* Prevent overflow */
        white-space: nowrap; /* Prevent wrapping of content */
        font-size: 1.4rem !important; /* Adjusted font size */
        line-height: 4; /* Double increased line spacing */
    }
}