/* Over ons ([mbg_over]). */

/* Kop met twee foto's; op de telefoon de tekst eerst en de foto's eronder. */
.mbg-over .mbg-over__kop { position: relative; }
.mbg-over .mbg-over__kop-binnen { padding-block: 48px 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 36px 56px; }
.mbg-over .mbg-over__kop-tekst { flex: 1 1 460px; min-width: 0; gap: 16px; }
.mbg-over .mbg-over__kop-tekst .mbg-intro { line-height: 1.65; }
.mbg-over .mbg-over__fotos { flex: 1 1 420px; min-width: 0; position: relative; height: 360px; }
.mbg-over .mbg-over__fotos .mbg-lijst-foto { position: absolute; }
.mbg-over .mbg-over__fotos .is-1 { left: 0; top: 8px; width: 80%; height: 270px; transform: rotate(-3deg); }
.mbg-over .mbg-over__fotos .is-2 { right: 0; bottom: 0; width: 48%; height: 170px; transform: rotate(4deg); }
.mbg-over .mbg-over__golf { display: block; width: 100%; height: 32px; }

/* De groep in vier feiten */
.mbg-over .mbg-over__feiten-binnen { padding-block: 40px 16px; }
.mbg-over .mbg-over__feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mbg-over .mbg-over__feiten li { min-width: 0; padding: 20px; border: 1px solid var(--mbg-rand); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.mbg-over .mbg-over__feiten strong { font-family: var(--mbg-font-kop); font-weight: 500; font-size: 34px; line-height: 1; color: var(--mbg-blauw); }
.mbg-over .mbg-over__feiten span { font-size: 15px; line-height: 1.45; color: var(--mbg-tekst2); }

/* Vrijwilligerswerk en hoe de groep in elkaar zit */
.mbg-over .mbg-over__werk { padding-block: 40px 56px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; }
.mbg-over .mbg-over__werk-tekst { flex: 3 1 480px; min-width: 0; }
.mbg-over .mbg-over__werk-tekst .mbg-tekst { line-height: 1.7; }
.mbg-over .mbg-over__opbouw { flex: 2 1 360px; min-width: 0; padding: 24px; border-radius: 14px; background: var(--mbg-creme); display: flex; flex-direction: column; gap: 14px; }
.mbg-over .mbg-over__opbouwlijst { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; }
/* Breed staat alles open: de knop is dan gewoon de term. */
.mbg-over .mbg-over__onderdeel { border-bottom: 0; }
body .mbg-over .mbg-over__onderdeel .mbg-uitklap__knop { display: block; width: auto; white-space: normal; min-height: 0; padding: 0; font-family: var(--mbg-font); font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--mbg-donker); }
.mbg-over .mbg-over__onderdeel .mbg-uitklap__knop .mbg-icoon { display: none; color: var(--mbg-bordeaux); }
.mbg-over .mbg-over__onderdeel .mbg-uitklap__paneel { display: block; padding: 0; font-size: 15px; line-height: 1.5; color: var(--mbg-tekst2); }
body .mbg-over .mbg-over__onderdeel a { font-weight: 600; }

/* Steun ons */
.mbg-over .mbg-over__steun-binnen { padding-block: 60px 64px; display: flex; flex-direction: column; gap: 22px; }
.mbg-over .mbg-over__steun-kop { max-width: 720px; gap: 10px; }
.mbg-over .mbg-over__steun-kop .mbg-tekst { line-height: 1.6; }
.mbg-over .mbg-over__steun-rij { display: flex; flex-wrap: wrap; gap: 18px; }
.mbg-over .mbg-over__club { flex: 3 1 420px; min-width: 0; padding: 26px 28px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--mbg-tekst); }
.mbg-over .mbg-over__club-titel { font-family: var(--mbg-font-kop); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--mbg-blauw); }
body .mbg-over .mbg-over__club-lijst { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.mbg-over .mbg-over__acties { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mbg-over .mbg-over__actie { padding: 22px 24px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--mbg-tekst); }
.mbg-over .mbg-over__actie .mbg-h3 { font-size: 19px; }

/* Meer over de MBG */
.mbg-over .mbg-over__meer { padding-block: 48px 64px; }
.mbg-over .mbg-over__meerlijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mbg-over .mbg-over__meerlijst > li { min-width: 0; }
body .mbg-over .mbg-over__meerlink { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 20px 22px; border: 1px solid var(--mbg-rand); border-radius: 12px; color: var(--mbg-donker); text-decoration: none; }
body .mbg-over .mbg-over__meerlink:hover { border-color: var(--mbg-rand3); color: var(--mbg-donker); }
.mbg-over .mbg-over__meertekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mbg-over .mbg-over__meertekst strong { font-family: var(--mbg-font-slab); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--mbg-blauw); }
.mbg-over .mbg-over__meertekst span { font-size: 15px; color: var(--mbg-tekst2); }
.mbg-over .mbg-over__pijl { flex: none; color: var(--mbg-blauw); }

