/* ==========================================================================
   AK Persoonsbeheer — weergave op de site

   De plugin kan op een thema draaien zonder de tokens van de Andreaskerk,
   dus elke var() heeft een terugvalwaarde. Staat het thema er wel, dan neemt
   de plugin die kleuren vanzelf over.

   Uitsluitend flexbox, conform de bouwafspraken. Let op de valkuil dat
   flex-basis in een kolom de hóógte is: in de media query staat daarom overal
   flex:0 0 auto met width:100%.
   ========================================================================== */

/* Niet aannemen dat het thema border-box zet: zonder deze regel telt de
   padding van een kaartje bij de breedte op en loopt de rij over. */
.akp,.akp *,.akp *::before,.akp *::after{box-sizing:border-box}

.akp{
  --akp-paars:      var(--paars, #4E1668);
  --akp-oranje:     var(--oranje, #F5821F);
  --akp-groen:      var(--groen, #7DC242);
  --akp-rood:       var(--rood, #E63329);
  --akp-rood-tekst: var(--rood-tekst, #C4241B);
  --akp-wit:        var(--wit, #FFFFFF);
  --akp-creme:      var(--creme, #FEF9F3);
  --akp-zand:       var(--zand, #F9F1E8);
  --akp-lijn:       var(--lijn, #EFE4D8);
  --akp-kop:        var(--kop, #2B1B4B);
  --akp-tekst:      var(--tekst, #5A5570);
  --akp-radius:     var(--radius, 10px);
  --akp-radius-s:   var(--radius-s, 7px);
  --akp-schaduw:    var(--schaduw, 0 10px 30px rgba(43,27,75,.07));
  --akp-font:       var(--font, 'Poppins', 'Segoe UI', system-ui, sans-serif);

  font-family:var(--akp-font);color:var(--akp-tekst);
}

.akp ul{list-style:none;margin:0;padding:0}
.akp li{margin:0}
.akp .akp-naam{color:var(--akp-kop);font-weight:600}
.akp .akp-rol{color:var(--akp-tekst)}

/* ---------- Contact: ronde icoontjes ----------
   Volledige adressen en nummers onder elkaar maken een kaartje snel vol,
   zeker zodra er meerdere personen op staan. Eén rond icoontje per gegeven
   houdt het rustig; het gegeven zelf zit in title en aria-label, dus bij
   hover en voor een schermlezer verdwijnt er niets. Het vlakje is 42px, ruim
   genoeg om met een duim te raken. */
.akp-contact{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:12px}
.akp-contact li{display:flex}
.akp-c{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  background:var(--akp-zand);color:var(--akp-paars);
  border:1px solid rgba(43,27,75,.14);
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.akp-c:hover,.akp-c:focus-visible{background:var(--akp-paars);color:var(--akp-wit);border-color:var(--akp-paars);text-decoration:none}
.akp-ico{flex:0 0 20px;width:20px;height:20px}
.akp-veldnaam{color:var(--akp-tekst)}

/* Alleen voor een schermlezer: het adres achter het mailicoontje. */
.akp-verborgen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.akp-groepsmail{
  display:flex;flex-direction:row;align-items:center;gap:8px;
  margin:0 0 1.15em;font-size:.9375rem;
}
.akp-groepsmail .akp-ico{flex:0 0 15px;width:15px;height:15px;color:var(--akp-rood-tekst)}
.akp-groepsmail a,.akp-groepsmail .akp-mail{color:var(--akp-rood-tekst);overflow-wrap:anywhere}

/* ---------- Portret ---------- */
/* Twee klassen i.p.v. één: Elementor's eigen '.elementor img{border-radius:0}'
   (uit custom-frontend.min.css) is anders specifieker dan een kale
   .akp-foto-klasse en wint dan het rondje weg. .akp-foto/.akp-initiaal staan
   altijd binnen de .akp-wrapper (zie render()), dus dit raakt niets anders. */
.akp .akp-foto,.akp .akp-initiaal{
  width:132px;height:132px;border-radius:50%;object-fit:cover;
  box-shadow:var(--akp-schaduw);
}
.akp-initiaal{
  display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;font-weight:700;color:#fff;background:var(--akp-paars);
}
.akp-initiaal.ico--oranje{background:var(--akp-oranje);color:#3A1C00}
.akp-initiaal.ico--groen{background:var(--akp-groen);color:#12300A}
.akp-initiaal.ico--rood{background:var(--akp-rood-tekst)}

/* ---------- Stijl: personen ---------- */
.akp-personen{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}
.akp-personen .akp-persoon{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  flex:1 1 170px;max-width:240px;
}
.akp-personen .akp-foto,.akp-personen .akp-initiaal{margin-bottom:16px}
/* rem->px: de site staat op een 18px wortel, het ontwerp rekende met 16px
   (zie de vaste afspraak hierover in de Overdracht van de site-bouw) — op de
   oude wortel waren dit .875rem/.9rem, hier dus 14px/16.2px geworden. Met
   vaste px-maten blijft het net zo compact als in het ontwerp bedoeld was. */
.akp-personen .akp-naam{font-size:16.32px;margin:0 0 4px;line-height:1.3}
.akp-personen .akp-rol{margin:0;font-size:14.4px}
.akp-personen .akp-bio{margin:8px 0 0;font-size:.9rem}
.akp-personen .akp-contact{justify-content:center}

/* ---------- Stijl: lijst ---------- */
.akp-lijst{display:flex;flex-direction:column;gap:0}
.akp-regel{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 22px;
  padding:13px 0;border-bottom:1px solid var(--akp-zand);
}
.akp-regel:last-child{border-bottom:0}
.akp-regel-tekst{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.akp-lijst .akp-naam{font-size:1rem}
.akp-lijst .akp-rol{font-size:.9rem}
.akp-lijst .akp-contact{margin-top:0}

/* ---------- Stijl: kaart ---------- */
.akp-kaarten{display:flex;flex-direction:row;flex-wrap:wrap;gap:22px}
.akp-kaart{
  display:flex;flex-direction:row;align-items:flex-start;gap:16px;
  flex:1 1 260px;min-width:0;
  background:var(--akp-creme);border-radius:var(--akp-radius-s);padding:18px;
}
.akp-kaart .akp-foto,.akp-kaart .akp-initiaal{
  flex:0 0 64px;width:64px;height:64px;font-size:1.35rem;margin:0;
}
.akp-kaart-tekst{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}
.akp-kaart .akp-rol{
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--akp-rood-tekst);margin-bottom:2px;
}
.akp-kaart .akp-naam{font-size:1.02rem;line-height:1.35}

/* ---------- Stijl: JA! ---------- */
.akp-ja{display:flex;flex-direction:row;flex-wrap:wrap;gap:26px}
.akp-ja-item{
  display:flex;flex-direction:column;flex:1 1 240px;max-width:320px;
  background:var(--akp-wit);border-radius:var(--akp-radius);overflow:hidden;
  box-shadow:6px 6px 0 var(--akp-kop);
}
.akp-ja-item .akp-foto,.akp-ja-item .akp-initiaal{
  width:100%;height:auto;aspect-ratio:1/1;border-radius:0;box-shadow:none;
  font-size:4rem;
}
.akp-ja-tekst{display:flex;flex-direction:column;padding:20px 20px 22px}
.akp-ja .akp-naam{
  font-family:'Anton', var(--akp-font);font-weight:400;letter-spacing:.01em;
  font-size:1.5rem;line-height:1.1;text-transform:uppercase;
}
.akp-ja .akp-rol{margin-top:4px;font-size:.9rem;font-weight:600;color:var(--akp-rood-tekst)}
.akp-ja .akp-bio{margin-top:10px;font-size:.9rem}

/* ---------- Stijl: detail ---------- */
.akp-detail{display:flex;flex-direction:row;align-items:flex-start;gap:28px}
.akp-detail .akp-foto,.akp-detail .akp-initiaal{flex:0 0 132px}
.akp-detail-tekst{flex:1 1 320px;min-width:0}
.akp-detail .akp-naam{font-size:1.2rem;margin:0 0 4px}
.akp-detail .akp-rol{margin:0 0 .9em;font-size:.9375rem}

/* ---------- Smalle schermen ---------- */
@media (max-width:760px){
  .akp-personen{gap:24px}
  .akp-kaarten{gap:14px}
  .akp-kaart,.akp-ja-item{flex:0 0 auto;width:100%;max-width:none}
  .akp-detail{flex-direction:column;gap:18px}
  .akp-detail .akp-foto,.akp-detail .akp-initiaal,
  .akp-detail-tekst{flex:0 0 auto;width:100%}
  .akp-detail .akp-foto,.akp-detail .akp-initiaal{width:110px;height:110px}
  .akp-regel{flex-direction:column;align-items:flex-start}
}