/* BS23 US Addon - responsive table modes for Elementor Pro Post Content widget.
   Mode classes are set per device via the widget's "Responsive Mode" control:
   .bs23-table-mode-{scroll|stack}              desktop and up
   .bs23-table-mode-tablet-{scroll|stack}       <= 1024px
   .bs23-table-mode-mobile-{scroll|stack}       <= 767px
   (Elementor default breakpoints.) */

.elementor-widget-theme-post-content .wp-block-table,
.elementor-widget-theme-post-content figure:has(> table) {
	max-width: 100%;
}

/* ---- Scroll mode ---- */
.bs23-table-mode-scroll .wp-block-table,
.bs23-table-mode-scroll figure:has(> table),
.bs23-table-mode-scroll .bs23-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.bs23-table-mode-scroll table {
	min-width: var(--bs23-table-min-width, 600px);
}

/* ---- Stack mode ---- */
.bs23-table-mode-stack table,
.bs23-table-mode-stack table > thead,
.bs23-table-mode-stack table > tbody,
.bs23-table-mode-stack table > tfoot,
.bs23-table-mode-stack table tr,
.bs23-table-mode-stack table th,
.bs23-table-mode-stack table td {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.bs23-table-mode-stack table {
	min-width: 0;
	table-layout: auto;
}
.bs23-table-mode-stack table > thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.bs23-table-mode-stack table tr {
	margin-block-end: var(--bs23-table-stack-row-gap, 16px);
}
.bs23-table-mode-stack table tr:last-child {
	margin-block-end: 0;
}
.bs23-table-mode-stack table td[data-label]::before {
	content: attr(data-label);
	display: block;
	font-weight: 600;
	color: var(--bs23-table-stack-label-color, inherit);
	margin-block-end: var(--bs23-table-stack-label-gap, 4px);
}
.bs23-table-mode-stack table td[data-label]:empty::before {
	margin-block-end: 0;
}

@media (max-width: 1024px) {
	.bs23-table-mode-tablet-scroll .wp-block-table,
	.bs23-table-mode-tablet-scroll figure:has(> table),
	.bs23-table-mode-tablet-scroll .bs23-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.bs23-table-mode-tablet-scroll table {
		min-width: var(--bs23-table-min-width, 600px);
	}
	.bs23-table-mode-tablet-none table {
		min-width: 0;
	}

	.bs23-table-mode-tablet-stack table,
	.bs23-table-mode-tablet-stack table > thead,
	.bs23-table-mode-tablet-stack table > tbody,
	.bs23-table-mode-tablet-stack table > tfoot,
	.bs23-table-mode-tablet-stack table tr,
	.bs23-table-mode-tablet-stack table th,
	.bs23-table-mode-tablet-stack table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.bs23-table-mode-tablet-stack table {
		min-width: 0;
		table-layout: auto;
	}
	.bs23-table-mode-tablet-stack table > thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.bs23-table-mode-tablet-stack table tr {
		margin-block-end: var(--bs23-table-stack-row-gap, 16px);
	}
	.bs23-table-mode-tablet-stack table tr:last-child {
		margin-block-end: 0;
	}
	.bs23-table-mode-tablet-stack table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		color: var(--bs23-table-stack-label-color, inherit);
		margin-block-end: var(--bs23-table-stack-label-gap, 4px);
	}
}

@media (max-width: 767px) {
	.bs23-table-mode-mobile-scroll .wp-block-table,
	.bs23-table-mode-mobile-scroll figure:has(> table),
	.bs23-table-mode-mobile-scroll .bs23-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.bs23-table-mode-mobile-scroll table {
		min-width: var(--bs23-table-min-width, 600px);
	}
	.bs23-table-mode-mobile-none table {
		min-width: 0;
	}

	.bs23-table-mode-mobile-stack table,
	.bs23-table-mode-mobile-stack table > thead,
	.bs23-table-mode-mobile-stack table > tbody,
	.bs23-table-mode-mobile-stack table > tfoot,
	.bs23-table-mode-mobile-stack table tr,
	.bs23-table-mode-mobile-stack table th,
	.bs23-table-mode-mobile-stack table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.bs23-table-mode-mobile-stack table {
		min-width: 0;
		table-layout: auto;
	}
	.bs23-table-mode-mobile-stack table > thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.bs23-table-mode-mobile-stack table tr {
		margin-block-end: var(--bs23-table-stack-row-gap, 16px);
	}
	.bs23-table-mode-mobile-stack table tr:last-child {
		margin-block-end: 0;
	}
	.bs23-table-mode-mobile-stack table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		color: var(--bs23-table-stack-label-color, inherit);
		margin-block-end: var(--bs23-table-stack-label-gap, 4px);
	}
}