/*
 * Overzicht van beschikbare juristen: filterbalk boven, daaronder een blok per
 * rechtsgebied dat openklapt.
 *
 * Alle maten, kleuren en ruimtes komen uit de huisstijl. Staat die plugin uit,
 * dan vallen de var()-waarden terug op het tweede argument en blijft het bruikbaar.
 */

.dr-juristen {
	--juristen-lijn: var(--dr-lijn, #e3e6e6);
	--juristen-rood: var(--dr-rood, #e10019);
	--juristen-turquoise: var(--dr-turquoise, #46aab2);
	--juristen-inkt: var(--dr-inkt, #191919);
	--juristen-stil: var(--dr-inkt-stil, #6b6b6b);

	font-family: var(--dr-letter-tekst, inherit);
	container-type: inline-size;
}

/* ---- Filterbalk --------------------------------------------------------- */

.dr-juristen__filter {
	display: flex;
	flex-direction: column;
	gap: var(--dr-ruimte-m, 1.5rem);
	padding-bottom: var(--dr-ruimte-m, 1.5rem);
	margin-bottom: var(--dr-ruimte-l, 2.5rem);
	border-bottom: 1px solid var(--juristen-lijn);
}

.dr-juristen__zoek {
	display: block;
	max-width: 32rem;
}

.dr-juristen__label {
	display: block;
	font-size: var(--dr-maat-klein, 0.9375rem);
	font-weight: 600;
	margin-bottom: var(--dr-ruimte-xs, 0.5rem);
}

.dr-juristen__zoek input {
	width: 100%;
}

.dr-juristen__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dr-ruimte-xs, 0.5rem);
}

/*
 * De filterknoppen zijn de rustigste vorm die nog als knop leest: een omlijning
 * die bij aanzetten volloopt. Geen kleurexplosie bij dertig rechtsgebieden.
 */
.dr-juristen__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 40px;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--juristen-lijn);
	border-radius: 999px;
	background: transparent;
	color: var(--juristen-inkt);
	font-family: inherit;
	font-size: var(--dr-maat-klein, 0.9375rem);
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}

.dr-juristen__chip:hover {
	border-color: var(--juristen-turquoise);
}

.dr-juristen__chip.is-actief {
	background: var(--juristen-inkt);
	border-color: var(--juristen-inkt);
	color: #fff;
}

.dr-juristen__telling {
	font-size: 0.8em;
	color: var(--juristen-stil);
	font-variant-numeric: tabular-nums;
}

.dr-juristen__chip.is-actief .dr-juristen__telling {
	color: rgba(255, 255, 255, 0.72);
}

.dr-juristen__stand {
	margin: 0;
	font-size: var(--dr-maat-klein, 0.9375rem);
	color: var(--juristen-stil);
	font-variant-numeric: tabular-nums;
}

/* ---- Blok per rechtsgebied ---------------------------------------------- */

.dr-juristen__gebied {
	border-bottom: 1px solid var(--juristen-lijn);
}

.dr-juristen__gebied[hidden] {
	display: none;
}

.dr-juristen__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dr-ruimte-s, 1rem);
	padding: var(--dr-ruimte-s, 1rem) 0;
	min-height: 56px;
	cursor: pointer;
	list-style: none;
	font-family: var(--dr-letter-koppen, inherit);
	font-size: var(--dr-maat-h4, 1.25rem);
	font-weight: 600;
}

/* De standaardpijl van de browser weg; hieronder komt er een eigen voor terug. */
.dr-juristen__kop::-webkit-details-marker { display: none; }

.dr-juristen__naam {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

/* Het driehoekje draait mee met open en dicht. */
.dr-juristen__naam::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid var(--juristen-rood);
	border-bottom: 2px solid var(--juristen-rood);
	transform: rotate(-45deg);
	transition: transform 160ms ease-out;
}

.dr-juristen__gebied[open] .dr-juristen__naam::before {
	transform: rotate(45deg);
}

.dr-juristen__aantal {
	font-size: var(--dr-maat-klein, 0.9375rem);
	font-weight: 400;
	color: var(--juristen-stil);
	font-variant-numeric: tabular-nums;
}

/* ---- Profielen ---------------------------------------------------------- */

