/* Van Yild Tegels - loopcarrousel
   Letterlijk overgenomen uit snippet 8327 (vy-loopcarousel 1.2.1). Niet herschrijven:
   de klant is tevreden over dit uiterlijk en de pariteitstests vergelijken ermee. */
/* De regels voor het Elementor-loop-item (het terugvalpad van de snippet) zijn dode letter op de
   nieuwe site maar blijven staan, zodat dit bestand 1-op-1 te vergelijken is met de bron. */
/* (0,1,0) basis + de knoppen die per instantie ingesteld worden */
.vy-car {
	--vy-car-zicht: var(--vy-car-desktop, 3);
	--vy-car-ruimte: 10px;
	--vy-car-duur: 500ms;
	--vy-car-pijl-offset: -30px;
	--vy-car-pijl-kleur: var(--e-global-color-accentbackground, #010F39);
	--vy-car-pijl-hover: var(--e-global-color-secondary, #000000);
	--vy-car-bol-kleur: var(--e-global-color-darkeraccent, #213276);
	--vy-car-bol-actief: var(--e-global-color-accent, #105CDA);
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
}
/* (0,1,0) in een media query - zie de opmerking hierboven over inline */
@media (max-width: 1024px) {
	.vy-car { --vy-car-zicht: var(--vy-car-tablet, 2); }
}
@media (max-width: 767px) {
	.vy-car { --vy-car-zicht: var(--vy-car-mobiel, 1); }
}
/* (0,2,0) de carrousel is met de pijltjestoetsen te bedienen, dus hij moet
   ook zichtbaar focus kunnen krijgen */
.vy-car:focus-visible { outline: 2px solid var(--vy-car-bol-actief); outline-offset: 4px; }

/* (0,1,0) baan = venster + pijlen; de bolletjes vallen er bewust buiten,
   anders staan de pijlen niet op het midden van de kaarten maar op het
   midden van kaarten + bolletjes */
.vy-car__baan { position: relative; }
/* (0,1,0) touch-action pan-y: verticaal scrollen blijft van de browser,
   horizontaal vegen is van ons */
.vy-car__venster { overflow: hidden; width: 100%; touch-action: pan-y; cursor: grab; }
.vy-car.is-slepen .vy-car__venster { cursor: grabbing; }        /* (0,2,0) */
.vy-car.is-slepen, .vy-car.is-slepen * { user-select: none; }   /* (0,1,0) / (0,1,0) */

/* (0,1,0) één flex-rij: daardoor zijn alle dia's automatisch even hoog en
   herberekent de browser dat zelf zodra de inhoud verandert */
.vy-car__spoor {
	display: flex;
	align-items: stretch;
	gap: var(--vy-car-ruimte);
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translate3d(0px, 0px, 0px);
	transition-property: transform;
	transition-duration: 0ms;
	transition-timing-function: cubic-bezier(.25, .46, .45, .94);
	will-change: transform;
}
/* (0,1,0) breedte volgt het aantal zichtbare kaarten en de tussenruimte */
.vy-car__slide {
	flex: 0 0 calc( ( 100% - ( var(--vy-car-zicht) - 1 ) * var(--vy-car-ruimte) ) / var(--vy-car-zicht) );
	max-width: calc( ( 100% - ( var(--vy-car-zicht) - 1 ) * var(--vy-car-ruimte) ) / var(--vy-car-zicht) );
	min-width: 0;
	display: flex;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------
   Gelijke hoogte: de keten van dia tot en met de omrande kolom.
   Zonder deze keten rekt de dia wel op maar de kaart erin niet, en dan
   zie je randen van verschillende lengte. Elementor 3.35 gebruikt
   containers (.e-con / .e-con-inner); oudere secties en kolommen staan
   erbij voor het geval het template nog de oude opbouw heeft.
   ----------------------------------------------------------------- */
.vy-car__slide > .elementor { display: flex; flex-direction: column; width: 100%; }   /* (0,2,0) */
.vy-car__slide > .elementor > .e-con,
.vy-car__slide > .elementor > .elementor-section,
.vy-car__slide > .elementor > .elementor-column { flex: 1 1 auto; width: 100%; }      /* (0,3,0) */
.vy-car__slide .e-con > .e-con-inner { flex: 1 1 auto; }                              /* (0,3,0) */

/* -----------------------------------------------------------------
   Gelijke hoogte voor de kaart uit vy-collectie (sinds 1.1.0).
   De keten hierboven bestaat op dat pad niet: de dia bevat geen
   .elementor maar .vy-car__kaartwrap met daarin .vy-col__kaart.

   De wrapper draagt óók de klasse .vy-col-wrap, want een flink deel van
   de kaartopmaak in vy_col_css() hangt aan die scope (de naam-link, de
   knop "Bekijken", de pijl die bij hover opschuift). Die klasse brengt
   wel de layout van de collectiepagina mee - width:90%, margin:0 auto,
   max-width:none - en dat moet hier weg. Beide regels hieronder hebben
   daarom bewust genoeg specificiteit: (0,2,0) en (0,3,0) winnen van de
   (0,1,0) van .vy-col-wrap en .vy-col__kaart, ongeacht in welke volgorde
   de twee stylesheets op de pagina belanden.

   Kolomrichting plus flex: 1 1 auto op de kaart, zodat de kaart de volle
   hoogte van de dia pakt. .vy-col__kaart heeft in vy_col_css() al
   height:100%, maar dat leunt erop dat de ouder een bepaalde hoogte
   heeft; met deze flexkolom groeit hij hoe dan ook mee.
   ----------------------------------------------------------------- */
.vy-car__slide > .vy-car__kaartwrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
}                                                                                     /* (0,2,0) */
.vy-car__slide > .vy-car__kaartwrap > .vy-col__kaart {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
}                                                                                     /* (0,3,0) */

/* -----------------------------------------------------------------
   De producttitel terugzetten. Elementor zet sitebreed
   --page-title-display: none, en ".elementor-page-title, h1.entry-title"
   leest die variabele uit. In hun eigen loop-widget heffen ze dat op met
   een class-bevat-selector op elementor-widget-loop, gevolgd door
   ".elementor-page-title { display: initial }". Die uitzondering eist een
   voorouder met zo'n klasse - en die hebben wij bewust niet. Zonder de
   regel hieronder is de titel dus display:none, terwijl hij gewoon in de
   HTML staat. (0,2,0) wint van hun (0,1,0).

   De selector zelf staat hier NIET uitgeschreven: hij bevat blokhaken en
   WordPress voert een blokhaakpaar in de uitvoer alsnog als shortcode uit.
   ----------------------------------------------------------------- */
.vy-car__slide .elementor-page-title,
.vy-car__slide h1.entry-title { display: block; }
/* (0,2,0). Deze schakel is nagemeten aan de echte opbouw van template 4802:
   section > .elementor-container > .elementor-column > .elementor-widget-wrap,
   waarbij die laatste de omrande kaart is. .elementor-section is bij Elementor
   standaard een blok en NIET flex; de regel hieronder geeft .elementor-container
   dus wel flex:1 1 auto, maar dat is dode letter zolang de ouder geen flexbox is.
   Gevolg zonder deze regel: de dia's zijn wel even hoog, de kaarten erin niet.
   Kolomrichting, zodat flex:1 1 auto over de hoogte groeit; de auto-marges van
   .elementor-container houden hem daarbij gewoon gecentreerd op zijn max-width. */
.vy-car__slide .elementor-section { display: flex; flex-direction: column; }
.vy-car__slide .elementor-section > .elementor-container { flex: 1 1 auto; width: 100%; } /* (0,3,0) */
.vy-car__slide .elementor-column > .elementor-widget-wrap { flex: 1 1 auto; }         /* (0,3,0) */

/* -----------------------------------------------------------------
   Elementor stijlt ELKE <button> op de site mee, inclusief die roze
   hover en active. Eerst één reset voor alle knoppen binnen .vy-car in
   álle toestanden - bewust op elementniveau, zodat de specificiteit laag
   blijft: .vy-car button = (0,1,1), met pseudo-klasse (0,2,1). Onze
   eigen knoppen krijgen hierna twee klassen, dus (0,2,0) resp. (0,3,0),
   en winnen daarmee in elke toestand.
   ----------------------------------------------------------------- */
.vy-car button,
.vy-car button:hover,
.vy-car button:focus,
.vy-car button:active,
.vy-car button:focus-visible,
.vy-car button:focus-within,
.vy-car button:visited {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline: 0 !important;
	filter: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
	-webkit-appearance: none;
	appearance: none;
}

/* (0,1,0) de pijlen liggen als een laag over het venster; alleen de
   knoppen zelf vangen muis en vinger, de rest niet */
.vy-car__pijlen {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	z-index: 3;
}
/* (0,2,0) basis, (0,3,0) met pseudo-klasse: wint van de reset hierboven.
   Geen transform voor het centreren - dat doet de flexlaag - zodat een
   transform: none uit welke reset dan ook de pijl niet kan verschuiven. */
.vy-car .vy-car__pijl,
.vy-car .vy-car__pijl:hover,
.vy-car .vy-car__pijl:focus,
.vy-car .vy-car__pijl:active,
.vy-car .vy-car__pijl:focus-visible {
	pointer-events: auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vy-car-pijl-kleur) !important;
	cursor: pointer;
	transition: color .2s ease, opacity .2s ease;
}
.vy-car .vy-car__pijl--vorige { margin-left: var(--vy-car-pijl-offset); }    /* (0,2,0) */
.vy-car .vy-car__pijl--volgende { margin-right: var(--vy-car-pijl-offset); } /* (0,2,0) */
/* (0,3,0) hover en toetsenbordfocus: wint van .vy-car button:hover (0,2,1) */
.vy-car .vy-car__pijl:hover,
.vy-car .vy-car__pijl:focus-visible { color: var(--vy-car-pijl-hover) !important; }
/* (0,3,0) uitgeschakeld aan het einde van een niet-doorlopende carrousel.
   Bewust de pseudo-klasse :disabled en niet de attribuutkiezer: een woord
   tussen blokhaken kan door WordPress als shortcode worden opgevat. */
.vy-car .vy-car__pijl:disabled { opacity: .3; cursor: default; }
.vy-car .vy-car__pijl svg { width: 22px; height: 22px; display: block; }     /* (0,2,1) */

/* (0,1,0) bolletjes onder de carrousel, gecentreerd */
.vy-car__bolletjes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
/* (0,2,0) / (0,3,0) - zelfde afweging als bij de pijlen */
.vy-car .vy-car__bol,
.vy-car .vy-car__bol:hover,
.vy-car .vy-car__bol:focus,
.vy-car .vy-car__bol:active,
.vy-car .vy-car__bol:focus-visible {
	display: block !important;
	width: 10px;
	height: 10px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: var(--vy-car-bol-kleur) !important;
	opacity: .5;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}
.vy-car .vy-car__bol:hover,
.vy-car .vy-car__bol:focus-visible,
.vy-car .vy-car__bol.is-actief {
	background-color: var(--vy-car-bol-actief) !important;
	opacity: 1;
}
/* (0,3,0) bolletjes die bij deze breedte geen startpositie meer zijn. Het
   script zet daar ook het hidden-attribuut op voor de voorleessoftware; de
   klasse is er puur omdat display: block hierboven de standaardopmaak van
   hidden zou overrulen - en omdat een attribuutkiezer met blokhaken in de
   uitvoer als shortcode kan worden gelezen. */
.vy-car .vy-car__bol.is-verborgen { display: none !important; }

/* (0,3,0) past alles op één scherm, dan hebben pijlen en bolletjes geen
   functie meer */
.vy-car.is-statisch .vy-car__pijlen,
.vy-car.is-statisch .vy-car__bolletjes { display: none !important; }

/* (0,2,0) met !important, want dit moet ook winnen van de inline
   transition-duration die het script zet: een author-!important-regel gaat
   voor op een gewone inline declaratie */
@media (prefers-reduced-motion: reduce) {
	.vy-car .vy-car__spoor { transition-duration: 0ms !important; }
}

/* (0,1,0) alleen zichtbaar voor beheerders, zie vy_car_melding() */
.vy-car-melding {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 3px solid var(--e-global-color-accent, #105CDA);
	background: rgba(0, 0, 0, .04);
	font-size: 13px;
}