/*
 * [wood_duurzaam_vier] de vier duurzaamheidsonderdelen.
 * Maten nagemeten op Tims Elementor-raster op /duurzaamheid/ (23 sep 2026).
 * Selectors met twee klassen, anders winnen Elementor en de kit (h3 line-height 1.3px).
 */

.wood-dv {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px;
}

.wood-dv .wood-dv-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	box-sizing: border-box;
	min-width: 0;
	padding: 10px;
	border-right: 0.8px solid rgba(217, 185, 118, 0.52);
	text-align: center;
}

/* Alleen een lijn tussen de onderdelen, niet na het laatste */
.wood-dv .wood-dv-item:last-child {
	border-right: 0;
}

/* Zelfde hoogte als de icoonwidget in Elementor (50px icoon + regelruimte) */
.wood-dv .wood-dv-icoon {
	display: flex;
	justify-content: center;
	height: 56.4px;
	color: #D9B976;
}

.wood-dv .wood-dv-icoon svg {
	display: block;
	width: 50px;
	height: 50px;
}

.wood-dv .wood-dv-kop {
	margin: 0;
	padding: 0;
	font-family: "Libre Baskerville", serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #D9B976;
}

.wood-dv .wood-dv-tekst {
	margin: 0 0 0.9em;
	padding: 0;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 200;
	font-style: italic;
	line-height: 20px;
	color: #FFFFFF;
}

/* Invallen: één voor één, 150ms na elkaar. Zonder JS blijft alles gewoon staan. */
.wood-js .wood-dv .wood-dv-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(150ms + var(--wood-dv-nr, 0) * 150ms);
}

.wood-js .wood-dv.wood-dv-in .wood-dv-item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wood-js .wood-dv .wood-dv-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Tablet, gelijk aan Elementor: twee kolommen, lijn alleen tussen links en rechts */
@media (max-width: 1024px) {
	.wood-dv {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wood-dv .wood-dv-item:nth-child(2n) {
		border-right: 0;
	}
}

/* Telefoon, gelijk aan Elementor: onder elkaar, zonder lijnen */
@media (max-width: 767px) {
	.wood-dv {
		grid-template-columns: minmax(0, 1fr);
	}

	.wood-dv .wood-dv-item {
		border-right: 0;
	}
}