/*
    Comparison tables that stop being tables on a phone.

    A model-comparison table is specs down the side and products across the top. On a narrow
    screen Bootstrap's .table-responsive hands it a horizontal scrollbar, which is the worst of
    both worlds: the row labels scroll out of view, so the reader is looking at three numbers
    with nothing to say what they measure.

    Below 768px each ROW becomes its own block - the spec as a heading, then one line per model
    with the model's name in front of its value:

        8K outputs
          Pro       4 or 8 (B9)
          Entry     4 (B9)
          Compact   4 (B9)

    WHY PER SPEC AND NOT PER MODEL. Splitting into three per-model lists reads well but destroys
    the reason the table exists: someone is choosing between them, and comparing then means
    scrolling back and forth between three separate lists holding numbers in their head. Keeping
    the three values together answers the question the page is actually being asked.

    The model names come from data-label on each cell, so the markup carries them once and this
    file only decides when to show them. A cell without data-label degrades to no label rather
    than to a wrong one.
*/

@media (max-width: 767px) {

    /* Bootstrap would otherwise still offer the scrollbar this file exists to remove. */
    .content-column .table-responsive {
        overflow-x: visible;
        border: 0;
        margin-bottom: 0;
        width: auto;
    }

    .content-column table.spec-compare,
    .content-column table.spec-compare tbody,
    .content-column table.spec-compare tr,
    .content-column table.spec-compare td {
        display: block;
        width: auto;
    }

    /*
        Bootstrap sets white-space:nowrap on cells inside .table-responsive below 768px - it is
        what makes its horizontal scroll work. Here it is exactly wrong: the value cannot wrap,
        so a long one ("4 or 8, or 16 to 32 through external quadrant splitters") runs past the
        edge and is clipped by the row's overflow.

        The selector is deliberately as specific as Bootstrap's own
        (.table-responsive > .table > tbody > tr > td) rather than reaching for !important,
        which would be a heavier tool than the problem needs.
    */
    .content-column .table-responsive > table.spec-compare > tbody > tr > td,
    .content-column .table-responsive > table.spec-compare > thead > tr > th,
    .content-column table.spec-compare td {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* The header row's job is done by the per-cell labels now. */
    .content-column table.spec-compare thead {
        display: none;
    }

    .content-column table.spec-compare {
        border: 0;
    }

    .content-column table.spec-compare tr {
        border: 1px solid #dddddd;
        border-radius: 3px;
        margin: 0 0 1.1em;
        padding: 0 0 0.4em;
        /* NOT overflow:hidden. It was clipping the long values rather than letting them wrap,
           which is how the quadrant-splitter row lost its ending. The rounded corners survive
           without it because the only filled child is the first cell. */
    }

    /* First cell of a row is the specification itself - a heading for the block. */
    .content-column table.spec-compare td:first-child {
        background-color: #f5f5f5;
        border: 0;
        border-bottom: 1px solid #dddddd;
        padding: 0.6em 0.9em;
        margin-bottom: 0.35em;
    }

    .content-column table.spec-compare td:first-child::before {
        content: none;
    }

    /* Every other cell is one model's answer, introduced by its name. */
    .content-column table.spec-compare td {
        border: 0;
        padding: 0.3em 0.9em 0.3em 7.5em;
        position: relative;
        line-height: 1.45;
    }

    .content-column table.spec-compare td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.9em;
        width: 6.2em;
        font-weight: 600;
        color: #555555;
    }
}