/* ============================================================
   FEDORA — shared styles for the people pages
   (Management Team, Board of Directors, Scientific Advisory).
   Loaded alongside site.css.
   ============================================================ */

/* ---- floating bacteria in the section backdrop (movement) ---- */
.team-sec{position:relative;background:var(--mist);overflow:hidden;padding:88px 0 104px}
.team-sec .wrap{position:relative;z-index:2}
.bg-bugs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bg-bugs .bacteria{position:absolute;width:80px;opacity:.10;color:var(--teal-dk);animation:drift 26s linear infinite}
.bg-bugs .bacteria:nth-child(1){top:8%;left:6%;width:120px;animation-duration:34s}
.bg-bugs .bacteria:nth-child(2){top:62%;left:12%;width:70px;animation-duration:28s;animation-direction:reverse}
.bg-bugs .bacteria:nth-child(3){top:24%;right:9%;width:100px;animation-duration:40s}
.bg-bugs .bacteria:nth-child(4){bottom:10%;right:16%;width:64px;animation-duration:24s;animation-direction:reverse}
.bg-bugs .bacteria:nth-child(5){top:48%;left:47%;width:54px;animation-duration:46s}
.bg-bugs .bacteria:nth-child(6){top:80%;right:40%;width:88px;animation-duration:38s}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(26px,-20px) rotate(90deg)}
  50%{transform:translate(-14px,22px) rotate(180deg)}
  75%{transform:translate(20px,14px) rotate(270deg)}
  100%{transform:translate(0,0) rotate(360deg)}
}

.team-intro{max-width:680px;margin-bottom:52px}
.team-intro h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.7rem 0 1rem}
.team-intro p{color:var(--muted);font-size:1.08rem}

