/* Blok: Jubileum / mijlpaal */
.milestone{ display:grid; gap:var(--sp-4); align-items:center; }

/* Getal in een eigen kolom links, met een haarlijn ertussen — de vorm uit het
   ontwerp. Onder 820px valt alles onder elkaar en verdwijnt de lijn. */
.milestone--split{ grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){
	.milestone--split{ grid-template-columns:auto 1px minmax(0,1fr); gap:var(--sp-5); align-items:start; }
	.milestone__rule{ align-self:stretch; background:var(--line); }
	.band .milestone__rule{ background:var(--band-hair); }
	/* Het getal optisch op de eerste tekstregel laten beginnen: de displayfont
	   heeft een hoge kaphoogte, dus een klein duwtje omlaag oogt gelijk. */
	.milestone--split .milestone__figure{ padding-top:.15em; }
	.milestone--split .milestone__body{ max-width:68ch; }
}
@media (max-width:819px){
	.milestone__rule{ display:none; }
}

/* Met foto: tekst naast beeld. */
@media (min-width:900px){
	.milestone--media{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
	.milestone--left .milestone__copy{ order:2; }
}

.milestone__figure{ display:flex; flex-direction:column; gap:.3rem; }
.milestone__copy{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }

.milestone__num{
	font-family:var(--font-display); font-weight:800; letter-spacing:-.02em;
	font-size:clamp(3.6rem, 2rem + 5.5vw, 6.4rem); line-height:.82; color:var(--ink);
	display:flex; align-items:baseline; gap:.18em;
}
/* In de gestapelde variant mag het getal groter; daar staat het alleen. */
.milestone:not(.milestone--split) .milestone__num{
	font-size:clamp(4rem, 2.5rem + 7vw, 9rem); line-height:.9;
}
.milestone__unit{ font-size:.3em; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:700; }

.milestone__title{ max-width:24ch; }
.milestone__body{ max-width:56ch; }
.milestone__body p + p{ margin-top:1rem; }

/* Kleine feiten onder de tekst (opgericht / modellen / op maat). */
.milestone__mini{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:.4rem; }
.milestone__mini > div{ display:flex; flex-direction:column; gap:.15rem; }
.milestone__mini strong{
	font-family:var(--font-display); font-weight:800; font-size:1.6rem; letter-spacing:-.01em;
}
.milestone__mini span{
	font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:.14em;
	text-transform:uppercase; color:var(--ink-mute);
}

.milestone__media{ margin:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.milestone__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* Op een donkere ondergrond */
.band .milestone__num{ color:#fff; }
.band .milestone__unit{ color:var(--brand-4); }
.band .milestone__mini span{ color:rgba(255,255,255,.55); }
.band .milestone__body{ color:rgba(255,255,255,.82); }