/* ============================================================
   Events – Tab bar (Upcoming / Latest / Past)
   ============================================================ */
.ev-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.ev-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: #f1f5f9;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.ev-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background .22s, color .22s, box-shadow .22s, transform .15s;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: .01em;
}

.ev-tab:hover {
  color: #1e8756;
  background: rgba(30, 135, 86, .07);
  text-decoration: none;
  transform: translateY(-1px);
}

.ev-tab.active {
  background: #ffffff;
  color: #1e8756;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transform: none;
}

/* coloured dot */
.ev-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .2s;
}

.ev-tab--upcoming .ev-tab-dot { background: #10b981; }
.ev-tab--latest   .ev-tab-dot { background: #3b82f6; }
.ev-tab--past     .ev-tab-dot { background: #94a3b8; }

.ev-tab:not(.active) .ev-tab-dot { opacity: .45; }
.ev-tab.active       .ev-tab-dot { transform: scale(1.25); }

/* label badge on active tab */
.ev-tab.active::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1.5px solid rgba(30,135,86,.18);
  pointer-events: none;
}
.ev-tab { position: relative; }

@media (max-width: 540px) {
  .ev-tabs { width: 100%; }
  .ev-tab  { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; gap: 6px; }
}

/* ============================================================
   Events – Scroll sentinel / loading spinner
   ============================================================ */
.scroll-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
  min-height: 60px;
}
.scroll-sentinel.loading .scroll-spinner {
  opacity: 1;
}
.scroll-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(30,135,86,.15);
  border-top-color: #1e8756;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  opacity: 0;
  transition: opacity .25s ease;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Clickable event cards - NO UNDERLINES
   ============================================================ */
a.item-card-link,
a.item-card-link:link,
a.item-card-link:visited,
a.item-card-link:hover,
a.item-card-link:active,
a.item-card-link:focus {
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
}

.item-card-link {
  text-decoration: none !important;
  color: inherit;
  display: block;
  transition: transform 0.2s ease;
}

.item-card-link:hover {
  transform: translateY(-4px);
  text-decoration: none !important;
}

.item-card-link:hover .item-card {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.item-card-link *,
.item-card-link .item-card,
.item-card-link .item-card-body,
.item-card-link .item-card-title,
.item-card-link .item-card-caption,
.item-card-link h1,
.item-card-link h2,
.item-card-link h3,
.item-card-link h4,
.item-card-link h5,
.item-card-link h6,
.item-card-link p,
.item-card-link span,
.item-card-link div {
  text-decoration: none !important;
}

.item-card-link .item-card-title {
  transition: color 0.2s ease;
  text-decoration: none !important;
}

.item-card-link:hover .item-card-title {
  color: #1e8756;
  text-decoration: none !important;
}

/* Prevent carousel indicators from triggering card navigation */
/* Position indicators at the bottom of the image */
.item-card-img-wrap .carousel-indicators {
  position: absolute;
  bottom: 8px;
  top: auto;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  pointer-events: auto;
  justify-content: center;
}

.item-card-img-wrap .carousel-indicators button {
  cursor: pointer;
  pointer-events: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  margin: 0 3px;
  padding: 0;
  transition: background-color 0.2s, transform 0.2s;
}

.item-card-img-wrap .carousel-indicators button.active {
  background-color: #fff;
  transform: scale(1.3);
}

.item-card-img-wrap .carousel-indicators button:hover {
  background-color: #fff;
}