/**
 * GM Responsive Tables
 * Stacked mobile layout for Gutenberg Table blocks.
 */

@media (max-width: 767px) {

    .wp-block-table.is-style-gm-stacked-mobile {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .wp-block-table.is-style-gm-stacked-mobile table,
    .wp-block-table.is-style-gm-stacked-mobile tbody,
    .wp-block-table.is-style-gm-stacked-mobile tr,
    .wp-block-table.is-style-gm-stacked-mobile td,
    .wp-block-table.is-style-gm-stacked-mobile th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Hide original column headings visually */
    .wp-block-table.is-style-gm-stacked-mobile thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Each table row becomes its own card */
    .wp-block-table.is-style-gm-stacked-mobile tbody tr {
        margin-bottom: 20px;
        padding: 20px;
        background: rgba(194, 151, 73, 0.05);
        border: 1px solid rgba(194, 151, 73, 0.25);
    }

    .wp-block-table.is-style-gm-stacked-mobile tbody th,
    .wp-block-table.is-style-gm-stacked-mobile tbody td {
        padding: 10px 0;
        border: 0;
        text-align: left;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .wp-block-table.is-style-gm-stacked-mobile tbody th + td,
    .wp-block-table.is-style-gm-stacked-mobile tbody td + td {
        border-top: 1px solid rgba(194, 151, 73, 0.15);
    }

    /* Dynamically generated column labels */
    .wp-block-table.is-style-gm-stacked-mobile tbody [data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #073d5b;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Prevent empty labels from displaying */
    .wp-block-table.is-style-gm-stacked-mobile tbody [data-label=""]::before {
        display: none;
    }

    .wp-block-table.is-style-gm-stacked-mobile tbody tr:last-child {
        margin-bottom: 0;
    }

    .wp-block-table.is-style-gm-stacked-mobile table {
        table-layout: auto !important;
        border: 0;
    }
}