/*
 * Agenda-/eventoverzicht ([zzhr_agenda]). Responsief kaartgrid met featured
 * image, type-badge, datum en titel. Bewust sober; het thema/Elementor kan
 * verder stylen via de classes.
 */

.zzhr-agenda {
	--zzhr-agenda-accent: #9e645f;
	--zzhr-agenda-radius: 6px;
	--zzhr-agenda-image-height: 200px;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
}

.zzhr-agenda--cols-1 {
	grid-template-columns: minmax( 0, 1fr );
}

.zzhr-agenda--cols-2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.zzhr-agenda--cols-4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

@media ( max-width: 900px ) {
	.zzhr-agenda {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		/* Smallere kaarten (2 kolommen): lagere afbeelding zodat er minder van de
		   foto wordt afgesneden. */
		--zzhr-agenda-image-height: 150px;
	}
}

@media ( max-width: 560px ) {
	.zzhr-agenda {
		grid-template-columns: minmax( 0, 1fr );
		/* Eén full-width kaart: terug de volledige beeldhoogte. */
		--zzhr-agenda-image-height: 200px;
	}
}

.zzhr-agenda--empty {
	display: block;
	color: #6b7280;
}

.zzhr-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: var( --zzhr-agenda-radius );
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zzhr-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.1 );
}

.zzhr-card__media {
	position: relative;
	height: var( --zzhr-agenda-image-height );
	background: #f1f1f2;
	/* Enkel bovenaan afronden (past bij de kaartrand); onderaan een subtiel
	   lijntje zodat een PNG met witte achtergrond niet in de content vloeit. */
	border-top-left-radius: var( --zzhr-agenda-radius );
	border-top-right-radius: var( --zzhr-agenda-radius );
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.zzhr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Geen (thema-)afronding op de afbeelding: enkel de kaart rondt bovenaan af. */
	border-radius: 0 !important;
}

.zzhr-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.zzhr-card__badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var( --zzhr-agenda-accent );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}

/* Partnerevent-label: rechtsboven, contrasterend met de type-badges linksboven. */
.zzhr-card__partner {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #1f2937;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.2;
}

.zzhr-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 18px;
}

/* Partnerlogo boven de titel (enkel bij partnerevents in de card-weergave). */
.zzhr-card__partnerlogo img {
	display: block;
	width: auto;
	max-width: 150px;
	max-height: 38px;
}

/* Datum staat nu ónder de titel en is bewust secundair (kleiner), in de
   accentkleur. De titel valt daardoor meer op. */
/* Card-datum: volledige inline datum (bv. "22 augustus"), in de accentkleur. */
.zzhr-card__date {
	color: var( --zzhr-agenda-accent );
	font-size: 0.95em;
	font-weight: 500;
}

.zzhr-card__title {
	/* !important: sommige thema's zetten een grote marge én font-size op h3, die
	   bovenop de kaart zou komen. We forceren een vaste, compacte titelgrootte. */
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1.3;
}

/* Maand-agenda [zzhr_hragenda]: maandtitel boven elke groep kaarten. Typografie
   erft van het thema; hier enkel de tussenruimte. */
.zzhr-hragenda__month {
	margin: 36px 0 18px;
}

.zzhr-hragenda__month:first-child {
	margin-top: 0;
}

/* HR-agenda in lijstvorm ([zzhr_hragenda weergave="lijst"]): 1 event per rij,
   met de datum links, titel/locatie in het midden en rechts de featured image
   of — bij partnerevents — het partnerlogo. */
.zzhr-agenda--list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zzhr-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	background: rgba( 0, 0, 0, 0.03 );
	border-radius: 14px;
	text-decoration: none !important;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zzhr-row:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.08 );
}

.zzhr-row__date {
	flex: 0 0 56px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	line-height: 1.2;
	/* Vaste grootte i.p.v. em: de rij erft anders de (kleine) thema-fontgrootte. */
	font-size: 20px;
	color: var( --zzhr-agenda-accent );
}

/* Datum in de lijst bewust rustig: dag en maand even groot, niet vet, geen caps
   (all-caps deed de maand optisch kleiner ogen dan de dag). */
.zzhr-row__day {
	font-size: 1em;
	font-weight: 500;
}

.zzhr-row__month {
	font-size: 1em;
	font-weight: 500;
}

.zzhr-row__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zzhr-row__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 2px;
}

.zzhr-row__badge {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var( --zzhr-agenda-accent );
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}

.zzhr-row__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2937;
}

.zzhr-row__location {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7280;
}

.zzhr-row__media {
	flex: 0 0 150px;
}

.zzhr-row__media img {
	display: block;
	width: 150px;
	height: 96px;
	border-radius: 14px;
}

.zzhr-row__img {
	object-fit: cover;
}

.zzhr-row__logo {
	object-fit: contain;
	background: #fff;
	padding: 8px;
	box-sizing: border-box;
}

/* Tablet: datum wat kleiner en de afbeelding/het logo terug vierkant, zodat de
   titel meer ruimte krijgt (geen lange afbrekingen meer). */
@media ( max-width: 900px ) {
	.zzhr-row {
		gap: 18px;
		padding: 16px 18px;
	}

	.zzhr-row__media {
		flex: 0 0 104px;
	}

	.zzhr-row__media img {
		width: 104px;
		height: 104px;
	}
}

/* Mobiel: nog compacter, afbeelding/logo blijft vierkant. */
@media ( max-width: 560px ) {
	.zzhr-row {
		gap: 12px;
		padding: 14px 15px;
	}

	.zzhr-row__title {
		font-size: 16px;
	}

	.zzhr-row__media {
		flex: 0 0 78px;
	}

	.zzhr-row__media img {
		width: 78px;
		height: 78px;
		border-radius: 12px;
	}
}

/* Tekst van de lege staat ([zzhr_related_events] zonder resultaten). */
.zzhr-agenda__empty {
	margin: 0;
	padding: 24px 0;
	font-size: 16px;
}