/* ============================================================
   hub.css — de "persoon centraal"-visual (.pc-hub).
   Letterlijk overgenomen uit platform-concept.css / -ab.css; alleen de
   paginascope .page-platform-concept is eraf gehaald, zodat dezelfde visual
   ook buiten de platformpagina's te gebruiken is (home: sectie Onze visie).
   Laad dit bestand op elke pagina die .pc-hub gebruikt.
   ============================================================ */

/* ---------- persoon-hub (persoon centraal, platform faciliteert relatie) ---------- */
.pc-hub-grid{display:grid;gap:44px;align-items:center;}
@media(min-width:1080px){
.pc-hub-grid{grid-template-columns:0.82fr 1.18fr;gap:52px;}
}
.pc-hub-copy h2{margin-top:12px;}
.pc-hub-cta{align-items:center;gap:22px;}
.pc-hub-cta .btn svg{width:18px;height:18px;margin-left:2px;vertical-align:-3px;}
/* de hub-visual */
.pc-hub{position:relative;width:100%;max-width:760px;margin:0 auto;}
.pc-hub__center{z-index:5;text-align:center;}
.pc-hub__people{display:flex;align-items:center;justify-content:center;gap:24px;}
.pc-hub__person{position:relative;display:flex;flex-direction:column;align-items:center;}
.pc-hub__p{border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:var(--shadow-lift);background:var(--color-primary-soft);flex:0 0 auto;}
.pc-hub__p img{width:100%;height:100%;object-fit:cover;display:block;}
.pc-hub__p--main{width:146px;height:146px;box-shadow:0 30px 60px rgba(20,40,80,0.18),0 10px 24px rgba(20,40,80,0.12);}
.pc-hub__p--side{width:66px;height:66px;}
.pc-pill{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);z-index:2;background:var(--color-primary);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;box-shadow:var(--shadow-card);white-space:nowrap;}
.pc-hub__person--main .pc-pill{font-size:13px;bottom:-19px;}
.pc-hub__person:not(.pc-hub__person--main) .pc-pill{font-size:11px;padding:3px 10px;letter-spacing:.01em;}
.pc-hub__arrow{color:var(--color-border-strong);flex:0 0 auto;}
.pc-hub__arrow svg{width:20px;height:20px;display:block;}
.pc-hub__sub{margin-top:24px;font-size:14px;font-weight:600;color:var(--color-heading);line-height:1.4;}
/* functie-kaarten rond de hub */
.pc-hub__cards{display:contents;list-style:none;margin:0;padding:0;}
.pc-hub__card{background:rgba(255,255,255,0.86);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgba(214,228,246,0.9);border-radius:18px;box-shadow:0 18px 44px rgba(31,64,116,0.07),0 3px 10px rgba(31,64,116,0.04);padding:13px 15px;display:flex;gap:11px;align-items:flex-start;width:208px;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;}
.pc-hub__card-ic{width:34px;height:34px;border-radius:9px;background:#E8F0FB;color:#2F6BB0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pc-hub__card-ic svg{width:19px;height:19px;}
.pc-hub__card-t{font-size:14px;font-weight:700;color:var(--color-heading);line-height:1.2;}
.pc-hub__card-b{font-size:12.5px;color:var(--color-muted);line-height:1.4;margin-top:2px;}
@media(min-width:1080px){

  .pc-hub{aspect-ratio:1/1;}

  .pc-hub__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(350px,50%);}

  .pc-hub__card{position:absolute;z-index:2;width:186px;}

  /* vaste, symmetrische posities: 2 kaarten per zijde, niets op mid-links/rechts */
  .pc-hub__card--1{top:-2%;    left:16%;}
   /* Communicatie   — boven-links */
  .pc-hub__card--2{top:-2%;    right:16%;}
  /* Programma’s     — boven-rechts */
  .pc-hub__card--8{top:23%;    left:-3%;}
   /* Cliëntoverzicht — links-boven */
  .pc-hub__card--3{bottom:23%; left:-3%;}
   /* Inzichten       — links-onder */
  .pc-hub__card--4{top:23%;    right:-3%;}
  /* Formulieren     — rechts-boven */
  .pc-hub__card--5{bottom:23%; right:-3%;}
  /* AI-ondersteuning — rechts-onder */
  .pc-hub__card--6{bottom:-2%; left:16%;}
   /* Stemanalyse     — onder-links */
  .pc-hub__card--7{bottom:-2%; right:16%;}
}
/* ---------- Mobiel/tablet: dezelfde compositie, alleen de iconen ----------
   De kaarten met titel en ondertekst passen niet rond de kern op een smal
   scherm. In plaats van ze als lijst onder de personen te zetten (waardoor de
   visual geen visual meer is), blijven ze staan wáár ze staan: als icoonrondjes
   rondom de personen. De titel blijft in de DOM voor schermlezers. */
