/*
 * Styles for the .wm-table-scroll wrapper Tables::wrap() writes into post
 * content. Kept deliberately low-specificity (one class per selector, no
 * !important anywhere) and enqueued ahead of the theme's own stylesheet, so
 * a child theme can override any of this with an equally-specific rule of
 * its own — no need to fight it.
 *
 * Everything here is controlled through the custom properties below;
 * overriding one of those from a child theme is the least invasive way to
 * reskin this without rewriting the rules that use them.
 */

.wm-table-scroll {
	--wm-table-min-width: 560px;
	--wm-table-fade-bg: #fff;
	--wm-table-fade-color: rgba(0, 0, 0, 0.15);
	--wm-table-fade-width: 40px;

	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/*
	 * Two-layer "scroll shadow" with no JS: the shadow (bottom layer,
	 * "scroll" attachment) stays pinned to the visible right edge as long
	 * as there's more table to the right. The mask (top layer, "local"
	 * attachment) is pinned to the table's *actual* right edge instead, so
	 * it only comes into view once you've scrolled all the way there —
	 * where it paints over the shadow in the site's own background color,
	 * making the fade disappear exactly when there's nothing left to
	 * scroll to.
	 */
	background-repeat: no-repeat;
	background-position: 100% 0, 100% 0;
	background-size: var(--wm-table-fade-width) 100%, calc(var(--wm-table-fade-width) / 2) 100%;
	background-attachment: local, scroll;
	background-image:
		linear-gradient(to right, transparent, var(--wm-table-fade-bg) 70%),
		linear-gradient(to left, var(--wm-table-fade-color), transparent);
}

.wm-table-scroll table {
	min-width: var(--wm-table-min-width);
	width: 100%;
	border-collapse: collapse;
}

@media (max-width: 600px) {
	/* Nothing left to scroll once cards take over, so drop both the forced
	   width and the now-pointless scroll shadow. */
	.wm-table-scroll.wm-table-cards {
		overflow-x: visible;
		background-image: none;
	}

	.wm-table-cards table {
		min-width: 0;
	}

	.wm-table-cards table,
	.wm-table-cards tr,
	.wm-table-cards th,
	.wm-table-cards td {
		display: block;
		width: 100%;
	}

	/* The header row's own text is why data-label exists on every cell
	   below it — keep it out of layout without deleting it from the DOM. */
	.wm-table-cards thead,
	.wm-table-cards tr > th {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wm-table-cards tr {
		margin-bottom: 1em;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	.wm-table-cards tr:last-child {
		margin-bottom: 0;
	}

	/*
	 * A comparison table's first column is what the row is *about* (e.g.
	 * "Мінімальний об'єм") — as a "label: value" pair like every other cell
	 * it would read as a redundant "Показник: Мінімальний об'єм". Shown
	 * instead as the card's own heading, with no label prefix.
	 */
	.wm-table-cards td:first-child {
		display: block;
		padding: 0.6em 0.75em;
		font-weight: 700;
		text-align: left;
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	/*
	 * Deliberately block, not flex-row-with-space-between: a side-by-side
	 * label/value layout looks fine for short values, but a long one
	 * (real comparison tables have plenty) has nowhere left to shrink into
	 * once the label already claimed its share of a 300px-wide card, and
	 * overflows the card instead of wrapping — confirmed by actually
	 * rendering this in a real narrow viewport, not just reading the CSS.
	 * A block value simply wraps like ordinary text at any width.
	 */
	.wm-table-cards td:not(:first-child) {
		display: block;
		padding: 0.5em 0.75em;
		text-align: left;
		border: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

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

	.wm-table-cards td:not(:first-child)::before {
		content: attr(data-label) ": ";
		font-weight: 600;
	}
}