/* personnel-card.css — SHARED staff card used by personnel-dept / -mgmt /
   -teacher / -homeroom. Card shape adapted from a1/p.css + p.html, themed in
   the school colours (yellow #FFCE1B + black) — no purple. Chrome in site.css. */

.pdept-section { margin-bottom:2.8rem; }
h2.sec { font-size:1.3rem; color:var(--primary); padding-left:.8rem; margin:0 0 1.4rem; display:flex; align-items:center; gap:.6rem;
  border-left:4px solid var(--accent); }
h2.sec:first-child { margin-top:0; }
.pd-count { font-size:.76rem; font-weight:700; color:#3a2f00; background:linear-gradient(135deg,#ffe375,#ffce1b); padding:.12rem .7rem; border-radius:30px; box-shadow:0 3px 10px rgba(255,206,27,.4); }
.dept-empty { color:#aaa; padding:1rem 0; }

/* ── profile card (p.css shape): rest shows full info; hovering the PHOTO fills it ── */
.pcard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.7rem 1.4rem; align-items:start; margin-bottom:2.5rem; }
.pcard { position:relative; min-height:240px; background:#f0f0f0; border-radius:16px; overflow:hidden; outline:none;
  border:1px solid #e3e0e8; box-shadow:0 10px 26px rgba(0,0,0,.16); transition:transform .35s, box-shadow .35s; }
/* lift only when the photo is hovered */
.pcard:has(.pc-img:hover) { transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.3); }

.blob { position:absolute; top:0; left:50%; transform:translateX(-50%); height:10px; width:74%; border-radius:0 0 28px 28px;
  background:var(--accent); transition:height .3s, opacity .3s; z-index:3; }
.pcard:has(.pc-img:hover) .blob { height:0; opacity:0; }

.pc-img { position:absolute; top:26px; left:50%; transform:translateX(-50%); width:100px; height:100px; border-radius:50%;
  background-size:cover; background-position:center 15%; border:4px solid var(--accent); box-shadow:0 6px 16px rgba(0,0,0,.2);
  cursor:zoom-in; z-index:2; transition:all .5s cubic-bezier(.4,.2,.2,1); }
.pc-img:hover { top:0; left:0; transform:none; width:100%; height:100%; border-radius:0; border:0; box-shadow:none; z-index:5; }

/* rest content: full name/role/tag/task + contacts (no truncation, card grows to fit) */
.pc-info { padding:140px 1.1rem 1.1rem; text-align:center; }
.pc-name { font-size:1.05rem; font-weight:700; color:var(--primary); line-height:1.3; }
.pc-role { font-size:.83rem; color:#777; margin-top:.2rem; }
.pc-tag { display:inline-block; margin-top:.45rem; font-size:.78rem; font-weight:700; color:#3a2f00;
  background:linear-gradient(135deg,#ffe375,#ffce1b); padding:.13rem .7rem; border-radius:20px; box-shadow:0 3px 9px rgba(255,206,27,.4); }
/* responsibilities — numbered list, one per line */
.pc-task { font-size:.78rem; color:#555; line-height:1.6; margin:.6rem 0 0; text-align:left;
  background:#fff; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:.5rem .7rem .5rem 1.8rem; list-style:decimal; }
.pc-task li { margin:.14rem 0; padding-left:.1rem; }
.pc-contact { display:flex; flex-direction:column; gap:.3rem; margin-top:.7rem; align-items:center; }
.pcc { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:#555; text-decoration:none; max-width:100%; word-break:break-word; }
.pcc:hover { color:var(--primary); }
.pcc img { width:15px; height:15px; object-fit:contain; flex-shrink:0; }

/* email — icon button (email.png) in the top-right corner of the card */
.pc-mail { position:absolute; top:10px; right:10px; z-index:4; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#fff; text-decoration:none;
  box-shadow:0 3px 9px rgba(0,0,0,.2); transition:.2s; }
.pc-mail img { width:18px; height:18px; object-fit:contain; display:block; }
.pc-mail:hover { background:var(--accent); transform:translateY(-1px); }

/* hover label over the filled photo — name + role only, no yellow strip */
.pc-hover { position:absolute; left:0; right:0; bottom:0; z-index:6; pointer-events:none; padding:1.4rem .95rem .9rem; text-align:left; color:#fff;
  opacity:0; transition:opacity .3s; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.25) 55%, rgba(0,0,0,0)); }
.pcard:has(.pc-img:hover) .pc-hover { opacity:1; }
.pc-hover .ph-name { display:block; font-weight:700; font-size:1.02rem; line-height:1.3; }
.pc-hover .ph-role { display:block; font-size:.82rem; color:var(--accent); margin-top:.15rem; }

/* ── full-photo lightbox ── */
.pd-lb { position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; padding:2rem; background:rgba(10,10,12,.93); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.pd-lb.open { display:flex; }
.pd-lb-fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem; max-width:92vw; max-height:90vh; }
.pd-lb-fig img { max-width:min(460px,92vw); max-height:78vh; object-fit:contain; border-radius:16px; box-shadow:0 16px 50px rgba(0,0,0,.6); border:4px solid #fff; }
.pd-lb-fig figcaption { color:#fff; font-size:1rem; font-weight:600; text-align:center; }
.pd-lb-close { position:absolute; top:1.2rem; right:1.4rem; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.3rem; cursor:pointer; transition:.2s; }
.pd-lb-close:hover { background:var(--accent); color:#1f1f1f; }

@media (max-width:480px) {
  .pcard-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1.3rem 1rem; }
}