/* Tabellen stapelen zodra ze niet in hun kolom passen. Zie inc/tabellen.php.
   - .fb-tabel-stapel.is-gestapeld: gezet door tabellen.js als de tabel breder is dan
     zijn kolom (bijvoorbeeld zes kolommen naast een zijbalk op desktop).
   - Onder 640px stapelt elke .fb-tabel-stapel sowieso, ook zonder JavaScript.
   Niet voor .fb-vgl__tabel (eigen kaartweergave), Ninja Tables, WooCommerce en
   .fb-tabel-vast. */

/* Meetstand: even de normale tabelweergave, zonder zichtbaar effect */
/* Op 100% breedte: past de tabel na het afbreken van tekst nog in zijn kolom, dan blijft hij een tabel */
.fb-tabel-stapel.fb-tabel-meten { display: table !important; width: 100% !important; max-width: none !important; table-layout: auto !important; }
.fb-tabel-stapel.fb-tabel-meten thead { display: table-header-group !important; }
.fb-tabel-stapel.fb-tabel-meten tbody { display: table-row-group !important; }
.fb-tabel-stapel.fb-tabel-meten tr { display: table-row !important; }
.fb-tabel-stapel.fb-tabel-meten td,
.fb-tabel-stapel.fb-tabel-meten th { display: table-cell !important; width: auto !important; }

/* Kaartweergave (JS: is-gestapeld) */
.fb-tabel-stapel.is-gestapeld { display: block; width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
.fb-tabel-stapel.is-gestapeld thead,
.fb-tabel-stapel.is-gestapeld .fb-tabel-koprij { display: none; }
.fb-tabel-stapel.is-gestapeld tbody,
.fb-tabel-stapel.is-gestapeld tfoot,
.fb-tabel-stapel.is-gestapeld tr,
.fb-tabel-stapel.is-gestapeld th,
.fb-tabel-stapel.is-gestapeld td { display: block; width: 100%; box-sizing: border-box; }
.fb-tabel-stapel.is-gestapeld tr { margin: 0 0 12px; padding: 4px 0; border: 1px solid #dfe5dc; border-radius: 12px; background: #fff; overflow: hidden; }
.fb-tabel-stapel.is-gestapeld.is-style-stripes tbody tr:nth-child(odd) { background: #fff; }
.fb-tabel-stapel.is-gestapeld td,
.fb-tabel-stapel.is-gestapeld 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; }
.fb-tabel-stapel.is-gestapeld tr > :last-child { border-bottom: 0; }
.fb-tabel-stapel.is-gestapeld td[data-label]::before,
.fb-tabel-stapel.is-gestapeld tbody th[data-label]::before { content: attr(data-label); flex: 0 0 42%; text-align: left; font-weight: 600; color: #243f2f; font-size: 13px; }
.fb-tabel-stapel.is-gestapeld tbody tr > :first-child { background: #f2f7ec; font-weight: 600; color: #243f2f; }
.fb-tabel-stapel.is-gestapeld td:not([data-label]) { justify-content: flex-start; text-align: left; }
.wp-block-table:has(> .fb-tabel-stapel.is-gestapeld) { overflow: visible; }

/* Telefoon: altijd kaarten, ook zonder JavaScript */
@media (max-width: 640px) {
  .fb-tabel-stapel:not(.fb-tabel-meten) { display: block; width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
  .fb-tabel-stapel:not(.fb-tabel-meten) thead,
  .fb-tabel-stapel:not(.fb-tabel-meten) .fb-tabel-koprij { display: none; }
  .fb-tabel-stapel:not(.fb-tabel-meten) tbody,
  .fb-tabel-stapel:not(.fb-tabel-meten) tfoot,
  .fb-tabel-stapel:not(.fb-tabel-meten) tr,
  .fb-tabel-stapel:not(.fb-tabel-meten) th,
  .fb-tabel-stapel:not(.fb-tabel-meten) td { display: block; width: 100%; box-sizing: border-box; }
  .fb-tabel-stapel:not(.fb-tabel-meten) tr { margin: 0 0 12px; padding: 4px 0; border: 1px solid #dfe5dc; border-radius: 12px; background: #fff; overflow: hidden; }
  .fb-tabel-stapel.is-style-stripes:not(.fb-tabel-meten) tbody tr:nth-child(odd) { background: #fff; }
  .fb-tabel-stapel:not(.fb-tabel-meten) td,
  .fb-tabel-stapel:not(.fb-tabel-meten) 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; }
  .fb-tabel-stapel:not(.fb-tabel-meten) tr > :last-child { border-bottom: 0; }
  .fb-tabel-stapel:not(.fb-tabel-meten) td[data-label]::before,
  .fb-tabel-stapel:not(.fb-tabel-meten) tbody th[data-label]::before { content: attr(data-label); flex: 0 0 42%; text-align: left; font-weight: 600; color: #243f2f; font-size: 13px; }
  .fb-tabel-stapel:not(.fb-tabel-meten) tbody tr > :first-child { background: #f2f7ec; font-weight: 600; color: #243f2f; }
  .fb-tabel-stapel:not(.fb-tabel-meten) td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .wp-block-table:has(> .fb-tabel-stapel) { overflow: visible; }
}