/**
 * Tabela (core/table).
 *
 * – Szersza niż ekran → przewija się w bok we własnej ramce. Cień przy krawędzi
 *   pokazuje, że jest co przewinąć (bez JS). Na wąskim ekranie pierwsza kolumna
 *   zostaje przyklejona, żeby było wiadomo, którego wiersza dotyczą wartości.
 * – Styl „Karty na telefonie” (wybór w edytorze) → wiersze jako karty
 *   „Kolumna: wartość” (etykiety dodaje PHP: includes/integrations.php).
 *
 *   .wp-block-table { --nauris-table-head-bg: #f3f4f6; }
 *
 * Cienie i przyklejona kolumna używają koloru tła strony (--nauris-color-background).
 * Jeśli treść stoi na innym tle niż biały / „base” z motywu, ustaw ten token.
 */
:where(.wp-block-table) {
	--nauris-table-bg: var(--nauris-color-background);
	--nauris-table-border: var(--nauris-color-border);
	--nauris-table-radius: var(--nauris-radius);
	--nauris-table-head-bg: color-mix(in srgb, var(--nauris-color-accent) 7%, transparent);
	--nauris-table-head-color: inherit;
	--nauris-table-head-border: var(--nauris-color-accent);
	--nauris-table-stripe-bg: var(--nauris-color-surface);
	--nauris-table-hover-bg: color-mix(in srgb, var(--nauris-color-accent) 5%, transparent);
	--nauris-table-shadow: rgb(0 0 0 / 0.18);
	--nauris-table-cell-padding: 0.85em 1.1em;
	--nauris-table-cell-min: 7rem;
	--nauris-table-font-size: 0.95em;
}

figure.wp-block-table {
	container: nauris-table / inline-size;
	max-inline-size: 100%;
	margin-block: var(--nauris-space-xl);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: var(--nauris-border-width) solid var(--nauris-table-border);
	border-radius: var(--nauris-table-radius);

	/*
	 * Cienie przy krawędziach tylko wtedy, gdy jest co przewinąć:
	 * warstwy „local” (w kolorze tła) przesuwają się z treścią i zakrywają
	 * cienie „scroll”, gdy tabela jest przewinięta do końca w daną stronę.
	 */
	background:
		linear-gradient(to right, var(--nauris-table-bg) 30%, transparent) left center / 3rem 100% no-repeat local,
		linear-gradient(to left, var(--nauris-table-bg) 30%, transparent) right center / 3rem 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, var(--nauris-table-shadow), transparent) left center / 0.9rem 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, var(--nauris-table-shadow), transparent) right center / 0.9rem 100% no-repeat scroll,
		var(--nauris-table-bg);
}

figure.wp-block-table table {
	inline-size: 100%;
	margin: 0;
	font-size: var(--nauris-table-font-size);
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

figure.wp-block-table :is(thead, tbody, tfoot) {
	border: 0;
}

/* Tło wiersza przez zmienną – działa też dla przyklejonej pierwszej kolumny. */
figure.wp-block-table tr {
	--nauris-table-row-bg: transparent;
	background: none;
}

/*
 * Łamanie tylko między słowami. `overflow-wrap: anywhere` / `word-break`
 * (z motywu albo z core przy „stałej szerokości komórek”) pozwala tabeli
 * ściskać kolumny do jednej litery zamiast przewijać się w bok.
 */
figure.wp-block-table :is(th, td) {
	min-inline-size: var(--nauris-table-cell-min);
	padding: var(--nauris-table-cell-padding);
	text-align: start;
	vertical-align: top;
	hyphens: manual;
	background-color: transparent;
	background-image: linear-gradient(var(--nauris-table-row-bg), var(--nauris-table-row-bg));
	border: 0;
	border-block-end: var(--nauris-border-width) solid var(--nauris-table-border);
}

/* Druga linia przebija core: `.wp-block-table .has-fixed-layout td { word-break: break-word }`. */
figure.wp-block-table :is(th, td),
figure.wp-block-table .has-fixed-layout :is(th, td) {
	word-break: normal;
	overflow-wrap: break-word;
}

figure.wp-block-table thead :is(th, td) {
	color: var(--nauris-table-head-color);
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	vertical-align: bottom;
	background-image: linear-gradient(var(--nauris-table-head-bg), var(--nauris-table-head-bg));
	border-block-end: 2px solid var(--nauris-table-head-border);
}

/* Pierwsza kolumna to zwykle nazwa wiersza. */
figure.wp-block-table tbody :is(th, td):first-child {
	font-weight: 600;
}

figure.wp-block-table tbody tr:last-child > * {
	border-block-end: 0;
}

figure.wp-block-table tfoot :is(th, td) {
	font-weight: 700;
	border-block-start: 2px solid var(--nauris-table-border);
	border-block-end: 0;
}

/* Styl „Paski” z edytora – w kolorach pluginu. */
figure.wp-block-table.is-style-stripes {
	border-block-end: var(--nauris-border-width) solid var(--nauris-table-border);
}

figure.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	--nauris-table-row-bg: var(--nauris-table-stripe-bg);
	background: none;
}