@media (max-width: 1100px) {
	.mbg-over .mbg-over__feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.mbg-over .mbg-over__kop { overflow: hidden; }
	.mbg-over .mbg-over__kop-binnen { padding-block: 28px 8px; display: block; }
	.mbg-over .mbg-over__kop-tekst { gap: 14px; }
	.mbg-over .mbg-over__kop-tekst .mbg-h1 { font-size: 36px; }
	.mbg-over .mbg-over__kop-tekst .mbg-intro { line-height: 1.6; }
	.mbg-over .mbg-over__fotos { height: 220px; margin: 6px calc(-1 * var(--mbg-goot)) 0; }
	.mbg-over .mbg-over__fotos .mbg-lijst-foto { border-width: 6px; box-shadow: 0 10px 24px rgba(36, 49, 25, .2); }
	.mbg-over .mbg-over__fotos .is-1 { left: 18px; top: 10px; width: 62%; height: 158px; }
	.mbg-over .mbg-over__fotos .is-2 { right: 18px; top: 74px; bottom: auto; width: 44%; height: 116px; }
	.mbg-over .mbg-over__golf { margin-top: -20px; }

	.mbg-over .mbg-over__feiten-binnen { padding-block: 16px 8px; }
	.mbg-over .mbg-over__feiten { gap: 10px; }
	.mbg-over .mbg-over__feiten li { padding: 14px; border-radius: 10px; }
	.mbg-over .mbg-over__feiten strong { font-size: 22px; line-height: 1.1; }
	.mbg-over .mbg-over__feiten span { font-size: 14px; line-height: 1.4; }

	.mbg-over .mbg-over__werk { padding-block: 32px 40px; flex-direction: column; align-items: stretch; gap: 0; }
	.mbg-over .mbg-over__werk-tekst .mbg-h2 { font-size: 30px; }
	.mbg-over .mbg-over__werk-tekst .mbg-tekst { line-height: 1.65; }
	.mbg-over .mbg-over__opbouw { margin-top: 24px; padding: 18px 16px 6px; gap: 8px; }
	.mbg-over .mbg-over__opbouw .mbg-h3 { font-size: 19px; line-height: 1.3; }
	.mbg-over .mbg-over__opbouwlijst { gap: 0; }
	.mbg-over .mbg-over__onderdeel { border-top: 1px solid var(--mbg-rand); }
	body .mbg-over .mbg-over__onderdeel .mbg-uitklap__knop { display: flex; width: 100%; min-height: 52px; padding: 0 2px; gap: 12px; font-size: 16px; }
	.mbg-over .mbg-over__onderdeel .mbg-uitklap__knop .mbg-icoon { display: block; }
	body .mbg-over .mbg-over__onderdeel .mbg-uitklap__knop:hover { color: var(--mbg-bordeaux); }
	.mbg-over .mbg-over__onderdeel .mbg-uitklap__paneel { padding: 0 2px 14px; line-height: 1.6; }

	.mbg-over .mbg-over__steun-binnen { padding-block: 32px 36px; gap: 14px; }
	.mbg-over .mbg-over__steun-kop { gap: 14px; }
	.mbg-over .mbg-over__steun-kop .mbg-h2 { font-size: 30px; }
	.mbg-over .mbg-over__steun-rij { flex-direction: column; gap: 14px; }
	.mbg-over .mbg-over__club { flex: none; margin-top: 4px; padding: 20px 18px; align-items: stretch; }
	.mbg-over .mbg-over__club-titel { font-size: 26px; }
	body .mbg-over .mbg-over__club-lijst { gap: 6px; }
	body .mbg-over .mbg-over__aanmelden { min-height: 52px; margin-top: 4px; font-size: 17px; }
	.mbg-over .mbg-over__acties { flex: none; gap: 14px; }
	.mbg-over .mbg-over__actie { padding: 18px; gap: 6px; }
	.mbg-over .mbg-over__actie .mbg-h3 { font-size: 18px; line-height: 1.3; }

	.mbg-over .mbg-over__meer { padding-block: 32px 40px; }
	.mbg-over .mbg-over__meerlijst { grid-template-columns: 1fr; gap: 8px; }
	body .mbg-over .mbg-over__meerlink { align-items: center; min-height: 64px; padding: 10px 14px; }
	.mbg-over .mbg-over__meertekst { gap: 0; }
	.mbg-over .mbg-over__meertekst strong { font-size: 17px; }
	.mbg-over .mbg-over__meertekst span { font-size: 14px; }
}