/*
 * Auto-fit (i.p.v. de vaste 3 kolommen van eerst) kijkt naar de werkelijke
 * breedte van het blok zelf — niet naar de breedte van het browservenster.
 * Dat is belangrijk: een pagina kan een smallere inhoudskolom hebben dan het
 * scherm, waardoor een "@media"-regel op vensterbreedte de kaarten soms toch
 * liet stapelen op pc. Zo passen ze zich altijd aan de echte beschikbare
 * ruimte aan: tot 3 naast elkaar, minder als het écht niet past.
 */
/* Blok-wrapper: zonder expliciete breedte kan deze smaller uitvallen dan de
   beschikbare ruimte, waardoor auto-fit te vroeg minder kolommen kiest. */
.wp-block-svtr-event-cards {
	width: 100%;
}

.event-container {
	display: grid;
	width: 100%;
	gap: 20px;
	margin: auto;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
}

/* Op telefoon altijd 1 kolom (3 kaarten onder elkaar), ongeacht auto-fit. */
@media ( max-width: 600px ) {
	.event-container {
		grid-template-columns: 1fr;
	}
}

.event-card {
	background: #dddddd;
	padding: 18px;
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.08 );
	border-left: 6px solid #23214b;
}

.event-title {
	font-size: 20px;
	margin: 0;
	font-weight: bold;
}

.event-type {
	font-size: 14px;
	color: #6b7280;
	margin-top: 4px;
}

.event-date {
	margin-top: 10px;
	font-size: 15px;
	font-weight: bold;
}

.countdown {
	font-size: 14px;
	color: #374151;
	margin-top: 3px;
}

.event-location,
.event-price {
	margin-top: 6px;
	font-size: 14px;
	color: #374151;
}

.description {
	margin-top: 12px;
	font-size: 14px;
	color: #4b5563;
}

.description p:first-child {
	margin-top: 0;
}

.event-btn {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 16px;
	background: #23214b;
	color: white;
	border-radius: 8px;
	text-decoration: none;
	font-size: 14px;
}

.event-btn:hover {
	background: #3b3873;
}

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

.event-title a:hover {
	text-decoration: underline;
}

/* Kaart als er geen (aankomende) evenementen zijn */
.no-events {
	background: #e5e7eb;
	padding: 18px;
	border-radius: 14px;
	text-align: center;
	color: #374151;
	font-size: 16px;
	border-left: 6px solid #9ca3af;
}

/* Blok: alleen knoppen (geen extra info) */
.event-buttons-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.event-simple-btn {
	display: inline-block;
	padding: 10px 18px;
	background: #52525f;
	color: white;
	border-radius: 8px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
}

.event-simple-btn:hover {
	background: #3f3f4a;
}

/*
 * Eigen pagina per evenement: geen eigen paginabreedte/achtergrond/kadertje
 * hier — die komt gewoon van je thema, zoals bij elke andere pagina. Alleen
 * wat ruimte onder het infoblokje, vóór je eigen tekst begint.
 */
.svtr-event-info-panel {
	margin-bottom: 24px;
}

/* Samenhangend info-blokje: Wanneer / Tijd / Locatie / Kosten / Extra info */
.event-info-list {
	margin-top: 10px;
}

.event-info-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 18px;
	color: #374151;
	margin-top: 4px;
}

.event-info-row:first-child {
	margin-top: 0;
}

.event-info-label {
	font-weight: bold;
}

.event-info-row--extra {
	align-items: flex-start;
}

.event-info-extra-lines {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.event-section-heading {
	font-weight: bold;
	margin: 0 0 8px;
	font-size: 18px;
	color: #23214b;
}

/*
 * Op de eventpagina willen we geen "Gepubliceerd door ... op ..."-regel van
 * het thema. We kunnen de exacte thema-markup niet garanderen, dus dekken
 * we de gangbare klassenamen (o.a. de _s/Hestia-conventie) breed af.
 */
.svtr-event-page .entry-meta,
.svtr-event-page .posted-on,
.svtr-event-page .byline,
.svtr-event-page .post-meta,
.svtr-event-page .entry-date,
.svtr-event-page .entry-author,
.svtr-event-page .updated {
	display: none !important;
}

/* Titel op de eventpagina iets groter dan een normale paginatitel. */
.svtr-event-page .entry-title {
	font-size: clamp( 1.75rem, 4vw, 2.5rem ) !important;
}

.event-map {
	margin-top: 24px;
}

.event-map iframe {
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: 12px;
}

.event-webshop {
	margin-top: 24px;
}