/* Photos index (archive-photo_project.php). Nav/footer/reset/fonts live in style.css. */

main{
  position:relative; z-index:1;
  display:flex;
  flex:1 1 auto;
  min-height:0;
}

.index-left{
  width:42%;
  padding:70px 60px;
  display:flex; flex-direction:column;
  justify-content:center;
}
.index-kicker{
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:26px;
}
.project-list{ list-style:none; }
.project-list li{ border-bottom:1px dashed rgba(43,36,28,0.18); }
.project-list a{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 4px;
  font-size:clamp(17px, 2vw, 22px);
  transition:color .2s ease, padding-left .25s ease;
}
.project-list .num{ font-size:12px; color:var(--muted); min-width:22px; }
.project-list a:hover, .project-list a:focus-visible{ color:var(--ink-red); padding-left:14px; }
.project-list a:hover .num, .project-list a:focus-visible .num{ color:var(--ink-red); }
.project-list .count{
  margin-left:auto;
  font-family:'Kalam', cursive;
  font-size:14px; color:var(--muted);
  opacity:0;
  transition:opacity .2s ease;
}
.project-list a:hover .count, .project-list a:focus-visible .count{ opacity:1; }

.index-right{
  width:58%;
  position:relative;
  border-left:1px dashed rgba(43,36,28,0.3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.preview-frame{
  display:block;
  height:min(52vh, 440px);
  max-width:90%;
  width:auto;
  object-fit:contain;
  opacity:0;
  transform:scale(0.97);
  transition:opacity .35s ease, transform .35s ease;
  box-shadow:0 24px 50px rgba(43,36,28,0.18);
}
.preview-frame.is-visible{ opacity:1; transform:scale(1); }
.index-right .hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase;
  opacity:1; transition:opacity .3s ease;
}
.index-right.has-hover .hint{ opacity:0; }

@media (max-width:860px){
  /* height (not min-height) + overflow-y:auto scroll-safety-net — see the mobile-viewport-bug
     notes in single-photo-project.css / the theme's originating prototype for why this exact
     combination matters (a plain min-height here would let body's own base min-height:100vh
     silently win and stretch past the real visible screen on phones with a toolbar showing). */
  /* 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; }
  body{ min-height:0; }
  main{ flex:1 1 auto; flex-direction:column; }
  .index-left{ width:100%; padding:36px 24px; }
  .index-right{ display:none; }
}

@media (min-width:861px){
  html, body{ height:100%; overflow:hidden; }
  main{ overflow:hidden; }
  .index-left{ padding:40px 60px; }
  .preview-frame{ height:min(56vh, 460px); }
}