.bk-infotable { --row-pad: 1rem; border-radius: 0.5rem; padding: 1.5rem 1.75rem; }
.bk-infotable--bg-cream { background: var(--color-bg-ivory, #F5F1E8); }
.bk-infotable--bg-white { background: #fff; border: 1px solid var(--color-line); }
.bk-infotable--bg-transparent { padding: 0; }

.bk-infotable__title { font-family: var(--h2-font-family); font-size: 1.25rem; margin: 0 0 0.75rem; color: var(--color-content-heading); }

.bk-infotable__list { display: grid; margin: 0; padding: 0; }
.bk-infotable__row { display: grid; gap: 1.25rem; align-items: baseline; padding: var(--row-pad) 0; }

/* Indeling-varianten */
.bk-infotable--lay-split       .bk-infotable__row { grid-template-columns: 1fr auto; }       /* label vult, value rechts */
.bk-infotable--lay-split       .bk-infotable__value { text-align: right; }

.bk-infotable--lay-label-fills .bk-infotable__row { grid-template-columns: 1fr auto; }       /* label vult, value ernaast */
.bk-infotable--lay-label-fills .bk-infotable__value { text-align: left; }

/* Value-fills: één grote grid op de DL zodat alle labels even breed worden.
   Rijen worden display:contents zodat dt/dd directe grid-items van de DL worden. */
.bk-infotable--lay-value-fills .bk-infotable__list { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; }
.bk-infotable--lay-value-fills .bk-infotable__row  { display: contents; }
.bk-infotable--lay-value-fills .bk-infotable__label,
.bk-infotable--lay-value-fills .bk-infotable__value { padding: var(--row-pad) 0; }
.bk-infotable--lay-value-fills .bk-infotable__value { text-align: left; }

/* Equal: zelfde truc, maar 1fr / 1fr */
.bk-infotable--lay-equal .bk-infotable__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.bk-infotable--lay-equal .bk-infotable__row  { display: contents; }
.bk-infotable--lay-equal .bk-infotable__label,
.bk-infotable--lay-equal .bk-infotable__value { padding: var(--row-pad) 0; }

/* Borders voor split / label-fills (waar de row een eigen box heeft) */
.bk-infotable--lay-split.bk-infotable--div-dotted       .bk-infotable__row + .bk-infotable__row,
.bk-infotable--lay-label-fills.bk-infotable--div-dotted .bk-infotable__row + .bk-infotable__row { border-top: 1px dotted var(--color-line); }
.bk-infotable--lay-split.bk-infotable--div-solid        .bk-infotable__row + .bk-infotable__row,
.bk-infotable--lay-label-fills.bk-infotable--div-solid  .bk-infotable__row + .bk-infotable__row { border-top: 1px solid var(--color-line); }

/* Borders voor value-fills / equal (rows zijn display:contents, dus border op dt/dd) */
.bk-infotable--lay-value-fills.bk-infotable--div-dotted .bk-infotable__row + .bk-infotable__row > .bk-infotable__label,
.bk-infotable--lay-value-fills.bk-infotable--div-dotted .bk-infotable__row + .bk-infotable__row > .bk-infotable__value,
.bk-infotable--lay-equal.bk-infotable--div-dotted       .bk-infotable__row + .bk-infotable__row > .bk-infotable__label,
.bk-infotable--lay-equal.bk-infotable--div-dotted       .bk-infotable__row + .bk-infotable__row > .bk-infotable__value { border-top: 1px dotted var(--color-line); }
.bk-infotable--lay-value-fills.bk-infotable--div-solid  .bk-infotable__row + .bk-infotable__row > .bk-infotable__label,
.bk-infotable--lay-value-fills.bk-infotable--div-solid  .bk-infotable__row + .bk-infotable__row > .bk-infotable__value,
.bk-infotable--lay-equal.bk-infotable--div-solid        .bk-infotable__row + .bk-infotable__row > .bk-infotable__label,
.bk-infotable--lay-equal.bk-infotable--div-solid        .bk-infotable__row + .bk-infotable__row > .bk-infotable__value { border-top: 1px solid var(--color-line); }

.bk-infotable--compact { --row-pad: 0.5rem; }
.bk-infotable--roomy   { --row-pad: 1.25rem; }

.bk-infotable__label { margin: 0; color: var(--color-content-text); }
.bk-infotable__value { margin: 0; color: var(--color-content-faded); font-variant-numeric: tabular-nums; }

/* Mobiel: alle layout-varianten naar simpele 1-kolom stack — label boven, waarde eronder */
@media (max-width: 640px) {
	.bk-infotable { padding: 1rem 1.25rem; }
	.bk-infotable--bg-transparent { padding: 0; }
	.bk-infotable__row { grid-template-columns: 1fr !important; gap: 0.25rem; }
	.bk-infotable__value { text-align: left !important; color: var(--color-content-text); font-weight: 500; }
	.bk-infotable--lay-value-fills .bk-infotable__list,
	.bk-infotable--lay-equal       .bk-infotable__list { grid-template-columns: 1fr; column-gap: 0; }
	.bk-infotable--lay-value-fills .bk-infotable__row,
	.bk-infotable--lay-equal       .bk-infotable__row { display: grid; padding: var(--row-pad) 0; }
	.bk-infotable--lay-value-fills .bk-infotable__label,
	.bk-infotable--lay-value-fills .bk-infotable__value,
	.bk-infotable--lay-equal       .bk-infotable__label,
	.bk-infotable--lay-equal       .bk-infotable__value { padding: 0; }
	/* Re-apply borders op de row zelf (nu weer een box) */
	.bk-infotable--div-dotted .bk-infotable__row + .bk-infotable__row { border-top: 1px dotted var(--color-line); }
	.bk-infotable--div-solid  .bk-infotable__row + .bk-infotable__row { border-top: 1px solid var(--color-line); }
	.bk-infotable--lay-value-fills .bk-infotable__row > .bk-infotable__label,
	.bk-infotable--lay-value-fills .bk-infotable__row > .bk-infotable__value,
	.bk-infotable--lay-equal       .bk-infotable__row > .bk-infotable__label,
	.bk-infotable--lay-equal       .bk-infotable__row > .bk-infotable__value { border-top: 0 !important; }
}