.card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid}.card-grid>li{display:flex}.course-card,.path-card{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);flex-direction:column;width:100%;transition:border-color .15s,transform .15s;display:flex;position:relative;overflow:hidden}.course-card:hover,.path-card:hover{border-color:var(--accent-line);transform:translateY(-2px)}.course-card:focus-within,.path-card:focus-within{box-shadow:var(--focus-ring)}.course-card-body,.path-card-body{flex-direction:column;flex:1;gap:8px;padding:16px 18px 18px;display:flex}.course-card-badges{flex-wrap:wrap;gap:6px;display:flex}.course-card-title,.path-card-title{font-family:var(--font-display);margin:2px 0 0;font-size:18px;line-height:1.3}.stretched{color:var(--text);text-decoration:none}.stretched:after{content:"";position:absolute;inset:0}.stretched:focus-visible{outline:none}.stretched:hover{color:var(--text)}.course-card-subtitle{color:var(--text-2);margin:0;font-size:14px;line-height:1.45}.course-card-by{color:var(--text-muted);margin:0;font-size:13px}.facts{color:var(--text-muted);flex-wrap:wrap;gap:6px;margin:auto 0 0;padding-top:4px;font-size:13px;display:flex}.course-card-progress{color:var(--text-2);gap:6px;font-size:13px;display:grid}.cover{aspect-ratio:16/9;object-fit:cover;background:var(--surface-2);width:100%;display:block}.cover--generated{color:color-mix(in srgb, var(--product-accent) 40%, #fff);background:radial-gradient(110% 120% at 85% 0%, color-mix(in srgb, var(--product-accent) 70%, transparent) 0%, transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--product-accent) 45%, #14121a) 0%, #121018 100%);place-items:center;display:grid}.cover--hero{border-radius:var(--radius-lg)}.path-card{flex-direction:row}.path-card-icon{background:var(--accent-soft);width:64px;height:64px;color:var(--accent-text);border-radius:18px;flex:none;place-items:center;margin:18px 0 18px 18px;display:grid}.placeholder-badge{white-space:nowrap}