/* Single Photo Project — title/write-up + paginated photo gallery. Nav/footer/reset/fonts/six
   display fonts all live in style.css. --project-title-font/-scale/-color are set inline on
   #mainArea per-project (see single-photo_project.php). */

.title-block{
  max-width:520px;
  margin:0 auto;
  text-align:center;
  /* --project-title-font/-color/-scale are intentionally NOT redeclared here — they're set
     inline on the ancestor #mainArea (per-project, from the meta box) and must inherit down
     unmodified. Redeclaring them here with defaults previously overrode every project's chosen
     font/color no matter what was picked in the admin, which was the bug. Only --project-title-size
     has no per-project override anywhere, so it's safe to default here. */
  --project-title-size:clamp(64px, 8vw, 150px);
}
.title-block h1{
  font-family:var(--project-title-font);
  font-size:calc(var(--project-title-size) * var(--project-title-scale, 1));
  color:var(--project-title-color);
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.95;
}
.project-writeup{
  font-family:'Kalam', cursive;
  font-size:20px;
  color:var(--muted);
  margin-top:18px;
  line-height:1.5;
}

main#mainArea{
  position:relative; z-index:1; flex:1;
  display:flex;
  min-height:60vh;
  overflow:hidden;
  cursor:grab;
  /* touch-action:none (not pan-y) -- pan-y let the browser's own vertical scroll/rubber-band
     physics engage on any real finger swipe with even a slight vertical component, running at
     the same time as our JS-driven horizontal drag. That fight between native scroll and our
     transform is what made the drag feel janky on a real touchscreen (a precise simulated
     straight-line drag never shows it, which is why it wasn't obvious from software testing).
     .pane-left re-enables pan-y below so the write-up text can still scroll if it's ever long. */
  touch-action:none;
}
main#mainArea.is-dragging{ cursor:grabbing; }

.slide-content{ display:flex; width:100%; height:100%; min-height:0; will-change:transform; }

.pane{
  width:50%;
  min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:40px;
  transition:background-color .3s ease;
}
.pane.pane-left{ background:transparent; overflow-y:auto; touch-action:pan-y; }
.pane.pane-right{ background:rgba(20,18,15,0.08); }

.photo-wrap{ position:relative; max-width:100%; }
.photo-card{
  display:block;
  height:min(62vh, 560px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  box-shadow:0 26px 55px rgba(43,36,28,0.2);
  cursor:zoom-in;
}
.photo-wrap .photo-index{
  position:absolute; left:0; bottom:-24px;
  font-family:'Kalam', cursive; font-size:14px; color:rgba(43,36,28,0.5);
}

.edge-zone{
  position:absolute; top:0; bottom:0; z-index:4;
  width:8%; min-width:44px;
  display:flex; align-items:center;
  cursor:pointer;
  opacity:0;
  transition:opacity .25s ease;
}
.edge-zone:hover{ opacity:1; }
.edge-left{ left:0; justify-content:flex-start; padding-left:14px; background:linear-gradient(to right, rgba(20,18,15,0.06), transparent); }
.edge-right{ right:0; justify-content:flex-end; padding-right:14px; background:linear-gradient(to left, rgba(20,18,15,0.06), transparent); }
.edge-zone .arrow{ font-family:'Special Elite', monospace; font-size:26px; color:var(--ink-red); }

.lightbox{
  position:fixed; inset:0; z-index:60;
  background:rgba(20,18,15,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease;
  cursor:zoom-out;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:92vw; max-height:92vh; width:auto; height:auto; object-fit:contain; box-shadow:0 30px 70px rgba(0,0,0,0.5); }
.lightbox-close{
  position:absolute; top:26px; right:34px;
  font-family:'Special Elite', monospace;
  font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(244,243,239,0.8);
}
.lightbox-close:hover{ color:#f4f3ef; }

.pager{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:20px 20px 30px; }
.pager-controls{ display:flex; align-items:center; justify-content:center; gap:22px; grid-column:2; }
.pager .back{ grid-column:1; justify-self:start; }
.pager button{
  font-family:'Special Elite', monospace;
  background:none; border:none; cursor:pointer;
  font-size:18px; color:var(--ink);
  padding:6px 10px;
  transition:color .2s ease, transform .2s ease;
}
.pager button:hover{ color:var(--ink-red); }
.pager button:active{ transform:scale(0.9); }
.pager .counter{ font-size:12px; letter-spacing:0.1em; color:var(--muted); min-width:70px; text-align:center; }

.progress-track{ position:relative; z-index:1; height:2px; margin:0 40px 24px; background:rgba(43,36,28,0.12); }
.progress-fill{ position:absolute; left:0; top:0; height:100%; background:var(--ink-red); transition:width .3s ease; }

@media (max-width:860px){
  body{ min-height:0; }
  /* calc(...) accounts for #wpadminbar's height (0 for logged-out visitors; 32-46px while
     logged in) via --wp-adminbar-h, set by nav.js -- otherwise this lock ran exactly that much
     too tall while testing logged in, overlapping the site nav under the admin bar. */
  html, body{ height:calc(100svh - var(--wp-adminbar-h, 0px)); height:calc(100dvh - var(--wp-adminbar-h, 0px)); overflow-y:auto; overflow-x:hidden; }
  main#mainArea{ flex:1 1 auto; min-height:0; cursor:auto; }
  .pane{ width:100%; padding:16px; }
  .photo-card{ height:auto; width:auto; max-height:100%; max-width:100%; box-shadow:none; }
  .progress-track{ margin:0 20px 14px; }
  .pager{ display:flex; align-items:center; justify-content:space-between; padding:2px 20px 8px; gap:10px; }
  .pager .back{ font-size:10px; }
  .pager-controls{ gap:14px; }
  .pager .counter{ font-size:11px; min-width:46px; }
  .pager button{ font-size:17px; padding:6px 8px; }
  .edge-zone{ opacity:0.4; width:12%; min-width:34px; }
  .lightbox-close{ top:18px; right:20px; }
}

@media (min-width:861px){
  html, body{ height:100%; overflow:hidden; }
  main#mainArea{ min-height:0; overflow:hidden; }
  .photo-card{ height:min(48vh, 460px); }
  .progress-track{ margin:0 40px 16px; }
  .pager{ padding:12px 20px 20px; }
}