/* ---------------------------------------------------------------------------
   หน้าผลงานรังวัด — การ์ดที่ดึงงานจริงจากระบบเอ็นเจ
   โหลดเฉพาะหน้าที่มีกล่อง #nj-projects อยู่เท่านั้น (ดู functions.php)
   ใช้ตัวแปรสีชุดเดียวกับ style.css ห้ามใส่รหัสสีใหม่ในไฟล์นี้
   --------------------------------------------------------------------------- */

#nj-projects[hidden]{ display:none !important; }

.njp{ margin: 8px 0 0; }

.njp-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap; margin-bottom:14px;
}
.njp-head h3{
  font-family: var(--nj-display);
  font-size:20px; font-weight:600; color: var(--nj-navy); margin:0;
}
.njp-count{
  font-family: var(--nj-mono);
  font-size:13px; color: var(--nj-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- ตัวกรอง ---- */
.njp-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.njp-chip{
  font-family: var(--nj-body);
  font-size:13.5px; font-weight:500;
  padding:7px 16px; border-radius:22px;
  border:1px solid var(--nj-line); background:#fff; color: var(--nj-slate);
  cursor:pointer; line-height:1.5;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.njp-chip:hover{ border-color: var(--nj-muted); }
.njp-chip[aria-pressed="true"]{
  background: var(--nj-navy); border-color: var(--nj-navy); color:#fff;
}
.njp-chip:focus-visible{ outline:2px solid var(--nj-accent); outline-offset:2px; }

/* ---- ตารางการ์ด ---- */
.njp-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.njp-card{
  display:flex; flex-direction:column;
  border:1px solid var(--nj-line); border-radius: var(--nj-radius);
  background:#fff; overflow:hidden;
}

/* รูปหน้างาน — แปลงที่ทีมยังไม่ได้เลือกรูปจะได้พื้นลายเส้นตารางแทน ไม่ใช่ช่องว่างเปล่า */
.njp-photo{
  display:block; width:100%; height:168px;
  object-fit:cover; background: var(--nj-ground);
}
.njp-photo-empty{
  position:relative; height:168px;
  background: linear-gradient(148deg, var(--nj-navy) 0%, var(--nj-navy-2) 100%);
}
.njp-photo-empty::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:26px 26px;
}
.njp-code{
  position:absolute; left:13px; bottom:11px;
  font-family: var(--nj-mono); font-size:11px; letter-spacing:.05em; color:#9FB8CE;
}

.njp-body{ padding:15px 17px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.njp-type{
  font-family: var(--nj-mono);
  font-size:11px; font-weight:600; letter-spacing:.06em; color: var(--nj-accent);
}
.njp-card h4{
  font-family: var(--nj-display);
  font-size:15.5px; font-weight:600; color: var(--nj-navy);
  margin:0; line-height:1.5;
}
.njp-where{ font-size:13.5px; color: var(--nj-slate); margin:0; line-height:1.6; }
.njp-blurb{ font-size:13px; color: var(--nj-slate); margin:0; line-height:1.7; }

/* แถบล่างของการ์ด — ขึ้นเฉพาะช่องที่ระบบส่งค่ามาจริง ไม่มีข้อมูล = ไม่มีช่องนั้นเลย
   ห้ามใส่ขีดหรือเลข 0 แทน เพราะกลายเป็นการอ้างข้อเท็จจริงเรื่องที่ดินของลูกค้า */
.njp-meta{
  display:flex; margin-top:auto; padding-top:12px;
  border-top:1px solid var(--nj-line-soft);
}
.njp-meta div{ flex:1; padding-right:12px; }
.njp-meta div + div{ border-left:1px solid var(--nj-line-soft); padding-left:12px; padding-right:0; }
.njp-meta b{
  display:block; font-family: var(--nj-mono);
  font-size:9.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color: var(--nj-muted);
}
.njp-meta span{
  font-family: var(--nj-mono); font-size:13.5px; font-weight:500;
  color: var(--nj-ink); font-variant-numeric: tabular-nums;
}

.njp-empty{
  border:1px solid var(--nj-line); border-radius: var(--nj-radius);
  padding:34px 22px; text-align:center; color: var(--nj-muted); font-size:14px;
  background: var(--nj-ground);
}

@media (max-width: 640px){
  .njp-grid{ grid-template-columns:1fr; gap:14px; }
  .njp-head h3{ font-size:18px; }
}