/* PROJECT CASES page — namespaced .pcj-*, brand colors only. */

.pcj-container { max-width: 1400px; width: calc(100% - 80px); margin: 0 auto; }
@media (max-width: 1000px) { .pcj-container { width: calc(100% - 40px); } }
@media (max-width: 640px) { .pcj-container { width: calc(100% - 28px); } }

.pcj-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #C8A24B;
}
.pcj-h1 { margin: 0 0 14px; font-size: 34px; font-weight: 600; color: #111111; }
.pcj-sub { margin: 0; font-size: 14.5px; line-height: 1.75; color: #666666; }

/* ---------- list hero ---------- */
.pcj-hero { background: #F7F7F5; padding: 70px 0; }
.pcj-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  gap: 48px;
  align-items: center;
}
.pcj-tag { margin: 16px 0 0; font-size: 12.5px; letter-spacing: 1.2px; color: #999999; }
.pcj-hero-img { position: relative; overflow: hidden; }
.pcj-hero-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- list grid ---------- */
.pcj-list-sec { padding: 70px 0 80px; }
.pcj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 48px;
}
.pcj-item { display: block; text-decoration: none; }
.pcj-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #F0F0EE;
}
.pcj-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}
.pcj-shade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease-out;
}
.pcj-shade span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--yellow);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.pcj-item:hover .pcj-img img { transform: scale(1.02); }
.pcj-item:hover .pcj-shade { background: rgba(0, 0, 0, 0.28); }
.pcj-item:hover .pcj-shade span { opacity: 1; transform: none; }

.pcj-info { padding-top: 18px; }
.pcj-info .cat {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #C8A24B;
  text-transform: uppercase;
}
.pcj-info h3 {
  margin: 8px 0 2px;
  font-size: 20px;
  font-weight: 600;
  color: #111111;
  transition: color 0.2s ease;
}
.pcj-item:hover .pcj-info h3 { color: #B8860B; }
.pcj-info .en {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: #999999;
  font-style: normal;
}
.pcj-info .meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: #888888;
}
.pcj-info .meta i { font-style: normal; margin: 0 7px; color: #CCCCCC; }
.pcj-info .ov {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #666666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcj-empty { text-align: center; color: #888888; padding: 60px 0; }

/* ---------- detail ---------- */
.pcj-d-hero { background: #F7F7F5; padding: 64px 0; }
.pcj-d-grid {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  gap: 48px;
  align-items: center;
}
.pcj-d-meta { list-style: none; margin: 20px 0 0; padding: 0; }
.pcj-d-meta li {
  padding: 7px 0;
  border-bottom: 1px solid #E8E8E8;
  font-size: 13px;
  color: #444444;
}
.pcj-d-meta li:first-child { border-top: 1px solid #E8E8E8; }
.pcj-d-meta em {
  font-style: normal;
  display: inline-block;
  min-width: 120px;
  color: #999999;
  font-size: 11.5px;
  letter-spacing: 1px;
}
.pcj-d-img { overflow: hidden; }
.pcj-d-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.pcj-d-body { padding: 56px 0 30px; }
.pcj-sec {
  max-width: 860px;
  margin: 0 auto 52px;
}
.pcj-no {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--yellow);
}
.pcj-sec-en {
  margin: 4px 0 2px;
  font-size: 11.5px;
  letter-spacing: 2.5px;
  color: #999999;
  text-transform: uppercase;
}
.pcj-sec-zh {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 600;
  color: #111111;
  padding-bottom: 12px;
  border-bottom: 1px solid #ECECEA;
}
.pcj-para { margin: 0; font-size: 14.5px; line-height: 1.9; color: #444444; }

.pcj-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pcj-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pcj-grid.small { gap: 24px; }
.pcj-grid.small .pcj-info .ov { display: none; }

.pcj-cta { background: #111111; padding: 44px 0; }
.pcj-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pcj-cta-text { font-size: 18px; font-weight: 600; color: #FFFFFF; }
.pcj-cta-btn {
  padding: 12px 30px;
  background: var(--yellow);
  color: #111111;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.pcj-cta-btn:hover { filter: brightness(1.06); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .pcj-hero-grid, .pcj-d-grid { grid-template-columns: 1fr; gap: 30px; }
  .pcj-grid { gap: 40px 28px; }
  .pcj-hero { padding: 50px 0; }
}
@media (max-width: 640px) {
  .pcj-grid { grid-template-columns: 1fr; gap: 36px; }
  .pcj-h1 { font-size: 27px; }
  .pcj-gallery { grid-template-columns: 1fr 1fr; }
  .pcj-cta-row { flex-direction: column; text-align: center; }
}