/* Event Kalender – frontend */
.ek-kalender { --ek-accent: #1e3a5f; --ek-rand: rgba(0,0,0,.12); margin: 1.5rem 0; }

/* Seizoenstitel */
.ek-seizoen { margin: 0 0 .75rem; font-weight: 700; font-size: 1.05rem; color: var(--ek-accent); }

/* Filter */
.ek-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .75rem; }
.ek-maandkeuze { display: inline-flex; align-items: center; gap: .5rem; }

/* Weergave: aankomend / voorbij / alle */
.ek-weergave { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--ek-rand); border-radius: 6px; overflow: hidden; min-width: 0; }
.ek-weergave-optie { position: relative; margin: 0; cursor: pointer; }
.ek-weergave-optie + .ek-weergave-optie { border-left: 1px solid var(--ek-rand); }
.ek-weergave-optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ek-weergave-optie span { display: block; padding: .35rem .85rem; font-size: .9rem; font-weight: 600; background: #fff; color: var(--ek-accent); }
.ek-weergave-optie input:checked + span { background: var(--ek-accent); color: #fff; }
.ek-weergave-optie input:focus-visible + span { outline: 2px solid var(--ek-accent); outline-offset: -4px; }
.ek-filter label { font-weight: 600; font-size: .9rem; }
.ek-filter select { padding: .35rem 2rem .35rem .6rem; border: 1px solid var(--ek-rand); border-radius: 6px; font: inherit; font-size: .9rem; background-color: #fff; }

/* Compacte lijst */
.ek-lijst { list-style: none; margin: 0 auto 0 0; padding: 0; max-width: 50%; display: flex; flex-direction: column; gap: .5rem; }
.ek-item { margin: 0; padding: 0; }
.ek-item[hidden] { display: none; }
.ek-kaart {
	display: flex; align-items: center; gap: .75rem; width: 100%;
	padding: .5rem .75rem; border: 1px solid var(--ek-rand); border-radius: 8px;
	background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.ek-kaart:hover { border-color: var(--ek-accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ek-kaart:focus-visible { outline: 2px solid var(--ek-accent); outline-offset: 2px; }

.ek-datum {
	flex: 0 0 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	border-radius: 6px; background: var(--ek-accent); color: #fff; line-height: 1;
}
.ek-dag { font-size: 1.1rem; font-weight: 700; }
.ek-maand { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

.ek-titel-wrap { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .3rem; }
.ek-titel { flex: 1 0 100%; min-width: 0; font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ek-logo {
	flex: 0 0 36px; width: 36px; height: 36px; border-radius: 6px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; background: #f2f4f7;
}
.ek-logo img { width: 100%; height: 100%; object-fit: contain; margin: 0; }
.ek-item--voorbij .ek-datum { background: #8a94a6; }
.ek-item--voorbij .ek-titel { opacity: .75; }
.ek-logo--leeg { color: var(--ek-accent); font-weight: 700; font-size: .95rem; }

/* Labels Belgisch Kampioenschap */
.ek-kalender { --ek-dryland: #a14a06; --ek-snow: #0b5f8f; }
.ek-bk {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
	padding: .1rem .45rem; border-radius: 999px; color: #fff; line-height: 1.4;
	font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.ek-bk--dryland { background: var(--ek-dryland); }
.ek-bk--snow { background: var(--ek-snow); }
.ek-bk-groot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: -.25rem; }
.ek-bk-groot .ek-bk { font-size: .8rem; padding: .3rem .7rem; }
.ek-weergave-optie--dryland input:checked + span { background: var(--ek-dryland); }
.ek-weergave-optie--snow input:checked + span { background: var(--ek-snow); }

/* Detailvenster */
.ek-modal {
	width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
	padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: auto;
}
.ek-modal::backdrop { background: rgba(15, 23, 42, .55); }
.ek-modal-inner { position: relative; padding: 1.5rem; }
.ek-sluiten {
	position: absolute; top: .5rem; right: .5rem; width: 36px; height: 36px;
	border: 0; border-radius: 50%; background: #f2f4f7; color: #333; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.ek-sluiten:hover { background: #e4e7ec; }
.ek-modal-body { display: flex; align-items: flex-start; gap: 1.5rem; }
.ek-modal-afbeelding { flex: 0 0 140px; }
.ek-modal-afbeelding img { display: block; width: 140px; height: auto; max-height: 180px; object-fit: contain; margin: 0; }
.ek-modal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.ek-gegevens { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.ek-gegevens > div { display: flex; gap: .5rem; }
.ek-gegevens dt { flex: 0 0 90px; margin: 0; font-weight: 600; font-size: .85rem; opacity: .7; }
.ek-gegevens dd { margin: 0; font-size: .95rem; }
.ek-modal-info .ek-details { margin: 0; }
@media (max-width: 520px) {
	.ek-modal-body { flex-direction: column; gap: 1rem; }
	.ek-modal-afbeelding { flex-basis: auto; }
	.ek-modal-afbeelding img { width: 110px; }
}
.ek-modal-titel { margin: 0 2.5rem 0 0; font-size: 1.3rem; }
.ek-meta { margin: 0 0 1rem; font-size: .9rem; opacity: .75; }
.ek-details > :last-child { margin-bottom: 0; }
.ek-modal-acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ek-knop {
	display: inline-block; padding: .5rem 1rem; border: 1px solid var(--ek-accent); border-radius: 6px;
	background: var(--ek-accent); color: #fff; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ek-knop:hover { opacity: .9; color: #fff; }
.ek-knop--sec { background: transparent; color: var(--ek-accent); }
.ek-knop--sec:hover { color: var(--ek-accent); background: rgba(30,58,95,.06); }

/* Thema's centreren lijsten soms (margin: auto); altijd links uitlijnen met de maandfilter. */
.ek-kalender ul.ek-lijst, .ek-kalender .ek-filter, .ek-kalender .ek-geen-events { margin-left: 0 !important; margin-right: auto !important; padding-left: 0 !important; }
.ek-kalender .ek-item { margin-left: 0 !important; }

/* Op tablet/gsm wel de volle breedte gebruiken */
@media (max-width: 782px) { .ek-lijst { max-width: 100%; } }

html.ek-modal-open { overflow: hidden; }

.ek-kalender .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}