@media(max-width:1079px){

  .pc-hub{ aspect-ratio: 1 / 1; max-width: 420px; }

  .pc-hub__center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(232px, 66%);
  }
  .pc-hub__people{ gap:10px; }
  .pc-hub__p--main{ width:104px; height:104px; }
  .pc-hub__p--side{ width:52px; height:52px; }
  .pc-hub__person--main .pc-pill{ font-size:11px; bottom:-15px; }
  .pc-hub__person:not(.pc-hub__person--main) .pc-pill{ font-size:10px; padding:2px 8px; }
  .pc-hub__sub{ margin-top:18px; font-size:12.5px; }

  .pc-hub__cards{ display:contents; }

  .pc-hub__card{
    position:absolute; z-index:2; width:auto;
    padding:0; border:0; background:transparent; box-shadow:none;
  }
  /* alleen het icoon; de titel blijft leesbaar voor schermlezers */
  .pc-hub__card-t{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .pc-hub__card-b{ display:none; }
  .pc-hub__card-ic{
    width:46px; height:46px; border-radius:15px;
    background:#fff; color:#2F6BB0;
    box-shadow:0 10px 26px rgba(31,64,116,0.10), 0 2px 6px rgba(31,64,116,0.05);
  }
  .pc-hub__card-ic svg{ width:22px; height:22px; }

  /* Dezelfde plekken als op desktop, plus de gecentreerde boven/onder. De
     zij-iconen staan verder van de middenlijn dan op desktop: de pillen
     ("Professional", "Team / coach") steken op deze schaal buiten de
     avatarkolom uit en zouden er anders tegenaan lopen. */
  .pc-hub__card--1{ top:0;    left:13%;  }
  .pc-hub__card--2{ top:0;    right:13%; }
  .pc-hub__card--8{ top:17%;  left:0;    }
  .pc-hub__card--3{ bottom:17%; left:0;  }
  .pc-hub__card--4{ top:17%;  right:0;   }
  .pc-hub__card--5{ bottom:17%; right:0; }
  .pc-hub__card--6{ bottom:0; left:13%;  }
  .pc-hub__card--7{ bottom:0; right:13%; }
  .pc-hub__card--t{ top:0;    left:50%; margin-left:-23px; }
  .pc-hub__card--b{ bottom:0; left:50%; margin-left:-23px; }
}

