/* personnel-emp.css — ส่วนเสริมของ personnel.php สำหรับตาราง employee (ใช้ต่อจาก personnel.css) */

/* มีแถบเมนูข้าง (340px) → พื้นที่เนื้อหา ~800px (จอ 1280px ขึ้นไป) : 4 คน/แถวแบบยืดหด · จอแคบลดเป็น 3 / 2 คน */
.pn .dt-head { text-align: center; }
.pn .dt-chips, .pn .dt-meta { justify-content: center; }

.pn-list-lead { gap: 24px; flex-direction: column; align-items: center; margin-bottom: 24px; }   /* ผู้นำหลายคน: คนละแถว กึ่งกลาง ตามผังเดิม */
.pn-list-lead:last-of-type { margin-bottom: 0; }
.pn-grid { gap: 24px 20px; }
.pn-card.pn-lead, .pn-grid > .pn-card { width: calc((100% - 60px) / 4); min-width: 0; }   /* 4 คน/แถว (ช่องว่าง 20px × 3) */
.pn-list-lead > .pn-card.pn-lead { width: calc((100% - 60px) / 4); }
.pn-name { font-size: .92rem; }
.pn-pos { font-size: .82rem; }
.pn-name { white-space: normal; }
.pn-tel { margin: 8px 0 0; font-size: .85rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 4px; }
.pn-duty { padding: 10px 14px 14px; border-top: 1px solid var(--line); background: var(--sky); font-size: .85rem; line-height: 1.65; color: var(--ink); text-align: left; overflow-wrap: break-word; }
.pn-duty b { display: block; margin-bottom: 3px; font-size: .78rem; color: var(--navy); }

/* ไม่มีรูป → กรอบสีอ่อน + ไอคอนคน (ไม่ใช้โลโก้พื้นดำ) */
.pn-photo.pn-ph { background: linear-gradient(160deg, #e6eefb, #cfdcf2); color: #8aa0c8; }

/* รูปแบบ "ชื่อทับบนรูป" (สำนักปลัด / กองคลัง / กองช่าง / ศพด.) */
.pn-ov .pn-card { position: relative; border: 0; border-radius: 0; box-shadow: none; background: #333; }
.pn-ov .pn-card:hover { transform: none; }
.pn-ov .pn-photo { aspect-ratio: 255 / 350; }
.pn-ov .pn-info { position: absolute; left: 0; right: 0; bottom: 0; min-height: 72px; padding: 9px 8px; border: 0;
  background: rgba(40, 40, 40, .88); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.pn-ov .pn-name { color: #fff; font-size: .92rem; margin: 0 0 2px; }
.pn-ov .pn-pos { color: #cfcfcf; font-size: .8rem; line-height: 1.4; }
.pn-ov .pn-tel { color: #cfcfcf; }
.pn-ov .pn-photo.pn-ph svg { margin-bottom: 70px; }

@media (max-width: 900px) {
  .pn-card.pn-lead, .pn-grid > .pn-card, .pn-list-lead > .pn-card.pn-lead { width: calc((100% - 40px) / 3); }   /* จอกลาง 3 คน/แถว */
}
@media (max-width: 560px) {
  .pn-list-lead > .pn-card.pn-lead,
  .pn-card.pn-lead, .pn-grid > .pn-card { width: calc(50% - 6px); }
  .pn-grid { gap: 16px 12px; }
  .pn-duty { padding: 8px 8px 10px; font-size: .78rem; }
  .pn-ov .pn-info { min-height: 60px; padding: 6px 4px; }
  .pn-ov .pn-name { font-size: .8rem; }
  .pn-ov .pn-pos { font-size: .72rem; }
}