/* ============================================
   PROJECT PAGE — /portfolio/<id>
   Builds on portfolio-layout.css (header, details, gallery, footer)
   and portfolio-components.css (section tag, lightbox).
   ============================================ */

.pp { position: relative; z-index: var(--z-content); }
.pp > section, .pp > figure { padding-left: var(--gutter-x); padding-right: var(--gutter-x); }

/* Intro */
.pp-intro { padding-top: calc(80px + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.pp-breadcrumb { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 2rem; }
.pp-breadcrumb a { color: var(--c-accent); text-decoration: none; }
.pp-breadcrumb a:hover { text-decoration: underline; }
.pp-breadcrumb span[aria-hidden] { margin: 0 0.6rem; opacity: 0.6; }
.pp-intro .section-title { margin: 0; }
.pp-intro-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-top: 1.6rem; }
.pp-lead { max-width: 40em; margin: 0; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.8; color: var(--c-text); }
.pp-details { border-bottom: 0; padding: 0; }

/* Main image */
.pp-hero { margin: 0; }
.pp-hero-img { display: block; width: 100%; max-height: 82vh; object-fit: cover; border: 1px solid var(--c-line); }

/* Gallery */
.pp-gallery.project-block { border-bottom: 0; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 0; }
.pp-gallery-head, .pp-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--c-line); padding-bottom: 0.8rem; }
.pp h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-text-strong); margin: 0; }
.pp h2 em { font-style: italic; color: var(--c-accent-light); }
.pp-gallery-head span { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); }
.pp .project-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }

/* Inquiry */
.pp-cta { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); text-align: center; background: var(--c-surface, #f6f3ef); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.pp-cta .section-tag { justify-content: center; }
.pp-cta .section-tag::before { display: none; }
.pp-cta p { max-width: 34em; margin: 1rem auto 1.8rem; color: var(--c-text-dim); line-height: 1.7; }
.pp-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; }
.pp-btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 2rem; background: var(--c-text-strong); color: var(--c-bg); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; transition: background 0.3s; }
.pp-btn:hover { background: var(--c-accent); }
.pp-link { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pp-link:hover { color: var(--c-text-strong); }

/* Other projects */
.pp-more { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.pp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.pp-card { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: inherit; }
.pp-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--c-line); margin-bottom: 0.6rem; transition: opacity 0.3s; }
.pp-card:hover img { opacity: 0.85; }
.pp-card-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-text-strong); }
.pp-card-place { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-dim); }
.pp-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.pp-pager a { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; max-width: 48%; }
.pp-pager a[rel="next"] { text-align: right; margin-left: auto; }
.pp-pager span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent); }
.pp-pager strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--c-text-strong); }

@media (max-width: 900px) {
  .pp-intro-row { grid-template-columns: 1fr; align-items: start; }
  .pp-details { justify-content: flex-start; }
  .pp-details .project-detail-item { text-align: left; }
  .pp .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-cards { grid-template-columns: 1fr 1fr; }
  .pp-cards .pp-card:nth-child(3) { display: none; }
}
@media (max-width: 560px) {
  .pp-intro { padding-top: calc(70px + 1.5rem); }
  .pp-details { flex-wrap: wrap; gap: 1rem 2rem; }
  .pp-cards { grid-template-columns: 1fr; }
  .pp-cards .pp-card:nth-child(3) { display: flex; }
}