/**
 * Geistlich Events Block — front-end + editor styles.
 *
 * The event cards reuse your existing `search-filter__*` class names, so your
 * theme's card CSS applies unchanged. These rules only add the filter bar, the
 * column grid, and a small editor placeholder.
 */

/* Results grid — responsive auto-fit. Override if your theme lays these out. */
.geistlich-events .search-filter__results-wrap_event {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 1.5rem;
}

/* "AUG 6 – Webinar" row above each card's thumbnail. */
.geistlich-events .event-meta-row {
	margin: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 600;
	line-height: 1.2;
	background: #f1f1f1;
	color: var(--blue);
}

.geistlich-events .term-webinar .event-meta-row {
	background: linear-gradient(45deg,#ef7c00 10%,#e5007d 90%);
	color: #fff;
}

/* Ensure hidden cards actually collapse even if the card has display:grid/flex. */
.geistlich-events .search-filter__result_event[hidden],
.geistlich-events .geistlich-events__empty-message[hidden] {
	display: none !important;
}

/* Filter bar */
.geistlich-events__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.geistlich-events__filter-btn {
	cursor: pointer;
	font: inherit;
	font-size: .75rem;
	line-height: 1.2;
	padding: 0.45em 1em;
	border-radius: 999px;
	border: 1px solid #1a1a1a;
	background: #fff;
	color: #1a1a1a;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.geistlich-events__filter-btn:hover,
.geistlich-events__filter-btn:focus-visible {
	background: #1a1a1a;
	color: #fff;
}

.geistlich-events__filter-btn.is-active {
	background: #1a1a1a;
	color: #fff;
}

.geistlich-events__no-results {
	margin: 0;
	font-style: italic;
}

/* Editor placeholder */
.geistlich-events-editor-preview {
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	padding: 1.5rem;
	text-align: center;
	color: #50575e;
}
.geistlich-events-editor-preview .dashicons {
	display: block;
	margin: 0 auto 0.5rem;
	width: auto;
	height: auto;
	font-size: 2rem;
}
.geistlich-events-editor-preview p {
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}