.l-section.height_small { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.l-section.height_medium { padding-top: 3rem; padding-bottom: 3rem; }
.l-section.height_large { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.l-section.height_huge { padding-top: 6rem; padding-bottom: 6rem; }

.w-nav-title{line-height: 3rem!important;}
.w-nav-arrow {font-size: 12px!important; color:var(--color-muted)}
.w-nav-arrow::before { color:var(--color-muted)!important;}
.w-nav-arrow { transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.menu-item.menu-item-has-children:hover .w-nav-arrow,
.menu-item.menu-item-has-children.opened .w-nav-arrow { transform: rotate(180deg); }

/* Blog-grid kaart: gelijke hoogte, vaste image-afmeting, body op 3 regels */
.blog_article_grid .w-grid-list,
.blog_article_grid .w-grid-list { align-items: stretch; }

.blob_article_grid .w-grid-item,
.blog_article_grid .w-grid-item { height: 100%;  border-radius: 10px}

/*.blob_article_grid .w-grid-item .w-grid-item-h,*/
/*.blog_article_grid .w-grid-item .w-grid-item-h { display: flex; flex-direction: column; height: 100%; }*/

/* Forceer image-area: 390×290 verhouding, volle kaart-breedte */
.blog_article_grid .w-grid-item-h{border: 1px sold var(--color-line)!important; border-radius: 10px}
.blog_article_grid .w-grid-item-h:hover{border: 1px sold var(--color-primary-700)!important;}
.blog_article_grid .w-grid-item .w-grid-item-image,
.blog_article_grid .w-grid-item .w-grid-item-image,
.blob_article_grid .w-grid-item .post_thumbnail,
.blog_article_grid .w-grid-item .post_thumbnail,
.blob_article_grid .w-grid-item .post_image,
.blog_article_grid .w-grid-item .post_image { display: block !important; width: 100% !important; height: 290px !important; max-height: 290px !important; min-height: 290px !important; overflow: hidden !important; position: relative; }

/* H2 in kaart altijd op 2 regels: clamp + ruimte reserveren */
.blob_article_grid .w-grid-item h2,
.blog_article_grid .w-grid-item h2,
.blob_article_grid .w-grid-item .post_title,
.blog_article_grid .w-grid-item .post_title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.25em); line-height: 1.25; }

/* Inner wrappers (link / picture / span) ook 100%×100% */
.blob_article_grid .w-grid-item .w-grid-item-image > *,
.blog_article_grid .w-grid-item .w-grid-item-image > *,
.blob_article_grid .w-grid-item .post_thumbnail > *,
.blog_article_grid .w-grid-item .post_thumbnail > * { display: block; width: 100% !important; height: 100% !important; }

/* De daadwerkelijke img: cover + alle overrides */
.blob_article_grid .w-grid-item .w-grid-item-image img,
.blog_article_grid .w-grid-item .w-grid-item-image img,
.blob_article_grid .w-grid-item .post_thumbnail img,
.blog_article_grid .w-grid-item .post_thumbnail img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center; display: block; position: absolute; top: 0; left: 0; }

.blob_article_grid .w-grid-item .post_content,
.blog_article_grid .w-grid-item .post_content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; flex: 1 1 auto; }


@media (max-width: 768px) { .l-section.height_small { padding-top: 1.25rem; padding-bottom: 1.25rem; } .l-section.height_medium { padding-top: 2.25rem; padding-bottom: 2.25rem; } .l-section.height_large { padding-top: 3rem; padding-bottom: 3rem; } .l-section.height_huge { padding-top: 4rem; padding-bottom: 4rem; } }

/* ───────────────────────────────────────────────────────────────────────────
 * Safety-net: alles wat geen offset heeft kreeg ALSNOG via CSS een stack
 * onder de desktop-breakpoint (991px). De applyResponsiveColumns-script
 * regelt dit netjes per-row via offset-attribuut; deze rule is voor rows
 * die nog niet door 't script zijn gegaan.
 *
 * Belangrijke noot: Impreza gebruikt zijn EIGEN grid-systeem (.g-cols met
 * display:grid). Daarbij hebben individuele kolommen flex:100% maar dat doet
 * NIETS in een grid-container. We moeten dus de grid-template-columns
 * overrulen op de container zelf.
 * =========================================================================== */
@media (max-width: 991px) {
	/* WPBakery flex-row variant */
	[class*="vc_col-"],
	.wpb_column {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.wpb_column + .wpb_column { margin-top: 1rem; }

	/* Impreza .g-cols grid variant — alle multi-koloms naar 1 kolom */
	.g-cols.cols_2,
	.g-cols.cols_3,
	.g-cols.cols_4,
	.g-cols.cols_5,
	.g-cols.cols_6,
	.g-cols[class*="cols_"]:not(.cols_1):not(.mobiles-cols_1) {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}
}

/* Impreza button-rows (.w-hwrapper) — knoppen onder elkaar op mobiel zodat
   labels als "Bel 0487-503066" niet meer wrappen in een 125px-knop. */
@media (max-width: 640px) {
	.w-hwrapper { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem; }
	.w-hwrapper > .w-btn-wrapper { width: 100% !important; }
	.w-hwrapper > .w-btn-wrapper .w-btn { width: 100%; white-space: nowrap; }
}