/* Supporterkaarten (sjabloon in renderMensen). Vier groepen in leesvolgorde: kop (nummer, naam,
   verwijderen), Wie komen er, Waar staan ze (vaste plek of fiets, dan de plek), Neemt voor je mee.
   Groeperen met witruimte en een haarlijn, geen kaders in kaders. Letterbeeld 14 tot 16 px, kopjes
   als echte kopjes; invoer 16 px zodat iOS niet inzoomt. Komt na apple-voorstel.css en wint daarvan
   met dezelfde opbouw van selectors.

   Breedte: renderMensen zet data-n (1, 2, of 3 = drie of meer). Eén groep: één brede kaart in twee
   kolommen (Wie en Mee links, Waar rechts). Twee: naast elkaar. Drie of meer: zoveel als passen.
   Op een telefoon altijd één kolom. */
html body .mp .mp-mensen { container: mensen / inline-size; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  html body .mp .mp-mensen[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .mp .mp-mensen[data-n="3"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
}

/* ---------- de kaart ---------- */
html body .mp .mp-mens {
  container: mens / inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "wie" "waar" "mee";
  gap: 0; padding: 20px 24px 8px; align-content: start;
}
html body .mp .mp-mens-kop { grid-area: kop; display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
html body .mp .mp-mens .mp-nr { flex: none; }
html body .mp .mp-naam { min-height: 44px; font: 700 21px/1.2 var(--mp-kop); letter-spacing: -.015em; }
html body .mp .mp-mens-weg {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--mp-zacht); cursor: pointer; transition: background-color 160ms ease, color 160ms ease;
}
html body .mp .mp-mens-weg svg { width: 19px; height: 19px; }
html body .mp .mp-mens-weg:hover { background: color-mix(in srgb, var(--mp-tegen) 12%, transparent); color: var(--mp-tegen); }
html body .mp .mp-mens-weg:focus-visible { outline: 3px solid var(--mp-blauw); outline-offset: 2px; }

html body .mp .mp-mens-blok { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 18px 0 20px; border-top: 1px solid color-mix(in srgb, var(--mp-inkt) 10%, transparent); }
html body .mp .mp-mens-wie { grid-area: wie; }
html body .mp .mp-mens-waar { grid-area: waar; }
html body .mp .mp-mens-mee { grid-area: mee; }
html body .mp .mp-blokkop { margin: 0; font: 700 16px/1.25 var(--mp-kop); letter-spacing: -.01em; color: var(--mp-inkt); }

/* één groep op een breed scherm: twee kolommen, zodat er geen lege strook naast Waar ontstaat */
@container mensen (min-width: 780px) {
  html body .mp .mp-mensen[data-n="1"] .mp-mens { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: none; column-gap: 44px; padding: 24px 32px 12px; }
  html body .mp .mp-mensen[data-n="1"] .mp-mens-wie { grid-column: 1; grid-row: 2; }
  html body .mp .mp-mensen[data-n="1"] .mp-mens-mee { grid-column: 1; grid-row: 3; }
  html body .mp .mp-mensen[data-n="1"] .mp-mens-waar { grid-column: 2; grid-row: 2 / span 2; }
  html body .mp .mp-mensen[data-n="1"] .mp-mens-kop { grid-column: 1 / -1; grid-row: 1; }
}

/* ---------- wie ---------- */
html body .mp .mp-mens .mp-chips { gap: 8px; }
html body .mp .mp-mens .mp-chip { width: 48px; height: 58px; border-radius: 12px; }
html body .mp .mp-mens .mp-chip img { height: 48px; max-width: 40px; }

/* ---------- waar ---------- */
html body .mp .mp-seg--vol { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
html body .mp .mp-seg--vol button { justify-content: center; min-height: 44px; font-size: 15px; }
html body .mp .mp-plekken { gap: 0; }
html body .mp .mp-eenplek { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 4px 0 14px; }
html body .mp .mp-eenplek + .mp-eenplek { padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--mp-inkt) 14%, transparent); }
/* het kopje "Waar staan ze" zegt het al; het label blijft voor schermlezers */
html body .mp .mp-eenplek > .mp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
html body .mp .mp-plekkop { align-items: baseline; }
html body .mp .mp-plekkop > span { font-size: 15px; color: var(--mp-zacht); }
html body .mp .mp-plekkop strong { font-size: 28px; }
html body .mp .mp-mens .mp-snel { min-height: 48px; font-size: 16px; }
html body .mp .mp-mens .mp-locatie { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--mp-zacht); }
html body .mp .mp-mens .mp-locatieacties { gap: 4px 18px; font-size: 15px; }
html body .mp .mp-mens .mp-eigenplek { margin: 0; font-size: 15px; }
html body .mp .mp-mens .mp-eigenplek summary { min-height: 40px; display: flex; align-items: center; }
html body .mp .mp-mens .mp-seg:not(.mp-seg--vol) button { min-height: 40px; font-size: 15px; }
html body .mp .mp-mens .mp-reis { margin: 0; font-size: 14.5px; }
html body .mp .mp-mens .mp-plekerbij { justify-self: start; min-height: 40px; font-size: 15px; }
html body .mp .mp-mens .mp-rond { margin: 0; font-size: 15px; line-height: 1.5; }
/* links of rechts hoort bij de plek: direct na de plaatsnaam, dan pas de links en "eigen plek" */
html body .mp .mp-eenplek > .mp-locatieacties { order: 1; }
html body .mp .mp-eenplek > .mp-eigenplek { order: 2; }
html body .mp .mp-eenplek > .mp-reis { order: 3; }
/* in een kaart die er breed genoeg voor is: links of rechts naast de plaatsnaam */
@container mens (min-width: 440px) {
  html body .mp .mp-eenplek { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
  html body .mp .mp-eenplek > * { grid-column: 1 / -1; }
  html body .mp .mp-eenplek > .mp-locatie { grid-column: 1; }
  html body .mp .mp-eenplek > .mp-seg { grid-column: 2; justify-self: end; }
}

/* ---------- neemt mee ---------- */
html body .mp .mp-mens .mp-mee { gap: 8px; }
html body .mp .mp-mens .mp-mee button { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
html body .mp .mp-mens .mp-mee-extra { min-height: 46px; font-size: 16px; }

/* ---------- toevoegen: een balk onder de kaarten ---------- */
html body .mp .mp-mens-plus { grid-column: 1 / -1; height: auto; margin-top: -118px; }
html body .mp .mp-plus { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 12px 20px; font-size: 16px; }
html body .mp .mp-plus i { width: 36px; height: 36px; }
html body .mp .mp-plus i svg { width: 20px; height: 20px; }

/* ---------- telefoon ---------- */
@media (max-width: 640px) {
  html body .mp .mp-mens { padding: 16px 18px 6px; }
  html body .mp .mp-naam { font-size: 20px; }
  html body .mp .mp-mens-plus { margin-top: -88px; }
  html body .mp .mp-plus { min-height: 56px; }
  /* tikvlakken op een telefoon: 44 px of meer */
  html body .mp .mp-mens .mp-mee button { min-height: 44px; }
  html body .mp .mp-mens .mp-chip { width: 50px; height: 60px; }
  html body .mp .mp-mens .mp-locatieacties a, html body .mp .mp-mens .mp-locatieacties .mp-link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { html body .mp .mp-mens-weg { transition: none; } }