/* =========================================================
   Events page only. Shared chrome (including .events-hero and
   .event-badge-pill) lives in common.css.
   ========================================================= */

.event-card {
  background: var(--win-face);
  box-shadow: var(--bevel-raised);
  padding: 0;
}

.event-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: linear-gradient(90deg, var(--win-face-deep), var(--win-cyan));
  padding: 0.4rem 0.6rem;
}

.event-titlebar.type-rehearsal {
  background: linear-gradient(90deg, var(--win-cyan-deep), var(--win-cyan));
}

.event-titlebar.type-concert {
  background: linear-gradient(90deg, var(--win-face-deep), #f3c9e0);
}

.event-titlebar.type-social {
  background: linear-gradient(90deg, var(--win-yellow-deep), var(--win-yellow));
}

.event-titlebar.type-jam {
  background: linear-gradient(90deg, var(--win-mid), var(--win-face-deep));
}

.event-titlebar-text {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--win-titlebar-text);
}

.event-body {
  padding: 1.1rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.event-date-badge {
  flex: 0 0 auto;
  width: 4.2rem;
  text-align: center;
  background: var(--win-console-bg);
  box-shadow: var(--bevel-well);
  color: var(--win-console-text);
  padding: 0.45rem 0.2rem;
  font-family: var(--font-pixel);
}

.event-date-badge .month {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-date-badge .day {
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
}

/* Recurring events (e.g. a standing weekly jam) show a loop glyph and the
   day name instead of a month/day — see events.html + _data/events.yml. */
.event-date-badge.is-recurring .loop-icon {
  display: block;
  font-size: 1.1rem;
  line-height: 1.3;
}

.event-date-badge.is-recurring .day {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.event-body p {
  font-family: var(--font-ui);
}

/* Past Events section — same card, just visually de-emphasized. */
.event-card.is-past {
  opacity: 0.65;
}

.event-external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.75rem;
}

.event-external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--win-titlebar-text);
}

.event-external-link img {
  width: 18px;
  height: 18px;
}

.event-external-link:hover {
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .event-body {
    flex-direction: column;
  }

  .event-date-badge {
    width: 6rem;
  }
}