/* ─── Tables ───────────────────────────────────────────────────────────
   Phase-2 widget: [hzo_table] (table.php) generates this markup contract —
   headers + the per-cell data-labels the mobile stacking needs. The widget's
   opt-out skin classes (.hzo-table--ruled / .hzo-table--striped) live in the
   @imported variant sheet so the component loader (which enqueues only
   table.css) pulls them on the same request; everything below this import is
   the frozen hand-authored contract, unchanged. */
@import './table-ruled.css?ver=1787769613';

/* G17: horizontal scroller so a wide table never overflows its container. */
.hzo-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.hzo-table { font-family: var(--font-body); }
.hzo-table thead th { font-family: var(--font-heading); color: var(--text-heading); }

/* Responsive table: on mobile, rows stack vertically and each <td> shows
   its column label via the data-label attribute. Requires each <td> to
   have data-label="Column Name" so the label appears next to the value.
   Desktop rendering is unchanged. */
@media (max-width: 767px) {
    .hzo-table thead { display: none; }
    .hzo-table,
    .hzo-table tbody,
    .hzo-table tr,
    .hzo-table td { display: block; width: 100%; box-sizing: border-box; }
    .hzo-table tr {
        border: var(--border-1) solid var(--border);
        border-radius: var(--radius-control);
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-smd);
    }
    .hzo-table td {
        padding: 10px 0;
        border: 0;
        border-bottom: var(--border-1) solid var(--border);
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
        font-size: var(--fs-100);
    }
    .hzo-table tr td:last-child { border-bottom: 0; }
    .hzo-table td[data-label]::before {
        content: attr(data-label);
        font-weight: var(--fw-600, 600);
        color: var(--text-muted);
        flex-shrink: 0;
    }
}