/* Autokaarten (plugin): hover en een verloop onderaan de foto.
   Geldt voor het occasions-overzicht, de slider op de homepage ([occasion_slider]) en
   "Vergelijkbare occasions" op de autopagina;
   de kaart-markup is van het thema (template-parts/.../occasion/item.php). */

/* Rand bij hover: een eigen laag over de hele kaart (z-index boven de foto). Een outline op de
   kaart zelf viel weg achter de foto, en alles búiten de kaart knipt de slider af. */
:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion {
	position: relative;
}

:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	border: 1px solid transparent;
	border-radius: inherit;
	pointer-events: none;
	transition: border-color .3s cubic-bezier(.2, .7, .2, 1);
}

/* Foto met dezelfde ronde hoeken als de kaart, anders steken de hoekjes buiten de rand */
.item.occasion.dv-kaart .dv-kaart-foto,
:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .thumbnail {
	border-radius: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* De foto is een achtergrond van .thumbnail; ::before is een kopie die kan zoomen,
   ::after het verloop naar het zwart van de kaart. Kort gehouden zodat "onderweg!"
   onderin de DV-foto's leesbaar blijft. */
:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .thumbnail {
	position: relative;
}

:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .thumbnail::before {
	content: '';
	position: absolute;
	inset: 0;
	background: inherit;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .thumbnail::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18%;
	background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

/* Astra zet op sommige pagina's .entry-content :where(h1-h6){margin-top:1.5em};
   dan zakt het merk onder de prijs. Live staat die regel er nu niet, dit houdt het zo. */
:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .info h3,
:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .info h4 {
	margin-top: 0;
}

/* Lucht tussen de foto en het merk, op de plugin-kaart met plek voor "Nieuw binnen" */
:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .info {
	padding-top: 12px;
}

.item.occasion.dv-kaart .info {
	padding-top: 30px;
}

:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion:focus-visible {
	outline: none;
}

:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion:focus-visible::after {
	border-color: var(--color-primary, #bcb09b);
}

@media (hover: hover) {
	:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion:hover::after {
		border-color: var(--color-primary, #bcb09b);
	}

	:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion:hover .thumbnail::before {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion .thumbnail::before {
		transition: none;
	}

	:is(.dv-occasions, .vehicle-slider, .dv-vergelijkbaar) .item.occasion:hover .thumbnail::before {
		transform: none;
	}
}

/* ---------- kaart van de plugin (templates/kaart.php) ----------
   Specificaties op één rustige rij (transmissie, brandstof, km, bouwjaar), en BTW/Marge als
   pil op de foto. Smalle kaart (telefoon): twee bij twee. Met .item.occasion erbij, anders
   winnen de (specifiekere) regels van het thema voor deze rij. */
.item.occasion.dv-kaart .info .car-details ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 7px 8px;
	border-radius: 999px;
}

/* Opbouw: kop (merk + prijs), streep, highlights, en een voet (specs + knop) die altijd
   onderaan staat, zodat kaarten naast elkaar gelijk lopen, ook bij een langer model of
   meer highlights. .info is daarvoor een kolom; de thema-regels met flex-basis 100% (bedoeld
   voor de oude rij-opbouw) worden hier geneutraliseerd. */
.item.occasion.dv-kaart {
	display: flex;
	flex-direction: column;
	/* Astra geeft elke link "transition: 0.2s linear" (alle eigenschappen). Dan groeide de ruimte
	   die de slider tussen de kaarten zet van 0 naar 16px, terwijl Splide de posities al had
	   gemeten: kaarten schoven op en de rechter werd afgesneden. Alleen kleuren laten overvloeien. */
	transition: color .2s linear, background-color .2s linear;
}

.item.occasion.dv-kaart .info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.item.occasion.dv-kaart .dv-kaart-kop {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 10px;
}

.item.occasion.dv-kaart .info .car-features {
	flex: none;
	width: 100%;
}

.item.occasion.dv-kaart .dv-kaart-voet {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.item.occasion.dv-kaart .dv-kaart-voet .car-details {
	flex: none;
	align-self: stretch;
}

.item.occasion.dv-kaart .dv-kaart-foto {
	position: relative;
}

/* Nieuw binnen: klein label in de accentkleur boven het merk ("— NIEUW BINNEN"). Op de regel
   van het merk paste het niet bij lange merken (Mercedes-Benz, Volkswagen) of als de prijs ernaast
   staat (tablet); dan brak het af en liepen kaarten niet meer gelijk. Nu absoluut in de ruimte
   boven het merk, die elke kaart heeft (zie .info hieronder), dus de hoogte verandert nooit. */
.item.occasion.dv-kaart .dv-kaart-merk {
	position: relative;
}

.item.occasion.dv-kaart .dv-kaart-merk .dv-kaart-nieuw {
	position: absolute;
	left: 0;
	bottom: calc(100% + 3px);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-primary, #bcb09b);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.item.occasion.dv-kaart .dv-kaart-merk .dv-kaart-nieuw::before {
	content: '';
	width: 18px;
	height: 1px;
	background: currentColor;
}

.item.occasion.dv-kaart .info .car-details ul li {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 8px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.35;
	white-space: nowrap;
}

.item.occasion.dv-kaart .info .car-details ul li i {
	margin: 0;
	padding: 0;
	font-size: 14px;
}

/* Langste rij ("Handgeschakeld", "Elektrisch", 6-cijferige km) is ~495px, plus 40px rand van de
   kaart; daaronder twee bij twee. Gemeten op de kaart: een container op de strook zelf gaf in de
   kolom-opbouw 30px loze ruimte onder de knop. */
@container dv-kaart (max-width: 550px) {
	.item.occasion.dv-kaart .info .car-details ul {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: space-evenly;
		gap: 6px 20px;
		padding: 9px 14px;
		border-radius: 16px;
	}

	.item.occasion.dv-kaart .info .car-details ul li {
		justify-content: flex-start;
		padding: 0;
	}

	.item.occasion.dv-kaart .info .car-details ul li::after {
		display: none;
	}
}

.item.occasion.dv-kaart .dv-kaart-foto .dv-kaart-pil {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 4px 11px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(10, 10, 10, .65);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.3;
}

/* Smalle kaart (telefoon): de pillen zouden "onderweg!" onderin de DV-foto's afdekken.
   Daar staan ze half over de onderrand van de foto, met wat extra ruimte boven het merk. */
.item.occasion.dv-kaart {
	container: dv-kaart / inline-size;
}

@container dv-kaart (max-width: 440px) {
	.item.occasion.dv-kaart .dv-kaart-foto .dv-kaart-pil {
		bottom: 0;
		transform: translateY(50%);
	}

	.item.occasion.dv-kaart .info {
		padding-top: 34px;
	}

	/* Prijs onder het model, zoals op de telefoon: ernaast bleef op tablet (twee kaarten naast
	   elkaar) 134px over en brak "Mercedes-Benz" over twee regels */
	.item.occasion.dv-kaart .dv-kaart-kop .title-container {
		flex-basis: 100%;
	}
}

/* Highlights als tags, in de stijl van de BTW-pil */
.item.occasion.dv-kaart .dv-kaart-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 5px;
	margin: 14px 0 6px;
	padding: 0;
	list-style: none;
}

.item.occasion.dv-kaart .dv-kaart-tags li {
	padding: 3px 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	color: var(--color-secondary, #c2c2c2);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.3;
	white-space: nowrap;
}

/* Hiërarchie: de prijs is de blikvanger; merk iets kleiner, model op één regel */
.item.occasion.dv-kaart .info h3 {
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.15;
}

.item.occasion.dv-kaart .info h4 {
	margin-bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Homepage: het occasions-blok ("Onze nieuwste occasions" + slider) in dezelfde 1200px als de
   rest van de site, zodat de kaarten even breed zijn als op /occasions. Het blok zelf is
   alignfull en groeide op brede schermen mee (kaarten tot 736px). */
.wp-block-columns.columns-occasion-slider > .wp-block-column:only-child {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Minder lucht onder Auto bekijken (thema: 10px kaart + 20px tekstblok) */
.item.occasion.dv-kaart.dv-kaart {
	padding-bottom: 0;
}

.item.occasion.dv-kaart .info {
	padding-bottom: 18px;
}

/* Maandprijs dichter onder de prijs: de grote prijs zonder extra regelhoogte (thema: 1.2) */
.item.occasion.dv-kaart .price-box .price {
	line-height: 1;
}

.item.occasion.dv-kaart .price-box .lease-price {
	display: block;
	margin-top: 4px;
	line-height: 1.2;
}

/* ---------- favorieten (favorieten.js) ----------
   Hartje linksonder op de foto, in de stijl van de BTW-pil. Linksboven en rechtsboven staan in de
   DV-foto's zelf al het BOVAG-logo en het reviewcijfer; "onderweg!" staat onderin het midden. */
.item.occasion.dv-kaart .dv-kaart-foto .dv-fav {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: rgba(10, 10, 10, .65);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .2s, color .2s, background-color .2s;
}

.item.occasion.dv-kaart .dv-fav .dv-hart {
	width: 18px;
	height: 18px;
	transition: fill .2s;
}

.item.occasion.dv-kaart .dv-fav.is-bewaard {
	border-color: var(--color-primary, #bcb09b);
	color: var(--color-primary, #bcb09b);
}

.item.occasion.dv-kaart .dv-fav.is-bewaard .dv-hart,
[data-dv-fav].is-bewaard .dv-hart {
	fill: currentColor;
}

.item.occasion.dv-kaart .dv-fav:focus-visible {
	outline: 2px solid var(--color-primary, #bcb09b);
	outline-offset: 2px;
}

@media (hover: hover) {
	.item.occasion.dv-kaart .dv-fav:hover {
		border-color: var(--color-primary, #bcb09b);
		color: var(--color-primary, #bcb09b);
	}
}

/* Klein "tikje" bij aan- of uitzetten */
[data-dv-fav].is-tik .dv-hart {
	animation: dv-hart-tik .35s cubic-bezier(.2, .7, .2, 1);
}

@keyframes dv-hart-tik {
	40% { transform: scale(1.3); }
}

/* Melding onderin na het bewaren, met een link naar het overzicht */
.dv-fav-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 99995;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(100vw - 32px);
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(18, 18, 18, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 15px;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 18px) scale(.96);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}

.dv-fav-toast.is-zichtbaar {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
	transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.15), visibility 0s;
}

.dv-fav-toast a,
.dv-fav-toast a:hover,
.dv-fav-toast a:focus {
	color: var(--color-primary, #bcb09b);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Telefoon: boven de zwevende WhatsApp-knop (rechtsonder, 45px op 22px van de rand) */
@media (max-width: 767px) {
	.dv-fav-toast {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}
}

/* Op de autopagina met de prijsbalk in beeld: de melding erboven */
html.dv-balk-aan .dv-fav-toast {
	bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	[data-dv-fav].is-tik .dv-hart {
		animation: none;
	}

	.dv-fav-toast {
		transition: none;
	}
}