/* Tables become stacked cards when they do not fit their column. See inc/tables.php.
   - .tmf-table-stack.is-stacked: set by tables.js when the table is wider than its column.
   - Below 640px every .tmf-table-stack stacks, also without JavaScript.
   Not for .tmf-dc__table, .tmf-hub__table, Ninja Tables, WooCommerce and .tmf-table-fixed. */

/* Measuring state: plain table layout at 100% width, no visible effect */
.tmf-table-stack.tmf-table-measure { display: table !important; width: 100% !important; max-width: none !important; table-layout: auto !important; }
.tmf-table-stack.tmf-table-measure thead { display: table-header-group !important; }
.tmf-table-stack.tmf-table-measure tbody { display: table-row-group !important; }
.tmf-table-stack.tmf-table-measure tr { display: table-row !important; }
.tmf-table-stack.tmf-table-measure td,
.tmf-table-stack.tmf-table-measure th { display: table-cell !important; width: auto !important; }

/* Card layout (JS: is-stacked) */
.tmf-table-stack.is-stacked { display: block; width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
.tmf-table-stack.is-stacked thead,
.tmf-table-stack.is-stacked .tmf-table-headrow { display: none; }
.tmf-table-stack.is-stacked tbody,
.tmf-table-stack.is-stacked tfoot,
.tmf-table-stack.is-stacked tr,
.tmf-table-stack.is-stacked th,
.tmf-table-stack.is-stacked td { display: block; width: 100%; box-sizing: border-box; }
.tmf-table-stack.is-stacked tr { margin: 0 0 12px; padding: 4px 0; border: 1px solid #dfe5dc; border-radius: 12px; background: #fff; overflow: hidden; }
.tmf-table-stack.is-stacked.is-style-stripes tbody tr:nth-child(odd) { background: #fff; }
.tmf-table-stack.is-stacked td,
.tmf-table-stack.is-stacked tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 14px; border: 0; border-bottom: 1px solid #eef1ec; text-align: right; font-size: 15px; line-height: 1.4; }
.tmf-table-stack.is-stacked tr > :last-child { border-bottom: 0; }
.tmf-table-stack.is-stacked td[data-label]::before,
.tmf-table-stack.is-stacked tbody th[data-label]::before { content: attr(data-label); flex: 0 0 42%; text-align: left; font-weight: 600; color: #243f2f; font-size: 13px; }
.tmf-table-stack.is-stacked tbody tr > :first-child { background: #f2f7ec; font-weight: 600; color: #243f2f; }
.tmf-table-stack.is-stacked td:not([data-label]) { justify-content: flex-start; text-align: left; }
.wp-block-table:has(> .tmf-table-stack.is-stacked) { overflow: visible; }

/* Phone: always cards, also without JavaScript */
@media (max-width: 640px) {
  .tmf-table-stack:not(.tmf-table-measure) { display: block; width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
  .tmf-table-stack:not(.tmf-table-measure) thead,
  .tmf-table-stack:not(.tmf-table-measure) .tmf-table-headrow { display: none; }
  .tmf-table-stack:not(.tmf-table-measure) tbody,
  .tmf-table-stack:not(.tmf-table-measure) tfoot,
  .tmf-table-stack:not(.tmf-table-measure) tr,
  .tmf-table-stack:not(.tmf-table-measure) th,
  .tmf-table-stack:not(.tmf-table-measure) td { display: block; width: 100%; box-sizing: border-box; }
  .tmf-table-stack:not(.tmf-table-measure) tr { margin: 0 0 12px; padding: 4px 0; border: 1px solid #dfe5dc; border-radius: 12px; background: #fff; overflow: hidden; }
  .tmf-table-stack.is-style-stripes:not(.tmf-table-measure) tbody tr:nth-child(odd) { background: #fff; }
  .tmf-table-stack:not(.tmf-table-measure) td,
  .tmf-table-stack:not(.tmf-table-measure) tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 14px; border: 0; border-bottom: 1px solid #eef1ec; text-align: right; font-size: 15px; line-height: 1.4; }
  .tmf-table-stack:not(.tmf-table-measure) tr > :last-child { border-bottom: 0; }
  .tmf-table-stack:not(.tmf-table-measure) td[data-label]::before,
  .tmf-table-stack:not(.tmf-table-measure) tbody th[data-label]::before { content: attr(data-label); flex: 0 0 42%; text-align: left; font-weight: 600; color: #243f2f; font-size: 13px; }
  .tmf-table-stack:not(.tmf-table-measure) tbody tr > :first-child { background: #f2f7ec; font-weight: 600; color: #243f2f; }
  .tmf-table-stack:not(.tmf-table-measure) td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .wp-block-table:has(> .tmf-table-stack) { overflow: visible; }
}