/* ==========================================================================
   portfolio.css — breadcrumb, sidebar, grid, hover caption, lightbox
   Loaded only on /portfolio/ (via $extra_styles).
   ========================================================================== */

.portfolio { max-width: 1280px; margin: 0 auto; padding: 40px 28px 0; }

/* ---- Breadcrumb ---------------------------------------------------------- */
.crumb { font-family: var(--sans); font-size: 34px; line-height: 1; color: var(--ink); margin-bottom: 34px; }
.crumb a { color: var(--ink); }
.crumb__sep { color: var(--muted); margin: 0 6px; font-size: 24px; }
.crumb em { font-style: normal; font-weight: 300; color: var(--ink-soft); font-size: 24px; }

/* ---- Layout -------------------------------------------------------------- */
.portfolio__layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }

/* ---- Sidebar ------------------------------------------------------------- */
.pnav { position: sticky; top: 20px; }
.pnav__heading { font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.pnav__list { list-style: none; margin: 0 0 26px 20px; padding: 0; }
.pnav__list li { margin: 0 0 10px; }
.pnav__link { font-size: 17px; font-weight: 400; color: var(--ink-soft); }
.pnav__link:hover { color: var(--ink); }
.pnav__link.is-active { font-weight: 700; color: var(--ink); }
.pnav__tbd { font-size: 17px; color: var(--muted); }

/* ---- Grid ---------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.grid__empty { color: var(--muted); font-size: 17px; }

.tile { position: relative; display: block; overflow: hidden; background: #f3f3f3; }
.tile img { width: 100%; height: auto; display: block; }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 14px;
  transform: translateY(100%); transition: transform .2s ease;
}
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { transform: translateY(0); }

/* ---- Lightbox (vanilla) -------------------------------------------------- */
.lb { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.9); z-index: 200; }
.lb.is-open { display: grid; place-items: center; }
.lb__figure { position: relative; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; }
.lb__img { max-width: 90vw; max-height: 80vh; width: auto; height: auto; display: block; margin: 0 auto; background: #111; }
.lb__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 4px 0; color: #fff; font-size: 14px; }
.lb__count { color: #cfcfcf; white-space: nowrap; }
.lb__btn { position: absolute; background: rgba(0,0,0,.55); color: #fff; border: 0; width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb__close { top: -3px; right: -44px; }
.lb__prev  { left: -60px; top: 50%; transform: translateY(-50%); }
.lb__next  { right: -60px; top: 50%; transform: translateY(-50%); }
.lb__btn[hidden] { display: none; }
body.lb-open { overflow: hidden; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .portfolio__layout { grid-template-columns: 1fr; gap: 24px; }
  .pnav { position: static; }
  .crumb { font-size: 28px; }
  .crumb em, .crumb__sep { font-size: 24px; }
  .lb__prev { left: 4px; } .lb__next { right: 4px; } .lb__close { top: 6px; right: 6px; }
}
@media (max-width: 460px) { .grid { grid-template-columns: 1fr; } }