/* :nth-child(n) wyrównuje specyficzność z paskami, żeby hover działał też na nich. */
figure.wp-block-table tbody tr:nth-child(n):hover {
	--nauris-table-row-bg: var(--nauris-table-hover-bg);
}

/* Podpis jako stopka ramki; sticky – nie odjeżdża przy przewijaniu tabeli. */
figure.wp-block-table figcaption {
	position: sticky;
	inset-inline-start: 0;
	margin: 0;
	padding: 0.65em 1.1em;
	font-size: 0.85em;
	text-align: start;
	opacity: 0.8;
	border-block-start: var(--nauris-border-width) solid var(--nauris-table-border);
}

/* Wąski ekran: przewijanie zamiast ściskania, mniejsze odstępy, przyklejona pierwsza kolumna. */
@container nauris-table (width < 40rem) {

	/*
	 * „Komórki o stałej szerokości” (has-fixed-layout, w nowym WP domyślnie włączone)
	 * dzielą szerokość ekranu po równo między kolumny. Na telefonie wyłączamy to,
	 * żeby kolumny miały swoją minimalną szerokość, a tabela przewijała się w bok.
	 */
	figure.wp-block-table table,
	figure.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	figure.wp-block-table :is(th, td) {
		padding: 0.7em 0.9em;
	}

	figure.wp-block-table table:not(.nauris-table--stack) :is(th, td):first-child {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
		max-inline-size: 11rem;
		background-color: var(--nauris-table-bg);
		box-shadow: inset calc(-1 * var(--nauris-border-width)) 0 var(--nauris-table-border);
	}
}

/* Styl „Karty na telefonie” – tylko tabele z etykietami (klasa dodawana w PHP). */
@container nauris-table (width < 36rem) {

	figure.wp-block-table .nauris-table--stack,
	figure.wp-block-table .nauris-table--stack :is(tbody, tfoot, tr) {
		display: block;
	}

	/* Nagłówek ukryty wizualnie – etykiety są przy wartościach. */
	figure.wp-block-table .nauris-table--stack thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	figure.wp-block-table .nauris-table--stack tr {
		padding-block: 0.6em;
		background-image: linear-gradient(var(--nauris-table-row-bg), var(--nauris-table-row-bg));
		border-block-end: var(--nauris-border-width) solid var(--nauris-table-border);
	}

	figure.wp-block-table .nauris-table--stack tbody tr:last-child {
		border-block-end: 0;
	}

	figure.wp-block-table .nauris-table--stack tfoot tr {
		border-block-start: 2px solid var(--nauris-table-border);
	}

	figure.wp-block-table .nauris-table--stack :is(th, td) {
		display: grid;
		grid-template-columns: minmax(5.5rem, 40%) 1fr;
		gap: 0.75em;
		min-inline-size: 0;
		padding: 0.3em 1em;
		background: none;
		border: 0;
		overflow-wrap: anywhere;
	}

	figure.wp-block-table .nauris-table--stack :is(th, td)::before {
		content: attr(data-label);
		font-weight: 600;
		opacity: 0.7;
	}

	/* Komórka bez etykiety (pusta kolumna nagłówka) zajmuje całą szerokość. */
	figure.wp-block-table .nauris-table--stack :is(th, td):not([data-label]) {
		display: block;
	}

	figure.wp-block-table .nauris-table--stack :is(th, td):not([data-label])::before {
		content: none;
	}

	figure.wp-block-table .nauris-table--stack tbody tr > :first-child {
		font-weight: 700;
	}
}