.container{max-width:1200px;margin:0 auto;padding:2rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.card.disabled{cursor:not-allowed}.card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.15)}.card-image{position:relative;width:100%;height:220px;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;display:block}.overlay{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;font-size:.8rem;border-radius:6px;letter-spacing:.5px}.card-text{padding:1.2rem;display:flex;flex-direction:column;gap:.5rem}.card-text h2{margin:0;font-size:1.25rem;color:#111}.card-text h3{margin:0;font-size:.95rem;color:#555;font-weight:normal;line-height:1.4}.card-text p a{display:inline-block;margin-top:.5rem;color:#2563eb;font-weight:600;text-decoration:none}.card-text p a:hover{text-decoration:underline}html[data-theme="dark"] .card h2,html[data-theme="dark"] .card h3{color:var(--color-black)}