/**
 * Compare block on BioHarmony intervention reports.
 *
 * Own file on purpose: intervention-base.css and single-bh-comparison.css own
 * the --oi-* token definitions. Nothing here defines or overrides a token; it
 * only consumes them, so light/dark palette work stays in one place.
 *
 * Measured spacing floors (both 390px and desktop):
 *   heading -> cards   24px
 *   card -> card       16px
 *   card padding       18px
 *   inside-card rows   12px  (eyebrow -> standing, header -> question,
 *                             question -> link: one flex gap, all 12px)
 */

.oi-compare {
	margin: 40px 0;
}

/* `.oi-report h2` (specificity 0-1-1) owns size, weight and the accent
   underline for every report section heading — inherit those. Only the
   bottom margin is overridden, at 0-2-0, so the heading-to-cards gap clears
   the 16px floor instead of the site default 12px. */
.oi-report .oi-compare-title {
	margin: 2.5rem 0 24px;
}

.oi-compare-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 720px) {
	.oi-compare-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.oi-compare-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--oi-border);
	border-radius: var(--oi-radius);
	background: var(--oi-bg-raised);
	color: var(--oi-text);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.oi-compare-card:hover,
.oi-compare-card:focus-visible {
	border-color: var(--oi-accent);
	box-shadow: var(--oi-shadow);
	text-decoration: none;
}

.oi-compare-card:focus-visible {
	outline: 2px solid var(--oi-accent);
	outline-offset: 2px;
}

.oi-compare-matchup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.oi-compare-side {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.oi-compare-name {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--oi-text);
}

.oi-compare-score {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--oi-radius-sm);
	background: var(--oi-bg-sunken);
	border: 1px solid var(--oi-border-soft);
	font-family: var(--oi-font-mono);
	font-size: .85rem;
	font-weight: 700;
	color: var(--oi-text);
}

/* Eyebrow on the category-ranking card. Same muted micro-label treatment as
   the "vs" separator, so it consumes an already-shipped token pairing rather
   than introducing a new colour. */
.oi-compare-eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--oi-text-soft);
}

.oi-compare-vs {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--oi-text-soft);
}

/* Category-ranking card. Same card shell as a matchup; the eyebrow + standing
   lines replace the "vs" chain, so they need the same 12px inside-card rhythm
   the flex gap on .oi-compare-card already provides. */
.oi-compare-standing {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--oi-text);
}

.oi-compare-q {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--oi-text-soft);
}

.oi-compare-cta {
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oi-accent-ink);
}

@media (max-width: 480px) {
	.oi-compare-matchup {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* Link out to the full archive, under the card grid. 16px above it, matching
   the card-to-card gap so the row reads as one more step in the same rhythm
   (2026-09-11). Colour is .oi-compare-cta's --oi-accent-ink, already measured
   on both themes. */
.oi-compare-all {
	margin: 16px 0 0;
}

.oi-compare-all a {
	text-decoration: none;
}

.oi-compare-all a:hover,
.oi-compare-all a:focus-visible {
	text-decoration: underline;
}