/*
 * GPIPL specification table (Phase 3, conditional: product pages).
 * Real <table> markup: one table per specification group, caption = group name,
 * <th scope="row"> = parameter, <td> = value. Two columns on wider screens,
 * label-above-value on phones, so long values (ranges, units) never squeeze.
 * Only verified specifications reach this component (gpipl_core_get('specs')).
 */
@layer components {
	.spec-table { display: grid; gap: var(--space-xl); }
	@media (min-width: 80em) {
		.spec-table--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); align-items: start; }
	}

	.spec-table__group {
		width: 100%;
		font-variant-numeric: tabular-nums;
	}
	.spec-table__group caption {
		padding-block: var(--space-s) var(--space-xs);
		text-align: left;
		font-size: var(--step-1);
		font-weight: var(--wght-semibold);
		font-stretch: var(--wdth-heading);
		color: var(--color-heading);
		caption-side: top;
	}
	/* Each group opens with a strong rule above its caption. */
	.spec-table__group caption { border-top: 2px solid var(--color-text); }

	.spec-table__group tr { border-bottom: var(--border); }
	.spec-table__group th,
	.spec-table__group td {
		padding: var(--space-xs) 0;
		text-align: left;
		vertical-align: top;
		line-height: var(--lh-snug);
	}
	.spec-table__group th {
		width: 42%;
		padding-inline-end: var(--space-m);
		font-weight: var(--wght-body);
		color: var(--color-text-muted);
	}
	.spec-table__group td {
		font-weight: var(--wght-medium);
		color: var(--color-text);
		overflow-wrap: anywhere; /* long unit strings wrap instead of overflowing */
	}

	/* Phones: stack parameter above value. */
	@media (max-width: 29.99em) {
		.spec-table__group tr { display: grid; gap: 0.15em; padding-block: var(--space-xs); }
		.spec-table__group th,
		.spec-table__group td { display: block; width: auto; padding: 0; }
		.spec-table__group th { font-size: var(--step--1); }
	}

	.spec-table__note {
		font-size: var(--step--1);
		color: var(--color-text-muted);
	}

	@media print {
		.spec-table__group tr { break-inside: avoid; }
	}
}