/**
 * VVT controlepaneel - Mijn account.
 *
 * Gebruik: zet één WPBakery-rij met de extra klasse "vvt-paneel" en plaats
 * daarin elke Meta Box View als een apart tekstblok. Elke view rendert
 * <article class="vvt-card"> ... </article>, of niets wanneer de gebruiker de
 * rol niet heeft.
 */

/*
 * WPBakery wikkelt elk tekstblok in .wpb_text_column > .wpb_wrapper. Met
 * display:contents verdwijnen die twee lagen uit de opmaak, zodat de kaarten
 * zelf de rastercellen worden. Dat lost meteen ook het lege-view-geval op: een
 * view die niets rendert, laat geen lege cel achter.
 */
/*
 * Vast aantal kolommen in plaats van auto-fit. Met auto-fit bepaalt de breedte
 * van de inhoudskolom hoeveel kaarten er passen - bij ~1100px zijn dat er drie,
 * bij ~1160px vier. Dat is precies het soort verschil dat je niet wil op een
 * pagina waar de kolombreedte per template kan schelen.
 *
 * minmax(0, 1fr) en niet gewoon 1fr: anders kan een lange link of een woord
 * zonder spaties de kolom breder duwen dan het raster.
 */
/*
 * Twee manieren om hetzelfde raster te krijgen:
 *
 * .vvt-paneel-grid  - een echte div in de view zelf. Gebruik deze wanneer één
 *                     view meerdere kaarten rendert; niets van WPBakery zit
 *                     ertussen en dat is meteen de eenvoudigste weg.
 *
 * .vvt-paneel       - extra klasse op een WPBakery-rij, voor het geval elke
 *                     kaart uit een aparte view komt. Dan liggen de wrappers
 *                     van WPBakery ertussen; die worden hieronder met
 *                     display:contents uit de opmaak gehaald.
 */
.vvt-paneel-grid,
.vvt-paneel .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
	margin-bottom: 30px;
}

@media (max-width: 1024px) {
	.vvt-paneel-grid,
	.vvt-paneel .vc_column-inner > .wpb_wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.vvt-paneel-grid,
	.vvt-paneel .vc_column-inner > .wpb_wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

.vvt-paneel .wpb_text_column,
.vvt-paneel .wpb_text_column > .wpb_wrapper {
	display: contents;
}

/*
 * En hetzelfde voor een .vvt-paneel-grid die binnen een paneelrij terechtkomt.
 * Een view die zijn kaarten in zo'n div wikkelt, werkt daardoor in twee
 * situaties zonder aanpassing: los op een pagina maakt die div het raster,
 * binnen een paneelrij lost hij op en schuiven de kaarten aan bij het raster
 * van de rij. Zonder deze regel krijg je een raster in een raster - dan staat
 * elke view in één kolom met zijn kaarten eronder.
 */
.vvt-paneel .vvt-paneel-grid {
	display: contents;
}

/* ---------- kop van het paneel ---------- */

.vvt-account-head {
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid #eef2f1;
}

.vvt-account-head h1 {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	color: #0b4e5b;
}

.vvt-account-head p {
	margin: 0;
	font-size: 14.5px;
	color: #5b7378;
}

.vvt-account-head .vvt-account-rol {
	display: inline-block;
	margin-top: 12px;
	padding: 4px 11px;
	background: #e8f4ee;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	color: #0d7a55;
}

/*
 * Binnen een paneelrij wordt de tussenkop zelf een rastercel en is hij dus maar
 * één kolom breed. Met grid-column 1 / -1 loopt hij over alle kolommen, wat hij
 * ook doet wanneer hij buiten een raster staat. Zelfde regel voor een kop die
 * binnen de grid-div zelf gezet wordt.
 */
.vvt-paneel .vvt-groep,
.vvt-paneel-grid > .vvt-groep {
	grid-column: 1 / -1;
}

/* Tussenkop per groep, voor wie meerdere rollen heeft. */
.vvt-groep {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8aa0a4;
}

.vvt-groep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #eef2f1;
}

/* ---------- kaart ---------- */

.vvt-card {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 18px;
	background: #fff;
	border: 1px solid #dfe6e5;
	border-radius: 12px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.vvt-card:hover {
	border-color: #b6d9c9;
	box-shadow: 0 6px 18px -10px rgba(11, 78, 91, .35);
}

.vvt-card__label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 9px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8aa0a4;
}

.vvt-card__label::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #129e6e;
}

.vvt-card h3 {
	margin: 0 0 6px;
	font-size: 16.5px;
	line-height: 1.3;
	font-weight: 500;
	color: #123c46;
}

.vvt-card p {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5b7378;
}

.vvt-card__actie {
	margin-top: auto;
}

/* ---------- knop ---------- */

.vvt-btn {
	display: inline-block;
	padding: 9px 18px;
	background: #129e6e;
	color: #fff;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	transition: filter .15s ease, box-shadow .15s ease;
}

.vvt-btn:hover,
.vvt-btn:focus-visible {
	color: #fff;
	filter: brightness(1.06);
	box-shadow: 0 3px 10px -2px rgba(18, 158, 110, .45);
}

/* Tweede knop naast een hoofdknop: zelfde vorm, minder gewicht. */

