/* HERFSTPROMO (homepage)
   Opmaak van het promoblok met class "soldenherfst" + de vallende bladeren.
   Wordt enkel op de homepage geladen (zie functions.php). */

/* PROMOKAART */

.soldenherfst .spacebetweener > .vc_column-inner{
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: var(--color-yellow, #FFED00)!important;
	border: 0!important;
	border-radius: 1em!important;
}

/* Grote ton-sur-ton bladeren in de hoeken */
.soldenherfst .spacebetweener > .vc_column-inner:before,
.soldenherfst .spacebetweener > .vc_column-inner:after{
	content: "";
	display: block;
	position: absolute;
	z-index: 0;
	aspect-ratio: 100 / 104;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 104'%3E%3Cpath fill='%23FADA00' d='M50 2 57 19 66 14 63 38 79 25 82 35 96 33 90 47 98 54 76 68 80 78 51.5 74V98H48.5V74L20 78 24 68 2 54 10 47 4 33 18 35 21 25 37 38 34 14 43 19Z'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}

.soldenherfst .spacebetweener > .vc_column-inner:before{
	width: 62%;
	top: -9%;
	right: -16%;
	transform: rotate(24deg);
}

.soldenherfst .spacebetweener > .vc_column-inner:after{
	width: 70%;
	bottom: -7%;
	left: -20%;
	transform: rotate(-28deg);
}

.soldenherfst .yellowbox{
	position: relative;
	z-index: 1;
	padding: 30px!important;
	padding: clamp(18px, 8cqi, 44px)!important;
}

/* Drie blaadjes boven de titel */
.soldenherfst .yellowbox > .wpb_wrapper:before{
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 4.6em;
	width: clamp(3.4em, 27cqi, 7em);
	aspect-ratio: 124 / 44;
	margin-bottom: 1.1em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 44'%3E%3Cg transform='rotate(-18 20 22)'%3E%3Cpath fill='%23E10614' d='M20 2C32 7 37 19 33 28 30 35 25 38 21 39V44H19V39C15 38 10 35 7 28 3 19 8 7 20 2Z'/%3E%3C/g%3E%3Cg transform='translate(42 0) rotate(8 20 22)'%3E%3Cpath fill='%23003790' d='M20 2C32 7 37 19 33 28 30 35 25 38 21 39V44H19V39C15 38 10 35 7 28 3 19 8 7 20 2Z'/%3E%3C/g%3E%3Cg transform='translate(84 0) rotate(26 20 22)'%3E%3Cpath fill='%23F39200' d='M20 2C32 7 37 19 33 28 30 35 25 38 21 39V44H19V39C15 38 10 35 7 28 3 19 8 7 20 2Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / contain;
}

.soldenherfst .yellowbox h4{
	margin: 0;
	padding: 0;
	font-size: 34px;
	font-size: clamp(22px, 10.5cqi, 58px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--color-blue, #003790);
	overflow-wrap: break-word;
	text-wrap: balance;
	/* gele rand rond de letters: titel blijft leesbaar wanneer er een blad achter valt */
	text-shadow: 3px 0 0 #FFED00, -3px 0 0 #FFED00, 0 3px 0 #FFED00, 0 -3px 0 #FFED00, 2px 2px 0 #FFED00, -2px 2px 0 #FFED00, 2px -2px 0 #FFED00, -2px -2px 0 #FFED00;
}

/* Rood accentstreepje onder de titel */
.soldenherfst .yellowbox h4:after{
	content: "";
	display: block;
	width: 2.2em;
	height: 0.2em;
	margin-top: 0.55em;
	border-radius: 2em;
	background: var(--color-red, #E10614);
}

/* Het (nu verborgen) blokje met knop: netjes binnen de kaart wanneer het weer getoond wordt */
.soldenherfst .spacebetweener .w-vwrapper{
	position: relative;
	z-index: 1;
	margin: 0 20px 20px;
}

/* HOOGTE VAN HET BLOK
   De slider staat in de page builder op 1:1 en werd daardoor hoger dan het scherm.
   Vanaf tablet liggend formaat, en nooit hoger dan 60% van de schermhoogte. */
@media only screen and (min-width: 768px) {
	.soldenherfst .w-slider.img_has_ratio .royalSlider:not(.rsFullscreen),
	.soldenherfst .w-slider.img_has_ratio .w-slider-h > img{
		aspect-ratio: 16 / 9;
		max-height: 60vh;
		min-height: 280px;
	}
}

/* Foto's altijd volledig tonen (niet bijsnijden), met een witte achtergrond voor de lege stroken */
.soldenherfst .w-slider.fit_cover{
	background: #ffffff;
}

.soldenherfst .w-slider.fit_cover .w-slider-h img,
.soldenherfst .w-slider.fit_cover .w-slider-h img.rsImg{
	object-fit: contain;
	object-position: center;
}

/* VALLENDE BLADEREN */

.herfstbladeren{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	--hoogte: 100vh;
}

/* Laag over de volledige pagina */
.herfstbladeren.over_pagina{
	position: fixed;
	z-index: 9990;
}

.herfstblad{
	position: absolute;
	top: 0;
	left: var(--x, 50%);
	width: var(--grootte, 48px);
	height: calc(var(--grootte, 48px) * 1.1);
	margin-left: calc(var(--grootte, 48px) / -2);
	font-family: inherit;
	will-change: transform, opacity;
	animation: herfstblad-val var(--val, 10s) linear var(--wacht, 0s) both;
}

.herfstbladeren.in_kaart .herfstblad{
	animation-iteration-count: infinite;
}

.herfstblad-wieg,
.herfstblad-draai{
	display: block;
	width: 100%;
	height: 100%;
}

.herfstblad-wieg{
	animation: herfstblad-wieg var(--wieg, 3s) ease-in-out var(--fase, 0s) infinite alternate;
}

.herfstblad-draai{
	animation: herfstblad-draai var(--draai, 2.5s) ease-in-out var(--fase, 0s) infinite alternate;
}

.herfstblad svg{
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16));
}

.herfstblad text{
	font-family: inherit;
	font-weight: 900;
}

.herfstbladeren.is_gepauzeerd .herfstblad,
.herfstbladeren.is_gepauzeerd .herfstblad-wieg,
.herfstbladeren.is_gepauzeerd .herfstblad-draai{
	animation-play-state: paused;
}

@keyframes herfstblad-val{
	0%{
		opacity: 0;
		transform: translate3d(0, -120%, 0);
	}
	5%{
		opacity: 1;
	}
	88%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translate3d(0, calc(var(--hoogte) + 20%), 0);
	}
}

@keyframes herfstblad-wieg{
	from{
		transform: translateX(calc(var(--uitslag, 40px) * -1));
	}
	to{
		transform: translateX(var(--uitslag, 40px));
	}
}

@keyframes herfstblad-draai{
	from{
		transform: rotate(calc(var(--hoek, 0deg) - 18deg));
	}
	to{
		transform: rotate(calc(var(--hoek, 0deg) + 18deg));
	}
}

/* Bezoekers die animaties uitgeschakeld hebben: geen vallende bladeren, enkel stilstaande in de kaart */
@media (prefers-reduced-motion: reduce) {
	.herfstblad,
	.herfstblad-wieg,
	.herfstblad-draai{
		animation: none;
	}
	.herfstblad{
		top: var(--top, 50%);
	}
	.herfstblad-draai{
		transform: rotate(var(--hoek, 0deg));
	}
}

@media only screen and (max-width: 767px) {
	/* Kolommen staan onder elkaar: kaart even breed als de slider eronder */
	.soldenherfst .spacebetweener > .vc_column-inner{
		margin-left: 1.5rem;
		margin-right: 1.5rem;
		padding-left: 0!important;
		padding-right: 0!important;
	}
	.soldenherfst .spacebetweener > .vc_column-inner:before{
		width: 40%;
		top: -22%;
		right: -10%;
	}
	.soldenherfst .spacebetweener > .vc_column-inner:after{
		width: 44%;
		bottom: -24%;
		left: -12%;
	}
	.soldenherfst .yellowbox{
		padding: 34px 26px!important;
	}
}

/* END HERFSTPROMO */