/* small inline CSS for cards */
.events-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:18px; }
.event-card{ background:var(--surface); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.04); display:flex; flex-direction:column; }
.event-media{ position:relative; width:100%; height:180px; overflow:hidden; }
.event-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); }
/* gradient dim from bottom */
.event-media::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;height:56%;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.65) 100%);
    pointer-events:none;
}
.event-title-overlay{
    position:absolute;
    left:12px; right:12px; bottom:12px;
    color:white; font-weight:700; font-size:18px;
    text-shadow: 0 6px 18px rgba(0,0,0,0.6);
    z-index:2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.event-body{ padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.event-meta{ color:var(--muted); font-size:13px; margin-top:6px; }
.hosts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.host-pill{ background:rgba(255,255,255,0.03); padding:6px 8px; border-radius:999px; font-size:13px; }
.card-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
form.inline{ display:inline-flex; gap:6px; align-items:center; }
.small-input{ padding:6px 8px; border-radius:6px; background:#0f111a; border:1px solid rgba(255,255,255,0.04); color:var(--text); }
.btn.small{ padding:6px 10px; font-size:13px; }

@media (max-width: 640px) {
    .events-grid { gap:14px; }
    .event-media { height:160px; }
    .event-title-overlay { font-size:16px; }
    form.inline {
        width: 100%;
        flex-wrap: wrap;
    }
    .small-input {
        width: 100%;
    }
}