/*
 * Webplace4u Vakantietijden, standaardopmaak.
 * Kleuren en lettertypen volgen de globale Elementor-instellingen (Site Settings)
 * via de --e-global-* variabelen, met de huisstijl van Zwembad Oosterbeek als terugval.
 * Alles is in de Elementor-widget per breakpoint te overschrijven.
 */
.wp4u-vt {
	--wp4u-vt-primair: var(--e-global-color-primary, #0b1a57);
	--wp4u-vt-secundair: var(--e-global-color-secondary, #289cd5);
	--wp4u-vt-tekst: var(--e-global-color-text, rgba(11, 26, 87, 0.7));
	--wp4u-vt-lijn: #cbe5eb;
	--wp4u-vt-vlak: #f0f9ff;
	--wp4u-vt-kop-font: var(--e-global-typography-primary-font-family, "Nunito"), sans-serif;
	--wp4u-vt-tekst-font: var(--e-global-typography-text-font-family, "Manrope"), sans-serif;

	box-sizing: border-box;
	width: 100%;
	color: var(--wp4u-vt-tekst);
	font-family: var(--wp4u-vt-tekst-font);
	font-size: 16px;
	line-height: 1.5;
}

.wp4u-vt *,
.wp4u-vt *::before,
.wp4u-vt *::after {
	box-sizing: border-box;
}

/* Kop */
.wp4u-vt .wp4u-vt__header {
	margin: 0 0 24px;
}

.wp4u-vt .wp4u-vt__subtitle {
	margin: 0 0 12px;
	color: var(--wp4u-vt-secundair);
	font-family: var(--wp4u-vt-tekst-font);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.wp4u-vt .wp4u-vt__title {
	margin: 0;
	color: var(--wp4u-vt-primair);
	font-family: var(--wp4u-vt-kop-font);
	font-weight: 800;
	line-height: 1.1;
	overflow-wrap: break-word;
}

/* Lijst en raster */
.wp4u-vt .wp4u-vt__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.wp4u-vt--raster .wp4u-vt__items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Kaart */
.wp4u-vt .wp4u-vt__card {
	min-width: 0;
	margin: 0;
	padding: 28px 32px;
	background-color: var(--wp4u-vt-vlak);
	border: 1px solid var(--wp4u-vt-lijn);
	border-radius: 16px;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp4u-vt .wp4u-vt__name {
	margin: 0 0 12px;
	padding: 0;
	color: var(--wp4u-vt-primair);
	font-family: var(--wp4u-vt-kop-font);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: break-word;
}

/* Periode als pill */
.wp4u-vt .wp4u-vt__period {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 0 20px;
}

.wp4u-vt .wp4u-vt__pill {
	display: inline-block;
	max-width: 100%;
	padding: 11px 20px;
	background-color: #fff;
	border: 1px solid var(--wp4u-vt-lijn);
	border-radius: 40px;
	color: var(--wp4u-vt-primair);
	font-family: var(--wp4u-vt-tekst-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
}

/* Tijden */
.wp4u-vt .wp4u-vt__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 16px 24px;
}

.wp4u-vt .wp4u-vt__group {
	min-width: 0;
}

.wp4u-vt .wp4u-vt__label {
	margin: 0 0 6px;
	color: var(--wp4u-vt-primair);
	font-family: var(--wp4u-vt-tekst-font);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.wp4u-vt .wp4u-vt__times {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp4u-vt .wp4u-vt__times li {
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
}

.wp4u-vt .wp4u-vt__times li::before,
.wp4u-vt .wp4u-vt__times li::marker {
	content: none;
}

.wp4u-vt .wp4u-vt__note {
	margin: 20px 0 0;
	overflow-wrap: break-word;
}

/* Link onderaan */
.wp4u-vt .wp4u-vt__link-wrap {
	margin: 24px 0 0;
}

.wp4u-vt .wp4u-vt__link {
	color: var(--wp4u-vt-primair);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wp4u-vt .wp4u-vt__link:hover,
.wp4u-vt .wp4u-vt__link:focus-visible {
	text-decoration-thickness: 2px;
}

.wp4u-vt .wp4u-vt__link:focus-visible {
	outline: 2px solid var(--wp4u-vt-secundair);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Lege staat */
.wp4u-vt .wp4u-vt__empty {
	padding: 20px 24px;
	background-color: var(--wp4u-vt-vlak);
	border: 1px solid var(--wp4u-vt-lijn);
	border-radius: 16px;
}

.wp4u-vt .wp4u-vt__empty p {
	margin: 0;
}

.wp4u-vt .wp4u-vt__empty p + p {
	margin-top: 0.75em;
}

/* Melding in de Elementor-editor */
.wp4u-vt .wp4u-vt__melding {
	margin: 0 0 16px;
	padding: 8px 12px;
	border: 1px dashed var(--wp4u-vt-secundair);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
}

/* Telefoon */
@media (max-width: 767px) {
	.wp4u-vt--raster .wp4u-vt__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp4u-vt .wp4u-vt__items {
		gap: 16px;
	}

	.wp4u-vt .wp4u-vt__card {
		padding: 20px;
	}

	.wp4u-vt .wp4u-vt__name {
		font-size: 20px;
	}

	.wp4u-vt .wp4u-vt__pill {
		padding: 9px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp4u-vt .wp4u-vt__card {
		transition: none;
	}
}