/* ==========================================================================
   Projects Portfolio Stylesheet (Optimized & Clean) - Wanda Wood
   ========================================================================== */

/* Sub-page Hero / Breadcrumb */
/* Projects Portfolio Grid (纯白画廊风格、大比例、琥珀金微光、艺术破折号) */
.projects-grid-section {
  background: var(--paper);
  padding: 120px 0; /* 从 Hero 下直接开始展示，充足的呼吸空间 */
}

.projects-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}

.portfolio-item {
  display: flex;
  flex-direction: column;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.portfolio-item__media {
  position: relative;
  height: 380px; /* 高比例大图 */
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(11, 13, 14, 0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 琥珀木色轻微光泽叠加层 */
.portfolio-item__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(160, 123, 88, 0.06);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

/* Card hover animation */
.portfolio-item:hover .portfolio-item__media {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(11, 13, 14, 0.1);
}

.portfolio-item:hover .portfolio-item__media img {
  transform: scale(1.04);
}

.portfolio-item:hover .portfolio-item__media::after {
  opacity: 1;
}

/* Caption details */
.portfolio-item__caption {
  padding: 0 4px;
}

/* 前置艺术金色破折号 */
.portfolio-item__cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  display: block;
}

.portfolio-item__cat::before {
  content: '— ';
  color: var(--brown);
  margin-right: 4px;
  font-weight: 500;
}

.portfolio-item__title {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.35;
  transition: color 0.25s ease;
}

.portfolio-item:hover .portfolio-item__title {
  color: var(--brown);
}

.portfolio-item__desc {
  font-size: 14px;
  line-height: 1.7; /* 舒适行高 */
  color: var(--muted);
  margin: 0;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1080px) {
  .projects-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .portfolio-item__media {
    height: 300px;
  }
}

@media (max-width: 760px) {
  .projects-grid-section {
    padding: 64px 0 80px;
  }

  .projects-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .portfolio-item__media {
    height: 240px;
    margin-bottom: 14px;
  }

  .portfolio-item__title {
    font-size: 17px;
  }
}