/* OpenPress Best Tools directory (/best/ and Best Category archives). Loaded on those archives only, after tools.css (page header, category chips, content spacing). Uses existing tokens/components, so dark mode follows the theme variables. */

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

/* Best Tools card -------------------------------------------------------- */
/* Builds on .op-card / .op-card--link / .op-card__media / .op-card__body above. */
.op-best-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--op-border);
}
.op-best-card__monogram {
	color: var(--op-text-muted);
	font-size: 2.5rem;
	font-weight: var(--op-weight-semibold);
	line-height: 1;
}

.op-best-card__body { gap: var(--op-space-3); }
.op-best-card__category { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

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

/* Metadata stays at the bottom of the body so footers align across a row. */
.op-best-card__meta {
	margin-top: auto;
	padding-top: var(--op-space-2);
}
.op-best-card__meta .op-meta__label::after { content: ":"; }
.op-best-card__meta .op-meta__item { overflow-wrap: anywhere; }

/* Best-of card: recommendation-oriented. Dark grid visual on top; frame, footer and action come from the shared card styles. */
.op-best-card__media {
	aspect-ratio: 16 / 8;
	border-bottom: 0;
	background:
		linear-gradient(rgb(160 178 255 / 0.08) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		linear-gradient(90deg, rgb(160 178 255 / 0.08) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		radial-gradient(16rem 9rem at 85% 0%, rgb(91 141 255 / 0.45), transparent 70%),
		radial-gradient(14rem 9rem at 5% 100%, rgb(167 139 250 / 0.38), transparent 70%),
		var(--op-black);
}
.op-best-card__monogram { -webkit-text-fill-color: #fff; background: none; color: #fff; font-size: 4rem; opacity: 0.95; }
.op-best-card__title { font-size: var(--op-text-h3); letter-spacing: -0.025em; line-height: 1.15; }
.op-best-card__meta { padding-top: var(--op-space-3); border-top: 1px dashed var(--op-border); }