/* core/table block styles for articles (explicit choice in the Styles panel). The table stays a
   real table (header cells, reading order), only its look changes.
   Matrix 2×2 (is-style-dw-matrix): a table with an empty top-left cell; column headers on top,
     row headers turned vertical, the four answers as tiles; top-left tile highlighted.
   AI versus mens (is-style-dw-versus): a two-column table as two cards, AI (dark) and people.
   Taakticket (is-style-dw-ticket): a two-column field/description table as a ticket form.
   Mockup: theme_components.py (.matrix, .vs, .ticketform). */

/* core's table style draws a 3px rule under thead and above tfoot; the article styles draw their own */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table:is(.is-style-dw-matrix, .is-style-dw-versus, .is-style-dw-ticket) :is(thead, tfoot) { border: 0; }

/* ---------- matrix ---------- */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix { overflow: visible; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix table {
	width: calc(100% + 20px);
	margin: -10px;
	border-collapse: separate;
	border-spacing: 10px;
	table-layout: fixed;
	font-size: inherit;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix :is(th, td) { padding: 0; border: 0; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix thead :is(th, td) {
	padding-bottom: 2px;
	color: var(--wp--preset--color--muted);
	font: 700 12px/1.4 var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	vertical-align: bottom;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix :is(thead, tbody) tr > :first-child { width: 34px; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr > :first-child {
	color: var(--wp--preset--color--muted);
	font: 700 12px/1.2 var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr > :not(:first-child) {
	height: 130px;
	padding: 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	vertical-align: top;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr:first-child > :nth-child(2) {
	border-color: transparent;
	background: linear-gradient(150deg, var(--wp--preset--color--brand), var(--wp--preset--color--brand-dark));
	box-shadow: 0 0 0 4px rgba(208, 40, 120, 0.1), 0 24px 40px -24px rgba(208, 40, 120, 0.9);
	color: var(--wp--preset--color--white);
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr:first-child > :nth-child(3) { background: var(--wp--preset--color--brand-tint); }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr:nth-child(2) > :nth-child(2) { background: var(--wp--preset--color--surface); }
/* mockup layout: tiles on top, the effort axis underneath (header row shown as a footer row),
   the impact axis vertical on the left; arrows and tile key lines are visual only */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix thead { display: table-footer-group; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix thead :is(th, td) { padding: 2px 0 0; vertical-align: top; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix thead :is(th, td):nth-child(2)::after { content: " →" / ""; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr:first-child > :first-child::after { content: " ↑" / ""; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr > :not(:first-child) { position: relative; padding-bottom: 44px; }
.wp-block-table.is-style-dw-matrix .dwa-mq-k {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	color: var(--wp--preset--color--muted);
	font: 600 11.5px/1.35 var(--wp--preset--font-family--mono);
	letter-spacing: 0;
	text-transform: none;
}
.wp-block-table.is-style-dw-matrix tbody tr:first-child > :nth-child(2) .dwa-mq-k { color: var(--wp--preset--color--white); }
.wp-block-table.is-style-dw-matrix tbody tr:first-child > :nth-child(3) .dwa-mq-k,
.wp-block-table.is-style-dw-matrix tbody tr:nth-child(2) > :nth-child(2) .dwa-mq-k { color: var(--wp--preset--color--body); }
/* Phone (owner 17 Oct): words never break inside (no "Beoordele-n"), the axis column stays narrow and
   its label + arrow on one line, the two tiles of a row share one height (table row), the key lines
   keep clear of the tile heading. */
@media (max-width: 560px) {
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix table { border-spacing: 8px; width: calc(100% + 16px); margin: -8px; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix :is(thead, tbody) tr > :first-child { width: 22px; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr > :first-child { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix thead :is(th, td) { font-size: 10px; letter-spacing: 0.04em; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-matrix tbody tr > :not(:first-child) {
		height: 116px;
		padding: 12px 12px 50px;
		font-size: 14px;
		line-height: 1.25;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: manual;
	}
	.wp-block-table.is-style-dw-matrix .dwa-mq-k { left: 12px; right: 12px; bottom: 11px; font-size: 10px; }
}

/* ---------- AI versus mens ---------- */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus { position: relative; overflow: visible; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus table {
	width: calc(100% + 80px);
	margin: 0 -40px;
	border-collapse: separate;
	border-spacing: 40px 0;
	table-layout: fixed;
	font-size: 15.5px;
	line-height: 1.5;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus :is(th, td) {
	position: relative;
	overflow-wrap: anywhere;
	hyphens: auto;
	padding: 4px 20px 4px 38px;
	border: 0;
	text-align: left;
	vertical-align: top;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead :is(th, td) {
	padding: 20px 20px 12px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	vertical-align: middle;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead :is(th, td)::before {
	content: "AI" / "";
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -4px 10px -4px 0;
	vertical-align: middle;
	border-radius: 10px;
	background: var(--wp--preset--color--brand);
	box-shadow: 0 0 12px var(--wp--custom--article--glow);
	color: var(--wp--preset--color--white);
	font: 800 13px/1 var(--wp--preset--font-family--mono);
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead :is(th, td):nth-child(2)::before { content: "✓" / ""; background: var(--wp--custom--article--ok--badge); box-shadow: none; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tbody :is(th, td)::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 0.85em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tbody tr:last-child :is(th, td) { padding-bottom: 20px; }
/* column 1: AI, dark card */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tr > :first-child { background: var(--wp--custom--article--dark--panel); color: var(--wp--custom--article--dark--panel-text); }
/* column 2: people, light card */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tr > :nth-child(2) {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-inline: 1px solid var(--wp--custom--article--edge);
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead tr > * { border-radius: 20px 20px 0 0; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead tr > :nth-child(2) { border-top: 1px solid var(--wp--custom--article--edge); }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tbody tr:last-child > * { border-radius: 0 0 20px 20px; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tbody tr:last-child > :nth-child(2) { border-bottom: 1px solid var(--wp--custom--article--edge); }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus::after {
	content: "⇄" / "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--wp--preset--color--brand);
	font-size: 26px;
	line-height: 1;
	pointer-events: none;
}
/* phones: the two cards stack (AI first, then people) as in the approved mockup. The cells become
   items of one grid column; explicit table roles are added on the server (inc/article.php) so the
   table keeps its semantics with display: contents. */
@media (max-width: 640px) {
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus table { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0; font-size: 15px; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus :is(thead, tbody, tr) { display: contents; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tr > :first-child { order: 1; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus tr > :nth-child(2) { order: 3; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead tr > :nth-child(2) { margin-top: 44px; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus::after { content: none; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-versus thead tr > :nth-child(2)::after {
		content: "⇅" / "";
		position: absolute;
		left: 50%;
		top: -36px;
		transform: translateX(-50%);
		color: var(--wp--preset--color--brand);
		font-size: 24px;
		line-height: 1;
	}
}

/* ---------- task ticket ---------- */
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket {
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 8px 9px 0 var(--wp--custom--article--pink-line);
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket :is(th, td) { padding: 12px 18px; border: 0; text-align: left; vertical-align: top; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket thead :is(th, td) {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font: 700 12px/1.4 var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket thead :is(th, td):last-child { text-align: right; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr + tr > * { border-top: 1px dashed var(--wp--custom--article--skeleton); }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr > :first-child { width: 180px; color: var(--wp--preset--color--ink); font-weight: 800; }
:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr > :first-child::before { content: "▢ " / ""; color: var(--wp--preset--color--brand); }
@media (max-width: 560px) {
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket :is(tbody, tbody tr, tbody td, tbody th) { display: block; width: auto; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr { padding: 12px 18px; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr + tr { border-top: 1px dashed var(--wp--custom--article--skeleton); }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr > * { padding: 0; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr > :first-child { width: auto; margin-bottom: 2px; }
	:where(body:not(.dwv4-legacy), .is-dwv4) .wp-block-table.is-style-dw-ticket tbody tr + tr > * { border-top: 0; }
}