.circl-events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Column widths for grid layouts. These provide simple fractions that
   approximate 2, 3 or 4 columns with gutters. Adjust as needed. */
.circl-events-grid.columns-1 .circl-event-card { width: 100%; }
.circl-events-grid.columns-2 .circl-event-card { width: calc(50% - 1rem); }
.circl-events-grid.columns-3 .circl-event-card { width: calc(33.333% - 1rem); }
.circl-events-grid.columns-4 .circl-event-card { width: calc(25% - 1rem); }

.circl-event-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.circl-event-thumb img,
.circl-event-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.circl-event-content {
  padding: 0.75rem;
}

.circl-event-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.circl-event-title a {
  text-decoration: none;
  color: inherit;
}

.circl-event-meta {
  font-size: 0.875rem;
  color: #666;
}

.circl-events-pagination ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.circl-events-pagination li {
  margin: 0;
}

.circl-events-pagination li a,
.circl-events-pagination li span {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.circl-events-filters select {
  margin-right: 0.5rem;
  padding: 0.25rem;
}

.circl-event-submit-form input[type="text"],
.circl-event-submit-form input[type="datetime-local"],
.circl-event-submit-form input[type="file"],
.circl-event-submit-form textarea,
.circl-event-submit-form select {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.circl-event-submit-form label {
  font-weight: 600;
}

.circl-event-submit-form input[type="submit"] {
  background-color: #7610DB;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.circl-event-submit-form input[type="submit"]:hover {
  background-color: #5b0ea9;
}