/*
 * Block: Case-overzicht (.case-grid). Reuses the homepage case cards (.proof, .cases, .case from cases.css)
 * and adds the filter buttons per service, an optional teaser line and the bottom spacing.
 */

.case-grid { padding-bottom: var(--sp-section); }
.case-grid .head .side { align-content: end; }

.case-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: -16px 0 32px; }
.case-filter[hidden] { display: none; }
.case-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: transparent;
	font: 400 15px/1 var(--sans);
	color: var(--green);
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
}
.case-filter-btn:hover { border-color: var(--green); }
.case-filter-btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--beige); }
.case-filter-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(7, 59, 48, .18); flex: none; }

.case-grid .case[hidden] { display: none; }
.case-body-wrap { display: grid; align-content: start; }
.case-teaser { padding: 16px 24px 0; font-size: var(--fs-small); }

.case-grid-empty { display: grid; gap: 24px; justify-items: start; max-width: 34em; }
.case-grid-empty p { font-size: 18px; line-height: 1.5; }

/* Card footer: a quiet "Lees de case" with the round arrow, pushed to the bottom of the card. */
.case-grid .case-body-wrap { display: flex; flex-direction: column; }
.case-more {
	margin-top: auto;
	padding: 22px 24px 24px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-small);
	color: var(--green);
}
.case-more .arrow { width: 32px; height: 32px; background: var(--green); color: var(--beige); transition: transform .2s; }
.case-grid a.case:hover .case-more .arrow { transform: translateX(3px); }

/* Card top: the service-coloured frame with the photo inset, and the pill and name below it. The frame
   and .case-meta styles are shared; they live in case-frame.css. */
.case-grid .case { grid-template-rows: auto auto 1fr; align-content: start; }
.case-pill { background: var(--c, var(--beige-deep)); }

@media (prefers-reduced-motion: reduce) {
	.case-more .arrow { transition: none; }
}