/*
 * Deal preview — styling only what the theme cannot infer.
 *
 * No font family, no absolute font size, no brand colour, and no button rules:
 * the theme already defines `.cb-btn`/`.cb-btn-p` and the CTA uses those
 * classes, so the button here is the theme's button and stays that way when the
 * theme's palette changes. What is left is genuinely structural — cell padding,
 * row separators, the alignment of a money column, and the collapse to blocks
 * on a phone.
 *
 * Every selector is namespaced `.cb-deals-` (the wrapper is `.cb-deals`), so
 * nothing here can reach the theme's own tables.
 *
 * Colour comes from `currentColor` at low opacity rather than a hex value.
 * That is what lets this widget sit in a light `.cb-sec` or a dark `.cb-sec-d`
 * section without a second palette: the rules and the subordinate text follow
 * whatever the surrounding section set the text colour to.
 */

.cb-deals {
	margin-top: 2.2em;
}

.cb-deals-table {
	width: 100%;
	border-collapse: collapse;
	/* Long company names should wrap inside the cell rather than widen it. */
	table-layout: auto;
}

.cb-deals-table th,
.cb-deals-table td {
	padding: 0.85em 0.9em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid;
	/* ~12% of the inherited text colour: a rule, not a line to read. */
	border-color: color-mix(in srgb, currentColor 12%, transparent);
}

.cb-deals-table th {
	font-weight: 600;
	white-space: nowrap;
	/*
	 * Sentence case, matching the app's own column headings ("Deal", "Value",
	 * "Status", "Sector", "Filed") and the theme's headings. The strings carry
	 * their own capitalisation; nothing here transforms it, because
	 * `text-transform: uppercase` would mangle German compounds and is a
	 * decision the copy should be making anyway.
	 */
	opacity: 0.72;
}

.cb-deals-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------- the deal cell */

.cb-deals-party {
	/* Keeps a two-word company name from breaking across the arrow. */
	display: inline;
}

.cb-deals-arrow {
	padding: 0 0.35em;
	opacity: 0.5;
}

/*
 * The target is the name somebody scanning for a deal is looking for, so it
 * carries the weight; the acquirer stays at the inherited weight rather than
 * being dimmed. Both are the same size — a smaller acquirer would be reading
 * the table as "target, with a footnote", which is not what the paid product
 * shows.
 */
.cb-deals-target {
	font-weight: 600;
}

/* Available to screen readers, invisible on screen. The standard recipe. */
.cb-deals-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------- the value */

.cb-deals-num {
	text-align: right;
	white-space: nowrap;
}

/*
 * "Not disclosed" is prose sitting in a column of figures, so it is set back a
 * little to stop it reading as a value. Not hidden, not a dash: it is the
 * honest answer for most midmarket deals and the table should say it plainly.
 */
.cb-deals-undisclosed {
	opacity: 0.6;
	font-style: italic;
	white-space: normal;
}

/* ---------------------------------------------------------------- the foot */

.cb-deals-foot {
	margin-top: 1.6em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9em 1.4em;
}

.cb-deals-note {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.65;
	max-width: 46em;
}

/* Never remove the outline; the theme's focus ring is the one that should win. */
.cb-deals a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.cb-deals-table tbody tr {
		transition: background-color 0.15s ease;
	}
	.cb-deals-table tbody tr:hover {
		background-color: color-mix(in srgb, currentColor 4%, transparent);
	}
}

/* ------------------------------------------------------------- narrow */

/*
 * Below 720px each row becomes a block: the parties as the heading, then four
 * label/value pairs. The labels come from `data-label`, which the PHP already
 * writes from the same translated strings as the `<th>`s — so a German page
 * gets German labels here without a second string table.
 *
 * The table keeps its semantics (`display: block` on rows and cells does drop
 * the implicit table roles in some screen readers, which is the accepted
 * trade for not building a JavaScript table).
 */
@media (max-width: 720px) {
	.cb-deals-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.cb-deals-table,
	.cb-deals-table tbody,
	.cb-deals-table tr,
	.cb-deals-table td {
		display: block;
		width: auto;
	}

	.cb-deals-table tr {
		padding: 1.1em 0;
		border-bottom: 1px solid;
		border-color: color-mix(in srgb, currentColor 12%, transparent);
	}

	.cb-deals-table tbody tr:last-child {
		border-bottom: 0;
	}

	.cb-deals-table td {
		padding: 0.2em 0;
		border-bottom: 0;
	}

	/* The deal cell is the block's heading, so it keeps no label. */
	.cb-deals-table td:first-child {
		padding-bottom: 0.55em;
		font-size: 1.05em;
	}

	.cb-deals-table td:not(:first-child) {
		display: flex;
		justify-content: space-between;
		gap: 1.2em;
	}

	.cb-deals-table td:not(:first-child)::before {
		content: attr(data-label);
		font-weight: 600;
		opacity: 0.6;
		flex: 0 0 auto;
	}

	.cb-deals-num {
		text-align: right;
	}
}