/* =====================================================================
   PROJECT (project.html) — intro + horizontal sub-project stories
   ===================================================================== */

/* ---------------------------------------------------------------------
   CHÚ Ý: ba khối .proj-intro / .proj-info / .proj-gallery bên dưới KHÔNG
   còn được project.html dùng nữa. Từ bản dàn trang "tờ báo", ảnh nền cuộn +
   Về dự án + Thư viện ảnh đã gộp làm một trong assets/css/broadsheet.css.
   Giữ lại đây để tham khảo / quay về bản cũ; xoá được nếu chắc không cần.
   --------------------------------------------------------------------- */

/* ---------- INTRO ---------------------------------------------------- */
.proj-intro {
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--cream);
}
.proj-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.proj-intro-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18, 37, 30, 0.55),
    rgba(18, 37, 30, 0.25) 40%,
    rgba(18, 37, 30, 0.85)
  );
}
.proj-intro-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proj-intro-inner h1 {
  font-size: clamp(40px, 8vw, 128px);
  line-height: 0.9;
  margin: 12px 0 0;
}
.proj-intro-inner p {
  max-width: 460px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(251, 239, 239, 0.9);
}
.proj-intro .scroll-hint {
  position: static;
  transform: none;
  margin-top: 40px;
  opacity: 0.7;
}

/* ---------- HORIZONTAL SECTION --------------------------------------- */
.horizontal-section {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.horizontal-track {
  display: flex;
  height: 100vh;
  width: max-content;
  will-change: transform;
}

.story-card {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 5vw;
  padding: 0 min(6vw, 80px);
}
/* Thẻ mở đầu */
.card-intro {
  background: var(--cream);
}
.card-intro h2 {
  font-size: clamp(30px, 4.7vw, 80px);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 10px 0 18px;
  color: var(--green);
}
.card-intro p {
  max-width: 34ch;
  color: rgba(18, 53, 40, 0.7);
  font-size: 15px;
  line-height: 1.65;
}

/* Thẻ nội dung: ảnh + chữ */
.story-card .card-media {
  flex: 0 0 40vw;
  height: 66vh;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(18, 53, 40, 0.22);
  will-change: transform, opacity;
}
.story-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-card .card-text {
  flex: 1;
  max-width: 38ch;
}
.story-card .card-text .eyebrow {
  color: var(--orange);
}
.story-card .card-text h2 {
  font-size: clamp(30px, 4vw, 70px);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 12px 0 18px;
  color: var(--green);
}
.story-card .card-text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(18, 53, 40, 0.72);
  margin: 0 0 22px;
}

/* Xen kẽ: thẻ chẵn đảo ảnh sang phải cho nhịp điệu */
.story-card[data-h-anim]:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* ---------- PROJECT INFORMATION ------------------------------------- */
.proj-info {
  background: var(--cream);
  padding: clamp(90px, 13vw, 180px) 0;
}
.pinfo-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: clamp(48px, 9vw, 160px);
  align-items: start;
}
.pinfo-lead .eyebrow {
  color: var(--orange);
}
.pinfo-lead h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 34px);
  line-height: 1.32;
  color: var(--green);
  margin: 18px 0 26px;
  max-width: 22ch;
}
.pinfo-lead p {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(18, 53, 40, 0.78);
  margin: 0 0 20px;
  max-width: 60ch;
}
.pinfo-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.pinfo-meta > div {
  background: var(--cream-2);
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pinfo-meta dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.pinfo-meta dd {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--green);
}

