/* =====================================================================
   DỰ ÁN VĂN HOÁ VIỆT — khối MỘT dự án (project-solo)
   ---------------------------------------------------------------------
   Giai đoạn đầu chỉ phát hành MỘT câu chuyện, nên khối này cố tình ĐƠN
   GIẢN: một tít khu vực, một khung sen, bốn dòng chữ, một lối vào.

   Bố cục đúng như bản vẽ:
     ┌────────────────────────────────────────────────┐
     │ DỰ ÁN VĂN HOÁ VIỆT ─────────────────────────── │
     │  ┌───────────────┐   Sáp ong                   │
     │  │  ẢNH + KHUNG  │   trên nền chàm             │
     │  │      SEN      │   MÙ CANG CHẢI · YÊN BÁI    │
     │  └───────────────┘   Vẽ sáp, nhuộm chàm...     │
     │                      Khám phá câu chuyện →     │
     └────────────────────────────────────────────────┘

   MÀU: mở đầu và kết thúc đều bằng var(--green) — đúng màu mà
   .bloom-outro vừa tan về, và cũng là màu của .map-cta ngay bên dưới,
   nên không có vết cắt nào.

   KHUNG SEN = "tấm giấy" hình cánh sen: vòm cánh sen ở trên, nền kem
   sáng (mặt duy nhất sáng trong cả chương tối), viền vàng mảnh, và một
   dấu sen vàng đóng ở chân khung. Ảnh là hình VẼ TÁCH NỀN nên đứng
   thẳng trên tấm giấy, không bị cắt như ảnh chụp.

   Mọi selector scope trong .solo-section.
   KHÔNG gắn data-listing-card ở đây — listing.js điền thẻ theo THỨ TỰ,
   thêm vào sẽ làm lệch toàn bộ đoá sen phía trên.
   ===================================================================== */
.solo-section {
  /* BẢN NỀN SÁNG — mặt bàn lá sen mượn của person-magazine.html
     (--mag-field-* trong assets/css/person-magazine.css) và region-v2.
     Trước đây khối này nền xanh ĐẬM, chữ kem, vàng sáng. Lật sang nền
     sáng thì phải đổi CẢ BA biến màu dưới đây, nếu không chữ kem và vàng
     sáng sẽ mất hút. Muốn quay lại bản tối: trả ba biến về
     #e0b45f / rgba(224,180,95,.32) / rgba(251,239,239,.72), đổi
     background lại thành var(--green), color thành var(--cream), rồi
     sửa .solo-title và .solo-more về var(--cream). */
  --s-field-1: #d9e7c8;
  --s-field-2: #bfd6aa;
  --s-gold: #8f6a15;  /* vàng ĐẬM: vàng nhị sen sáng đặt trên nền sáng là mất chữ */
  --s-gold-line: rgba(18, 53, 40, 0.22);
  --s-dim: rgba(18, 53, 40, 0.72);

  /* Chiều cao dải sương kem nối từ màn Câu chuyện xuống chương tối.
     Dải sương (.bloom-bridge) do projects-bloom.css vẽ; khối này chỉ
     cấp chiều cao và chừa chỗ cho nó bằng padding-top.
     NẾU DÁN LẠI khối đoá sen (partials/projects-bloom.html) thì dải sương
     về lại khối đó — bỏ dòng --bridge-h và trả padding-top về
     clamp(52px, 7vw, 92px). */
  --bridge-h: clamp(200px, 26vw, 360px);

  position: relative;
  isolation: isolate;
  overflow: hidden; /* lá sen tràn ngang ±6% — không cho sinh scroll ngang */
  background:
    radial-gradient(118% 74% at 50% 6%, var(--s-field-1) 0%, var(--s-field-2) 100%);
  color: var(--green);
  font-family: var(--body);
  padding: calc(var(--bridge-h) + clamp(26px, 4vw, 56px)) 20px
    clamp(58px, 8vw, 100px);
}
.solo-inner {
  position: relative;
  z-index: 2; /* trên dải sương */
  /* Mốc nhảy của #projects — chừa chỗ cho thanh nav cố định */
  scroll-margin-top: clamp(76px, 9vw, 104px);
  max-width: 1180px; /* = .bloom-inner, hai khối thẳng lề nhau */
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   1. TÍT KHU VỰC — chữ nhỏ in hoa + gạch vàng chạy hết bề ngang
--------------------------------------------------------------------- */
.solo-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(30px, 4.5vw, 58px);
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* --orange-2 là sắc cam NHẠT dành cho nền tối; trên nền lá sen sáng
     phải dùng cam gốc mới đủ tương phản. */
  color: var(--orange);
}
.solo-kicker::after {
  /* Có GIỚI HẠN bề ngang, không flex: 1 — dải sương phía trên có đoá sen
     rủ xuống mé phải, gạch kéo hết bề ngang sẽ kẻ ngang qua cánh hoa. */
  content: "";
  width: min(420px, 34vw);
  height: 1px;
  background: linear-gradient(90deg, var(--s-gold-line), transparent);
}

/* ---------------------------------------------------------------------
   2. HÀNG CHÍNH — khung sen (trái) · chữ (phải)
   Cả hàng LÀ MỘT thẻ <a>: bấm đâu cũng vào được câu chuyện.
--------------------------------------------------------------------- */
.solo-row {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  color: inherit;
  text-decoration: none;
  /* Cụm ảnh + chữ CĂN GIỮA khối, không kéo hết bề ngang .solo-inner:
     tiêu đề chỉ hai chữ và .solo-desc giới hạn 44ch, nên trải hết 1180px
     sẽ chừa một mảng trống lớn bên phải, nhìn như bố cục bị lệch trái. */
  max-width: 1040px;
  margin-inline: auto;
}
/* Ô lưới mặc định KHÔNG co nhỏ hơn bề ngang gốc của ảnh bên trong —
   thiếu dòng này thì màn hẹp bị tràn ngang. */
