/**
 * Tableau comparatif — bloc natif core/table portant la classe specs-table.
 *
 * Critères en en-têtes de ligne, offres comparées en colonnes. La dernière
 * colonne est celle mise en avant : c'est une convention de position, pour
 * ne pas obliger le client à poser une classe depuis l'éditeur.
 *
 * Les sélecteurs sont préfixés par .wp-block-table pour passer devant les
 * styles du bloc core, qui peuvent être injectés après la feuille du thème.
 */

.specs-table {
	--specs-criterion-width: 20%;
	--specs-sticky-bg: var(--color-base);
	margin-block: var(--space-2xl);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
}

/* Sections inversées : la colonne figée doit reprendre le fond réel. */
.invert .specs-table {
	--specs-sticky-bg: var(--color-cool);
}

.invert--paper .specs-table {
	--specs-sticky-bg: var(--color-paper);
}

/* L'outline rentre dans la zone : sur un conteneur défilant il serait rogné. */
.specs-table:focus-visible {
	outline-offset: calc(var(--focus-offset) * -1);
}

.wp-block-table.specs-table table {
	border-collapse: collapse;
	min-width: 44rem;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.wp-block-table.specs-table :is(th, td) {
	border: 0;
	border-block-start: var(--line-width) solid var(--color-line);
	padding: var(--space-md) var(--space-lg);
	text-align: start;
	vertical-align: baseline;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
}

/* Colonne des critères : axe de lecture, en retrait mais jamais illisible. */
.wp-block-table.specs-table tbody th {
	opacity: 0.7;
}

/* En-têtes de colonnes : le trait sous le thead est le seul filet fort.
   La largeur se pose ici et nulle part ailleurs : en table-layout fixed,
   seule la première rangée dimensionne les colonnes. */
.wp-block-table.specs-table thead :is(th, td) {
	border-block-start: 0;
	border-block-end: var(--line-width) solid var(--color-line);
	padding-block-end: var(--space-sm);
	font-weight: var(--font-weight-medium);
}

.wp-block-table.specs-table thead th:first-child {
	width: var(--specs-criterion-width);
}

.wp-block-table.specs-table tbody tr:first-child :is(th, td) {
	border-block-start: 0;
}

/* Colonne mise en avant : la surface isole, l'accent ne sert qu'à la nommer. */
.wp-block-table.specs-table :is(th, td):last-child {
	background-color: var(--color-surface);
}

.wp-block-table.specs-table thead th:last-child {
	color: var(--color-accent);
}

.wp-block-table.specs-table figcaption {
	margin-block-start: var(--space-sm);
	font-size: var(--font-size-xs);
	opacity: 0.7;
}

/* Sous 768 px : une carte par critère, plus de défilement horizontal.
   Les libellés de colonnes viennent de thead via data-label (specs-table.js). */
@media (max-width: 767px) {
	.specs-table {
		overflow-x: visible;
	}

	.wp-block-table.specs-table table {
		display: block;
		width: 100%;
		min-width: 0;
		table-layout: auto;
	}

	.wp-block-table.specs-table :is(thead, tbody) {
		display: block;
		width: 100%;
	}

	.wp-block-table.specs-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wp-block-table.specs-table tbody tr {
		display: block;
		width: 100%;
		margin-block-end: var(--space-xl);
		padding: var(--space-md);
		border: var(--line-width) solid var(--color-line);
	}

	.wp-block-table.specs-table tbody tr:last-child {
		margin-block-end: 0;
	}

	.wp-block-table.specs-table :is(th, td) {
		width: 100%;
		max-width: none;
	}

	.wp-block-table.specs-table tbody th {
		display: block;
		border: 0;
		padding: 0 0 var(--space-sm);
		text-align: start;
		color: var(--color-text);
		opacity: 1;
		font-weight: var(--font-weight-medium);
		background-color: transparent;
	}

	.wp-block-table.specs-table tbody td {
		display: grid;
		grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
		gap: var(--space-sm);
		align-items: baseline;
		border: 0;
		border-block-start: var(--line-width) solid var(--color-line);
		padding: var(--space-sm) 0;
		background-color: transparent;
	}

	.wp-block-table.specs-table tbody td::before {
		content: attr(data-label);
		font-size: var(--font-size-sm);
		opacity: 0.7;
	}

	.wp-block-table.specs-table tbody td:last-child {
		background-color: var(--color-surface);
		margin-inline: calc(-1 * var(--space-md));
		padding-inline: var(--space-md);
		color: var(--color-accent);
	}

	.wp-block-table.specs-table tbody td:last-child::before {
		color: var(--color-text);
		opacity: 0.7;
	}
}