/* ============================================================
   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%;}
}
@media(max-width:1079px){

  .pc-hub__glow{display:none;}

  .pc-hub__people{gap:14px;}

  .pc-hub__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;}

  .pc-hub__card{width:auto;}
}
@media(max-width:520px){
.pc-hub__cards{grid-template-columns:1fr;}
}
/* ---------- 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;}
}