/* ---------- IMAGE GALLERY (bento mosaic) ---------------------------- */
.proj-gallery {
  background: var(--cream-2);
  padding: clamp(84px, 12vw, 170px) 0;
}
.gallery-head {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.gallery-head .eyebrow {
  color: var(--orange);
}
.gallery-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.7vw, 40px);
  color: var(--green);
  margin: 14px 0 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(88px, 11vw, 150px);
  gap: clamp(16px, 2vw, 26px);
}
.gtile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(18, 53, 40, 0.16);
  background: var(--green);
  margin: 0;
}
.gtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gtile:hover img {
  transform: scale(1.06);
}
.gtile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 20px 16px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 17px;
  background: linear-gradient(transparent, rgba(18, 37, 30, 0.8));
  opacity: 0;
  transform: translateY(10px);
  transition: 0.4s ease;
}
.gtile:hover figcaption {
  opacity: 1;
  transform: none;
}
/* Bố cục lệch — giống ảnh mẫu: 2 ô nhỏ trái, 1 ô lớn trái, 1 ô cao giữa, 2 ô phải */
.g-a {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
.g-b {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}
.g-big {
  grid-column: 1 / 5;
  grid-row: 2 / 5;
}
.g-center {
  grid-column: 5 / 9;
  grid-row: 1 / 5;
}
.g-tr {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}
.g-br {
  grid-column: 9 / 13;
  grid-row: 3 / 5;
}

/* ---------- PEOPLE WITH CULTURE -------------------------------------
   BẢN NỀN SÁNG — cùng "mặt bàn lá sen" với .solo-section / .map-cta ở
   trang chủ và region-v2. Trước đây khối này nền xanh ĐẬM, thẻ nhân vật
   xanh đậm hơn một bậc (--green-2), chữ kem.
   Lật sang nền sáng thì phải đổi ĐỒNG BỘ bốn thứ, bỏ sót cái nào là mất
   chữ: (1) nền khối, (2) nền thẻ, (3) màu chữ trong thẻ, (4) bóng đổ.
   Muốn quay lại bản tối: background -> var(--green), color -> var(--cream),
   .person-card background -> var(--green-2), .pc-body h3 -> var(--cream),
   .pc-craft -> var(--orange-2), .pc-region -> rgba(251,239,239,.62). */
.proj-people {
  background:
    radial-gradient(118% 78% at 50% 0%, #bfd6aa 0%, #d9e7c8 52%, #e6efd8 100%);
  color: var(--green);
  padding: clamp(56px, 8vh, 96px) 0;
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.person-card {
  display: block;
  text-decoration: none;
  /* Thẻ = tấm giấy kem đặt trên mặt bàn lá sen, cùng ngôn ngữ với khung
     sen ở trang chủ và tờ báo của region-v2. */
  color: var(--green);
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 53, 40, 0.1);
  border-radius: 18px;
  overflow: hidden;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.5s ease;
}
.person-card:hover {
  transform: translateY(-8px);
  /* bóng nhẹ lại: bóng đen đậm vốn để nổi trên nền tối, trên nền sáng
     nhìn như vết bẩn */
  box-shadow:
    inset 0 0 0 1px rgba(18, 53, 40, 0.14),
    0 24px 48px rgba(18, 53, 40, 0.2);
}
.pc-photo {
  /* ảnh NGANG cho thẻ thấp lại (trước là 4/5 dọc, hai hàng là tràn màn) */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
.pc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.person-card:hover .pc-photo img {
  transform: scale(1.07);
}
.pc-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.pc-body {
  padding: 14px 16px 16px;
}
.pc-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16.5px;
  margin: 0 0 4px;
  color: var(--green);
}
.pc-craft {
  /* --orange-2 là cam NHẠT dành cho nền tối; nền sáng cần cam gốc */
  color: var(--orange);
  font-size: 12px;
  line-height: 1.35;
  margin: 0 0 6px;
}
.pc-region {
  font-size: 11.5px;
  color: rgba(18, 53, 40, 0.62);
  margin: 0;
}
.pc-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
  transition: 0.3s ease;
}
.person-card:hover .pc-arrow {
  gap: 14px;
  opacity: 1;
  color: var(--orange);
}

/* ---------------------------------------------------------------------
   MÁY TÍNH: cả phần nhân vật gói gọn trong MỘT màn hình, thẻ xếp 2 HÀNG.
   Cách làm: lưới ăn hết chỗ còn lại (flex:1), hai hàng chia đều (1fr),
   trong mỗi thẻ thì phần CHỮ cao cố định còn ẢNH co giãn lấp chỗ trống.
   Nhờ vậy màn cao hay thấp cũng vừa khít, không phải canh aspect-ratio.
   (Điện thoại / màn dưới 700px thì bỏ ràng buộc, cho cuộn bình thường.)
   --------------------------------------------------------------------- */
@media (min-width: 900px) and (min-height: 700px) {
  .proj-people {
    /* CHIỀU CAO XÁC ĐỊNH (không phải min-height): có vậy lưới bên trong mới
       co lại được. Dùng min-height thì khối cứ phình theo nội dung và ảnh
       không chịu thu nhỏ -> hàng thứ hai tràn khỏi màn. */
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* chừa trên nhiều hơn dưới: thanh nav cố định phủ lên đầu khối khi
       nhảy tới #people, không chừa là mất dòng nhãn "Những người giữ hồn" */
    padding: clamp(78px, 9vh, 104px) 0 clamp(34px, 4.2vh, 56px);
  }
  .proj-people > .wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .people-head {
    flex: none;
  }
  .people-grid {
    flex: 1;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }
  /* Ít hơn 3 thẻ (đang phát hành dần) thì CHỈ MỘT HÀNG: để nguyên hai
     hàng chia đều, thẻ duy nhất chỉ cao bằng nửa chỗ trống -> lọt thỏm
     giữa màn 100vh. Đếm bằng dấu ~ để không đụng tới <template> mà
     cms.js giữ lại làm con đầu của lưới. */
  .people-grid:not(:has(.person-card ~ .person-card ~ .person-card)) {
    grid-template-rows: minmax(0, 1fr);
  }
  .person-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .pc-photo {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
  .pc-body {
    flex: none;
  }
}
/* Đầu mục CĂN GIỮA: nhãn + tiêu đề + đoạn dẫn xếp dọc, cùng một trục.
   Trước đây là hai cột dồn về hai mép (space-between) — hợp khi lưới bên
   dưới có đủ 4–5 thẻ trải hết bề ngang. Giai đoạn phát hành từng nhân vật
   một, lưới chỉ còn một thẻ nằm bên trái, mà đầu mục lại banh ra hai mép
   thì cả mảng giữa trống hoác. */
.people-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: clamp(26px, 3.4vh, 44px);
}
.people-head .eyebrow {
  color: var(--orange);
}
.people-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1.12;
  margin: 10px 0 0;
}
.people-head p {
  max-width: 42ch;
  margin-inline: auto; /* giữ bề ngang dễ đọc nhưng vẫn nằm giữa */
  color: rgba(18, 53, 40, 0.75);
  font-size: 14px;
  line-height: 1.7;
}

