/**
 * 21C Events: front end.
 * This file holds only the Events-only layout rules: the page wrapper and the six approved classes
 * (c21-events-grid, c21-events-card__media, c21-events-card__labels, c21-events-filters, c21-events-detail,
 * c21-events-detail__media), plus a width limit for pictures in an event's description.
 * Everything else (buttons, fields, labels, messages, headings, links, surfaces, spacing) comes from the
 * shared 21C primitives and the shared CSS Styler.
 */

.c21-events {
  box-sizing: border-box;
  max-width: 72rem;
  margin-inline: auto;
}

.c21-events-detail {
  max-width: 42rem;
}

.c21-events-detail__media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
}

.c21-events-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c21-events-detail__description img {
  max-width: 100%;
  height: auto;
}

.c21-events-filters {
  margin-block-end: 1.25rem;
}

.c21-events-filters .c21-cluster {
  align-items: flex-end;
}

.c21-events-grid {
  display: grid;
  grid-template-columns: repeat(var(--c21-events-cards-per-row, 3), minmax(0, 1fr));
  gap: 1.25rem;
}

.c21-events-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
  background: #eef3f7;
}

.c21-events-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c21-events-card__labels {
  gap: 0.35rem;
}

.c21-events-card__labels a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  background: #eef3f7;
  color: #1e5a8a;
  font-size: 0.85em;
  text-decoration: none;
}

.c21-events-card__labels a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .c21-events-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c21-events-filters .c21-cluster {
    flex-direction: column;
    align-items: stretch;
  }
}