/* ============================================================
   Optivro ISPU — Data Comparison Table (`.tk-fig` / `.tk-table`)
   Recreated ISPU "Figure 51": titled white figure, two tables
   (Societal + Structural), tinted label cells, colour legend, source
   note. Static; reveals on the frontend only. Scoped under
   `.oiw-comparetable`. Values verbatim; figure sits in the 1080px inner.
   ============================================================ */
.oiw-comparetable {
	padding: 0 40px; /* horizontal gutter matches source `.tk-section` */
}
.oiw-comparetable .oiw-inner {
	max-width: 1080px; /* source `.tk-inner` (figure is full width, not narrow) */
	margin: 0 auto;
	width: 100%;
}
.oiw-ct-fig {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 36px 34px;
	/* Vertical rhythm from the section container's flex_gap. */
	box-shadow: 0 2px 16px rgba(0, 29, 58, .05);
}
.oiw-ct-fig .oiw-ct-title {
	font-family: "OrpheusPro Regular", 'orpheus pro', orpheus, Georgia, serif;
	font-size: 22px;
	line-height: 30px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}
.oiw-ct-rule {
	width: 100%;
	height: 2px;
	background: rgba(0, 29, 58, .15);
	margin: 16px 0 24px;
}
.oiw-ct-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
/* Each table lives in its own scroll box (§ wide-content rule): the box has
   min-content 0, so the grid track can shrink freely and a too-wide table
   scrolls WITHIN the figure instead of pushing the page sideways. With the
   cell word-breaking below the table normally fits and this never scrolls. */
.oiw-ct-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
}
.oiw-ct-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.oiw-ct-table th {
	font-family: Lato, sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
	padding: 8px 6px;
	text-align: center;
	border-bottom: 2px solid var(--border);
}
.oiw-ct-table th:first-child {
	text-align: left;
	width: 46%;
}
.oiw-ct-table td {
	padding: 12px 6px;
	text-align: center;
	border-bottom: 1px solid var(--border2);
	/* Table body cell — prior fallback, not the heading font. */
	font-family: 'orpheus pro', orpheus, Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--navy);
}
.oiw-ct-table td:first-child,
.oiw-ct-table th:first-child {
	/* Break the long slash-joined labels ("university/college/academic") so the
	   label column's min-content shrinks and the table fits a phone container
	   instead of overflowing (the confirmed mobile bug). No effect on desktop,
	   where the words never need to break. */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.oiw-ct-table td:first-child {
	text-align: left;
	/* Table label cell — prior fallback, not the heading font. */
	font-family: 'orpheus pro', orpheus, Georgia, serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: #001D3A;
	opacity: .75;
}
.oiw-ct-table tr.societal td:first-child {
	background: rgba(232, 146, 107, .12);
	border-radius: 6px 0 0 6px;
}
.oiw-ct-table tr.structural td:first-child {
	background: rgba(140, 166, 192, .14);
	border-radius: 6px 0 0 6px;
}
.oiw-ct-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--border2);
}
.oiw-ct-leg {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: Lato, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink2);
}
.oiw-ct-leg span {
	width: 14px;
	height: 14px;
	border-radius: 50%;
}
.oiw-ct-leg.s span {
	background: var(--societal);
}
.oiw-ct-leg.t span {
	background: var(--structural);
}
.oiw-ct-note {
	font-size: 12px;
	line-height: 18px;
	color: #001D3A;
	opacity: .5;
	margin-top: 18px;
	font-style: italic;
}
.oiw-ct-note a {
	color: #003377;
	text-decoration: underline;
	text-decoration-color: rgba(0, 51, 119, 0.4);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	font-weight: 600;
	transition: color 0.2s, text-decoration-color 0.2s;
}
.oiw-ct-note a:hover {
	color: #001D3A;
	text-decoration-color: #001D3A;
}
@media (max-width: 900px) {
	.oiw-comparetable {
		padding: 0 24px;
	}
	.oiw-ct-cols {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}
/* Source is silent below 900 for the figure — adaptation policy (§3): trim the
   figure's inner gutter on phones so the table has more room before breaking. */
@media (max-width: 560px) {
	.oiw-ct-fig {
		padding: 24px 18px;
	}
	.oiw-ct-table th,
	.oiw-ct-table td {
		padding-left: 4px;
		padding-right: 4px;
	}
}