/* onScreen Elementen Blox — OS Vakken
 * Kolommen via --osb-cols (per breakpoint gezet door het widget).
 * Tussenlijnen: elk vak heeft een rechter- en onderrand; de buitenste worden
 * weggeknipt door een negatieve marge op het raster + overflow hidden op het blok.
 */

.osb-vakken {
	--osb-cols: var(--osb-cols-d, 3);
	--osb-div-w: 1px;
	--osb-div-c: #e3e5e8;
	--osb-div-s: solid;
	--osb-cell-bg: #fff;
	--osb-title-color: #0f2f5c;
	--osb-text-color: #555;
	--osb-btn-bg: #0f2f5c;
	--osb-btn-color: #fff;

	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 40px;
	/* Safari: overflow + border-radius op een grid-ouder */
	isolation: isolate;
}

/* Zonder tussenlijnen geen randen */
.elementor-widget-osb_vakken:not(.osb-dividers-yes) .osb-vakken {
	--osb-div-w: 0px;
}

.osb-vakken__grid {
	display: grid;
	grid-template-columns: repeat(var(--osb-cols), minmax(0, 1fr));
	margin-right: calc(-1 * var(--osb-div-w));
	margin-bottom: calc(-1 * var(--osb-div-w));
}

/* Vak */
.osb-vak {
	--osb-icon-gap: 28px;
	display: flex;
	background: var(--osb-cell-bg);
	color: var(--osb-text-color);
	border-right: var(--osb-div-w) var(--osb-div-s) var(--osb-div-c);
	border-bottom: var(--osb-div-w) var(--osb-div-s) var(--osb-div-c);
	box-sizing: border-box;
	min-width: 0;
	text-decoration: none;
	transition: background-color .25s ease, filter .25s ease;
}
a.osb-vak,
a.osb-vak:hover {
	color: var(--osb-text-color);
	text-decoration: none;
}
.osb-hover-yes .osb-vak:hover {
	filter: brightness(1.04);
}

.osb-vak__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 48px 40px;
}

/* Icoon */
.osb-vak__icon {
	line-height: 0;
	margin-bottom: var(--osb-icon-gap);
	flex: 0 0 auto;
}
.osb-vak__icon img,
.osb-vak__icon svg {
	display: inline-block;
	height: 110px;
	width: auto;
	max-width: 100%;
}
.osb-vak__icon svg {
	fill: currentColor;
}

/* Body */
.osb-vak__body {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.osb-vak__title {
	margin: 0 0 16px;
	color: var(--osb-title-color);
	font-weight: 700;
	line-height: 1.2;
}
.osb-vak__text {
	color: var(--osb-text-color);
}
.osb-vak__text p {
	margin: 0 0 .8em;
}
.osb-vak__text p:last-child {
	margin-bottom: 0;
}
.osb-vak__text ul {
	margin: 0 0 .8em;
	padding-left: 1.2em;
}
.osb-vak__actions {
	margin-top: auto;
}
.osb-vak__btn {
	display: inline-block;
	margin-top: 28px;
	padding: 16px 36px;
	border-radius: 30px;
	background: var(--osb-btn-bg);
	color: var(--osb-btn-color);
	text-decoration: none;
	line-height: 1.2;
	transition: background-color .2s, color .2s, transform .2s;
}
.osb-vak__btn:hover,
.osb-vak__btn:focus-visible {
	background: var(--osb-btn-bg-h, var(--osb-btn-bg));
	color: var(--osb-btn-color-h, var(--osb-btn-color));
	transform: translateY(-1px);
}

/* Uitlijning (prefix-classes osb-align-*, -tablet-, -mobile-) */
.osb-align-center .osb-vak__inner { text-align: center; align-items: center; }
.osb-align-start  .osb-vak__inner { text-align: left; align-items: flex-start; }

/* Icoon links (prefix-classes osb-icon-*) */
.osb-icon-left .osb-vak__inner {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
}
.osb-icon-left .osb-vak__icon {
	margin-bottom: 0;
	margin-right: var(--osb-icon-gap);
}
.osb-icon-top .osb-vak__inner {
	flex-direction: column;
}
.osb-icon-top .osb-vak__icon {
	margin-right: 0;
	margin-bottom: var(--osb-icon-gap);
}

@media (max-width: 1024px) {
	.osb-vakken { --osb-cols: var(--osb-cols-t, 2); }
	.osb-align-tablet-center .osb-vak__inner { text-align: center; align-items: center; }
	.osb-align-tablet-start  .osb-vak__inner { text-align: left; align-items: flex-start; }
	.osb-icon-tablet-left .osb-vak__inner { flex-direction: row; align-items: flex-start; text-align: left; }
	.osb-icon-tablet-left .osb-vak__icon { margin-bottom: 0; margin-right: var(--osb-icon-gap); }
	.osb-icon-tablet-top .osb-vak__inner { flex-direction: column; }
	.osb-icon-tablet-top .osb-vak__icon { margin-right: 0; margin-bottom: var(--osb-icon-gap); }
}
@media (max-width: 767px) {
	.osb-vakken { --osb-cols: var(--osb-cols-m, 1); }
	.osb-align-mobile-center .osb-vak__inner { text-align: center; align-items: center; }
	.osb-align-mobile-start  .osb-vak__inner { text-align: left; align-items: flex-start; }
	.osb-icon-mobile-left .osb-vak__inner { flex-direction: row; align-items: flex-start; text-align: left; }
	.osb-icon-mobile-left .osb-vak__icon { margin-bottom: 0; margin-right: var(--osb-icon-gap); }
	.osb-icon-mobile-top .osb-vak__inner { flex-direction: column; }
	.osb-icon-mobile-top .osb-vak__icon { margin-right: 0; margin-bottom: var(--osb-icon-gap); }
}

/* Icoon links + gecentreerd is onlogisch: dan centreren we het blok als geheel */
.osb-icon-left.osb-align-center .osb-vak__inner {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.osb-vak,
	.osb-vak__btn {
		transition: none;
	}
}