/*
 * Basisstijl van de evenementenagenda.
 * Alle kleuren, het lettertype en de afronding lopen via CSS-variabelen
 * (--agenda-*). De waarden worden ingesteld via Agenda > Stijl & instellingen,
 * of per Elementor-widget overschreven. Pas dit bestand alleen aan voor
 * structurele wijzigingen (spacing, breakpoints, opbouw van de kaart).
 */

.agenda-el-wrapper {
	--agenda-primary: #c0392b;
	--agenda-text: #1f2937;
	--agenda-muted: #4b5563;
	--agenda-card-bg: #ffffff;
	--agenda-page-bg: #f3f2f0;
	--agenda-radius: 10px;
	--agenda-font: inherit;
	--agenda-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	--agenda-link-btn-bg: #c0392b;
	--agenda-link-btn-text: #ffffff;
	--agenda-ticket-btn-bg: #1f2937;
	--agenda-ticket-btn-text: #ffffff;

	font-family: var(--agenda-font);
	color: var(--agenda-text);
	box-sizing: border-box;
}

.agenda-el-wrapper *,
.agenda-el-wrapper *::before,
.agenda-el-wrapper *::after {
	box-sizing: inherit;
}

/* Filterbalk */
.agenda-el-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.agenda-el-filter-btn {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: var(--agenda-text);
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s ease;
}

.agenda-el-filter-btn:hover {
	border-color: var(--agenda-primary);
	color: var(--agenda-primary);
}

.agenda-el-filter-btn.is-active {
	background: var(--agenda-primary);
	border-color: var(--agenda-primary);
	color: #fff;
}

/* Lijst / raster */
.agenda-el-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.agenda-el-layout-grid .agenda-el-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

/* Kaart */
.agenda-el-card {
	background: var(--agenda-card-bg);
	border-radius: var(--agenda-radius);
	box-shadow: var(--agenda-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.agenda-el-layout-list .agenda-el-card {
	flex-direction: row;
	align-items: stretch;
}

.agenda-el-thumb {
	position: relative;
	flex: 0 0 220px;
	width: 220px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--agenda-page-bg);
}

.agenda-el-layout-grid .agenda-el-thumb {
	flex-basis: auto;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.agenda-el-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.agenda-el-datebadge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--agenda-primary);
	color: #fff;
	border-radius: 8px;
	padding: 6px 10px;
	text-align: center;
	line-height: 1.1;
	z-index: 2;
}

.agenda-el-day {
	display: block;
	font-size: 20px;
	font-weight: 700;
}

.agenda-el-month {
	display: block;
	font-size: 11px;
	letter-spacing: 0.04em;
}

.agenda-el-content {
	padding: 20px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.agenda-el-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	font-size: 13px;
	color: var(--agenda-muted);
}

.agenda-el-when {
	font-size: 15px;
	font-weight: 700;
	color: var(--agenda-text);
}

.agenda-el-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--agenda-text);
}

.agenda-el-excerpt {
	color: var(--agenda-muted);
	font-size: 15px;
	line-height: 1.5;
}

.agenda-el-excerpt p {
	margin: 0;
}

/*
 * Een langere omschrijving wordt standaard tot 3 regels beperkt (ongeacht of
 * er ook adres/vrije velden zijn) en pas volledig getoond na het openklappen.
 * Op basis van max-height in plaats van -webkit-line-clamp: dat laatste bleek
 * in de praktijk niet betrouwbaar weer ongedaan te maken zodra de kaart
 * openklapt. line-height staat hierboven op 1.5, dus 3 regels = 4.5em.
 */
.agenda-el-excerpt.agenda-el-clamp {
	position: relative;
	max-height: 4.5em;
	overflow: hidden;
}

.agenda-el-excerpt.agenda-el-clamp::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5em;
	background: linear-gradient(to bottom, transparent, var(--agenda-card-bg));
	pointer-events: none;
}

.agenda-el-card.is-expanded .agenda-el-excerpt.agenda-el-clamp {
	max-height: none;
	overflow: visible;
}

.agenda-el-card.is-expanded .agenda-el-excerpt.agenda-el-clamp::after {
	content: none;
}

.agenda-el-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.agenda-el-badge {
	display: inline-block;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
}

.agenda-el-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.agenda-el-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: 6px;
	text-decoration: none;
	transition: opacity 0.15s ease;
	/*
	 * Zonder deze reset (met !important) trekt het thema het <button>-element
	 * (de uitklap-knop "meer informatie") sitebreed anders op dan de <a>-knoppen
	 * (ticket, of "meer informatie" als gewone link): hoofdletters, bredere
	 * letterspatiëring, een andere lettergrootte én een ander gewicht. Hierdoor
	 * zagen de twee knoppen er zichtbaar anders uit terwijl ze dezelfde class
	 * hebben. Alle tekstopmaak van de knop staat daarom hier expliciet vast,
	 * voor beide elementtypen gelijk - en bewust niet vetgedrukt, voor een
	 * rustige, subtiele knop.
	 */
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.agenda-el-btn:hover {
	opacity: 0.85;
}

/* De knop "meer informatie" kan ook een <button> zijn (uitklappen in plaats van
   een link), die van zichzelf andere standaardstijlen heeft dan een <a>. */
button.agenda-el-btn {
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/*
 * Hoge specificiteit + !important op de tekstkleur: veel thema's en Elementor's
 * eigen "Theme Style > Links"-instelling zetten sitebreed een kleur op <a>-
 * elementen (bijv. simpelweg "a { color: ... }"). Zonder deze extra kracht wint
 * die algemene regel het van onze knop-tekstkleur, terwijl de achtergrondkleur
 * (die thema's zelden op links zetten) wel gewoon aansloeg.
 */
a.agenda-el-btn.agenda-el-btn-primary,
a.agenda-el-btn.agenda-el-btn-primary:visited,
a.agenda-el-btn.agenda-el-btn-primary:hover,
button.agenda-el-btn.agenda-el-btn-primary,
button.agenda-el-btn.agenda-el-btn-primary:hover {
	background: var(--agenda-link-btn-bg) !important;
	color: var(--agenda-link-btn-text) !important;
}

a.agenda-el-btn.agenda-el-btn-ticket,
a.agenda-el-btn.agenda-el-btn-ticket:visited,
a.agenda-el-btn.agenda-el-btn-ticket:hover {
	background: var(--agenda-ticket-btn-bg) !important;
	color: var(--agenda-ticket-btn-text) !important;
}

/* Pijltje op de uitklap-knop, draait om als het blok open staat. */
.agenda-el-toggle::after {
	content: '\25BE';
	display: inline-block;
	margin-left: 6px;
	transition: transform 0.15s ease;
}

.agenda-el-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* Uitgeklapt blok: adres en de vrij invulbare velden. Blijft verborgen (via het
   HTML "hidden"-attribuut) totdat er op "meer informatie" wordt geklikt. */
.agenda-el-expand {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--agenda-muted);
}

.agenda-el-expand[hidden] {
	display: none;
}

.agenda-el-expand-row strong {
	color: var(--agenda-text);
}

/* De link "meer informatie" binnen het uitgeklapte blok: iets extra ruimte
   boven, zodat hij duidelijk los staat van het adres/de vrije velden erboven. */
.agenda-el-expand-link {
	margin-top: 4px;
}

.agenda-el-empty {
	color: var(--agenda-muted);
}

@media (max-width: 640px) {
	.agenda-el-layout-list .agenda-el-card {
		flex-direction: column;
	}

	.agenda-el-thumb {
		flex-basis: auto;
		width: 100%;
		aspect-ratio: 1 / 1;
	}
}