/* Portfolio detail — landing-style vertical gallery + sticky info panel */

.pv-wrap{
  padding:1.25rem 0 4rem;
}
.pv-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,0.9fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:start;
}

/* Left: full gallery images stacked (landing / case-study strip) */
.pv-gallery-col{
  min-width:0;
}
.pv-project-strip{
  width:100%;
  margin:0;
  padding:0;
  background:#111;
  border-radius:var(--radius-xl,16px);
  overflow:hidden;
  border:1px solid var(--border-color,rgba(0,0,0,.06));
  box-shadow:var(--shadow-md,0 10px 28px rgba(0,0,0,.08));
}
.pv-project-strip figure{
  margin:0;
  padding:0;
  line-height:0;
}
.pv-project-strip img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border:0;
  cursor:zoom-in;
}
.pv-project-strip-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height:220px;
  padding:48px 20px;
  text-align:center;
  color:rgba(255,255,255,.55);
  background:#1a1a1a;
  border-radius:var(--radius-xl,16px);
}
.pv-project-strip-empty i{font-size:2rem;opacity:.7}
.pv-project-strip-empty p{margin:0}

/* Right: section-by-section info */
.pv-info-col{
  position:sticky;
  top:calc(var(--header-height,72px) + 1rem);
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-height:calc(100vh - var(--header-height,72px) - 2rem);
  overflow:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(128,128,128,.35) transparent;
}
.pv-info-col::-webkit-scrollbar{
  width:6px;
}
.pv-info-col::-webkit-scrollbar-track{
  background:transparent;
}
.pv-info-col::-webkit-scrollbar-thumb{
  background:rgba(128,128,128,.35);
  border-radius:999px;
}
.pv-info-col::-webkit-scrollbar-thumb:hover{
  background:rgba(128,128,128,.55);
}
[data-theme="dark"] .pv-info-col,
html.dark .pv-info-col{
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
[data-theme="dark"] .pv-info-col::-webkit-scrollbar-thumb,
html.dark .pv-info-col::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
}
[data-theme="dark"] .pv-info-col::-webkit-scrollbar-thumb:hover,
html.dark .pv-info-col::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.38);
}
.pv-section{
  background:var(--surface-primary,var(--surface,#fff));
  border:1px solid var(--border-color,var(--border-hairline,rgba(0,0,0,.08)));
  border-radius:var(--radius-xl,16px);
  padding:1.15rem 1.25rem;
  box-shadow:var(--shadow-sm,0 2px 10px rgba(0,0,0,.04));
}
.pv-section-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted,var(--ink-muted,#888));
  margin:0 0 .65rem;
}
.pv-section-label i{
  color:var(--primary,var(--accent));
  font-size:.8rem;
}

.pv-title{
  font-size:clamp(1.45rem,2.4vw,1.95rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 .75rem;
  color:var(--text-primary,var(--ink-strong));
  line-height:1.2;
}
.pv-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pv-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(var(--primary-rgb,240,90,40),0.1);
  color:var(--primary,var(--accent));
  font-size:.78rem;
  font-weight:600;
  padding:.3rem .75rem;
  border-radius:var(--radius-pill,999px);
}
.pv-tag.featured{
  background:var(--primary,var(--accent));
  color:var(--ink-on-solid,#fff);
}

.pv-summary{
  margin:0;
  color:var(--text-secondary,var(--ink-soft));
  font-size:.98rem;
  line-height:1.7;
}

.pv-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pv-actions .btn{
  flex:1 1 auto;
  justify-content:center;
  min-width:140px;
}

.pv-video-block{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pv-video-preview{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg,12px);
  overflow:hidden;
  background:#12141a;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease;
}
.pv-video-preview:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.pv-video-preview::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 100%);
}
.pv-video-fallback-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-60%);
  font-size:34px;color:rgba(255,255,255,.35);
}
.pv-play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary,var(--accent));
  font-size:18px;padding-left:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  z-index:1;
  transition:transform .2s ease;
}
.pv-video-preview:hover .pv-play-btn{transform:translate(-50%,-50%) scale(1.08)}
.pv-video-label{
  position:absolute;bottom:10px;left:12px;
  color:var(--ink-on-solid,#fff);
  font-size:.76rem;font-weight:600;
  display:flex;align-items:center;gap:6px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  z-index:1;
}
.pv-video-info-desc{
  margin:0;
  font-size:.85rem;
  color:var(--text-secondary,var(--ink-soft));
  line-height:1.55;
}

.pv-case-study{
  line-height:1.8;
  color:var(--text-primary,var(--ink));
  font-size:.95rem;
}
.pv-case-study img{
  max-width:100%;
  border-radius:var(--radius-lg,12px);
  margin:.75rem 0;
}
.pv-case-study p:first-child{margin-top:0}
.pv-case-study p:last-child{margin-bottom:0}

.pv-lightbox{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  z-index:2000;
  align-items:center;justify-content:center;
  padding:30px;
}
.pv-lightbox.show{display:flex}
.pv-lightbox img{
  max-width:100%;
  max-height:100%;
  border-radius:var(--r-field,10px);
}
.pv-lightbox-close{
  position:absolute;top:20px;right:24px;
  color:var(--ink-on-solid,#fff);
  font-size:28px;background:none;border:none;cursor:pointer;
}
.pv-lightbox-video{
  position:relative;
  width:100%;
  max-width:900px;
  aspect-ratio:16/9;
}
.pv-lightbox-video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  border-radius:var(--r-field,10px);
}

@media (max-width:991px){
  .pv-layout{
    grid-template-columns:1fr;
    gap:1.25rem;
  }
  .pv-info-col{
    position:static;
    max-height:none;
    overflow:visible;
    order:-1;
  }
}
@media (max-width:576px){
  .pv-wrap{padding:1rem 0 2.5rem}
  .pv-section{padding:1rem 1.05rem}
}