.cs-grid { display:grid; }
.cs-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.cs-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cs-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cs-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

.cs-card { background:#fff; border:1px solid #e7e8ec; border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,0.12); overflow:hidden; position:relative; display:flex; flex-direction:column; gap:12px; }
.cs-card__media { position:relative; background:#f5f6f8; border-radius:14px; overflow:hidden; min-height:220px; display:flex; align-items:center; justify-content:center; }
.cs-card__media img { width:100%; height:100%; object-fit:cover; }
.cs-card__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#2b3a4a; background:linear-gradient(135deg,#f3f7ff,#e7eefb); font-size:32px; }
.cs-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.cs-dot { width:8px; height:8px; border-radius:999px; background:#d1d5db; opacity:0.7; }
.cs-dot.is-active { background:#34c759; opacity:1; }
.cs-like { position:absolute; top:10px; right:10px; border:none; background:rgba(255,255,255,0.9); border-radius:999px; padding:6px 10px; display:flex; align-items:center; gap:6px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.12); }
.cs-like__icon { color:#d8415a; font-size:16px; line-height:1; }
.cs-like__count { font-weight:600; color:#2b2b2b; }
.cs-like.is-liked { background:#ffe7ed; }
.cs-like.is-liked .cs-like__icon { color:#d60039; }

.cs-card__body { display:flex; flex-direction:column; gap:6px; padding:0 2px; }
.cs-card__title { font-weight:800; font-size:18px; margin:0; color:#1e293b; }
.cs-card__meta { color:#4b5563; font-size:14px; }
.cs-card__notes { color:#374151; font-size:14px; line-height:1.4; }
.cs-card__cta { display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; background:#111; color:#fff; font-weight:700; text-decoration:none; margin-top:4px; }
.cs-card__cta:hover { background:#000; }
.cs-card.cs-hidden { display:none; }