/*
 * Connect IT — Dienstenverkenner.
 *
 * Smal (telefoon, tablet): een lijst per domein met een kleine foto, titel en
 * omschrijving per dienst; vanaf 840px de domeinen naast elkaar. Breed met
 * een muis (vanaf 880px widgetbreedte): links de index, rechts een podium met
 * de foto en een paneel van de dienst waar de bezoeker naar wijst. Dezelfde
 * elementen als elders: de mono-labels, de "meer"-link met draaiende pijl,
 * de afronding van 20px.
 */

.cit-dv { container: citdv / inline-size; }

.cit-dv__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

/* --------------------------------- index -------------------------------- */

.cit-dv__groep + .cit-dv__groep { margin-top: 32px; }

.cit-dv .cit-dv__domein {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 4px;
	font-family: var(--cit-font-mono, 'IBM Plex Mono', monospace);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cit-teal, #0E7490);
}
.cit-dv .cit-dv__domein::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--cit-cyan-border, #B9DCE6);
}

.cit-dv .cit-dv__lijst { margin: 0; padding: 0; list-style: none; }
.cit-dv .cit-dv__item { margin: 0; padding: 0; border-bottom: 1px solid var(--cit-line, #E2E9F0); }

.cit-dv .cit-dv__dienst {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas: "duim naam pijl" "duim oms pijl";
	align-items: center;
	column-gap: 16px;
	row-gap: 2px;
	padding: 14px 0;
	color: inherit;
	text-decoration: none;
}

.cit-dv__duim {
	grid-area: duim;
	align-self: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--cit-navy-800, #0A1626);
}
.cit-dv__duim img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cit-dv__naam {
	grid-area: naam;
	align-self: end;
	font-family: var(--cit-font-head, 'Archivo', sans-serif);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--cit-ink, #0D1B2A);
	transition: color .2s ease, transform .35s cubic-bezier(.2, .6, .2, 1);
}

.cit-dv__oms {
	grid-area: oms;
	align-self: start;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cit-muted, #5B6B7E);
}

.cit-dv .cit-dv__dienst > .cit-arr {
	grid-area: pijl;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--cit-line, #E2E9F0);
	color: var(--cit-teal, #0E7490);
	transition: transform .25s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cit-dv .cit-dv__dienst:hover > .cit-arr,
.cit-dv .cit-dv__dienst:focus-visible > .cit-arr { transform: rotate(45deg); }

.cit-dv__alle { margin: 28px 0 0; }

/* -------------------------------- podium -------------------------------- */

.cit-dv__podium { display: none; }

/* -------------------------- breed: index + podium ------------------------ */

/* Ruim, zonder muis (tablet liggend): de domeinen naast elkaar. */
@container citdv (min-width: 840px) {
	.cit-dv__index {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		column-gap: 32px;
		align-items: start;
	}
	.cit-dv__groep + .cit-dv__groep { margin-top: 0; }
	.cit-dv__alle { grid-column: 1 / -1; }
}

/* Breed met muis: index + podium. Het podium volgt de muis, dus zonder
   hover (touchscherm) blijft het bij de lijst hierboven. */
@media (hover: hover) and (pointer: fine) {
@container citdv (min-width: 880px) {
	.cit-dv__raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
		align-items: stretch;
	}
	.cit-dv__index { display: block; }
	.cit-dv__groep + .cit-dv__groep { margin-top: 32px; }

	.cit-dv .cit-dv__dienst {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "naam pijl";
		column-gap: 18px;
		padding: 15px 0;
	}
	.cit-dv__duim { display: none; }
	/* De omschrijving staat op het podium; voor schermlezers blijft hij hier. */
	.cit-dv__oms {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cit-dv__naam {
		align-self: center;
		font-size: clamp(19px, 1.9cqi, 23px);
	}

	/* Actieve regel: teal, iets naar rechts, pijl gevuld en een lijn die
	   onder de regel doorloopt. */
	.cit-dv .cit-dv__dienst::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		background: var(--cit-teal, #0E7490);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	}
	.cit-dv .cit-dv__dienst.is-actief::after { transform: scaleX(1); }
	.cit-dv .cit-dv__dienst.is-actief .cit-dv__naam { color: var(--cit-teal, #0E7490); transform: translateX(6px); }
	/* Rustig in rust: alleen een pijl; de actieve regel krijgt de gevulde cirkel. */
	.cit-dv .cit-dv__dienst > .cit-arr { box-shadow: none; color: var(--cit-muted-2, #8FA3B8); }
	.cit-dv .cit-dv__dienst:hover > .cit-arr { color: var(--cit-teal, #0E7490); }
	.cit-dv .cit-dv__dienst.is-actief > .cit-arr {
		background: var(--cit-teal, #0E7490);
		box-shadow: none;
		color: #FFFFFF;
		transform: rotate(45deg);
	}

	.cit-dv__podium {
		position: relative;
		display: block;
		min-height: 560px;
		overflow: hidden;
		isolation: isolate;
		border-radius: 20px;
		background: var(--cit-navy-800, #0A1626);
	}
}
}

.cit-dv__beeld {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.cit-dv__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 1.4s cubic-bezier(.2, .6, .2, 1);
}
.cit-dv__beeld.is-actief { opacity: 1; }
.cit-dv__beeld.is-actief img { transform: scale(1); }

/* Het hele podium is klikbaar en gaat naar de actieve dienst. */
.cit-dv__podiumlink { position: absolute; inset: 0; z-index: 1; }

.cit-dv__paneel {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	width: min(400px, calc(100% - 48px));
	box-sizing: border-box;
	padding: 28px 28px 24px;
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 32px 64px -28px rgba(7, 15, 27, .6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	/* Klikken op het paneel valt door naar de podiumlink eronder; alleen de
	   link zelf vangt de muis. */
	pointer-events: none;
	transition: opacity .3s ease, transform .45s cubic-bezier(.2, .6, .2, 1), visibility 0s linear .3s;
}
.cit-dv__paneel.is-actief {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: .1s, .1s, 0s;
}

.cit-dv .cit-dv__paneel-domein {
	margin: 0 0 10px;
	font-family: var(--cit-font-mono, 'IBM Plex Mono', monospace);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cit-teal, #0E7490);
}
.cit-dv .cit-dv__paneel-titel {
	margin: 0 0 10px;
	font-family: var(--cit-font-head, 'Archivo', sans-serif);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cit-ink, #0D1B2A);
}
.cit-dv .cit-dv__paneel-tekst {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cit-muted, #5B6B7E);
}
.cit-dv .cit-dv__punten {
	margin: 0 0 20px;
	padding: 16px 0 0;
	list-style: none;
	border-top: 1px solid var(--cit-line-2, #EDF2F6);
}
.cit-dv .cit-dv__punten li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cit-text, #33475C);
}
.cit-dv .cit-dv__punten li:last-child { margin-bottom: 0; }
.cit-dv__vink { flex: 0 0 auto; margin-top: 1px; color: var(--cit-teal, #0E7490); }
.cit-dv .cit-dv__link { position: relative; z-index: 1; pointer-events: auto; }
.cit-dv__podium:hover .cit-dv__paneel.is-actief .cit-arr { transform: rotate(45deg); }