/**
 * List: `grid gap-x-10 md:grid-cols-2`, a row `border-t py-5`; the meta
 * `text-sm font-medium tabular-nums` in the dark red, the title `mt-1.5
 * text-base font-medium leading-snug`, the text `mt-1 text-sm` muted.
 */

.sba-c-list .sba-c-list-rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-c-list .sba-c-list-row {
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid var(--sba-border);
}

/* The reset leaves margins to the rules after it, and the frame's spacing
   under the header stands. */
.sba-c-list .sba-c-list-row > * {
	margin: 0;
}

.sba-c-list .sba-c-section-header + .sba-c-list-rows,
.sba-c-list .sba-c-buttons + .sba-c-list-rows {
	margin-top: 40px;
}

.sba-c-list .sba-c-list-meta {
	color: var(--sba-red-dark);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-list .sba-c-list-meta + .sba-c-list-title {
	margin-top: 6px;
}

.sba-c-list .sba-c-list-title {
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.375;
}

.sba-c-list .sba-c-list-text {
	margin-top: 4px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

/* The link under the list, in the 24px line of the prototype's block. */
.sba-c-list .sba-c-links {
	min-height: 24px;
	align-items: center;
}

.sba-c-list .sba-c-list-link {
	margin-top: 8px;
}

/* A meta line's icon, 14px, `gap-1.5`. */
.sba-c-list .sba-c-list-meta .sba-i {
	margin-right: 6px;
	font-size: 14px;
	vertical-align: -2px;
}

/* A row that is a link (a platform's groups and courses): the text on the
   left, the badge and the arrow on the right, the title's link stretched
   over the row, the title dark red on hover. */
.sba-c-list .sba-c-list-row-link {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 16px;
	align-items: center;
	column-gap: 16px;
}

.sba-c-list .sba-c-list-row-link > :not(.sba-c-list-badge, .sba-c-list-arrow) {
	grid-column: 1;
}

.sba-c-list .sba-c-list-row-link .sba-c-list-badge {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.sba-c-list .sba-c-list-row-link .sba-c-list-arrow {
	grid-column: 3;
	grid-row: 1 / span 3;
	color: var(--sba-red-dark);
	font-size: 16px;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-c-list .sba-c-list-row-link:hover .sba-c-list-arrow {
	transform: translateX(2px);
}

.sba-c-list .sba-c-list-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--sba-duration-hover) ease;
}

.sba-c-list .sba-c-list-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sba-c-list .sba-c-list-row-link:hover .sba-c-list-title a {
	color: var(--sba-red-dark);
}

.sba-c-list .sba-c-list-title a:focus-visible {
	outline: none;
}

.sba-c-list .sba-c-list-title a:focus-visible::after {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

/* The badge: a pill in the muted foreground, `text-xs font-medium`. */
.sba-c-list .sba-c-list-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border: 1px solid var(--sba-border);
	border-radius: 9999px;
	background-color: var(--sba-surface);
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

.sba-c-list .sba-c-list-badge .sba-i {
	font-size: 12px;
}

@media (min-width: 768px) {
	.sba-c-list .sba-c-list-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}