/* PI PROFILE */
.pi-full{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;background:var(--white);box-shadow:0 4px 24px rgba(30,58,138,0.1);margin-bottom:48px}
.pi-left{background:var(--g900);padding:36px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:background 0.3s ease}
[data-theme="dark"] .pi-left{background:#001b33}
.pi-photo{width:130px;height:130px;border-radius:50%;margin-bottom:18px;border:3px solid rgba(255,255,255,0.25);overflow:hidden;flex-shrink:0;object-fit:cover;object-position:58% 50%}
.pi-photo-ph{width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0}
.pi-name-left{font-family:var(--fd);font-size:1.125rem;font-weight:700;color:#fff;margin-bottom:4px}
.pi-role-left{font-size:0.688rem;color:rgba(255,255,255,0.7);letter-spacing:0.5px;margin-bottom:16px}
.pi-links-left{display:flex;flex-direction:column;gap:7px;width:100%}
.pi-link-left{display:flex;align-items:center;gap:8px;font-size:0.719rem;color:rgba(255,255,255,0.8);text-decoration:none;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.08);transition:background 0.2s}
.pi-link-left:hover{background:rgba(255,255,255,0.18)}
.pi-link-left svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.pi-right{padding:36px}
.pi-section-label{font-family:var(--fm);font-size:0.688rem;color:var(--g700);letter-spacing:2px;text-transform:uppercase;margin:28px 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--bdr);display:flex;align-items:center;gap:8px}
.pi-section-label::before{content:'';width:14px;height:1.5px;background:var(--g600)}
.pi-bio{font-size:0.844rem;color:var(--t2);line-height:1.85}
.pi-heading{font-family:var(--fd);font-size:1.875rem;font-weight:700;color:var(--t1);margin-bottom:4px}
.pi-subtitle{font-size:0.875rem;color:var(--g700);margin-bottom:6px;font-weight:500}
.pi-email{font-family:var(--fm);font-size:0.75rem;color:var(--tm);margin-bottom:16px}
.pi-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.pi-tag{font-family:var(--fm);font-size:0.625rem;padding:3px 10px;border-radius:100px;border:1px solid var(--bdr);color:var(--tm)}
.achieve-list{display:flex;flex-direction:column;gap:10px}
.ach-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:8px;border:1px solid var(--bdr);background:var(--bg)}
.ach-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--g800);color:var(--g50);font-family:var(--fm);font-size:0.625rem;display:flex;align-items:center;justify-content:center;font-weight:500}
.ach-text{font-size:0.813rem;color:var(--t2);line-height:1.65}
.ach-year{display:inline-block;font-family:var(--fm);font-size:0.625rem;color:var(--a600)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.col-h{font-family:var(--fd);font-size:1.25rem;font-weight:700;color:var(--t1);margin-bottom:16px;padding-bottom:10px;border-bottom:1.5px solid var(--bdr)}
.list-plain{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto}
.list-plain li{font-size:0.813rem;color:var(--t2);line-height:1.65;padding:8px 12px;border-radius:6px;border:1px solid var(--bdr);background:var(--bg);list-style:none}
.list-plain li span{font-family:var(--fm);font-size:0.625rem;color:var(--a600);display:block}

/* TALKS */
.talk-list{display:flex;flex-direction:column;gap:10px;max-width:860px}
.talk-item{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--r);border:1px solid var(--bdr);background:var(--white)}
.talk-num{flex-shrink:0;font-family:var(--fm);font-size:0.688rem;color:var(--g700);background:var(--g50);padding:3px 10px;border-radius:100px;border:1px solid var(--bdr);height:fit-content;min-width:28px;text-align:center}
.talk-title{font-size:0.844rem;font-weight:500;color:var(--t1);margin-bottom:3px;line-height:1.45}
.talk-venue{font-size:0.75rem;color:var(--tm)}

/* PI INFORMATION MODAL */
.pi-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 5, 10, 0.7);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pi-modal.open {
  display: flex;
}
.pi-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--bdrm);
  border-radius: var(--rl);
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: piModalSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes piModalSlide {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.pi-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-section);
}
.pi-modal-header h3 {
  font-family: var(--fd);
  font-size:1.188rem;
  font-weight: 700;
  color: var(--t1);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pi-modal-close {
  background: transparent;
  border: none;
  font-size:2rem;
  color: var(--tl);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pi-modal-close:hover {
  color: var(--t1);
  transform: scale(1.1);
}
.pi-modal-body {
  padding: 28px;
  overflow-y: auto;
  font-family: var(--fb);
  color: var(--t2);
}
/* Re-style inner lists for modal compatibility */
.pi-modal-body .ach-item,
.pi-modal-body .talk-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border-radius: var(--r);
  border: 1px solid var(--bdr);
  background: var(--bg-card);
  margin-bottom: 12px;
  transition: background 0.2s;
}
.pi-modal-body .ach-item:hover,
.pi-modal-body .talk-item:hover {
  background: var(--bg-section);
}
.pi-modal-body .ach-num,
.pi-modal-body .talk-num {
  font-family: var(--fm);
  font-size:0.75rem;
  font-weight: 700;
  color: var(--a600);
  background: var(--g50);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .pi-modal-body .ach-num,
[data-theme="dark"] .pi-modal-body .talk-num {
  background: rgba(38, 127, 255, 0.15);
}
.pi-modal-body .ach-text,
.pi-modal-body .talk-title {
  font-size:0.844rem;
  line-height: 1.5;
  color: var(--t1);
}
.pi-modal-body .ach-year {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-section);
  font-family: var(--fm);
  font-size:0.625rem;
  color: var(--tm);
  margin-left: 8px;
}
.pi-modal-body .talk-venue {
  font-size:0.688rem;
  color: var(--tm);
  margin-top: 4px;
}
.pi-modal-body ul.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pi-modal-body ul.list-plain li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-size:0.844rem;
  color: var(--t2);
  line-height: 1.5;
}
.pi-modal-body ul.list-plain li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--a600);
  font-size:0.625rem;
  top: 2px;
}