.dr-juristen__lijst {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--dr-ruimte-m, 1.5rem);
	display: grid;
	gap: var(--dr-ruimte-s, 1rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.dr-juristen__kaart {
	padding: var(--dr-ruimte-s, 1rem);
	border: 1px solid var(--juristen-lijn);
	border-radius: 6px;
	background: #fff;
	transition: border-color 140ms ease-out, transform 140ms ease-out;
}

.dr-juristen__kaart:hover {
	border-color: var(--juristen-turquoise);
}

.dr-juristen__kaart[hidden] { display: none; }

.dr-juristen__titel {
	margin: 0 0 var(--dr-ruimte-2xs, 0.25rem);
	font-size: var(--dr-maat-h4, 1.25rem);
	line-height: 1.28;
}

.dr-juristen__titel a {
	color: var(--juristen-inkt);
	text-decoration: none;
}

.dr-juristen__titel a:hover {
	color: var(--juristen-rood);
}

/*
 * De hele kaart is aanklikbaar zonder dat de link zelf groter wordt: prettig met
 * een muis, en de link blijft één duidelijk doel voor toetsenbord en voorlezer.
 */
.dr-juristen__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dr-juristen__kaart { position: relative; }

.dr-juristen__samenvatting {
	margin: 0 0 var(--dr-ruimte-xs, 0.5rem);
	font-size: var(--dr-maat-klein, 0.9375rem);
	line-height: 1.55;
	color: var(--dr-inkt-zacht, #4a4a4a);
}

.dr-juristen__gebieden {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--juristen-stil);
}

.dr-juristen__niets {
	padding: var(--dr-ruimte-l, 2.5rem) 0;
	color: var(--juristen-stil);
}

/* ---- Klein scherm ------------------------------------------------------- */

@media (max-width: 767px) {
	.dr-juristen__chip { min-height: 44px; }
	.dr-juristen__kop { min-height: 60px; }
	.dr-juristen__lijst { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.dr-juristen__naam::before,
	.dr-juristen__chip,
	.dr-juristen__kaart { transition: none; }
}

/* ---- De pagina van één rechtsgebied ------------------------------------- */

.dr-rechtsgebied {
	--juristen-lijn: var(--dr-lijn, #e3e6e6);
	--juristen-rood: var(--dr-rood, #e10019);
	--juristen-turquoise: var(--dr-turquoise, #46aab2);
	--juristen-inkt: var(--dr-inkt, #191919);
	--juristen-stil: var(--dr-inkt-stil, #6b6b6b);

	max-width: 60rem;
	margin-inline: auto;
	padding: var(--dr-ruimte-xl, 4rem) var(--dr-ruimte-s, 1rem) var(--dr-ruimte-2xl, 6rem);
}

.dr-rechtsgebied__kop { margin-bottom: var(--dr-ruimte-l, 2.5rem); }

.dr-rechtsgebied__stand {
	margin: var(--dr-ruimte-xs, 0.5rem) 0 0;
	font-size: var(--dr-maat-klein, 0.9375rem);
	color: var(--juristen-stil);
	font-variant-numeric: tabular-nums;
}

.dr-rechtsgebied__tekst {
	max-width: var(--dr-leeskolom, 37rem);
	margin-bottom: var(--dr-ruimte-2xl, 6rem);
}

.dr-rechtsgebied__blok { margin-bottom: var(--dr-ruimte-2xl, 6rem); }

.dr-rechtsgebied__blok h2 {
	margin-bottom: var(--dr-ruimte-m, 1.5rem);
	padding-bottom: var(--dr-ruimte-xs, 0.5rem);
	border-bottom: 1px solid var(--juristen-lijn);
}

/*
 * Het slotblok staat op een getinte ondergrond: het is geen inhoud meer maar een
 * uitnodiging, en dat verschil hoort zichtbaar te zijn zonder een streep of kader.
 */
.dr-rechtsgebied__slot {
	padding: var(--dr-ruimte-l, 2.5rem);
	border-radius: 8px;
	background: var(--dr-papier-getint, #f7f8f8);
}

.dr-rechtsgebied__slot h2 { margin-bottom: var(--dr-ruimte-s, 1rem); }
.dr-rechtsgebied__slot p { max-width: var(--dr-leeskolom, 37rem); }

.dr-rechtsgebied__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dr-ruimte-m, 1.5rem);
	margin-top: var(--dr-ruimte-m, 1.5rem);
}

.dr-rechtsgebied__terug { font-size: var(--dr-maat-klein, 0.9375rem); }

@media (max-width: 767px) {
	.dr-rechtsgebied { padding-top: var(--dr-ruimte-l, 2.5rem); }
	.dr-rechtsgebied__slot { padding: var(--dr-ruimte-m, 1.5rem); }
}