/* Geschiedenis ([mbg_geschiedenis]). */

/* Kop met de foto van de opening van de blokhut; op de telefoon over de hele breedte. */
.mbg-geschiedenis .mbg-geschiedenis__kop-binnen { padding-block: 48px 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; }
.mbg-geschiedenis .mbg-geschiedenis__kop-tekst { flex: 3 1 480px; min-width: 0; }
.mbg-geschiedenis .mbg-geschiedenis__kop-tekst .mbg-intro { max-width: 620px; }
.mbg-geschiedenis .mbg-geschiedenis__opening { flex: 1 1 260px; min-width: 0; max-width: 300px; }
.mbg-geschiedenis .mbg-geschiedenis__opening .mbg-lijst-foto { height: 340px; transform: rotate(2deg); }
.mbg-geschiedenis .mbg-geschiedenis__onderschrift { margin-top: 8px; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--mbg-tekst2); }
.mbg-geschiedenis .mbg-geschiedenis__opening .mbg-geschiedenis__onderschrift { margin-top: 14px; }

/* De tijdlijn: jaar, een stip met een lijn, en wat er gebeurde. */
.mbg-geschiedenis .mbg-geschiedenis__jaren { max-width: 980px; padding-block: 56px 40px; display: flex; flex-direction: column; gap: 24px; }
.mbg-geschiedenis .mbg-geschiedenis__moment { display: grid; grid-template-columns: 110px 14px minmax(0, 1fr); column-gap: 24px; }
.mbg-geschiedenis .mbg-geschiedenis__jaar { padding-top: 2px; text-align: right; font-family: var(--mbg-font-kop); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--mbg-blauw); }
.mbg-geschiedenis .mbg-geschiedenis__lijn { display: flex; flex-direction: column; align-items: center; }
.mbg-geschiedenis .mbg-geschiedenis__lijn::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 8px; border-radius: 50%; background: var(--mbg-bordeaux); }
.mbg-geschiedenis .mbg-geschiedenis__lijn::after { content: ""; flex: 1 1 auto; width: 2px; background: var(--mbg-rand); }
.mbg-geschiedenis .mbg-geschiedenis__moment:last-child .mbg-geschiedenis__lijn::after { visibility: hidden; }
.mbg-geschiedenis .mbg-geschiedenis__wat { min-width: 0; padding-bottom: 28px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.6; color: var(--mbg-tekst); }
.mbg-geschiedenis .mbg-geschiedenis__wat .mbg-h3 { font-size: 19px; }

/* Bisschop Bekkers */
.mbg-geschiedenis .mbg-geschiedenis__bekkers-binnen { padding-block: 60px 68px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 56px; }
.mbg-geschiedenis .mbg-geschiedenis__bekkers-tekst { flex: 3 1 520px; min-width: 0; gap: 16px; }
.mbg-geschiedenis .mbg-geschiedenis__bekkers-tekst .mbg-tekst { line-height: 1.7; }
.mbg-geschiedenis .mbg-geschiedenis__bekkers-zij { flex: 2 1 340px; min-width: 0; max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
/* Vierkant, en van boven af, zodat het hoofd er niet af valt. */
.mbg-geschiedenis img.mbg-geschiedenis__portret { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 0%; border-radius: 10px; filter: grayscale(1); }
.mbg-geschiedenis .mbg-geschiedenis__levensloop { padding: 18px 20px; border-radius: 12px; background: #fff; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 14px; font-size: 15px; line-height: 1.5; }
.mbg-geschiedenis .mbg-geschiedenis__levensloop dt { font-weight: 700; color: var(--mbg-blauw); }

@media (max-width: 760px) {
	.mbg-geschiedenis .mbg-geschiedenis__kop-binnen { padding-block: 28px; display: block; }
	.mbg-geschiedenis .mbg-geschiedenis__kop-tekst .mbg-h1 { font-size: 36px; }
	.mbg-geschiedenis .mbg-geschiedenis__opening { max-width: none; margin-top: 22px; }
	/* De foto van rand tot rand, ook als het thema de pagina iets inspringt. */
	.mbg-geschiedenis .mbg-geschiedenis__opening .mbg-lijst-foto { width: 100vw; height: auto; margin-inline: calc(50% - 50vw); border: 0; box-shadow: none; transform: none; }
	.mbg-geschiedenis .mbg-geschiedenis__opening .mbg-lijst-foto img { height: auto; max-height: 440px; }
	.mbg-geschiedenis .mbg-geschiedenis__opening .mbg-geschiedenis__onderschrift { margin-top: 10px; }

	.mbg-geschiedenis .mbg-geschiedenis__jaren { padding-block: 32px 20px; gap: 20px; }
	.mbg-geschiedenis .mbg-geschiedenis__jaren .mbg-h2 { font-size: 30px; }
	.mbg-geschiedenis .mbg-geschiedenis__moment { grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; }
	.mbg-geschiedenis .mbg-geschiedenis__jaar { grid-column: 2; grid-row: 1; padding-top: 0; text-align: left; font-size: 20px; line-height: 1.2; }
	.mbg-geschiedenis .mbg-geschiedenis__lijn { grid-column: 1; grid-row: 1 / span 2; }
	.mbg-geschiedenis .mbg-geschiedenis__lijn::before { width: 12px; height: 12px; margin-top: 6px; }
	.mbg-geschiedenis .mbg-geschiedenis__lijn::after { margin-top: 4px; }
	.mbg-geschiedenis .mbg-geschiedenis__wat { grid-column: 2; grid-row: 2; padding-bottom: 26px; }
	.mbg-geschiedenis .mbg-geschiedenis__wat .mbg-h3 { font-size: 18px; line-height: 1.3; }

	/* Op de telefoon eerst het portret en de jaartallen, dan het verhaal. */
	.mbg-geschiedenis .mbg-geschiedenis__bekkers-binnen { padding-block: 32px 40px; flex-direction: column; align-items: stretch; gap: 16px; }
	.mbg-geschiedenis .mbg-geschiedenis__bekkers-tekst { display: contents; }
	.mbg-geschiedenis .mbg-geschiedenis__bekkers-tekst .mbg-h2 { font-size: 30px; }
	.mbg-geschiedenis .mbg-geschiedenis__bekkers-tekst .mbg-tekst { order: 2; line-height: 1.65; }
	.mbg-geschiedenis .mbg-geschiedenis__bekkers-zij { order: 1; flex: none; max-width: none; gap: 16px; margin-bottom: 4px; }
	.mbg-geschiedenis .mbg-geschiedenis__levensloop { padding: 16px 18px; grid-template-columns: 70px minmax(0, 1fr); gap: 8px 12px; line-height: 1.45; }
}