/* ============================================================================
 * directory-events.css — Events directory additions on top of directory-orgs.css.
 *
 * Reuses every base pattern from the orgs directory: hero, sticky filter bar,
 * chip strips, active-pill bar, card grid, map sidebar, mobile bottom sheet.
 * Only adds event-specific bits: time-scope status pill on the card, the
 * date/time "when" rows, and the cost / registration meta pills.
 * ============================================================================ */

/* ─── Card status pill (Upcoming / Happening now / Past) ─── */
.event-card { position: relative; }

.event-status-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--blue-700, #1d4ed8);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.event-status-pill.ev-future { background: var(--blue-700, #1d4ed8); }
.event-status-pill.ev-live   { background: #16a34a; }
.event-status-pill.ev-past   { background: #6b7280; }

/* ─── "When" rows: date + time, slot under badges ─── */
.event-when {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--text-700, #334155);
}
.event-when i {
  color: var(--blue-700, #1d4ed8);
  font-size: .78rem;
  width: 14px;
  text-align: center;
}

/* ─── Cost + registration meta pills ─── */
.event-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.event-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: .7rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
}
.event-meta-pill.free {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}
.event-meta-pill.cost {
  background: #e0f2fe;
  color: #075985;
  border-color: #bae6fd;
}
.event-meta-pill.registration {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

/* ─── Map legend reuses .map-dot but recolors for event semantics ─── */
.map-sidebar-footer .map-dot.church   { background: var(--blue-700, #1d4ed8); }
.map-sidebar-footer .map-dot.ministry { background: #6b7280; }