/* onScreen Elementen Blox — OS Acties
 * Losse kaarten in een CSS-grid; kolommen via --osb-cols (per breakpoint gezet door het widget).
 */

.osb-acties {
	--osb-cols: var(--osb-cols-d, 3);
	--osb-card-bg: #fff;
	--osb-title-color: #0f4c81;
	--osb-text-color: #555;
	--osb-btn-bg: #0f4c81;
	--osb-btn-color: #fff;

	--osb-gap: 40px;

	display: flex;
	flex-wrap: wrap;
	gap: var(--osb-gap);
	align-items: flex-start;
}
.osb-equal-yes .osb-acties {
	align-items: stretch;
}
/* Breedte per kaart: percentage van de rij (--osb-w, door het widget berekend),
 * gecorrigeerd voor de tussenruimte zodat een rij precies vol is. */

.osb-actie {
	--osb-wd: var(--osb-w, 100%);
	flex: 0 0 calc(var(--osb-wd) - var(--osb-gap) * (var(--osb-cols) - 1) / var(--osb-cols));
	max-width: calc(var(--osb-wd) - var(--osb-gap) * (var(--osb-cols) - 1) / var(--osb-cols));
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-sizing: border-box;
	background: var(--osb-card-bg);
	color: var(--osb-text-color);
	border-radius: 40px;
	padding: 56px 36px;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}
a.osb-actie,
a.osb-actie:hover {
	color: var(--osb-text-color);
	text-decoration: none;
}
.osb-hover-yes .osb-actie:hover {
	transform: translateY(-4px);
}

.osb-actie__title {
	margin: 0 0 20px;
	color: var(--osb-title-color);
	font-weight: 700;
	line-height: 1.25;
}

.osb-actie__text {
	color: var(--osb-text-color);
}
.osb-actie__text p,
.osb-actie__text ul,
.osb-actie__text ol {
	margin: 0;
}
.osb-actie__text > * + * {
	margin-top: 12px;
}
.osb-actie__text ul,
.osb-actie__text ol {
	padding-left: 1.2em;
}
.osb-actie__text strong,
.osb-actie__text b {
	color: var(--osb-accent-color, var(--osb-text-color));
	font-weight: 700;
}
.osb-actie__text a {
	color: var(--osb-accent-color, inherit);
}

.osb-actie__actions {
	margin-top: auto;
	padding-top: 24px;
}
.osb-actie__btn {
	display: inline-block;
	padding: 14px 32px;
	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;
}
.osb-actie__btn:hover,
.osb-actie__btn:focus-visible {
	background: var(--osb-btn-bg-h, var(--osb-btn-bg));
	color: var(--osb-btn-color-h, var(--osb-btn-color));
}

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

@media (max-width: 1024px) {
	.osb-acties { --osb-cols: var(--osb-cols-t, 2); }
	.osb-actie { --osb-wd: var(--osb-w-t, 100%); }
}
@media (max-width: 767px) {
	.osb-acties { --osb-cols: var(--osb-cols-m, 1); }
	.osb-actie { --osb-wd: var(--osb-w-m, 100%); }
}