/* Voor leden ([mbg_leden]). */

/* Kop met de kaart Mijn MBG; op de telefoon staat de kaart onder de tekst. */
.mbg-leden .mbg-leden__kop-binnen { padding-block: 48px 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; }
.mbg-leden .mbg-leden__kop-tekst { flex: 3 1 460px; min-width: 0; }
.mbg-leden .mbg-leden__kop-tekst .mbg-intro { max-width: 580px; }
.mbg-leden .mbg-leden__mijn { flex: 2 1 380px; min-width: 0; padding: 26px 28px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(36, 49, 25, .12); display: flex; flex-direction: column; gap: 14px; }
.mbg-leden .mbg-leden__mijn-kop { font-family: var(--mbg-font-slab); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--mbg-donker); }
.mbg-leden .mbg-leden__punten { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--mbg-tekst); }
body .mbg-leden .mbg-leden__login { min-height: 52px; font-weight: 600; }
.mbg-leden .mbg-leden__mijn .mbg-klein { font-size: 14px; line-height: 1.5; }

/* Snel naar: tegels met een icoon. */
.mbg-leden .mbg-leden__snel { padding-block: 52px 24px; display: flex; flex-direction: column; gap: 20px; }
.mbg-leden .mbg-leden__tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.mbg-leden .mbg-leden__snelitem { min-width: 0; }
body .mbg-leden .mbg-leden__tegel { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 20px 22px; border: 1px solid var(--mbg-rand); border-radius: 12px; background: #fff; color: var(--mbg-donker); text-decoration: none; }
body .mbg-leden .mbg-leden__tegel:hover { border-color: var(--mbg-rand3); color: var(--mbg-donker); }
.mbg-leden .mbg-leden__tegel-icoon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--mbg-creme); color: var(--mbg-bordeaux); display: inline-flex; align-items: center; justify-content: center; }
.mbg-leden .mbg-leden__tegel-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mbg-leden .mbg-leden__tegel-tekst strong { font-family: var(--mbg-font-slab); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--mbg-blauw); }
.mbg-leden .mbg-leden__tegel:hover .mbg-leden__tegel-tekst strong { color: var(--mbg-bordeaux); }
.mbg-leden .mbg-leden__tegel-tekst span { font-size: 15px; line-height: 1.5; color: var(--mbg-tekst2); }

/* Goed om te weten: één afspraak tegelijk open. */
.mbg-leden .mbg-leden__weten { max-width: 980px; padding-block: 40px 72px; display: flex; flex-direction: column; gap: 16px; }
.mbg-leden .mbg-leden__afspraken { border-top: 1px solid var(--mbg-rand); }
.mbg-leden .mbg-leden__afspraken .mbg-uitklap { border-bottom-color: var(--mbg-rand); scroll-margin-top: 16px; }
.mbg-leden .mbg-leden__vraag { font-size: inherit; line-height: inherit; }
body .mbg-leden .mbg-leden__afspraken .mbg-uitklap__knop { min-height: 60px; font-size: 18px; }
.mbg-leden .mbg-leden__afspraken .mbg-uitklap__knop > span { min-width: 0; }
.mbg-leden .mbg-leden__afspraken .mbg-uitklap__knop .mbg-icoon { color: var(--mbg-bordeaux); }
.mbg-leden .mbg-leden__afspraken .mbg-uitklap__paneel { padding-bottom: 20px; gap: 8px; line-height: 1.65; }
body .mbg-leden .mbg-uitklap__paneel p a { font-weight: 600; overflow-wrap: anywhere; }
body .mbg-leden .mbg-leden__actie { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

@media (max-width: 760px) {
	.mbg-leden .mbg-leden__kop-binnen { padding-block: 28px 32px; flex-direction: column; align-items: stretch; gap: 14px; }
	.mbg-leden .mbg-leden__kop-tekst { flex: none; }
	.mbg-leden .mbg-leden__kop-tekst .mbg-h1 { font-size: 36px; }
	.mbg-leden .mbg-leden__mijn { flex: none; margin-top: 4px; padding: 20px; gap: 12px; box-shadow: 0 10px 24px rgba(36, 49, 25, .12); }
	.mbg-leden .mbg-leden__mijn-kop { font-size: 20px; }
	body .mbg-leden .mbg-leden__login { width: 100%; padding: 0 12px; font-size: 17px; }

	/* Twee tegels naast elkaar, icoon boven de tekst, Afmelden voorop. */
	.mbg-leden .mbg-leden__snel { padding-block: 32px 8px; gap: 14px; }
	.mbg-leden .mbg-leden__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	body .mbg-leden .mbg-leden__tegel { flex-direction: column; gap: 10px; padding: 14px; }
	.mbg-leden .mbg-leden__tegel-icoon { width: 40px; height: 40px; border-radius: 10px; }
	.mbg-leden .mbg-leden__tegel-icoon .mbg-icoon { width: 22px; height: 22px; }
	.mbg-leden .mbg-leden__tegel-tekst strong { font-size: 16px; }
	.mbg-leden .mbg-leden__tegel-tekst span { font-size: 14px; line-height: 1.45; }
	.mbg-leden .mbg-leden__snelitem--afmelden { order: 1; }
	.mbg-leden .mbg-leden__snelitem--formulieren { order: 2; }
	.mbg-leden .mbg-leden__snelitem--fotos { order: 3; }
	.mbg-leden .mbg-leden__snelitem--gegevens { order: 4; }
	.mbg-leden .mbg-leden__snelitem--kleding { order: 5; }
	.mbg-leden .mbg-leden__snelitem--webshop { order: 6; }

	.mbg-leden .mbg-leden__weten { padding-block: 32px 40px; gap: 14px; }
	body .mbg-leden .mbg-leden__afspraken .mbg-uitklap__knop { min-height: 56px; padding: 12px 2px; gap: 14px; font-size: 17px; }
	.mbg-leden .mbg-leden__afspraken .mbg-uitklap__paneel { padding: 0 2px 18px; gap: 10px; }
}