/* Comparison table (Facilities SS4). Figma desktop 33527:15836 / mobile 33527:16149.
 * A core/table inside the theme-04 card. Column 1 is the factor labels; column 2
 * is ringed 3px theme-05 (r16); column 3 is the highlight — 8px #1897FF sides
 * (8 top / 6 bottom), r16, 20% theme-05 tint, and a check glyph per body cell.
 * Row separators are 1px white cell bottom-borders. #1897FF and the
 * rgba(141,159,189,.2) tint are design-specified (not in theme.json).
 * border-collapse:separate so the per-column radii can render; selectors go
 * through `table` to outrank core's .wp-block-table cell borders. */
.cmp-comparison-section {
	--cmp-cmpn-ring2: var(--wp--preset--color--theme-05);
	--cmp-cmpn-ring3: #1897ff;
	--cmp-cmpn-tint: rgba(141, 159, 189, 0.2);
}

.cmp-comparison {
	margin: 0;
	padding: 22px 0;
	overflow-x: visible;
}

.cmp-comparison table {
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
	max-width: 1098px;
	margin: 0 auto;
}

.cmp-comparison table th,
.cmp-comparison table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--theme-01);
	padding: 24px;
	vertical-align: middle;
	color: var(--wp--preset--color--theme-01);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}

/* Markup round 2 pin 36: the artboard draws no rule under the last factor
 * label (only the two ringed columns close with their own borders) */
.cmp-comparison table tbody tr:last-child td:first-child {
	border-bottom: 0;
}

/* column widths (300 / 411 / 387 of 1098) */
.cmp-comparison table th:nth-child(1),
.cmp-comparison table td:nth-child(1) {
	width: 27.32%;
}

.cmp-comparison table th:nth-child(2),
.cmp-comparison table td:nth-child(2) {
	width: 37.43%;
}

.cmp-comparison table th:nth-child(3),
.cmp-comparison table td:nth-child(3) {
	width: 35.25%;
}

/* header row */
.cmp-comparison table thead th {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.cmp-comparison table thead tr {
	height: 121px;
}

/* factor labels */
.cmp-comparison table tbody td:first-child {
	font-weight: 700;
	text-align: center;
}

/* row heights from the artboard (164/164/135/135); cells treat them as minimums */
.cmp-comparison table tbody tr:nth-child(-n + 2) {
	height: 164px;
}

.cmp-comparison table tbody tr:nth-child(n + 3) {
	height: 135px;
}

/* ring column 2 */
.cmp-comparison table thead th:nth-child(2) {
	border-top: 3px solid var(--cmp-cmpn-ring2);
	border-left: 3px solid var(--cmp-cmpn-ring2);
	border-right: 3px solid var(--cmp-cmpn-ring2);
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.cmp-comparison table tbody td:nth-child(2) {
	border-left: 3px solid var(--cmp-cmpn-ring2);
	border-right: 3px solid var(--cmp-cmpn-ring2);
}

.cmp-comparison table tbody tr:last-child td:nth-child(2) {
	border-bottom: 3px solid var(--cmp-cmpn-ring2);
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

/* highlight column 3 */
.cmp-comparison table thead th:nth-child(3) {
	background: var(--cmp-cmpn-tint);
	border-top: 8px solid var(--cmp-cmpn-ring3);
	border-left: 8px solid var(--cmp-cmpn-ring3);
	border-right: 8px solid var(--cmp-cmpn-ring3);
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.cmp-comparison table tbody td:nth-child(3) {
	background-color: var(--cmp-cmpn-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M40 12L18 34L8 24' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 16px center;
	background-size: 48px 48px;
	border-left: 8px solid var(--cmp-cmpn-ring3);
	border-right: 8px solid var(--cmp-cmpn-ring3);
	padding-left: 88px;
}

.cmp-comparison table tbody tr:last-child td:nth-child(3) {
	border-bottom: 6px solid var(--cmp-cmpn-ring3);
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

@media (max-width: 781px) {
	/* mobile artboard runs the card full-bleed; the header copy keeps a gutter */
	.cmp-comparison-section {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.cmp-comparison-section > .wp-block-group:first-child {
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	.cmp-comparison-card {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.cmp-comparison {
		padding: 8px 0;
	}

	.cmp-comparison table th,
	.cmp-comparison table td {
		padding: 16px 8px;
	}

	.cmp-comparison table thead th {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.4;
		padding: 16px;
	}

	/* Figma mobile columns 93 / 149 / 162 of 404. Column 1 is widened from
	 * 23% and its side padding trimmed (mobile review 2026-09-11, M3): at 23%
	 * of 374 the 16px padding left a 54px text box and "Program" /
	 * "Traceability" broke mid-word. */
	.cmp-comparison table th:nth-child(1),
	.cmp-comparison table td:nth-child(1) {
		width: 27%;
		padding-left: 4px;
		padding-right: 4px;
		overflow-wrap: normal;
		word-break: normal;
	}

	.cmp-comparison table th:nth-child(2),
	.cmp-comparison table td:nth-child(2) {
		width: 36.5%;
		padding-left: 6px;
		padding-right: 6px;
	}

	.cmp-comparison table th:nth-child(3),
	.cmp-comparison table td:nth-child(3) {
		width: 36.5%;
		padding-left: 6px;
		padding-right: 6px;
	}

	.cmp-comparison table tbody tr:nth-child(-n + 2) {
		height: 210px;
	}

	.cmp-comparison table tbody tr:nth-child(n + 3) {
		height: 192px;
	}

	.cmp-comparison table tbody td:nth-child(3) {
		background-position: left 8px top 24px;
		background-size: 31px 31px;
		padding: 63px 6px 24px 6px;
		vertical-align: top;
	}
}

/* Body copy scaled to the real table width: the Figma mobile artboard runs
 * 16px in a 404px table; at 390 the table is 374 and at 360 it is 344, and
 * "documentation" / "automatically" break mid-word in the 36.5% columns at
 * 16px. 15px (<=781) and 14px (<=400) keep the longest words on one line. */
@media (max-width: 781px) {
	.cmp-comparison table tbody td:nth-child(2),
	.cmp-comparison table tbody td:nth-child(3) {
		font-size: 15px;
		/* safety net for the two 13-letter words only; shorter words wrap whole */
		hyphens: auto;
		hyphenate-limit-chars: 13 5 5;
	}
}

@media (max-width: 400px) {
	.cmp-comparison table tbody td:nth-child(2),
	.cmp-comparison table tbody td:nth-child(3) {
		font-size: 14px;
	}
}