/*
 * Block: Basis en Plus (.tiers-block). Two tier cards in the Digital Marketing colour: a coloured top
 * with the band and name, and a beige body with what is included.
 * Block-local custom property: --tier-dash (dashed border of the "volgt" pill; no system token).
 */

.tiers-block { --tier-dash: #B9AEA3; }

.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

.tier { border-radius: var(--radius-l); background: var(--beige); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }

.tier-top {
	--bc: var(--dm);
	--bl: 52%;
	--bw: 34%;
	position: relative;
	overflow: hidden;
	background: var(--dm-tint);
	padding: clamp(24px, 2.6vw, 36px);
	min-height: clamp(150px, 13vw, 200px);
	display: grid;
	align-content: end;
	gap: 40px;
}
.tier--b .tier-top { --bc: var(--dm-tint); background: var(--dm); }
.tier-top > :not(.band) { position: relative; }
.tier-top h3 { font-size: var(--fs-h3); }

.tier-body { padding: 26px clamp(24px, 2.6vw, 36px) 32px; display: grid; gap: 20px; align-content: start; }
.tier-text { max-width: 34em; }

.tier-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tier-items li { position: relative; padding: 13px 0 13px 22px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.tier-items li::before { content: ""; position: absolute; left: 2px; top: 1.32em; width: 8px; height: 8px; border-radius: 50%; background: var(--dm); box-shadow: inset 0 0 0 1px var(--green); }

.tier-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--ink-soft); }
.tier-pending span { border: 1px dashed var(--tier-dash); border-radius: 6px; padding: 1px 8px; font-size: 14px; }

.tiers-foot { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; }
.tiers-notes { display: grid; gap: 6px; max-width: 46em; }
.tiers-note { color: var(--ink-soft); font-size: var(--fs-small); }
.tiers-rule { font-weight: 400; }
.tiers-foot .textlink { flex: none; }

@media (max-width: 760px) {
	.tiers { grid-template-columns: 1fr; }
	.tier-top { min-height: 0; gap: 28px; }
}