/* ============================================================
   Checktegels: de antwoordknoppen van vraag 1 (of 2) van de WBSO-check buiten de check zelf.
   Geldt voor de kaart op de campagnepagina's (.dsc-cp-kaart) en de checkkaart in de gidsen
   (.dsc-ck, in de tekst en compact in de zijkolom). Niet voor de homepage en niet voor de
   vragen op /wbso-check. Besluit Wesley, 12 november 2026: zwevende witte knop met oranje
   pijl, de tik wordt oranje (assets/js/checktegels.js) en op de campagnepagina's bewegen de
   pijlen drie rondes. Geladen vóór blocks/campagne/style.css, zodat die de maten vanaf 782
   (tegels naast elkaar) kan aanpassen. Mobile-first.
   ============================================================ */

:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__opties {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie {
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 52px;
	box-sizing: border-box;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid var(--dsc-tegel-rand);
	background: var(--wp--preset--color--pure-white);
	box-shadow: var(--dsc-tegel-schaduw);
	color: var(--wp--preset--color--ink);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	transition: transform 0.08s, box-shadow 0.12s;
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie-tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie-sub {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-soft);
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__icoon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	flex: none;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
}
/* De pijl staat achter de tekst, altijd rechts in de tegel; hij krimpt nooit en valt dus
   nooit over de tekst, ook niet als de tegels naast elkaar staan. */
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__pijl {
	display: inline-flex;
	flex: none;
	margin-left: auto;
	color: var(--wp--preset--color--orange);
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__pijl svg {
	width: 20px;
	height: 20px;
	transition: transform 0.12s;
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__pijl-vink {
	display: none;
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* Compact in de zijkolom van de gidsen (vanaf 1024). */
.dsc-ck--zij .dsc-check__opties {
	gap: 8px;
}
.dsc-ck--zij .dsc-check__optie {
	gap: 8px;
	min-height: 38px;
	padding: 6px 10px;
	border-radius: 10px;
	box-shadow: var(--dsc-tegel-schaduw-compact);
	font-size: 14px;
}
.dsc-ck--zij .dsc-check__icoon {
	width: 20px;
	height: 20px;
}
.dsc-ck--zij .dsc-check__icoon svg {
	width: 18px;
	height: 18px;
}
.dsc-ck--zij .dsc-check__pijl svg {
	width: 16px;
	height: 16px;
}
/* Op een touchscherm blijven ook de compacte tegels 44 px hoog (DESIGN.md: tikdoelen). */
@media (pointer: coarse) {
	.dsc-ck--zij .dsc-check__optie {
		min-height: 44px;
	}
}

/* Wijzen en indrukken. */
@media (hover: hover) {
	:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie:hover {
		transform: translateY(-2px);
		box-shadow: var(--dsc-tegel-schaduw-hover);
	}
	:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie:hover .dsc-check__pijl svg {
		transform: translateX(3px);
	}
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie:active {
	transform: translateY(1px);
	box-shadow: var(--dsc-tegel-schaduw-druk);
}

/* De tik: de gekozen tegel wordt meteen oranje met een vinkje, de andere vervagen. */
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie.is-gekozen {
	transform: none;
	border-color: var(--wp--preset--color--orange);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--paper);
}
:is(.dsc-cp-kaart, .dsc-ck) .is-gekozen :is(.dsc-check__icoon, .dsc-check__pijl, .dsc-check__optie-sub) {
	color: var(--wp--preset--color--paper);
}
:is(.dsc-cp-kaart, .dsc-ck) .is-gekozen .dsc-check__pijl svg {
	transform: none;
}
:is(.dsc-cp-kaart, .dsc-ck) .is-gekozen .dsc-check__pijl-pijl {
	display: none;
}
:is(.dsc-cp-kaart, .dsc-ck) .is-gekozen .dsc-check__pijl-vink {
	display: block;
}
:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__opties.is-bezig .dsc-check__optie:not(.is-gekozen) {
	opacity: 0.45;
}

/* Minder beweging: geen verschuiving bij wijzen en indrukken; de schaduw mag wel veranderen. */
@media (prefers-reduced-motion: reduce) {
	:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie:is(:hover, :active),
	:is(.dsc-cp-kaart, .dsc-ck) .dsc-check__optie:hover .dsc-check__pijl svg {
		transform: none;
	}
}

/* De pijlen bewegen (alleen de kaart op de campagnepagina's): een seconde nadat de kaart in
   beeld is (is-in-beeld, assets/js/checktegels.js) schuiven ze kort naar rechts en terug, na
   elkaar van boven naar beneden; daarna 4 s rust. Drie rondes (~15 s), dan stil (WCAG 2.2.2).
   Uit beeld, bij wijzen of met de focus in de kaart pauzeert de beweging. Zonder JavaScript en
   bij minder beweging: geen animatie. */
@keyframes dsc-duw {
	0% {
		transform: translateX(0);
	}
	5.5% {
		transform: translateX(6px);
	}
	10% {
		transform: translateX(0);
	}
	14% {
		transform: translateX(3px);
	}
	18.4%,
	100% {
		transform: translateX(0);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.dsc-cp-kaart .dsc-check__pijl {
		animation: dsc-duw 4.9s ease-in-out 1s 3 both;
		animation-play-state: paused;
	}
	.dsc-cp-kaart .dsc-check__optie:nth-child(2) .dsc-check__pijl {
		animation-delay: 1.12s;
	}
	.dsc-cp-kaart .dsc-check__optie:nth-child(3) .dsc-check__pijl {
		animation-delay: 1.24s;
	}
	.dsc-cp-kaart.is-in-beeld .dsc-check__pijl {
		animation-play-state: running;
	}
	.dsc-cp-kaart.is-in-beeld:is(:hover, :focus-within) .dsc-check__pijl {
		animation-play-state: paused;
	}
	.dsc-cp-kaart .is-gekozen .dsc-check__pijl {
		animation: none;
	}
}