/*
 * Block: Cases (.proof). Head row, case cards (the framed photo from case-frame.css, pill and name, Doel / Resultaat), and the Otto line.
 * Block-local custom property: --case-dash (dashed border of the "volgt" pill; no system token).
 */

.proof { --case-dash: #B9AEA3; }
.proof { padding-block: var(--sp-section) 0; }
.proof .head { margin-bottom: 48px; }
.proof .head .side { align-content: end; }
.proof .head .textlink { justify-self: start; color: var(--green); }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.case { border-radius: var(--radius); background: var(--beige); overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; align-content: start; text-decoration: none; color: inherit; transition: transform .25s; }
a.case:hover { transform: translateY(-3px); }
a.case:focus-visible { outline-offset: 4px; border-radius: var(--radius); }

.case-pill { justify-self: start; font-size: var(--fs-micro); font-weight: 400; background: var(--beige-tint); padding: 6px 12px; border-radius: 999px; }

.case-body { margin: 0; padding: 22px 24px 26px; display: grid; gap: 14px; align-content: start; }
.case-kpi { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: var(--fs-small); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.case-kpi:last-child { border-bottom: 0; padding-bottom: 0; }
.case-kpi dt { color: var(--ink-soft); }
.case-kpi dd { margin: 0; }
.case-pending { display: inline-block; color: var(--ink-soft); border: 1px dashed var(--case-dash); border-radius: 6px; padding: 1px 8px; font-size: 14px; }

.proof-otto { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.proof-otto .icon-otto { width: 16px; height: auto; color: var(--green); flex: none; }

@media (max-width: 900px) {
	.cases { grid-template-columns: 1fr; }
}