/* Mobile "table -> cards" layer. Companion to js/tableCards.js, which tags the
   DOM; nothing here applies to a table the script has not opted in.

   The editor writes its tables with inline width/height on the table, the rows
   AND every cell (e.g. style="width: 12.9662%; height: 75.39px"), so the
   structural properties below have to be !important to win - a plain rule
   loses to the inline style and the cards come out 13% wide.

   Everything else is left to inherit, so the cards pick up each site's own
   fonts and colours instead of imposing a look on 370+ designs. A mercaz or
   schema stylesheet can restyle them freely via .as-tc / .as-tc-row. */

/* Clones of rowspan cells exist only for the card view. */
table .as-tc-clone {
    display: none;
}

@media (max-width: 767px) {

    /* ---- fallback: no header row to read, keep the table but let it scroll
            inside its own box instead of pushing the page sideways ---- */
    table.as-tc-scroll {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.as-tc-scroll > colgroup {
        display: none;
    }

    table.as-tc-scroll tr {
        height: auto !important;
    }

    table.as-tc-scroll td,
    table.as-tc-scroll th {
        height: auto !important;
        min-width: 90px;
    }

    /* ---- cards ---- */
    table.as-tc {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        border: 0 !important;
        border-spacing: 0;
        overflow: visible;
    }

    table.as-tc > colgroup {
        display: none;
    }

    table.as-tc > thead,
    table.as-tc > tbody,
    table.as-tc > tfoot {
        display: block;
        width: 100%;
    }

    table.as-tc .as-tc-head {
        display: none !important;
    }

    /* rows above the header row are full-width banners, not data */
    table.as-tc .as-tc-title {
        display: block;
        width: 100% !important;
        height: auto !important;
        margin: 18px 0 10px;
    }

    /* repeated column titles inside a section-banner row */
    table.as-tc .as-tc-title > .as-tc-echo {
        display: none !important;
    }

    table.as-tc .as-tc-title > td,
    table.as-tc .as-tc-title > th {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        border: 0 !important;
        font-weight: 700;
        text-align: center !important;
        white-space: normal !important;
    }

    /* one card per data row */
    table.as-tc .as-tc-row {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 14px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 8px;
        overflow: hidden;
    }

    /* one "label: value" line per cell */
    table.as-tc .as-tc-row > td,
    table.as-tc .as-tc-row > th {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 9px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        text-align: start !important;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    table.as-tc .as-tc-row > td:last-child,
    table.as-tc .as-tc-row > th:last-child {
        border-bottom: 0 !important;
    }

    table.as-tc .as-tc-row > .as-tc-clone {
        display: flex !important;
    }

    /* a cell with neither text nor media would render as a bare label */
    table.as-tc .as-tc-row > .as-tc-empty {
        display: none !important;
    }

    table.as-tc .as-tc-row > td::before,
    table.as-tc .as-tc-row > th::before {
        content: attr(data-tc-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-weight: 700;
        opacity: 0.75;
        text-align: start;
    }

    /* an unlabelled column (merged header cell) gets the full line */
    table.as-tc .as-tc-row > td[data-tc-label=""]::before,
    table.as-tc .as-tc-row > th[data-tc-label=""]::before {
        content: none;
    }

    /* the editor wraps most cell text in <p>; its margins break the line-up */
    table.as-tc .as-tc-row > td > p,
    table.as-tc .as-tc-row > th > p,
    table.as-tc .as-tc-title > td > p {
        margin: 0;
    }

    table.as-tc .as-tc-row img {
        max-width: 100%;
        height: auto;
    }
}