html,
body {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}

.event-page{height:auto;min-height:100svh;overflow-x:hidden;overflow-y:auto;padding:0;display:block}
.event-page main{height:calc(100svh - 64px);min-height:calc(100svh - 64px);padding:8px 14px}

body {
  overflow: hidden;
  padding: clamp(8px, 2vh, 18px);
}

main {
  height: 100%;
  display: grid;
  place-items: center;
}

.card {
  width: 100%;
  max-height: 100%;
  padding: clamp(12px, 2.4vh, 24px) clamp(14px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.brand {
  width: clamp(48px, 7vh, 68px);
  height: clamp(48px, 7vh, 68px);
}

.tag {
  display: block;
  width: max-content;
  margin: 8px auto 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--category, var(--gold));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tag::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto 6px;
  background: currentColor;
}

body[data-category="academic"] { --category: #EE6A58; }
body[data-category="sports"] { --category: #8FC4A2; }
body[data-category="cultural"] { --category: #F5AF3A; }

h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

.poster {
  flex: 0 1 auto;
  width: min(100%, 520px);
  max-height: min(60vh, calc(100svh - 240px));
  object-fit: contain;
  margin: 12px auto;
  border-radius: 12px;
}

.actions {
  flex-wrap: nowrap;
  gap: 10px;
}

a.btn {
  min-height: 44px;
  padding: 8px clamp(14px, 2.5vw, 24px);
  white-space: nowrap;
}

@media (max-width: 480px) {
  body { padding: 10px; }
  .card { padding: 12px; border-radius: 20px; }
  .brand { width: 54px; height: 54px; }
  .tag { margin: 6px auto 4px; }
  .poster {
    width: 100%;
    max-height: min(60vh, calc(100svh - 210px));
    margin: 8px auto;
  }
  .actions { width: 100%; gap: 8px; }
  a.btn { flex: 1 1 0; padding: 8px 10px; }
}

@media (max-height: 600px) {
  body { padding: 8px; }
  .card { padding: 8px 14px; }
  .brand { width: 40px; height: 40px; }
  .tag { margin: 4px auto 3px; }
  .poster {
    max-height: min(60vh, calc(100svh - 150px));
    margin: 6px auto;
  }
  a.btn { min-height: 40px; }
}