/* ==========================================================================
   NAGA Concept — project-single.css (chi tiết một dự án)

   Nạp SAU project-card.css và project-modal.css, và dựa vào cả hai:
     - project-card.css  → khối "Dự án khác" ở cuối trang
     - project-modal.css → modal xem nhanh mà ba thẻ đó mở ra

   Trang này KHÔNG còn dùng khung thư viện cuộn ngang (.gallery*) lẫn bảng
   .detail-grid của modal. Bố cục hiện tại: ảnh mở đầu tràn viền → khối giới
   thiệu hai cột (ảnh dọc | tiêu đề, nội dung, bảng thông số) → thư viện ảnh so
   le hai cột. Modal vẫn giữ nguyên khung cũ của nó, hai bên không còn dùng chung
   markup thư viện nữa.
   ========================================================================== */

/* --- Ảnh mở đầu tràn viền ----------------------------------------------- */
/* Cao theo màn hình chứ không theo tỉ lệ ảnh: ảnh dự án tải lên đủ mọi khổ, cố
   định tỉ lệ thì màn ngang bị ảnh dọc đẩy trôi hết phần chữ xuống dưới nếp gấp.
   Kẹp trần 760px để trên màn hình rất cao ảnh không chiếm trọn khung nhìn. */
.project-hero{
  height:min(78vh,760px);
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.project-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --- Khối giới thiệu hai cột -------------------------------------------- */
.project-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:54px;
  align-items:start;
  padding:58px 34px 64px;
}
.project-intro-visual{
  margin:0;
  aspect-ratio:3/4;
  background:var(--paper-2);
  overflow:hidden;
}
.project-intro-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-crumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
}
.project-crumb a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.project-crumb a:hover{border-bottom-color:currentColor}
.project-crumb span{color:var(--muted)}

/* 74px là cỡ của bản cũ, khi tiêu đề trải hết bề ngang trang. Ở bố cục mới nó
   nằm trong một cột, cỡ đó vỡ thành ba bốn dòng nên hạ xuống 46px. */
.project-single h1{
  margin:0;
  font-size:46px;
  line-height:1;
  letter-spacing:-.05em;
  font-weight:800;
}
.project-lede{
  margin:22px 0 0;
  font-size:16px;
  line-height:1.7;
  color:#333;
}
.project-intro-copy .tag-row{margin:24px 0 0}

/* --- Bảng thông số ------------------------------------------------------ */
.project-meta{
  margin:34px 0 0;
  background:var(--soft);
  border:1px solid var(--line);
}
.project-meta > div{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:18px;
  padding:13px 20px;
  /* Vạch ngăn nhạt hơn viền ngoài: bảng này là một khối, không phải năm cái hộp
     xếp chồng. Viền đậm cả trong lẫn ngoài thì nó thành cái bảng kẻ ô. */
  border-bottom:1px solid rgba(23,23,23,.13);
}
.project-meta > div:last-child{border-bottom:0}
.project-meta dt{
  margin:0;
  align-self:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.project-meta dd{
  margin:0;
  font-size:14px;
  line-height:1.45;
  letter-spacing:-.01em;
}
.project-intro-copy .button{margin-top:28px}

/* --- Thư viện ảnh so le -------------------------------------------------
   Multi-column chứ không phải grid hai cột — lý do đầy đủ nằm ở đầu
   template-parts/project/gallery-grid.php. Tóm tắt: grid khoá các ô thành từng
   hàng ngang, tấm thấp hơn trong hàng để lại khoảng trống; multi-column cho mỗi
   cột xếp chồng độc lập nên hai bên so le. */
.project-gallery{
  column-count:2;
  column-gap:22px;
  padding:0 34px 66px;
}
.project-gallery figure{
  /* break-inside: không có dòng này trình duyệt cắt đôi một tấm ảnh giữa hai
     cột khi nó rơi đúng chỗ ngắt. */
  break-inside:avoid;
  margin:0 0 22px;
  aspect-ratio:4/3;
  background:var(--paper-2);
  overflow:hidden;
}
.project-gallery figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Nhịp so le: cứ bốn tấm thì tấm 1 và tấm 4 dựng đứng, hai tấm giữa nằm ngang.
   Gán theo VỊ TRÍ chứ không theo tỉ lệ ảnh gốc — bộ ảnh của một dự án thường
   cùng một khổ máy, để nguyên tỉ lệ gốc thì hai cột thẳng hàng tăm tắp và hiệu
   ứng so le biến mất. Đổi lại ảnh bị cắt bằng object-fit.

   Vì sao 4 mà không phải 3: với chu kỳ 4, tổng chiều cao bốn tấm chia đôi vừa
   khít, nên trình duyệt cân cột thành trái [dọc, ngang] và phải [ngang, dọc] —
   đúng nhịp của bản thiết kế. */
.project-gallery figure:nth-child(4n+1),
.project-gallery figure:nth-child(4n+4){aspect-ratio:3/4}

/* --- Nội dung ----------------------------------------------------------- */
.project-content{
  margin-top:26px;
  font-size:15px;
  line-height:1.8;
  color:#333;
}
.project-content > *:first-child{margin-top:0}
.project-content > *:last-child{margin-bottom:0}
.project-content h2{
  margin:38px 0 14px;
  font-size:32px;
  line-height:1.1;
  letter-spacing:-.05em;
  color:var(--ink);
}
.project-content h3{
  margin:30px 0 12px;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.03em;
  color:var(--ink);
}
.project-content p{margin:0 0 18px}
.project-content ul,
.project-content ol{
  margin:0 0 18px;
  padding-left:20px;
}
.project-content li{margin-bottom:8px}
.project-content img{margin:24px 0}
.project-content blockquote{
  margin:28px 0;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--line);
  font-size:19px;
  line-height:1.55;
  letter-spacing:-.03em;
  color:var(--ink);
}
.project-content a{color:inherit}

