/* OpenPress Comparisons directory (/comparisons/). Loaded on the Comparison archive only, after tools.css (page header, content spacing). Uses existing tokens/components. */

/* Breadcrumb sits above the title in the page header */
.op-comparisons__crumbs { margin-bottom: var(--op-space-4); }

/* Comparison card -------------------------------------------------------- */
/* Builds on .op-card / .op-card--link / .op-card__body above. */
.op-comparison-card__body { gap: var(--op-space-3); }

/* Tool A vs Tool B: logo + name (identity only, not links). Logo box is the shared .op-tool-card__logo. */
.op-comparison-card__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--op-space-2) var(--op-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.op-comparison-card__tool { display: flex; align-items: center; gap: var(--op-space-2); min-width: 0; max-width: 100%; }
.op-comparison-card__tool-name {
	min-width: 0;
	font-size: var(--op-text-small);
	font-weight: var(--op-weight-semibold);
	line-height: var(--op-leading-snug);
	overflow-wrap: anywhere;
}
.op-comparison-card__vs {
	color: var(--op-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--op-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Two-line title and three-line summary keep cards in a row the same height. */
.op-comparison-card__title,
.op-comparison-card__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.op-comparison-card__title { -webkit-line-clamp: 2; line-clamp: 2; }
.op-comparison-card__summary { -webkit-line-clamp: 3; line-clamp: 3; }

/* Winner stays at the bottom of the body so footers align across a row. */
.op-comparison-card__winner {
	margin: auto 0 0;
	padding-top: var(--op-space-2);
	font-size: var(--op-text-small);
	overflow-wrap: anywhere;
}
.op-comparison-card__winner-label { color: var(--op-text-muted); }
.op-comparison-card__winner-name { color: var(--op-text); font-weight: var(--op-weight-semibold); }
.op-comparison-card__winner-name::before {
	content: "\2713";
	margin-right: 0.35em;
	color: color-mix(in srgb, var(--op-link) 78%, var(--op-text));
}

/* Shared by the card and the Comparison page ------------------------------ */
/* Smaller / larger variants of the shared .op-tool-card__logo box. */
.op-cmp-logo--sm { width: 2.25rem; height: 2.25rem; padding: 0.25rem; }
.op-cmp-logo--sm .op-tool-card__monogram { font-size: 1rem; }
.op-cmp-logo--lg { width: 4rem; height: 4rem; padding: 0.5rem; border-radius: var(--op-radius-lg); }

/* "Tool A" / "Tool B" text tag, and the winner / tie tag. Never colour alone. */
.op-cmp-tag {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--op-space-2);
	margin: 0;
	color: var(--op-text-muted);
	font-size: 0.8125rem;
	font-weight: var(--op-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.op-cmp-tag__winner {
	padding: 0.0625rem 0.5rem;
	border: 1px solid color-mix(in srgb, var(--op-link) 45%, var(--op-border));
	border-radius: var(--op-radius-pill);
	background: color-mix(in srgb, var(--op-link) 10%, transparent);
	color: color-mix(in srgb, var(--op-link) 78%, var(--op-text));
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
}
.op-cmp-tag__winner::before { content: "\2713"; content: "\2713" / ""; margin-right: 0.3em; }
.op-cmp-tag__winner--tie::before { content: "="; content: "=" / ""; }


/* A VS B card (archive, homepage, related lists) ----------------------------------
   Two tools face each other across a VS mark; the card reads as a matchup, not an article. */
.op-vs-card { border-radius: var(--op-radius-xl); }
.op-vs-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, #4C8DFF 0 50%, #A78BFA 50% 100%);
}
.op-vs-card .op-card__body { gap: var(--op-space-4); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }

/* Real Comparison Card: logos face each other with a VS mark between them */
.op-vs-card .op-comparison-card__tools {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--op-space-3);
	padding: var(--op-space-4);
	border: 1px solid var(--op-border);
	border-radius: var(--op-radius-lg);
	background: linear-gradient(135deg, rgb(76 141 255 / 0.14), rgb(167 139 250 / 0.14));
}
.op-vs-card .op-comparison-card__tool { flex-direction: column; gap: var(--op-space-2); text-align: center; justify-content: center; }
.op-vs-card .op-comparison-card__tool-name { font-family: var(--op-font-display); font-size: 1rem; font-weight: var(--op-weight-bold); }
.op-vs-card .op-cmp-logo--sm { width: 3.5rem; height: 3.5rem; padding: 0.4375rem; border-radius: var(--op-radius); }
.op-vs-card .op-cmp-logo--sm .op-tool-card__monogram { font-size: 1.375rem; }
.op-vs-card .op-comparison-card__vs {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--op-gradient);
	color: #fff;
	font-family: var(--op-font-display);
	font-size: 0.75rem;
	font-weight: var(--op-weight-heavy);
	letter-spacing: 0.02em;
}
.op-vs-card .op-comparison-card__title { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); letter-spacing: -0.025em; }

.op-vs-card .op-comparison-card__title { font-weight: var(--op-weight-bold); }
.op-vs-card .op-comparison-card__winner { padding: var(--op-space-2) var(--op-space-3); border-radius: var(--op-radius-pill); background: color-mix(in srgb, var(--op-link) 9%, transparent); align-self: flex-start; margin-top: 0; }
.op-vs-card .op-card__footer { padding-inline: clamp(1.25rem, 1rem + 1vw, 2rem); } /* lines up with the body padding above */
.op-vs-card .op-comparison-card__tool-name { overflow-wrap: anywhere; }
.op-vs-card .op-comparison-card__tool:first-child .op-tool-card__logo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-blue) 55%, transparent); }
.op-vs-card .op-comparison-card__vs ~ .op-comparison-card__tool .op-tool-card__logo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-violet) 55%, transparent); }
@media (max-width: 380px) {
	.op-vs-card .op-comparison-card__tools { padding: var(--op-space-3); gap: var(--op-space-2); }
	.op-vs-card .op-cmp-logo--sm { width: 3rem; height: 3rem; }
}