/*
 * Responsive table (news-element/bm-table). Loaded by ne_bm_enqueue_assets.
 *
 * A normal table on wide screens. Below 768px, "Stack" (the default,
 * .ne-bm-table--stack) turns each row into a card and each cell shows its
 * column heading from data-label; "Scroll" (.ne-bm-table--scroll) keeps the
 * columns and scrolls sideways.
 *
 * Visual defaults sit in :where(), which gives them zero specificity, so the
 * block's own Style-tab values (written as .ne-block-{id} rules) always win.
 */

:where(.ne-bm-table) {
	margin: 0;
	overflow-x: auto;
}

:where(.ne-bm-table__table) {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

:where(.ne-bm-table__caption) {
	caption-side: top;
	text-align: left;
	font-weight: 600;
}

:where(.ne-bm-table__table th),
:where(.ne-bm-table__table td) {
	padding: 0.75rem 1rem;
	border: 1px solid #d1d5db;
	text-align: left;
	vertical-align: top;
}

:where(.ne-bm-table__head th) {
	background-color: #f3f4f6;
	font-weight: 600;
}

:where(.ne-bm-table__table th[scope="row"]) {
	font-weight: 600;
}

/* Rows only: a line under each row, no vertical lines, no line under the last row. */
:where(.ne-bm-table--borders-rows .ne-bm-table__table) th,
:where(.ne-bm-table--borders-rows .ne-bm-table__table) td {
	border-width: 0 0 1px;
}

:where(.ne-bm-table--borders-rows .ne-bm-table__table tbody tr:last-child) > th,
:where(.ne-bm-table--borders-rows .ne-bm-table__table tbody tr:last-child) > td {
	border-bottom-width: 0;
}

/* Scroll: keep the columns readable and let the figure scroll. */
:where(.ne-bm-table--scroll .ne-bm-table__table) {
	min-width: 440px;
}

@media (max-width: 767px) {
	.ne-bm-table--stack .ne-bm-table__head {
		display: none;
	}

	.ne-bm-table--stack .ne-bm-table__table,
	.ne-bm-table--stack .ne-bm-table__table tbody,
	.ne-bm-table--stack .ne-bm-table__table tr,
	.ne-bm-table--stack .ne-bm-table__table th,
	.ne-bm-table--stack .ne-bm-table__table td {
		display: block;
	}

	.ne-bm-table--stack .ne-bm-table__caption {
		display: block;
	}

	.ne-bm-table--stack .ne-bm-table__table tr {
		margin-bottom: 1rem;
		border: 1px solid #d1d5db;
		border-radius: 6px;
	}

	.ne-bm-table--stack .ne-bm-table__table th,
	.ne-bm-table--stack .ne-bm-table__table td {
		border-width: 0 0 1px;
	}

	.ne-bm-table--stack .ne-bm-table__table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}
}