/* personnel.css — หน้ารายชื่อบุคลากร (personnel.php: เจ้าหน้าที่ / ผู้ตรวจสอบ) — ใช้คู่กับ detail.css
   .pg-nav (เมนูแถบข้าง) ใช้ร่วมกับ page.css จึงประกาศซ้ำที่นี่เฉพาะที่จำเป็น เพื่อไม่ต้องโหลด page.css ทั้งไฟล์ */
.pn-list { list-style: none; margin: 0; padding: 0; }
.pn-list-lead { display: flex; justify-content: center; margin-bottom: 30px; }
.pn-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 24px; }   /* flex แทน grid: แถวสุดท้ายที่ไม่เต็มจัดกึ่งกลางด้วย */
.pn-grid > .pn-card { width: 224px; }
/* คณะกรรมการ: แถวละ 4 คนตามผังเดิม (ความกว้างการ์ด = (100% − ช่องว่าง 3 ช่อง) / 4) แถวสุดท้ายที่ไม่เต็มยังอยู่กึ่งกลาง */
.pn-grid.pn-g-board { gap: 28px 20px; }
.pn-grid.pn-g-board > .pn-card { width: calc((100% - 60px) / 4); }
.pn-g-board .pn-name { font-size: .95rem; }
.pn-g-board .pn-pos { font-size: .85rem; }

.pn-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.pn-card:hover { transform: translateY(-3px); border-color: var(--blue-2); box-shadow: 0 8px 22px rgba(18, 48, 107, .14); }

/* การ์ดเด่น (คนแรกตามลำดับ): ขนาดเท่าการ์ดอื่นในแถวถัดไป แต่มีแถบทองด้านบนเป็นจุดสังเกต */
.pn-card.pn-lead { width: 224px; border-top: 4px solid var(--gold); }
.pn-list-lead.pn-g-board { gap: 20px; }
.pn-list-lead.pn-g-board > .pn-card.pn-lead { width: calc((100% - 60px) / 4); }   /* = ความกว้างการ์ดคณะกรรมการแถวอื่น */
.pn-list-lead.pn-g-board .pn-name { font-size: .95rem; }
.pn-list-lead.pn-g-board .pn-pos { font-size: .85rem; }

.pn-photo { display: block; position: relative; aspect-ratio: 8 / 9; background: var(--sky); overflow: hidden; line-height: 0; cursor: zoom-in; }
.pn-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s; }
.pn-card:hover .pn-photo img { transform: scale(1.03); }
.pn-photo.pn-ph { display: grid; place-items: center; cursor: default; color: var(--blue-2); background: linear-gradient(160deg, var(--sky), var(--sky-2)); }

.pn-info { padding: 14px 14px 18px; text-align: center; border-top: 1px solid var(--line); }
.pn-name { margin: 0 0 4px; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--navy); overflow-wrap: break-word; }
.pn-pos { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); overflow-wrap: break-word; }

/* เมนูกลุ่มเดียวกัน (แถบข้าง) */
.pg-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pg-nav a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .95rem; line-height: 1.4; border-left: 3px solid transparent; }
.pg-nav a:hover { text-decoration: none; background: var(--sky); color: var(--blue); }
.pg-nav a.is-current { background: var(--sky); color: var(--navy); font-weight: 700; border-left-color: var(--blue); }

/* จอแคบ: คณะกรรมการ 2 คน/แถว (ตัวอักษรอ่านได้) */
@media (max-width: 760px) {
  .pn-grid.pn-g-board { gap: 16px 12px; }
  .pn-grid.pn-g-board > .pn-card { width: calc(50% - 6px); }
  .pn-list-lead.pn-g-board { gap: 12px; }
  .pn-list-lead.pn-g-board > .pn-card.pn-lead { width: calc(50% - 6px); }
}
@media (max-width: 560px) {
  .pn-grid { gap: 16px 12px; }
  .pn-grid > .pn-card { width: calc(50% - 6px); }
  .pn-card.pn-lead { width: calc(50% - 6px); }
  .pn-info { padding: 10px 5px 14px; }
  .pn-name { font-size: .83rem; }
  .pn-pos { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .pn-card, .pn-photo img { transition: none; } .pn-card:hover { transform: none; } .pn-card:hover .pn-photo img { transform: none; } }
@media print { .pn-card { box-shadow: none; break-inside: avoid; } .pn-photo { cursor: default; } }