/* Portfolio gallery — extends the base terminal theme in assets/home-v4/main.css.
   Load order: home-v4/main.css (base, variables, .chip/.chips) THEN this file. */

.wrap--wide{max-width:920px}

.back{margin:-8px 0 6px}
.back a{color:var(--muted);text-decoration:none;font-size:13px;border-bottom:1px dotted var(--line)}
.back a:hover{color:var(--accent);border-color:var(--accent)}

.intro{color:var(--muted);margin-bottom:6px}

.projects{display:flex;flex-direction:column;gap:14px;margin-top:8px}

.proj{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:14px;transition:border-color .2s;
}
.proj:hover{border-color:var(--accent)}

/* Compact thumbnail; click opens the full-size screenshot in the lightbox.
   It's a button so it's keyboard-accessible. */
.proj__thumb{
  position:relative;flex:0 0 auto;width:180px;
  padding:0;margin:0;border:1px solid var(--line);border-radius:7px;
  overflow:hidden;background:#1f1f1f;cursor:zoom-in;line-height:0;display:block;
}
.proj__img{
  width:100%;height:auto;display:block;
  aspect-ratio:16 / 10;object-fit:cover;object-position:top;
  /* dim slightly so bright screenshots don't glare on the dark page */
  filter:brightness(.82) saturate(.95);transition:filter .2s;
}
.proj__thumb:hover .proj__img,
.proj__thumb:focus-visible .proj__img{filter:none}
.proj__zoom{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(20,20,20,.35);
  opacity:0;transition:opacity .2s;font-size:1.1rem;
}
.proj__thumb:hover .proj__zoom,
.proj__thumb:focus-visible .proj__zoom{opacity:1}
/* Placeholder shown until a screenshot file exists */
.proj__thumb.is-empty{cursor:default;aspect-ratio:16 / 10;display:flex;align-items:center;justify-content:center}
.proj__thumb.is-empty .proj__img,
.proj__thumb.is-empty .proj__zoom{display:none}
.proj__thumb.is-empty::after{content:"no shot";color:var(--muted);font-size:12px}

.proj__body{flex:1 1 auto;min-width:0}
.proj__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.proj__num{color:var(--accent);font-weight:700}
.proj__name{font-size:1.1rem;font-weight:700;margin:0}
.proj__host{margin-left:auto;color:var(--muted);text-decoration:none;font-size:13px}
.proj__host:hover{color:var(--accent)}
.proj__desc{color:var(--ink);margin:9px 0 12px}
.proj__meta{display:flex;flex-direction:column;gap:9px}
.proj__role{color:var(--muted);font-size:13px}
.proj__role::before{content:"role: ";color:var(--line)}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,10,.92);
}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:100%;max-height:90vh;border:1px solid var(--line);border-radius:8px}
.lightbox__close{
  position:absolute;top:12px;right:18px;
  background:none;border:0;color:var(--ink);
  font-size:2.2rem;line-height:1;cursor:pointer;
}
.lightbox__close:hover{color:var(--accent)}

@media (max-width:560px){
  .proj__thumb{width:130px}
  .proj__host{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .proj{transition:none}
  .proj__img,.proj__zoom{transition:none}
}