/* ── PROJECT PAGE ── */

/* ── PROJECT NAV BAR ── */
.project-nav-bar {
  display:flex; gap:28px;
  overflow-x:auto; white-space:nowrap;
  padding:180px 48px 18px;
  border-bottom:0.5px solid rgba(74,56,40,0.12);
  scrollbar-width:thin;
}
.project-nav-bar::-webkit-scrollbar { height:3px; }
.project-nav-bar::-webkit-scrollbar-thumb { background:rgba(74,56,40,0.25); }
.proj-nav-item {
  font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:#7a6a55; opacity:0.65; text-decoration:none;
  padding-bottom:10px; border-bottom:0.7px solid transparent;
  transition:opacity 0.3s, border-color 0.3s, color 0.3s; flex-shrink:0;
}
.proj-nav-item:hover { opacity:0.9; }
.proj-nav-item.active { opacity:1; color:#4a3828; border-bottom-color:#4a3828; }

/* ── HERO ── */
.project-hero {
  position:sticky; top:0; z-index:1;
  width:100%; aspect-ratio:16/9; overflow:hidden;
  background:#e8e4dc;
}
.project-hero-video { width:100%; height:100%; object-fit:cover; display:none; }
.project-hero-img { width:100%; height:100%; object-fit:contain; display:block; }

/* ── HERO SLIDESHOW ── */
.hero-slideshow { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
  will-change:transform, opacity;
}
.hero-slide.active { opacity:1; }
@keyframes kb-zoom-out { from { transform:scale(1.08); } to { transform:scale(1.0); } }
@keyframes kb-zoom-in  { from { transform:scale(1.0);  } to { transform:scale(1.08); } }
.hero-slide.active.kb-out { animation:kb-zoom-out 6s ease forwards; }
.hero-slide.active.kb-in  { animation:kb-zoom-in  6s ease forwards; }
body.reduce-motion .hero-slide { animation:none !important; }

/* ── FLOOR PLAN ── */
.project-desc-row.has-plan { grid-template-columns:0.8fr 1fr; gap:40px; align-items:end; }
.project-plan-col { display:block; align-self:end; }
.project-plan-img { width:100%; height:auto; display:block; }

.project-title { font-size:28px; letter-spacing:0.08em; color:#4a3828; font-weight:300; }

/* ── INFO CARD ── */
.project-info-card {
  position:relative; z-index:2; background:#f0eeea;
  width:calc(100% - 28px); max-width:1200px; margin:0 auto;
  padding:64px 80px 64px;
}

/* ── GALLERY CARD ── */
.project-gallery-card {
  position:relative; z-index:2; background:#f0eeea;
  width:calc(100% - 28px); max-width:1200px; margin:24px auto 0;
  padding:72px 120px 80px;
}

/* description row */
.project-desc-row {
  display:grid; grid-template-columns:1fr 1.8fr;
  gap:80px;
}
.project-details-col { display:flex; flex-direction:column; gap:32px; }
.project-details { display:flex; flex-direction:column; gap:24px; }
.detail-label { font-size:8px; letter-spacing:0.24em; text-transform:uppercase; color:#7a6a55; opacity:0.65; margin-bottom:5px; }
.detail-value { font-size:11px; letter-spacing:0.08em; color:#4a3828; opacity:0.85; }
.project-description { font-size:13px; line-height:1.9; color:#5a4e40; opacity:0.80; letter-spacing:0.03em; }

/* ── GALLERY ── */
.gallery-title { font-size:9px; letter-spacing:0.26em; text-transform:uppercase; color:#7a6a55; opacity:0.60; margin-bottom:32px; text-align:center; }
.gallery { display:grid; grid-template-columns:repeat(12, 1fr); gap:40px; }

.gallery-img { overflow:hidden; position:relative; cursor:pointer; }

/* reveal animation — fade + subtle scale */
body:not(.reduce-motion) .gallery-img.reveal-pending img {
  opacity: 0;
  transform: scale(1.04);
}
.gallery-img.reveal-active img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.gallery-img:nth-child(1) { grid-column:span 12; aspect-ratio:16/9; }
.gallery-img.gallery-wide { grid-column:span 12; aspect-ratio:16/9; }
.gallery-img:nth-child(n+2):not(.gallery-wide) { grid-column:span 6; aspect-ratio:3/2; }

.gallery-img img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-img::after {
  content:''; position:absolute; inset:0;
  background:rgba(28,20,12,0); transition:background 0.35s;
}
.gallery-img:hover::after { background:rgba(28,20,12,0.18); }

/* ── PROJECT NAV ARROWS ── */
.proj-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
  border: 0.7px solid rgba(74,56,40,0.12);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.25s, background 0.25s;
  line-height: 0;
}
.proj-arrow:hover { opacity: 1; background: rgba(255,255,255,0.55); }
.proj-arrow svg {
  width: 16px;
  height: 28px;
  stroke: #4a3828;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proj-arrow-prev { left: 12px; }
.proj-arrow-next { right: 12px; }
.proj-arrow.arrow-hidden { opacity: 0 !important; pointer-events: none; }

/* ── PAGE TRANSITION ── */
@keyframes slideExitLeft  { to   { transform:translateX(-28%); opacity:0; } }
@keyframes slideExitRight { to   { transform:translateX(28%);  opacity:0; } }
@keyframes slideEnterRight{ from { transform:translateX(28%);  opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideEnterLeft { from { transform:translateX(-28%); opacity:0; } to { transform:translateX(0); opacity:1; } }
body.slide-exit-left  { animation: slideExitLeft  0.32s ease forwards; }
body.slide-exit-right { animation: slideExitRight 0.32s ease forwards; }
body.slide-enter-right{ animation: slideEnterRight 0.36s ease forwards; }
body.slide-enter-left { animation: slideEnterLeft  0.36s ease forwards; }

@media (max-width:767px) {
  .proj-arrow { opacity: 0.5; padding: 12px; background-color: transparent; background: transparent; border: none; backdrop-filter: none; width: auto; height: auto; }
  .proj-arrow svg { width: 14px; height: 26px; stroke: #4a3828; }
  .proj-arrow-prev { left: 4px; }
  .proj-arrow-next { right: 4px; }
}

/* ── LIGHTBOX ── */
.lightbox {
  position:fixed; inset:0; z-index:500;
  background:rgba(20,14,8,0.94);
  display:none; align-items:center; justify-content:center;
}
.lightbox.open { display:flex; }
.lightbox-img { max-width:68vw; max-height:78vh; object-fit:contain; }
.lightbox-close {
  position:absolute; top:28px; right:36px;
  font-size:22px; color:rgba(240,230,215,0.7);
  cursor:pointer; background:none; border:none; transition:color 0.3s;
}
.lightbox-close:hover { color:rgba(240,230,215,1); }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:28px; color:rgba(240,230,215,0.6);
  cursor:pointer; background:none; border:none; padding:12px; transition:color 0.3s;
}
.lightbox-nav:hover { color:rgba(240,230,215,1); }
.lightbox-prev { left:24px; }
.lightbox-next { right:24px; }

/* ── MOBILE ── */
@media (max-width:767px) {
  /* pin the project nav bar so the hero stays pinned right below it from the first scroll
     (info card then rises over a fixed-size hero instead of the hero sliding up first) */
  .project-nav-bar { padding:128px 24px 14px; gap:20px; position:sticky; top:0; z-index:6; background:var(--bg); }
  .project-hero { aspect-ratio:3/4; margin-bottom:24px; }
  .project-hero-img { object-fit:contain; transform:scale(1.9); transform-origin:center center; }
  .project-title { font-size:22px; }
  .project-details-col { gap:20px; }
  .project-info-card { padding:36px 20px 40px; min-height:unset; }
  .project-gallery-card { padding:36px 20px 48px; margin-top:10px; }
  .project-desc-row { grid-template-columns:1fr; gap:32px; }
  .project-desc-row.has-plan { grid-template-columns:1fr; }
  .project-plan-col { margin-top:8px; }
  .project-plan-img { width:calc(100% + 40px); margin-left:-20px; }
  .gallery { grid-template-columns:1fr 1fr; gap:14px; }
  .gallery-img { grid-column:span 1 !important; aspect-ratio:1/1 !important; }
  .gallery-img.gallery-hero { grid-column:1 / -1 !important; aspect-ratio:16/9 !important; }
  .gallery-img.gallery-wide { grid-column:1 / -1 !important; aspect-ratio:16/9 !important; }
}
@media (min-width:768px) and (orientation:landscape) {
  .project-title { font-size:42px; }
  .project-description { font-size:14px; }
}