/* LƯỚI CO THEO SỐ THẺ. Lưới nền là 3 cột cứng — hợp khi đủ 4–5 nhân vật.
   Giai đoạn phát hành dần (JSON bật "hidden", xem assets/js/cms.js), lưới
   chỉ còn 1–2 thẻ: mỗi thẻ vẫn ăn đúng 1/3 bề ngang và dính mép trái,
   trong khi đầu mục lại căn giữa -> lệch trục, hai phần ba bên phải trống.
   auto-fit + justify-content:center: cột rỗng tự co về 0, thẻ nằm giữa.
   min(440px,100%) chứ không phải 440px: trên điện thoại cột hẹp hơn thẻ
   thì thẻ co theo, không tràn ngang. */
.people-grid:not(:has(.person-card ~ .person-card ~ .person-card)) {
  grid-template-columns: repeat(auto-fit, min(440px, 100%));
  justify-content: center;
}

/* ---------------------------------------------------------------------
   ẢNH NHÂN VẬT CHỤP DỌC
   Ảnh chân dung thường là ảnh DỌC (vd pref/tho-cam-person.png 896×1200),
   trong khi khung ảnh của thẻ nằm NGANG (16/10). object-fit:cover cắt
   theo TÂM ảnh -> mất luôn khuôn mặt, còn lại mỗi cái áo. Hai việc:

   1) Neo khung cắt lên phía trên (28%) — mặt người nằm ở phần trên khung
      ảnh nên giữ được, còn ảnh ngang chỉ dịch nhẹ, không hỏng bố cục.
   2) Khi mục chỉ còn MỘT nhân vật (giai đoạn phát hành dần), xoay thẻ
      nằm ngang: ảnh dọc nguyên tỉ lệ 3/4 bên trái, chữ bên phải. Vừa
      không cắt vào ai, vừa hết cảnh một tấm thẻ con lọt thỏm giữa màn.

   .people-grid.people-grid — lặp tên lớp để RÕ HƠN luật "ít hơn 3 thẻ" ở
   ngay trên (bên đó đếm bằng ba lần .person-card nên điểm rõ cao hơn).
   --------------------------------------------------------------------- */
