/* ==========================================================================
   Carenzzo — стандартный блок «Таблица» WordPress (figure.wp-block-table)

   Десктоп: таблица-карточка (белая подложка, мягкая рамка, радиус lg), шапка
   капсом на sunken-фоне, первая колонка — полужирный «заголовок строки»,
   колонки с короткими значениями (коды, км, время) — акцентным цветом.
   Стиль «Полосы» (is-style-stripes) — мягкая зебра вместо серой ядра.

   Мобайл (≤640px): таблица от 3 колонок превращается в стопку карточек.
   Разметку для этого готовит assets/js/carenzzo-tables.js:
     .cz-table--cards        — на <figure>, таблица пригодна для карточек;
     td[data-label]          — подпись ячейки из шапки;
     td.cz-td--chip          — колонка коротких значений → плашка;
   первая ячейка строки — заголовок карточки. Без JS мобайл получает
   горизонтальный скролл вместо поломанной вёрстки.

   Перебиваем опционные стили ядра (wp-block-styles: 1px-рамки ячеек,
   3px-линия под thead, серая зебра) — только токены theme.json.
   ========================================================================== */

.wp-block-table {
	--czt-bd: var(--wp--preset--color--border);
	--czt-sunken: var(--wp--preset--color--surface-sunken);
	--czt-pad-y: var(--wp--preset--spacing--sm);
	--czt-pad-x: var(--wp--preset--spacing--md);

	overflow-x: auto;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--czt-bd);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--xs);
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	inline-size: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.wp-block-table :is(th, td) {
	padding: var(--czt-pad-y) var(--czt-pad-x);
	border: 0;
	border-block-end: 1px solid var(--czt-bd);
	text-align: start;
	vertical-align: top;
}
.wp-block-table tbody tr:last-child > :is(th, td) { border-block-end: 0; }

/* Шапка: капс, разрядка, приглушённый цвет на sunken-фоне. */
.wp-block-table thead { border: 0; }
.wp-block-table thead th {
	background: var(--czt-sunken);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Первая колонка — заголовок строки. */
.wp-block-table tbody tr > :first-child {
	font-weight: 700;
	color: var(--wp--preset--color--ink-strong);
}

/* Короткие значения (коды, км, время) — акцент, не переносятся. */
.wp-block-table td.cz-td--chip {
	font-weight: 600;
	color: var(--wp--preset--color--primary-strong);
	white-space: nowrap;
}

.wp-block-table tfoot { border: 0; }
.wp-block-table tfoot td {
	background: var(--czt-sunken);
	font-weight: 600;
}

/* «Полосы»: мягкая зебра. */
.wp-block-table.is-style-stripes { border-block-end: 1px solid var(--czt-bd); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--czt-sunken) 60%, transparent);
}

.wp-block-table figcaption {
	margin: 0;
	padding: var(--wp--preset--spacing--xs) var(--czt-pad-x);
	border-block-start: 1px solid var(--czt-bd);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
	text-align: start;
}

/* --------------------------------------------------------------------------
   Мобайл: таблица → карточки
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.wp-block-table.cz-table--cards {
		overflow: visible;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.cz-table--cards :is(table, tbody, tfoot) { display: block; }

	/* Шапка остаётся для скринридеров (подписи дублируют её визуально). */
	.cz-table--cards thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cz-table--cards tr {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--xs);
		margin-block-end: var(--wp--preset--spacing--sm);
		padding: var(--wp--preset--spacing--md);
		background: var(--wp--preset--color--base);
		border: 1px solid var(--czt-bd);
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--custom--shadow--xs);
	}
	.wp-block-table.cz-table--cards.is-style-stripes tbody tr:nth-child(even) {
		background: var(--wp--preset--color--base);
	}

	.cz-table--cards tr > :is(th, td) {
		display: block;
		flex: 1 0 100%;
		order: 2;
		padding: 0;
		border: 0;
		font-size: var(--wp--preset--font-size--base);
		white-space: normal;
	}

	/* Подпись ячейки из шапки. */
	.cz-table--cards td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-block-end: 2px;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--caption);
		font-weight: 600;
	}

	/* Заголовок карточки — первая ячейка строки. */
	.cz-table--cards tr > :first-child {
		order: 0;
		padding-block-end: var(--wp--preset--spacing--xs);
		border-block-end: 1px solid var(--czt-bd);
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--lg);
	}
	.cz-table--cards tr > :first-child::before { content: none; }

	/* Плашки коротких значений — в ряд, перед длинными строками. */
	.cz-table--cards td.cz-td--chip {
		flex: 0 0 auto;
		order: 1;
		min-inline-size: 5.75rem;
		padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--sm);
		background: var(--czt-sunken);
		border-radius: var(--wp--custom--radius--md);
		color: var(--wp--preset--color--ink-strong);
		font-weight: 700;
	}

	.cz-table--cards tfoot tr { background: var(--czt-sunken); }

	.cz-table--cards figcaption {
		padding: 0;
		border: 0;
	}
}