/* Wide tables become one card per row on a phone.
 *
 * Vehicle Search solved this first inside vehicle_search_v2.css, but it named
 * every column label in the stylesheet, keyed on data-v2-col. That meant each
 * new table needed its own block of CSS. Here the label comes from the markup
 * via attr(data-label), so a table opts in with two classes and an attribute
 * per cell and needs no stylesheet change at all.
 *
 *   <div class="table-responsive stack-table-wrap">
 *     <table class="table stack-table">
 *       ...
 *       <td data-label="Max buy">$18,400</td>
 *
 * Above the breakpoint nothing here applies and the table is untouched.
 */

@media (max-width: 640px) {
    /* Bootstrap's .table-responsive scrolls sideways; a stacked table must not,
       or the card layout inherits a horizontal scrollbar it no longer needs. */
    .stack-table-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .stack-table {
        min-width: 0;
        table-layout: auto;
        margin-bottom: 0;
        background: transparent;
        font-size: 0.88rem;
    }

    .stack-table thead {
        display: none;
    }

    .stack-table tbody,
    .stack-table tbody td {
        display: block;
    }

    /* The gap, the darker rule and the shadow are all doing one job: making it
       obvious where one card ends and the next begins while scrolling. A single
       hairline between white boxes on a white page is not enough to see. */
    .stack-table tbody tr {
        margin-bottom: 0.9rem;
        padding: 0.85rem 0.9rem;
        border: 1px solid #b9c2cc;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(16, 42, 67, 0.1);
        text-align: center;
    }

    /* Striping reads as noise once rows are cards with their own border. */
    .stack-table.table-striped > tbody > tr:nth-of-type(odd) > td {
        background: transparent;
    }

    .stack-table tbody td {
        padding: 0.18rem 0;
        border: 0;
    }

    /* Right alignment exists to line figures up in a column. There is no column
       here, so a right-aligned value ends up far from its own label. Centre it
       under the label instead, matching the card. */
    .stack-table tbody td.text-end,
    .stack-table tbody td.text-start,
    .stack-table tbody td.text-center {
        text-align: center !important;
    }

    .stack-table tbody td[data-label]::before {
        display: block;
        margin-top: 0.35rem;
        color: #8a949e;
        font-size: 0.66rem;
        font-weight: 750;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        content: attr(data-label);
    }

    /* The row's identity column, shown as the card's heading rather than as
       another labelled field. */
    .stack-table tbody td.stack-title {
        margin-bottom: 0.15rem;
        font-size: 1rem;
        font-weight: 650;
    }

    .stack-table tbody td.stack-title::before {
        content: none;
    }

    /* A cell with nothing in it is a column that did not apply to this row;
       on a desk it is an empty box, here it would be a label over nothing. */
    .stack-table tbody td:empty {
        display: none;
    }

    /* Action buttons sit in a row of their own at the foot of the card. */
    .stack-table tbody td.stack-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 0.5rem;
    }

    /* A thumbnail sits on its own; the word PHOTO above it earns nothing. */
    .stack-table tbody td.stack-media {
        margin-bottom: 0.3rem;
    }

    .stack-table tbody td.stack-media img {
        max-width: 100%;
        height: auto;
    }

    .stack-table tbody td.stack-actions::before {
        content: none;
    }

    /* Column widths set for a desktop grid fight the card layout. */
    .stack-table tbody td[style*="min-width"] {
        min-width: 0 !important;
    }

    /* Worth a glance in a wide table, not worth a line on a phone. Stacking a
       25-column table without this gives a card with 25 labelled fields, which
       is unusable in its own way. Deliberately keyed to this file's own 640px
       rather than Bootstrap's d-none d-md-table-cell, which flips at 768 and
       would leave a normal table missing columns between the two widths. */
    .stack-table .stack-hide {
        display: none !important;
    }
}