.solo-row > * {
  min-width: 0;
}

/* ---------- Khung sen ---------- */
.solo-figure {
  position: relative; /* .solo-seal treo ở đây, ngoài vùng bị cắt */
  display: block;
}
.solo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  /* Vòm cánh sen: hai góc trên tròn cao, hai góc dưới gần vuông.
     Cùng ngôn ngữ hình với .card-c ở khối đoá sen, chỉ lớn hơn. */
  border-radius: 50% 50% 18px 18px / 32% 32% 18px 18px;
  /* Tấm giấy kem — mặt sáng DUY NHẤT của cả chương tối */
  background:
    radial-gradient(
      80% 62% at 50% 96%,
      rgba(126, 140, 75, 0.26),
      transparent 70%
    ),
    linear-gradient(170deg, var(--cream-2) 0%, var(--cream) 62%, #efe0dc 100%);
  box-shadow:
    inset 0 0 0 1px var(--s-gold-line),
    0 24px 50px rgba(18, 53, 40, 0.22);
  transition: box-shadow 0.45s ease;
}
.solo-frame img {
  /* Hình vẽ TÁCH NỀN: dùng contain + canh đáy để nhân vật đứng trên
     tấm giấy. Nếu đổi sang ẢNH CHỤP kín khung thì sửa thành
     object-fit: cover; object-position: center; */
  width: 100%;
  height: clamp(260px, 31vw, 390px);
  object-fit: contain;
  object-position: bottom center;
  padding: clamp(28px, 3.4vw, 46px) clamp(16px, 2vw, 30px) 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* ẢNH CHỤP kín khung — thêm class "is-photo" vào .solo-frame trong HTML.
   Ảnh phủ trọn vòm cánh sen (không còn tấm giấy kem chừa lề), hạ nhẹ độ
   rực để hoà với bảng màu trầm của cả chương. */
.solo-frame.is-photo img {
  height: clamp(280px, 33vw, 420px);
  object-fit: cover;
  object-position: center;
  padding: 0;
  filter: saturate(0.92) contrast(1.03);
}
/* Vệt tối mỏng ở chân khung -> dấu sen vàng .solo-seal không chìm vào ảnh */
.solo-frame.is-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 20, 15, 0.5), transparent);
}

.solo-row:hover .solo-frame {
  box-shadow:
    inset 0 0 0 1px rgba(143, 106, 21, 0.45),
    0 30px 60px rgba(18, 53, 40, 0.3);
}
.solo-row:hover .solo-frame img {
  transform: translateY(-6px);
}

/* Dấu sen vàng đóng ở chân khung — nằm ĐÈ lên viền nên phải ở ngoài
   .solo-frame (vùng overflow: hidden). */
.solo-seal {
  position: absolute;
  left: 50%;
  bottom: -21px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: inset 0 0 0 1px var(--s-gold-line);
  display: grid;
  place-items: center;
}
.solo-seal svg {
  width: 22px;
  height: 22px;
  fill: var(--s-gold);
}

/* ---------- Cột chữ ---------- */
.solo-title {
  font-family: var(--serif); /* Playfair Display — cùng bộ với .story-big */
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.1;
  letter-spacing: 0.004em;
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--green);
  /* Cỡ chữ này hợp với tiêu đề NGẮN — hai cụm vài chữ, lấy từ scene_title_1/2.
     Tiêu đề dài cỡ một mệnh đề sẽ khiến mỗi dòng tự gãy làm đôi; gặp trường
     hợp đó thì rút tiêu đề cho ngắn lại, đừng hạ cỡ chữ. */
  text-wrap: balance;
}
.solo-title span {
  display: block; /* dòng 2 ("vào đời sống") xuống hàng, như person.html */
}
.solo-place {
  margin: 0 0 clamp(16px, 2.2vw, 24px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-gold);
}
.solo-desc {
  max-width: 44ch;
  margin: 0 0 clamp(24px, 3.2vw, 36px);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.72;
  color: var(--s-dim);
}
/* Lối vào: chữ + mũi tên trượt nhẹ khi rê chuột */
.solo-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--s-gold-line);
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.solo-more i {
  font-style: normal;
  transition: transform 0.3s ease;
}
.solo-row:hover .solo-more {
  color: var(--s-gold);
  border-bottom-color: var(--s-gold);
}
.solo-row:hover .solo-more i {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .solo-frame img,
  .solo-more i {
    transition: none;
  }
  .solo-row:hover .solo-frame img,
  .solo-row:hover .solo-more i {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   3. Responsive — xếp dọc: khung sen trước, chữ sau
--------------------------------------------------------------------- */
@media (max-width: 860px) {
  .solo-row {
    grid-template-columns: 1fr;
    gap: clamp(34px, 6vw, 48px);
  }
  .solo-frame {
    border-radius: 50% 50% 16px 16px / 26% 26% 16px 16px;
  }
  .solo-frame img {
    height: clamp(250px, 44vw, 350px);
  }
  .solo-desc {
    max-width: 100%;
  }
}
@media (max-width: 560px) {
  .solo-kicker {
    font-size: 11.5px;
    letter-spacing: 0.18em;
  }
  .solo-frame {
    border-radius: 42% 42% 14px 14px / 20% 20% 14px 14px;
  }
}