.card-item{display:flex;flex-direction:column;flex:1 1 20rem;min-width:0;background:var(--color-bg-surface);padding:var(--space-md);box-shadow:var(--shadow-sm);border-radius:var(--radius-lg);box-sizing:border-box;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;will-change:transform,box-shadow}.card-item.clickable:hover{transform:translateY(-.5rem);box-shadow:var(--shadow-md);cursor:pointer}.card-image-wrapper{width:100%;aspect-ratio:3.5 / 3;overflow:hidden;border-radius:var(--radius-md);background:var(--color-bg-muted);flex-shrink:0;transition:filter .3s ease;position:relative}.skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-bg-muted);border-radius:var(--radius-md)}.shimmer{background:linear-gradient(90deg,var(--color-bg-muted) 25%,var(--color-bg-surface) 50%,var(--color-bg-muted) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.card-image{width:100%;height:100%;object-fit:cover;object-position:center;backface-visibility:hidden;transform:translateZ(0);position:relative;display:block;transition:opacity .5s ease}.card-image.hidden{opacity:0}.card-image.loaded{opacity:1}.card-content{display:flex;flex-direction:column;text-align:center;flex-grow:1}.card-title{color:var(--color-primary);margin:0;margin-top:var(--space-md);font-family:var(--font-family-display);font-size:var(--font-size-lg);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;text-overflow:ellipsis}.card-desc{color:var(--color-text-primary);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-align:center}.card-date{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-align:center;margin:0;margin-top:var(--space-sm)}