.pc-photo img {
  object-position: 50% 28%;
}

@media (min-width: 720px) {
  /* Một thẻ: bề ngang gấp rưỡi thẻ thường, ảnh và chữ nằm cạnh nhau */
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) {
    grid-template-columns: min(620px, 100%);
  }
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .person-card {
    display: grid;
    /* ảnh chiếm 47% — đủ lớn để nhìn rõ người, mà thẻ không cao quá nửa màn */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
  }
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .pc-photo {
    /* 4/5 — gần đúng tỉ lệ ảnh chân dung (3/4) nên chỉ hụt một dải nhỏ ở
       chân ảnh, mà thẻ thấp lại một chút. Không đặt height: chiều cao ảnh
       chính là chiều cao thẻ. */
    aspect-ratio: 4 / 5;
  }
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .pc-body {
    align-self: center;
    padding: clamp(20px, 3vw, 34px);
  }
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .pc-body h3 {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.25;
    margin-bottom: 10px;
  }
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .pc-craft {
    font-size: 13px;
  }
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .pc-region {
    font-size: 12.5px;
  }
}

/* Trong khung 100vh (xem khối media phía trên) hàng lưới cao bằng cả chỗ
   trống; thẻ ngang không cần kéo cao theo, để nó nằm giữa hàng. */
@media (min-width: 900px) and (min-height: 700px) {
  .people-grid.people-grid:not(:has(.person-card ~ .person-card)) .person-card {
    align-self: center;
  }
}

/* Điện thoại: thẻ vẫn xếp dọc, chỉ đổi khung ảnh sang đứng cho vừa ảnh
   chân dung (khung 16/10 nằm ngang trên màn hẹp thì cắt rất nặng). */
@media (max-width: 719px) {
  .people-grid:not(:has(.person-card ~ .person-card)) .pc-photo {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- OUTRO ---------------------------------------------------- */
.proj-outro {
  background: var(--green);
  color: var(--cream);
  text-align: center;
  padding: clamp(110px, 15vw, 190px) 0;
}
.proj-outro h2 {
  font-size: clamp(28px, 4.7vw, 74px);
  text-transform: uppercase;
  margin: 14px 0 22px;
  line-height: 1;
}
.proj-outro p {
  max-width: 480px;
  margin: 0 auto 34px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(251, 239, 239, 0.8);
}

/* ---------- MOBILE --------------------------------------------------- */
@media (max-width: 820px) {
  .story-card,
  .story-card[data-h-anim]:nth-of-type(even) {
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 12vh min(6vw, 40px);
  }
  .story-card .card-media {
    flex: none;
    width: 84vw;
    height: 42vh;
  }
  .story-card .card-text {
    max-width: 84vw;
  }

  .pinfo-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery → 2 cột đơn giản, ô lớn/giữa chiếm cả hàng */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 40vw;
  }
  .gtile {
    grid-column: auto;
    grid-row: auto;
  }
  .g-center,
  .g-big {
    grid-column: 1 / 3;
    grid-row: span 2;
  }
  .gtile figcaption {
    opacity: 1;
    transform: none;
  }

  .people-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .pinfo-meta {
    grid-template-columns: 1fr;
  }
  .people-grid {
    grid-template-columns: 1fr;
  }
}