/* Wat we doen ([mbg_wat_we_doen]). */

/* Kop met een jaar bij de MBG: vier kaarten naast elkaar, op de telefoon uitklapblokken. */
.mbg-wat-we-doen .mbg-wat-we-doen__kop-binnen { padding-block: 48px 52px; display: flex; flex-direction: column; gap: 28px; }
.mbg-wat-we-doen .mbg-wat-we-doen__kop-tekst { max-width: 760px; }
.mbg-wat-we-doen .mbg-wat-we-doen__jaar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mbg-wat-we-doen .mbg-wat-we-doen__seizoen { min-width: 0; padding: 18px 18px 20px; border-bottom: 0; border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
body .mbg-wat-we-doen .mbg-wat-we-doen__seizoen .mbg-uitklap__knop { min-height: 0; white-space: normal; padding: 0; font-family: var(--mbg-font-slab); font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--mbg-bordeaux); }
.mbg-wat-we-doen .mbg-wat-we-doen__seizoen .mbg-uitklap__knop .mbg-icoon { display: none; color: var(--mbg-bordeaux); }
body .mbg-wat-we-doen .mbg-wat-we-doen__seizoen .mbg-uitklap__paneel { padding: 0 0 0 18px; list-style: disc; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--mbg-donker); }

/* Met de hele groep */
.mbg-wat-we-doen .mbg-wat-we-doen__heel { --mbg-band-kleur: #fff; }
.mbg-wat-we-doen .mbg-wat-we-doen__heel-binnen { padding-block: 56px 24px; display: flex; flex-direction: column; gap: 22px; }
.mbg-wat-we-doen .mbg-wat-we-doen__momenten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mbg-wat-we-doen .mbg-wat-we-doen__moment { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mbg-wat-we-doen .mbg-wat-we-doen__moment .mbg-h3 { font-size: 21px; }
.mbg-wat-we-doen .mbg-wat-we-doen__moment .mbg-tekst { font-size: 16px; line-height: 1.6; }
.mbg-wat-we-doen .mbg-wat-we-doen__erbij { font-weight: 500; color: var(--mbg-tekst2); }
.mbg-wat-we-doen img.mbg-wat-we-doen__foto, .mbg-wat-we-doen .mbg-wat-we-doen__geenfoto { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; }
/* Zonder foto: een vlak met het logo, zodat de drie kaarten gelijk blijven. */
.mbg-wat-we-doen .mbg-wat-we-doen__geenfoto { display: flex; align-items: center; justify-content: center; background: var(--mbg-creme); }
.mbg-wat-we-doen .mbg-wat-we-doen__geenfoto img.mbg-wat-we-doen__geenfoto-logo { width: 72px; height: auto; opacity: .7; }
.mbg-wat-we-doen .mbg-wat-we-doen__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mbg-wat-we-doen .mbg-wat-we-doen__kaartje { min-width: 0; padding: 20px 22px; border: 1px solid var(--mbg-rand); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; color: var(--mbg-tekst); }
.mbg-wat-we-doen .mbg-wat-we-doen__kaartje .mbg-h3 { font-size: 19px; }

/* Per groep: een keuze met de badges en de kaarten van die groep. */
.mbg-wat-we-doen .mbg-wat-we-doen__per { padding-block: 40px 72px; display: flex; flex-direction: column; gap: 20px; }
.mbg-wat-we-doen .mbg-wat-we-doen__chips { padding-bottom: 12px; border-bottom: 1px solid var(--mbg-rand); }
body .mbg-wat-we-doen .mbg-wat-we-doen__chips .mbg-chip { min-height: 46px; padding-left: 10px; }
body .mbg-wat-we-doen .mbg-wat-we-doen__chips .mbg-chip img { width: 30px; height: 30px; }
body .mbg-wat-we-doen .mbg-wat-we-doen__chips .mbg-chip[aria-pressed="true"] { border-color: var(--mbg-bordeaux); background: var(--mbg-bordeaux); color: #fff; }
.mbg-wat-we-doen .mbg-wat-we-doen__panelen { display: flex; flex-direction: column; gap: 16px; }
.mbg-wat-we-doen .mbg-wat-we-doen__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mbg-wat-we-doen .mbg-wat-we-doen__item { min-width: 0; padding: 20px 22px; border-radius: 12px; background: var(--mbg-creme); display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--mbg-tekst); }
.mbg-wat-we-doen .mbg-wat-we-doen__item .mbg-h3 { font-size: 19px; }
.mbg-wat-we-doen .mbg-wat-we-doen__wanneer { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mbg-bordeaux); }

@media (max-width: 1100px) {
	.mbg-wat-we-doen .mbg-wat-we-doen__jaar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mbg-wat-we-doen .mbg-wat-we-doen__momenten, .mbg-wat-we-doen .mbg-wat-we-doen__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	/* Op de telefoon komt "Per groep" vóór "Met de hele groep". */
	.mbg-wat-we-doen { display: flex; flex-direction: column; }
	.mbg-wat-we-doen .mbg-wat-we-doen__kop { order: 1; }
	.mbg-wat-we-doen .mbg-wat-we-doen__per { order: 2; }
	.mbg-wat-we-doen .mbg-wat-we-doen__heel { order: 3; }

	.mbg-wat-we-doen .mbg-wat-we-doen__kop-binnen { padding-block: 28px 32px; gap: 14px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__kop-tekst .mbg-h1 { font-size: 36px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__jaar-kop { margin-top: 12px; font-size: 28px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__jaar { display: flex; flex-direction: column; gap: 1px; overflow: hidden; border-radius: 12px; background: var(--mbg-rand2); }
	.mbg-wat-we-doen .mbg-wat-we-doen__seizoen { padding: 0; gap: 0; border-radius: 0; }
	body .mbg-wat-we-doen .mbg-wat-we-doen__seizoen .mbg-uitklap__knop { min-height: 54px; padding: 0 16px; gap: 12px; font-size: 18px; letter-spacing: normal; text-transform: none; }
	.mbg-wat-we-doen .mbg-wat-we-doen__seizoen .mbg-uitklap__knop .mbg-icoon { display: block; }
	body .mbg-wat-we-doen .mbg-wat-we-doen__seizoen .mbg-uitklap__paneel { padding: 0 16px 16px 36px; font-size: 15px; line-height: 1.5; color: var(--mbg-tekst); }

	.mbg-wat-we-doen .mbg-wat-we-doen__per { padding-block: 32px 40px; gap: 14px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__per .mbg-h2 { font-size: 30px; }
	/* Zonder scroll-padding klikt de rij bij het laden een goot naar links. */
	.mbg-wat-we-doen .mbg-wat-we-doen__chips { border-bottom: 0; scroll-padding-inline: var(--mbg-goot); }
	body .mbg-wat-we-doen .mbg-wat-we-doen__chips .mbg-chip { padding-left: 8px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__items { grid-template-columns: 1fr; gap: 10px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__item { padding: 16px 18px; gap: 6px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__item .mbg-h3 { font-size: 18px; line-height: 1.3; }
	.mbg-wat-we-doen .mbg-wat-we-doen__wanneer { font-size: 12px; }

	.mbg-wat-we-doen .mbg-wat-we-doen__heel { --mbg-band-kleur: var(--mbg-creme); }
	.mbg-wat-we-doen .mbg-wat-we-doen__heel-binnen { padding-block: 32px 40px; gap: 26px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__heel-binnen > .mbg-h2 { margin-bottom: -8px; font-size: 30px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__momenten { display: contents; }
	.mbg-wat-we-doen .mbg-wat-we-doen__moment { gap: 10px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__moment .mbg-h3 { margin-top: 4px; font-size: 19px; line-height: 1.3; }
	.mbg-wat-we-doen img.mbg-wat-we-doen__foto { height: 200px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__extra { grid-template-columns: 1fr; gap: 10px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__kaartje { padding: 18px; gap: 6px; border-color: transparent; background: #fff; font-size: 15px; }
	.mbg-wat-we-doen .mbg-wat-we-doen__kaartje .mbg-h3 { font-size: 18px; line-height: 1.3; }
}