/* ==========================================================================
   EVENTS — deepest-dark background, live Supabase-backed grid. Public site
   only ever shows upcoming events (see js/events.js); "Upcoming" next to
   the heading is a static badge, not a control — there's nothing to
   toggle here. Cards use flex (not a rigid N-column grid) so 1 or 2
   results sit at their natural width instead of stretching to fill the
   row or leaving awkward empty grid cells.
   Markup: section#events.events > .container
             > .events__header > .events__badge
             > .events__grid[data-events-grid] > .event-tile (x N, or a
               single full-width .events__status for loading/empty states)
   ========================================================================== */

.events {
  background: var(--color-bg-deeper-dark);
}

/* ---- Header ----------------------------------------------------------------*/
.events__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-section-gap);
}

.events__heading {
  color: var(--color-white);
}

/* Same visual treatment as .event-tile__status below — just not
   position:absolute, since it sits inline in the header, not over an
   image. */
.events__badge {
  display: inline-block;
  font-size: var(--fs-caption-sm);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-btn);
  background: var(--color-brand-red);
  color: var(--color-white);
}

/* ---- Grid (flex, not stretched) -----------------------------------------------*/
.events__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.events__status {
  flex: 1 1 100%;
  text-align: center;
  color: var(--color-white-45);
  font-size: var(--fs-body);
  padding: var(--space-lg) 0;
}

/* ---- Empty state ---------------------------------------------------------------*/
.events__empty {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-section-gap) var(--space-lg);
  border: 1.5px dashed var(--color-border-dark);
  border-radius: var(--radius-card);
  color: var(--color-white-45);
}

.events__empty svg {
  color: var(--color-white-30);
}

.events__empty p {
  font-size: var(--fs-body);
  max-width: 360px;
}

/* ---- Event tile ---------------------------------------------------------------*/
.event-tile {
  flex: 0 1 340px;
  max-width: 100%;
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Below this width the grid is naturally single-column anyway (two 340px
   cards + gap no longer fit), so growing to fill the row is safe here —
   it's only at 2-3 columns that grow:0 above matters, to stop 1-2 cards
   from stretching across an otherwise multi-column row. */
@media (max-width: 780px) {
  .event-tile {
    flex: 1 1 100%;
  }
}

.event-tile:hover,
.event-tile:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.event-tile__media {
  position: relative;
  height: 14rem;
  overflow: hidden;
  background: var(--color-border-dark-soft);
}

.event-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.event-tile:hover .event-tile__media img,
.event-tile:focus-within .event-tile__media img {
  transform: scale(1.04);
}

/* Rectangular tag per the design system's radius scale (--radius-btn) —
   not a pill; unlike the admin dashboard's status badge, this reference
   shows a small squared-off tag. */
.event-tile__status {
  position: absolute;
  top: var(--space-sm-lg);
  left: var(--space-sm-lg);
  font-size: var(--fs-caption-sm);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-btn);
}

.event-tile__status--upcoming {
  background: var(--color-brand-red);
  color: var(--color-white);
}

.event-tile__status--past {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text-primary);
}

.event-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-md);
}

.event-tile__title {
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.event-tile__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-body-sm);
  color: var(--color-white-30);
}

.event-tile__meta--date {
  color: var(--color-white-45);
}

.event-tile__meta svg {
  color: var(--color-brand-red);
  flex-shrink: 0;
}