/**
 * Table Layout Customiser
 *
 * Default behaviour: wide tables scroll horizontally with a soft edge-fade
 * shadow that only shows where there's genuinely more content to reveal.
 *
 * Opt-in behaviour: add the "stacked-table" class to a table block
 * (Block settings → Advanced → Additional CSS class) to switch that one
 * table to a stacked "card" layout on small screens instead of scrolling.
 */

/* Override this in your theme if your content background isn't white */
:root {
	--tlc-scroll-bg: #fff;
}

/* --- Default: horizontal scroll with edge shadows --- */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background-image:
		linear-gradient(to right, var(--tlc-scroll-bg), var(--tlc-scroll-bg)),
		linear-gradient(to right, var(--tlc-scroll-bg), var(--tlc-scroll-bg)),
		linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0)),
		linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
	background-attachment: local, local, scroll, scroll;
}

.wp-block-table table {
	min-width: 600px;
}

/* --- Opt-in: stacked "card" layout on small screens --- */
@media (max-width: 600px) {

	/* Cancel the scroll/shadow solution when a table opts into stacking,
	   so the two approaches don't fight each other. */
	.wp-block-table.stacked-table {
		overflow-x: visible;
		background-image: none;
	}
	.wp-block-table.stacked-table table {
		min-width: 0;
	}

	.stacked-table table,
	.stacked-table tbody,
	.stacked-table tr,
	.stacked-table td {
		display: block;
		width: 100%;
	}

	.stacked-table thead {
		display: none; /* header row is replaced by data-label per cell */
	}

	.stacked-table tr {
		margin-bottom: 1em;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.stacked-table td {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		padding: 8px 12px;
		border-bottom: 1px solid #eee;
		text-align: right;
	}

	.stacked-table td:last-child {
		border-bottom: none;
	}

	.stacked-table td::before {
		content: attr(data-label);
		font-weight: 600;
		text-align: left;
	}
}