/* ==========================================================================
   WP Block Table — Responsive card-stacking (frontend only)
   Loaded via wp_enqueue_scripts; deliberately NOT enqueued in the
   block editor — the stacked-card layout (thead hidden, rows become
   vertical flex columns) makes columns un-editable.
   ========================================================================== */

/* Container query context — lets the stacked-card layout below trigger
   from the table's own width (e.g. when dropped into a sidebar) instead
   of waiting on the viewport breakpoint. */
.wp-block-table {
    container-type: inline-size;
    container-name: wp-block-table;
}

/* ==========================================================================
   Mobile Card Layout
   ========================================================================== */

@media (max-width: 781px) {
    .wp-block-table {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        /* Drop horizontal padding — page-level has-global-padding already
           handles the gap to the screen edge. Block padding keeps the card
           separated from surrounding content. */
        padding: 12px 0;
        box-sizing: border-box;

        table {
            background: #fff;
            padding: 12px 0;
            border-radius: 0px 0px 16px 16px;
            box-shadow:0 8px 40px 0 rgba(32, 35, 43, 0.06);
        }
    }

    .wp-block-table table,
    .wp-block-table thead,
    .wp-block-table tbody,
    .wp-block-table tfoot,
    .wp-block-table tr,
    .wp-block-table th {
        display: block;
        width: 100%;
    }

    .wp-block-table .has-fixed-layout {
        table-layout: initial;
    }

    /* Mobile Header - Custom element added by PHP */
    .wp-block-table__mobile-header {
        display: block;
        background-color: var(--wp--preset--color--primary, #ff4343);
        border-radius: 12px 12px 0 0;
        padding: 12px;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
    }

    /* Hide original thead on mobile */
    .wp-block-table thead {
        display: none;
    }

    /* Hide tfoot on mobile */
    .wp-block-table tfoot {
        display: none;
    }

    /* Hide original figcaption on mobile (content shown in mobile header) */
    .wp-block-table figcaption {
        display: none;
    }

    /* Cards Container */
    .wp-block-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: transparent;
    }

    /* Each row becomes a card */
    .wp-block-table tbody tr {
        display: flex;
        flex-direction: column;
        background: #fafafc;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(32, 35, 43, 0.04);
    }

    .wp-block-table tbody tr:nth-child(even) {
        background: #fafafc;
    }

    /* First cell becomes card title */
    .wp-block-table tbody td:first-child {
        padding: 10px 0px;
        font-size: 16px;
        font-weight: 500;
        color: #1a3365;
        background: #fafafc;
        border-bottom: 1px solid #e3e3ef;
        margin: 0px 12px;
    }

    /* Other cells become label:value rows */
    .wp-block-table tbody td:not(:first-child) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        font-size: 14px;
        color: #3d4e70;
        border-top: 0.5px solid #e3e3ef;
        text-align: right;
    }

    .wp-block-table tbody td:not(:first-child):nth-child(2) {
        border-top: none;
    }

    /* Label from data attribute */
    .wp-block-table tbody td:not(:first-child)::before {
        content: attr(data-label);
        font-weight: 400;
        color: #3d4e70;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Reset text alignment for cell content */
    .wp-block-table:not(:has([class*="has-text-align"])) tbody td {
        text-align: right;
    }

    .wp-block-table:not(:has([class*="has-text-align"])) tbody td:first-child {
        text-align: left;
    }
}

/* ==========================================================================
   Sidebar / narrow-container fallback — apply the same stacked-card layout
   when the table itself is squeezed below ~1000px and it has 4+ columns
   (3-column tables stay as a regular table because they fit). The
   :has(:nth-child(4)) gate scopes this to "wide" tables in narrow
   containers; widely-supported in evergreen browsers (Safari 15.4+,
   Chrome 105+, Firefox 121+).

   Threshold bumped from 500px to 1000px (sheet feedback row 25): typical
   sidebar-layout main content lands at ~820-1060px (1200-1440px viewport
   minus 349px sidebar minus gaps), and the sidebar-stacked range
   (viewports 781-1024 where the layout stacks) sits at ~700-1000px.
   1000px catches both reliably. Non-sidebar tables on wider pages
   (>1000px) still render as normal tables.
   ========================================================================== */

@container wp-block-table (max-width: 1000px) {
    .wp-block-table:has(thead th:nth-child(4)),
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 12px 0;
        box-sizing: border-box;
    }

    .wp-block-table:has(thead th:nth-child(4)) table,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) table {
        background: #fff;
        padding: 12px 0;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 40px 0 rgba(32, 35, 43, 0.06);
    }

    .wp-block-table:has(thead th:nth-child(4)) :is(table, thead, tbody, tfoot, tr, th),
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) :is(table, thead, tbody, tfoot, tr, th) {
        display: block;
        width: 100%;
    }

    .wp-block-table:has(thead th:nth-child(4)) .has-fixed-layout,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) .has-fixed-layout {
        table-layout: initial;
    }

    .wp-block-table:has(thead th:nth-child(4)) .wp-block-table__mobile-header,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) .wp-block-table__mobile-header {
        display: block;
        background-color: var(--wp--preset--color--primary, #ff4343);
        border-radius: 12px 12px 0 0;
        padding: 12px;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #fff;
    }

    .wp-block-table:has(thead th:nth-child(4)) :is(thead, tfoot, figcaption),
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) :is(thead, tfoot, figcaption) {
        display: none;
    }

    .wp-block-table:has(thead th:nth-child(4)) tbody,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: transparent;
    }

    .wp-block-table:has(thead th:nth-child(4)) tbody tr,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) tbody tr {
        display: flex;
        flex-direction: column;
        background: #fafafc;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(32, 35, 43, 0.04);
    }

    .wp-block-table:has(thead th:nth-child(4)) tbody td:first-child,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) tbody td:first-child {
        padding: 10px 0;
        font-size: 16px;
        font-weight: 500;
        color: #1a3365;
        background: #fafafc;
        border-bottom: 1px solid #e3e3ef;
        margin: 0 12px;
    }

    .wp-block-table:has(thead th:nth-child(4)) tbody td:not(:first-child),
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) tbody td:not(:first-child) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        font-size: 14px;
        color: #3d4e70;
        border-top: 0.5px solid #e3e3ef;
        text-align: right;
    }

    .wp-block-table:has(thead th:nth-child(4)) tbody td:not(:first-child)::before,
    .wp-block-table:has(tbody tr:first-child td:nth-child(4)) tbody td:not(:first-child)::before {
        content: attr(data-label);
        font-weight: 400;
        color: #3d4e70;
        text-align: left;
        flex-shrink: 0;
        margin-right: 12px;
    }
}