/* ==========================================================================
   NAGA Concept — project-card.css
   Lưới và thẻ dự án (template-parts/project/card.php).

   Tách khỏi projects.css vì TRANG CHI TIẾT DỰ ÁN cũng nạp file này: khối
   "Dự án khác" ở cuối trang dùng đúng thẻ đó. Cùng lý do đã tách project-modal.css
   ra khỏi projects.css trước đây — thẻ dự án xuất hiện ở đâu thì style phải theo
   tới đó, nếu không lỗi chỉ lộ ra ở trang không ai mở lúc đang sửa CSS.

   Ở LẠI projects.css: chế độ xem List (`.project-grid.list`). Nút Grid/List chỉ
   có ở trang lưu trữ, nên các rule đó không có việc gì ở trang khác.
   ========================================================================== */

.project-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px 24px;
}

.card{
  border-bottom:1px solid var(--line);
  cursor:pointer;
  padding-bottom:18px;
  transition:.18s;
}
.card:hover{transform:translateY(-3px)}
.thumb{
  height:220px;
  border:1px solid var(--line);
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(28deg, transparent 49.8%, rgba(0,0,0,.22) 50%, transparent 50.2%),
    linear-gradient(-28deg, transparent 49.8%, rgba(0,0,0,.16) 50%, transparent 50.2%),
    var(--paper-2);
}
.thumb:before{
  content:"";
  position:absolute;
  left:13%;
  top:22%;
  width:72%;
  height:42%;
  border:1px solid rgba(0,0,0,.7);
  background:
    linear-gradient(90deg, transparent 24%, rgba(0,0,0,.16) 25%, transparent 25.4%, transparent 49%, rgba(0,0,0,.16) 50%, transparent 50.4%, transparent 74%, rgba(0,0,0,.16) 75%, transparent 75.4%);
}
/* Ảnh trong khung cao cố định phải bị cắt, không đẩy khung giãn — xem chú thích
   cùng loại trong blog.css. */
.thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.thumb .idx{
  position:absolute;
  top:14px;
  left:14px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
}
.card h2{
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.05em;
  margin:0 0 10px;
  font-weight:800;
}
.meta{
  font-size:12px;
  line-height:1.5;
  color:#4b4640;
  margin-bottom:12px;
}
.desc{
  color:#333;
  line-height:1.55;
  font-size:13px;
  margin:0;
}
.arrow{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:800;
}
.card:hover .arrow .icon{transform:translateX(4px)}
.arrow .icon{transition:transform .18s}
/* "Xem chi tiết" nay là <a> tới trang dự án, không còn là nhãn trang trí.
   width:max-content chứ không để nguyên display:flex chiếm cả bề ngang thẻ: cả
   hàng cuối thành vùng bấm-để-chuyển-trang thì khách nhắm mở modal sẽ bị đưa đi
   mất. Vùng bấm gói đúng phần chữ + mũi tên. */
a.arrow{
  width:max-content;
  max-width:100%;
  color:inherit;
  text-decoration:none;
}
a.arrow:hover{
  text-decoration:underline;
  text-underline-offset:5px;
}
a.arrow:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:1000px){
  .project-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .project-grid{grid-template-columns:1fr}
}