*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg-body-main);
  color:#fff;
}

.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:24px 16px;
}

.hero{
  width:100%;
  max-width:1100px;
}

.icon-circle{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;
  background: rgba(255,255,255,.10);
  border:1px solid var(--bg-back-border);
  transition: transform .18s ease, filter .18s ease;
}

.icon-circle:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.icon-circle:active{ transform: scale(.98); }

.events-header{
  position:relative;
  text-align:center;
  margin-bottom:24px;
}

.events-header .icon-circle{
  position:absolute;
  left:0;
  top:6px;
}

.events-header h1{
  font-size:28px;
  font-weight:900;
}

.events-header p{
  margin-top:8px;
  font-size:14px;
  opacity:.8;
}

.events-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
}

.event-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.event-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px rgba(0,0,0,.6);
}

.event-image{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit:cover;
  display:block;
}

.event-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent 60%);
  display:flex;
  align-items:flex-end;
  padding:16px;
}

.event-info{
  width:100%;
}

.event-info h3{
  font-size:16px;
  font-weight:800;
}

.event-info .meta{
  margin-top:6px;
  font-size:12px;
  opacity:.85;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background: linear-gradient(90deg,#c78f1b,#f2b020);
  color:#111;
}

.empty{
  text-align:center;
  margin-top:40px;
  font-size:14px;
  opacity:.75;
}