/*
 * 21 — DIENSTEN (homepage)
 * Drie rijen: nummerbadge, titel, omschrijving, pijl. Lijn tussen de rijen.
 */

.mi-dienst {
	display: grid;
	grid-template-columns: 80px minmax(240px, 1.1fr) minmax(0, 1.4fr) 60px;
	align-items: center; /* badge, titel, tekst en pijl op één middenlijn */
	gap: 28px;
	padding: 42px 0;
}

.mi-dienst + .mi-dienst {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

/* Twee klassen diep: WordPress zet zelf ":root :where(.is-layout-flow) > *"
   met een blokmarge op elk kind en die won anders. */
.mi-diensten .mi-dienst > * {
	margin: 0;
}

.mi-dienst .mi-nummer {
	justify-self: start;
}

.mi-dienst h3 {
	line-height: 1.08;
}

.mi-dienst .mi-zacht {
	line-height: 1.65;
}

.mi-dienst .mi-pijl {
	justify-self: end;
}

/* Mobiel: titel en pijl op de eerste regel, omschrijving eronder over de
   volle breedte. De nummerbadge valt weg: die kostte een eigen kolom (de
   omschrijving hield nog 178px over) en trok de aandacht naar het cijfer in
   plaats van naar de dienst. Op desktop blijft alles zoals het was. */
@media (max-width: 781px) {
	.mi-dienst {
		grid-template-columns: 1fr auto;
		column-gap: 20px;
		row-gap: 8px;
		padding: 28px 0;
	}

	.mi-dienst .mi-nummer {
		display: none;
	}

	.mi-dienst h3 {
		grid-column: 1;
		grid-row: 1;
	}

	.mi-dienst .mi-pijl {
		grid-column: 2;
		grid-row: 1;
	}

	.mi-dienst .mi-zacht {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Hele rij klikbaar (vv-klikvlak): pijl schuift mee bij hover over de rij.
   Let op: geen transform op de link of de rij, dat breekt het klikvlak
   (WERKWIJZE §9); daarom schuift de pijl via padding. */
.mi-dienst .mi-pijl a {
	display: inline-block;
	transition: padding-left 0.2s ease, opacity 0.2s ease;
}

.mi-dienst:hover .mi-pijl a,
.mi-dienst:focus-within .mi-pijl a {
	padding-left: 6px;
	opacity: 1;
}

/* Titel: limoen lijn groeit van links naar rechts bij hover over de rij.
   justify-self: start houdt de kop zo breed als het woord, dus ook de lijn. */
.mi-dienst h3 {
	justify-self: start;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	padding-bottom: 4px;
	transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mi-dienst:hover h3,
.mi-dienst:focus-within h3 {
	background-size: 100% 2px;
}