@media(max-width:400px){
  .pc-hub__p--main{ width:92px; height:92px; }
  .pc-hub__p--side{ width:46px; height:46px; }
  .pc-hub__card-ic{ width:42px; height:42px; border-radius:14px; }
  .pc-hub__card-ic svg{ width:20px; height:20px; }
}
/* ---------- organische lichtwolk achter de deelnemer (geen cirkel, geen lijn) ---------- */
.pc-hub__glow{position:absolute;top:50%;left:50%;width:44%;aspect-ratio:1/1;z-index:0;pointer-events:none;transform:translate(-50%,-50%);}
.pc-hub__glow span{position:absolute;top:50%;left:50%;border-radius:50%;transition:opacity .4s ease;}
.pc-hub__glow-a{width:185%;height:185%;background:#3D80D6;opacity:.12;filter:blur(170px);transform:translate(-58%,-46%);}
.pc-hub__glow-b{width:150%;height:150%;background:#7FD2EC;opacity:.14;filter:blur(130px);transform:translate(-40%,-54%);}
.pc-hub__glow-c{width:135%;height:135%;background:#00AF66;opacity:.06;filter:blur(120px);transform:translate(-52%,-30%);}
.pc-hub__glow-d{width:52%;height:52%;background:#fff;opacity:.7;filter:blur(40px);transform:translate(-50%,-66%);}
/* ---------- microinteractie: kaart zweeft iets op (subtiel) ---------- */
.pc-hub__card:hover{transform:translateY(-5px);border-color:rgba(61,128,214,0.4);
  box-shadow:0 26px 56px rgba(31,64,116,0.10),0 5px 14px rgba(31,64,116,0.05);}
@media (hover:hover){

  .pc-hub:has(.pc-hub__card:hover) .pc-hub__card:not(:hover){opacity:.78;}

  .pc-hub:has(.pc-hub__card:hover) .pc-hub__glow-b{opacity:.18;}
}
@media (prefers-reduced-motion: no-preference){

  .pc-hub.reveal .pc-hub__glow{opacity:0;}

  .pc-hub.reveal .pc-hub__person--main{opacity:0;transform:scale(.92);}

  .pc-hub.reveal .pc-hub__people .pc-hub__person:first-of-type:not(.pc-hub__person--main){opacity:0;transform:translateX(-24px);}

  .pc-hub.reveal .pc-hub__people .pc-hub__person:last-of-type:not(.pc-hub__person--main){opacity:0;transform:translateX(24px);}

  .pc-hub.reveal .pc-hub__sub{opacity:0;}

  .pc-hub.reveal .pc-hub__card{opacity:0;filter:blur(8px);}

  .pc-hub.reveal .pc-hub__card--1,
  .pc-hub.reveal .pc-hub__card--2{transform:translateY(-120px) scale(.94);}

  .pc-hub.reveal .pc-hub__card--6,
  .pc-hub.reveal .pc-hub__card--7{transform:translateY(120px) scale(.94);}

  .pc-hub.reveal .pc-hub__card--4,
  .pc-hub.reveal .pc-hub__card--5{transform:translateX(120px) scale(.94);}

  .pc-hub.reveal .pc-hub__card--3,
  .pc-hub.reveal .pc-hub__card--8{transform:translateX(-120px) scale(.94);}


  .pc-hub.reveal.is-in .pc-hub__glow{opacity:1;transition:opacity .6s ease;}

  .pc-hub.reveal.is-in .pc-hub__person--main{opacity:1;transform:none;transition:opacity .5s ease .3s,transform .5s ease .3s;}

  .pc-hub.reveal.is-in .pc-hub__people .pc-hub__person:first-of-type:not(.pc-hub__person--main){opacity:1;transform:none;transition:opacity .45s ease .58s,transform .5s cubic-bezier(.22,.61,.36,1) .58s;}

  .pc-hub.reveal.is-in .pc-hub__people .pc-hub__person:last-of-type:not(.pc-hub__person--main){opacity:1;transform:none;transition:opacity .45s ease .7s,transform .5s cubic-bezier(.22,.61,.36,1) .7s;}

  .pc-hub.reveal.is-in .pc-hub__sub{opacity:1;transition:opacity .45s ease .66s;}

  .pc-hub.reveal.is-in .pc-hub__card{opacity:1;filter:blur(0);transform:none;
    transition:opacity .55s ease,filter .55s ease,transform .6s cubic-bezier(.22,.61,.36,1);}

  /* met de klok mee, stagger ~90ms */
  .pc-hub.reveal.is-in .pc-hub__card--1{transition-delay:.95s;}

  .pc-hub.reveal.is-in .pc-hub__card--2{transition-delay:1.04s;}

  .pc-hub.reveal.is-in .pc-hub__card--4{transition-delay:1.13s;}

  .pc-hub.reveal.is-in .pc-hub__card--5{transition-delay:1.22s;}

  .pc-hub.reveal.is-in .pc-hub__card--7{transition-delay:1.31s;}

  .pc-hub.reveal.is-in .pc-hub__card--6{transition-delay:1.40s;}

  .pc-hub.reveal.is-in .pc-hub__card--3{transition-delay:1.49s;}

  .pc-hub.reveal.is-in .pc-hub__card--8{transition-delay:1.58s;}
}
@media (min-width: 1080px){

  .pc-hub--equal .pc-hub__card{ min-height: 134px; }
}

/* De zij-in/uit-animatie geldt alleen voor de zij-personen; staat de hoofdpersoon
   er alleen (home: Onze visie), dan houdt die zijn eigen scale-animatie. */

/* ---------- benefit-regels in de copy-kolom naast de hub ----------
   Letterlijk overgenomen uit platform-concept.css; alleen de paginascope
   is eraf, zodat de sectie ook buiten de platformpagina's werkt. */
.pc-benefits{display:flex;flex-direction:column;gap:20px;margin:28px 0 30px;}
.pc-benefit{display:flex;gap:14px;align-items:flex-start;}
.pc-benefit__ic{width:44px;height:44px;border-radius:12px;background:var(--color-primary-soft);color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pc-benefit__ic svg{width:22px;height:22px;}
.pc-benefit__t{font-size:16.5px;font-weight:700;color:var(--color-heading);}
.pc-benefit__b{font-size:14.5px;color:var(--color-body);line-height:1.5;margin-top:2px;}

/* ---------- smalle schermen: personenrij binnen de container houden ----------
   De pillen ("Team / coach", "Professional") zijn breder dan de avatar waar ze
   onder hangen en liepen daardoor buiten beeld. Iets kleinere avatars + kleinere
   zij-pillen houden de hele rij binnen de containerbreedte. */
@media(max-width:640px){
  .pc-hub__people{gap:8px;}
  .pc-hub__p--main{width:118px;height:118px;}
  .pc-hub__p--side{width:56px;height:56px;}
  .pc-hub__person:not(.pc-hub__person--main) .pc-pill{font-size:10.5px;padding:2px 9px;}
}

/* ---------- de hub in een split-sectie (home: Onze visie) ----------
   De kaarten staan op vaste percentages rond het midden; in een 1fr/1fr-split
   is de visuele kolom te smal en raken ze elkaar bijna. Daarom dezelfde
   kolomverhouding als op de platformpagina, waar de hub vandaan komt. */
@media(min-width:1080px){
  .section--hub-visual .split-grid{grid-template-columns:0.82fr 1.18fr;gap:52px;}
}

/* ---------- zes capabilities: één boven, één onder, twee links, twee rechts ----------
   De acht bestaande posities hebben geen gecentreerde plek boven en onder.
   Deze twee volgen exact hetzelfde patroon als --1 t/m --8; gecentreerd met
   margin-left (halve kaartbreedte) en niet met transform, zodat de bestaande
   reveal-animatie zijn eigen transform houdt. */
@media(min-width:1080px){
  .pc-hub__card--t{top:-2%;    left:50%; margin-left:-93px;}   /* boven, gecentreerd */
  .pc-hub__card--b{bottom:-2%; left:50%; margin-left:-93px;}   /* onder, gecentreerd */
}
@media (prefers-reduced-motion: no-preference){
  .pc-hub.reveal .pc-hub__card--t{transform:translateY(-120px) scale(.94);}
  .pc-hub.reveal .pc-hub__card--b{transform:translateY(120px) scale(.94);}
  .pc-hub.reveal.is-in .pc-hub__card--t{transition-delay:.95s;}
  .pc-hub.reveal.is-in .pc-hub__card--b{transition-delay:1.40s;}
}

/* ---------- Mobiel/tablet: geen zijwaartse aanloop ----------
   Boven 1080px schuiven de kaarten van ver buiten de hub naar binnen. Op een
   smal scherm staat er links en rechts geen ruimte voor die aanloop: een
   verplaatsing van 120px duwt de iconen buiten het scherm, met een
   horizontale schuifbalk en een scheefgetrokken visual tot gevolg.
   Onder 1080px daarom een korte verticale aanloop voor álle kaarten. */
@media (prefers-reduced-motion: no-preference) and (max-width: 1079px) {
  .pc-hub.reveal .pc-hub__card { transform: translateY(20px) scale(.98); }
  .pc-hub.reveal.is-in .pc-hub__card { transform: none; }
  .pc-hub.reveal .pc-hub__people .pc-hub__person:first-of-type:not(.pc-hub__person--main),
  .pc-hub.reveal .pc-hub__people .pc-hub__person:last-of-type:not(.pc-hub__person--main) { transform: translateY(16px); }
  .pc-hub.reveal.is-in .pc-hub__people .pc-hub__person:first-of-type:not(.pc-hub__person--main),
  .pc-hub.reveal.is-in .pc-hub__people .pc-hub__person:last-of-type:not(.pc-hub__person--main) { transform: none; }
}