.crs-grid {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 24px;
}

.crs-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 14px;
    align-content: start;
    padding: 12px 12px 24px;
    color: var(--text-primary);
    transition: border-color var(--ease);
}

.crs-cover      { grid-row: 1; }
.crs-card-title { grid-row: 2; }
.crs-card-desc  { grid-row: 3; }
.crs-topics     { grid-row: 4; }
.crs-card-foot  { grid-row: 5; }

.crs-card > :not(.crs-cover) { margin-inline: 12px; }

.crs-card:hover { color: var(--text-primary); border-color: var(--border-accent-ctrl); }
.crs-card:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 4px; }

.crs-cover {
    container-type: inline-size;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-1);
}

.crs-art { font-size: calc(100cqi / 43.2); }

.crs-card-title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-primary);
}

.crs-card-desc {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text-muted-2);
    text-wrap: pretty;
}

.crs-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-hairline);
    list-style: none;
}

.crs-topics li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-secondary);
}

.crs-topics li::before {
    content: '›';
    flex: none;
    font-weight: 700;
    color: var(--accent);
}

.crs-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

.crs-card-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--text-faint);
    white-space: nowrap;
}

.crs-card-go {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    transition: color var(--ease);
}

.crs-card:hover .crs-card-go { color: var(--accent-hover); }

.crs-card-arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--border-accent-ctrl);
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.08);
    color: var(--text-primary);
    transition: background var(--ease), border-color var(--ease);
}

.crs-card:hover .crs-card-arrow { background: rgba(139, 92, 246, 0.22); border-color: var(--accent); }

.crs-card-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}