/*
 * Pros & Cons — a split verdict panel.
 * Colours and type come from the theme's design tokens, so this block follows
 * the active design system without the plugin knowing anything about it.
 */

.masthead-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid var( --mh-color-border, #242424 );
	margin: 2.5em 0;
}

.masthead-pros-cons__col {
	background: var( --mh-color-paper, #111111 );
	padding: 1.35em 1.5em;
}

.masthead-pros-cons__col--cons {
	border-left: 1px solid var( --mh-color-border, #242424 );
}

.masthead-pros-cons__label {
	margin: 0 0 0.9em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid currentColor;
	font-family: var( --mh-font-ui, inherit );
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
}

.masthead-pros-cons__label--pros { color: var( --mh-color-success, #4ade80 ); }
.masthead-pros-cons__label--cons { color: var( --mh-color-danger, #f87171 ); }

.masthead-pros,
.masthead-cons {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.masthead-pros li,
.masthead-cons li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.7em;
	line-height: 1.5;
}
.masthead-pros li:last-child,
.masthead-cons li:last-child { margin-bottom: 0; }

.masthead-pros li::before,
.masthead-cons li::before {
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.75em;
	height: 2px;
	content: '';
}

.masthead-pros li::before { background: var( --mh-color-success, #4ade80 ); }
.masthead-cons li::before { background: var( --mh-color-danger, #f87171 ); }

/* The plus stroke that turns the pro marker into a "+". */
.masthead-pros li::after {
	position: absolute;
	left: calc( 0.375em - 1px );
	top: 0.25em;
	width: 2px;
	height: 0.75em;
	background: var( --mh-color-success, #4ade80 );
	content: '';
}

@media ( max-width: 600px ) {
	.masthead-pros-cons { grid-template-columns: 1fr; }
	.masthead-pros-cons__col--cons {
		border-left: none;
		border-top: 1px solid var( --mh-color-border, #242424 );
	}
}