/* ---- grid ---- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tmember{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;display:flex;flex-direction:column}
.tmember:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(43,45,66,.55);border-color:rgba(156,178,99,.55)}
.tphoto-wrap{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.tphoto{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:grayscale(.35) contrast(1.02);transition:filter .4s var(--ease),transform .5s var(--ease)}
.tmember:hover .tphoto{filter:none;transform:scale(1.05)}
/* monogram placeholder for members without a headshot yet */
.monogram{width:100%;height:100%;display:grid;place-items:center;position:relative;background:radial-gradient(120% 120% at 30% 20%,#3a3d57,#2B2D42 70%)}
.monogram::after{content:"";position:absolute;inset:0;background:url('/assets/pathogens-tex.png') center/cover;opacity:.18}
.monogram span{position:relative;z-index:1;font-family:'Futura LT','Jost',sans-serif;font-weight:700;font-size:2.6rem;color:var(--teal);letter-spacing:.04em}
.photo-flag{position:absolute;bottom:10px;left:10px;z-index:2;background:rgba(43,45,66,.72);color:#cdd8ea;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:3px;backdrop-filter:blur(4px)}

.tinfo{padding:18px 18px 20px;border-top:1px solid var(--line);flex:1;display:flex;flex-direction:column}
.tname{display:flex;align-items:center;gap:9px;font-size:1.06rem;line-height:1.2;margin-bottom:.25rem}
.trole{color:var(--muted);font-size:.85rem;line-height:1.4;flex:1}
.torg{display:block;color:var(--teal-dk);font-weight:600;font-size:.8rem;margin-top:.25rem}

/* ---- the spinning bacterium beside each name ---- */
.bacteria{display:inline-block;flex:0 0 auto}
.tname .bacteria{width:30px;height:auto;color:var(--teal-dk);transform-origin:center;animation:spin 9s linear infinite}
.tmember:hover .tname .bacteria{animation-duration:1.5s}
@keyframes spin{to{transform:rotate(360deg)}}
.b-body{fill:rgba(156,178,99,.28);stroke:var(--teal-dk);stroke-width:1.5}
.b-dot{fill:var(--teal-dk)}
.b-fla{fill:none;stroke:var(--teal);stroke-width:1.4;stroke-linecap:round}

.tfoot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.readbio{display:inline-flex;align-items:center;gap:.4rem;font-family:'Futura LT','Jost',sans-serif;font-weight:600;font-size:.82rem;color:var(--ink);letter-spacing:.01em}
.readbio svg{width:14px;transition:transform .2s var(--ease)}
.tmember:hover .readbio svg{transform:translateX(4px)}
.li{display:grid;place-items:center;width:32px;height:32px;border-radius:5px;border:1px solid var(--line);color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.li:hover{background:#0A66C2;color:#fff;border-color:#0A66C2}
.li svg{width:16px;height:16px}
.li[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---- bio modal ---- */
.bio-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:5vh 20px;overflow-y:auto}
.bio-modal.open{display:flex}
.bio-backdrop{position:fixed;inset:0;background:rgba(20,21,33,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.bio-modal.open .bio-backdrop{opacity:1}
.bio-card{position:relative;z-index:1;background:#fff;max-width:760px;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(20,21,33,.7);transform:translateY(18px) scale(.98);opacity:0;transition:transform .34s var(--ease),opacity .34s}
.bio-modal.open .bio-card{transform:none;opacity:1}
.bio-top{display:flex;gap:22px;padding:28px 32px;background:var(--ink);color:#fff;align-items:center}
.bio-top .bio-ph{width:96px;height:120px;flex:0 0 96px;border-radius:8px;overflow:hidden;background:#3a3d57}
.bio-top .bio-ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.bio-top .bio-ph .monogram span{font-size:1.9rem}
.bio-head h3{font-size:1.5rem;margin-bottom:.3rem}
.bio-head .brole{color:#C4D2E6;font-size:.95rem;line-height:1.4}
.bio-head .bli{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.85rem;color:#9CB263;font-weight:600}
.bio-head .bli[hidden]{display:none}
.bio-head .bli svg{width:16px;height:16px}
.bio-body{padding:28px 32px 34px;max-height:52vh;overflow-y:auto}
.bio-body p{color:var(--ink-2);font-size:.98rem;margin-bottom:1rem;line-height:1.7}
.bio-body p:last-child{margin-bottom:0}
.bio-close{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.bio-close:hover{background:rgba(255,255,255,.28)}

/* ============================================================
   LinkedIn hover FX — logo does a full spin and little bacteria
   burst out and drift away. Applied to card icons (.li-fx) and
   the popup CTA button (.li-cta). Particles injected by people.js.
   ============================================================ */
.li-fx{overflow:visible}
.li-fx > svg{transition:transform .55s var(--ease)}
.li-fx:hover > svg{transform:rotate(360deg)}

.li-particles{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:4}
.li-particles .p{position:absolute;left:0;top:0;width:15px;height:8px;margin:-4px 0 0 -7px;color:var(--teal-dk);opacity:0}
.li-particles .p svg{width:100%;height:100%;display:block}
.li-particles .p:nth-child(1){--tx:-22px;--ty:-24px;--r:150deg}
.li-particles .p:nth-child(2){--tx:20px;--ty:-27px;--r:-130deg}
.li-particles .p:nth-child(3){--tx:-28px;--ty:-6px;--r:210deg}
.li-particles .p:nth-child(4){--tx:26px;--ty:-4px;--r:-190deg}
.li-particles .p:nth-child(5){--tx:2px;--ty:-32px;--r:90deg}
.li-fx:hover .li-particles .p,
.li-cta:hover .li-particles .p{animation:emit .8s var(--ease) forwards}
.li-particles .p:nth-child(2){animation-delay:.05s}
.li-particles .p:nth-child(3){animation-delay:.1s}
.li-particles .p:nth-child(5){animation-delay:.07s}
@keyframes emit{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}
  25%{opacity:.95}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1) rotate(var(--r))}
}

/* the old top-of-popup link is replaced by the bottom CTA */
.bio-head .bli{display:none}

/* bottom CTA — dark bar matching the popup's top, white button that
   turns the site green on hover */
.bio-foot{padding:22px 32px 26px;background:var(--ink);display:flex;justify-content:center}
.li-cta{position:relative;overflow:visible;display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1.4rem;border-radius:7px;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-family:'Futura LT','Jost',sans-serif;font-weight:600;font-size:.95rem;background:transparent;transition:background .22s,color .22s,border-color .22s,box-shadow .22s;cursor:pointer}
.li-cta:hover{background:var(--teal);border-color:var(--teal);color:#23290f;box-shadow:0 14px 30px -14px rgba(156,178,99,.6)}
.li-cta > svg{width:20px;height:20px;transition:transform .55s var(--ease)}
.li-cta:hover > svg{transform:rotate(360deg)}
.li-cta .p{color:var(--teal)}
.li-cta:hover .p{color:#23290f}

@media(prefers-reduced-motion:reduce){
  .li-fx:hover > svg,.li-cta:hover > svg{transform:none}
  .li-fx:hover .li-particles .p,.li-cta:hover .li-particles .p{animation:none}
}

@media(max-width:940px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .team-grid{grid-template-columns:1fr}
  .bio-top{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .bg-bugs .bacteria,.tname .bacteria{animation:none!important}
}