.event-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.event {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: var(--border-thin) solid var(--line);
  position: relative;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
}

.event:last-child {
  border-bottom: 0;
}

/* Diagonal hatched texture overlay */
.event::after,
.more-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 3px,
    var(--texture-line) 3px 4px
  );
}

.event span,
.more-bar span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category Backgrounds */
.ctf { background: var(--ctf); }
.hackathon { background: var(--hackathon); }
.datathon { background: var(--datathon); }
.cp { background: var(--cp); }
.business-case { background: var(--business-case); }
.fest { background: var(--fest); }
.other { background: var(--other); }

/* Overflow "+N more" Bar */
.more-bar {
  height: var(--more-bar-height);
  flex: 0 0 var(--more-bar-height);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 0;
  background: var(--bar-bg);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  color: var(--ink);
}

.more-bar:hover {
  background: var(--hover-bar);
}

/* Multi-day Event Styling */
.event.multiday {
  display: flex;
  align-items: center;
  gap: 5px;
}

.event .event-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}

.multiday-indicator {
  font-size: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.multiday-indicator.start {
  color: #15803d;
  font-weight: 900;
  font-size: 7.5px;
}

.multiday-indicator.middle {
  font-size: 9.5px;
  color: #555;
}

.multiday-indicator.end {
  font-size: 7.5px;
  color: #b91c1c;
}

.multiday-start {
  border-left: 3px solid var(--line);
}

.multiday-middle {
  opacity: 0.96;
}

.multiday-middle .event-title {
  font-weight: 800;
}

.multiday-end {
  border-right: 3px solid var(--line);
}

@media (max-width: 768px) {
  .event {
    padding: 3px 4px;
    font-size: 9px;
    line-height: 1.15;
    align-items: center;
  }

  .event span,
  .event .event-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-size: 9px;
    line-height: 1.15;
  }

  /* Hide multi-day arrow/box indicators on mobile to maximize title space */
  .multiday-indicator {
    display: none !important;
  }

  .multiday-start {
    border-left: 2.5px solid var(--line);
  }

  .multiday-end {
    border-right: 2.5px solid var(--line);
  }

  .more-bar {
    height: 14px;
    flex: 0 0 14px;
    font-size: 8px;
  }
}