/* --- Dự án khác --------------------------------------------------------- */
.project-more .project-grid{padding:30px 34px 42px}

/* --- CTA ----------------------------------------------------------------
   Giống about.css/services.css. template-parts/section/cta.php không mang style
   riêng — trang nào dùng thì trang đó khai, nên khối này phải có ở đây. */
.cta{
  display:grid;
  grid-template-columns:62% 38%;
  min-height:340px;
}
.cta-copy{
  padding:42px 34px;
  background:var(--ink);
  color:var(--paper);
  border-right:1px solid var(--line);
}
.cta-copy .eyebrow{color:#d8d0c5}
.cta-copy h2{
  margin:24px 0 18px;
  font-size:52px;
  line-height:.95;
  letter-spacing:-.07em;
}
.cta-copy p{
  margin:0;
  max-width:680px;
  color:#d8d0c5;
  font-size:14px;
  line-height:1.7;
}
.cta-links{
  padding:36px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:1000px){
  /* Ảnh dọc lên trên, chữ xuống dưới. Đổi sang 4:3 vì ở một cột tấm 3:4 chiếm
     gần trọn khung nhìn, khách phải cuộn hết một màn mới thấy tên dự án. */
  .project-intro{
    grid-template-columns:1fr;
    gap:32px;
  }
  .project-intro-visual{aspect-ratio:4/3}
  .project-single h1{font-size:40px}
}
@media(max-width:900px){
  .cta{grid-template-columns:1fr}
  .cta-copy{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}
@media(max-width:680px){
  .project-hero{height:min(56vh,420px)}
  .project-intro{padding:34px 22px 40px}
  .project-single h1{font-size:34px}
  .project-meta > div{
    grid-template-columns:1fr;
    gap:5px;
    padding:12px 16px;
  }
  /* Một cột trả lại ĐÚNG thứ tự ảnh ban đầu — đây là lý do danh sách để phẳng
     thay vì chia sẵn hai cột trong PHP. */
  .project-gallery{
    column-count:1;
    padding:0 22px 44px;
  }
  .project-gallery figure{
    margin-bottom:16px;
    aspect-ratio:4/3;
  }
  .project-gallery figure:nth-child(4n+1),
  .project-gallery figure:nth-child(4n+4){aspect-ratio:4/3}
  .project-more .project-grid{padding:24px 22px 32px}
  .cta-copy h2{font-size:40px}
}