:root { --bg-img: url('/background.svg'); }

/* Base app root spacing */
#app-root {max-width:1180px;margin:0 auto;padding:20px 40px 80px;}

/* Shared view styles */
.view-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
.search-box{flex:1;min-width:260px;position:relative;}
.search-box input{width:100%;padding:12px 40px 12px 14px;border:2px solid #000;border-radius:24px;font-size:15px;background:#fff;}
.search-box svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#000;}
.tag-bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.tag{padding:6px 14px;border:2px solid #000;border-radius:30px;font:500 13px/1 'SF Pro Display',sans-serif;cursor:pointer;background:#fff;transition:background .2s,color .2s;}
.tag.active{background:#000;color:#fff;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px;margin-top:38px;}
.people-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.empty{margin-top:56px;font:500 16px/1.4 'SF Pro Display',sans-serif;color:#222;text-align:center;}
.skeleton{animation:pulse 1.2s infinite ease-in-out;background:linear-gradient(90deg,#eee,#f5f5f5,#eee);background-size:200% 100%;}
@keyframes pulse{0%{background-position:0 0}100%{background-position:200% 0}}

/* Two-column layout (list + filters) */
.events-layout{display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:88px;align-items:start;margin-top:6px;}
.events-list{display:flex;flex-direction:column;gap:34px;}
.events-list .card{width:100%;max-width:100%;}
.events-layout .side{position:sticky;top:120px;align-self:start;}

/* Responsive tweaks */
@media(max-width:1200px){ .events-layout{grid-template-columns:minmax(0,1fr) 340px;gap:40px;} }
@media(max-width:900px){ .events-layout{grid-template-columns:1fr;gap:26px;} .events-layout .side{position:static;order:-1;margin-bottom:6px;} .events-list-wrapper{padding-inline:8px;} }
@media(max-width:760px){ #app-root{padding:20px 24px 60px;} .grid{gap:26px;} .events-list{gap:26px;} .events-list-wrapper{padding-inline:12px;} }