.vvt-btn--licht {
	background: #fff;
	color: #0b4e5b;
	border: 1px solid #dfe6e5;
	box-shadow: none;
}

.vvt-btn--licht:hover,
.vvt-btn--licht:focus-visible {
	color: #129e6e;
	border-color: #129e6e;
	filter: none;
	box-shadow: none;
}

/* ---------- kaart zonder actie ---------- */

.vvt-card--soon {
	background: #fbfcfc;
	border-style: dashed;
}

.vvt-card--soon .vvt-card__label::before {
	background: #8aa0a4;
}

.vvt-card--soon h3 {
	color: #5b7378;
}

.vvt-card__soon {
	display: inline-block;
	padding: 8px 0;
	font-size: 13px;
	font-style: italic;
	color: #8aa0a4;
}

@media (prefers-reduced-motion: reduce) {
	.vvt-card,
	.vvt-btn {
		transition: none;
	}
}

/* ============================================================
   VERTROUWELIJKHEIDSVERKLARING
   ============================================================ */

/* Het lijstje met jaartallen in de kaart op het paneel. */

.vvt-vv-jaren {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border-top: 1px solid #eef2f1;
}

.vvt-vv-jaar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid #eef2f1;
	font-size: 13px;
}

.vvt-vv-jaar__jaar {
	min-width: 38px;
	font-weight: 600;
	color: #0b4e5b;
}

.vvt-vv-jaar__datum {
	flex: 1;
	color: #5b7378;
}

.vvt-vv-jaar__pil {
	padding: 1px 9px;
	font-size: 11.5px;
	font-weight: 500;
	border-radius: 100px;
	white-space: nowrap;
}

.vvt-vv-jaar__pil.is-geen {
	color: #0a6b48;
	background: #e6f5ed;
}

.vvt-vv-jaar__pil.is-melding {
	color: #92400e;
	background: #fef3c7;
	cursor: help;
}

/* ============================================================
   LIDKAART
   ============================================================ */

.vvt-lidkaart-wrap {
	max-width: 420px;
}

/* De kaart mag zelf ook een knop zijn: tikken opent de grote weergave. */

.vvt-lidkaart-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 14px;
	transition: transform .16s ease, box-shadow .16s ease;
}

.vvt-lidkaart-link:hover,
.vvt-lidkaart-link:focus-visible {
	color: inherit;
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.vvt-lidkaart-link {
		transition: none;
	}

	.vvt-lidkaart-link:hover {
		transform: none;
	}
}

.vvt-lidkaart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 1.586;          /* verhouding van een echte bankkaart */
	padding: 22px 24px 20px;
	background: linear-gradient(150deg, #12525f 0%, #0b4e5b 55%, #0a3f4a 100%);
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(11, 78, 91, .18),
		0 18px 34px -18px rgba(11, 78, 91, .65);
	color: #fff;
	overflow: hidden;
}

/* Accentstreep in het geelgroen van het logo. */
.vvt-lidkaart::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: #bed62f;
}

.vvt-lidkaart__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.vvt-lidkaart__logo {
	width: 54px;
	height: auto;
	display: block;
}

.vvt-lidkaart__type {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	text-align: right;
	line-height: 1.5;
}

.vvt-lidkaart__naam {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 500;
	color: #fff;
	letter-spacing: .01em;
}

.vvt-lidkaart__gegevens {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
	margin-top: 10px;
}

.vvt-lidkaart__veld {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.vvt-lidkaart__veld dt {
	margin: 0;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.vvt-lidkaart__veld dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.vvt-lidkaart__code {
	display: block;
	width: 100%;
	height: 44px;
	padding: 5px 10px;
	background: #fff;
	border-radius: 6px;
	box-sizing: border-box;
}

.vvt-lidkaart__code img,
.vvt-lidkaart__code svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * De lidstatus staat als klein label rechtsboven, niet als opmaak van de hele
 * kaart. De barcode is het contactnummer en moet scanbaar blijven ongeacht of
 * het lidmaatschap betaald is - een uitgegrijsde kaart zou suggereren dat ze
 * niet meer werkt.
 */
.vvt-lidkaart__status {
	display: inline-block;
	margin-top: 5px;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: rgba(190, 214, 47, .18);
	color: #d3e65c;
	white-space: nowrap;
}

.vvt-lidkaart__status--uit {
	background: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .7);
}

/* ---------- knoppenrij onder de kaart ---------- */

.vvt-lidkaart__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* ---------- afdrukken ----------
   Downloaden gaat sinds kort via /mijn-lidkaart.pdf, dat een echte kaart van
   85,6 bij 54 mm oplevert. Dit blok blijft staan voor wie op deze pagina toch
   Ctrl+P gebruikt: dan komt enkel de kaart op papier, niet de hele pagina. */

@media print {
	body * {
		visibility: hidden !important;
	}

	.vvt-lidkaart,
	.vvt-lidkaart * {
		visibility: visible !important;
	}

	.vvt-lidkaart {
		position: absolute;
		left: 0;
		top: 0;
		width: 85.6mm;              /* werkelijke afmetingen van een lidkaart */
		aspect-ratio: 1.586;
		box-shadow: none;
		border-radius: 12px;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.vvt-lidkaart__acties {
		display: none !important;
	}

	@page {
		margin: 12mm;
	}
}