/* v24: Portfolio image lightbox. */
.portfolio-tile { cursor: zoom-in; }
.portfolio-tile:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.portfolio-lightbox[hidden] { display: none; }
.portfolio-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: minmax(48px, 1fr) minmax(0, auto) minmax(48px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: 16px; padding: 24px; background: rgba(3, 4, 3, .94); backdrop-filter: blur(8px); }
.portfolio-lightbox-open { overflow: hidden; }
.portfolio-lightbox-figure { grid-column: 2; grid-row: 2; margin: 0; display: grid; place-items: center; width: min(1280px, 84vw); max-height: 84vh; }
.portfolio-lightbox-image { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.48); }
.portfolio-lightbox-close,
.portfolio-lightbox-nav { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(18,21,18,.9); color: #fff; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.portfolio-lightbox-close:hover,
.portfolio-lightbox-nav:hover { border-color: var(--lime); color: var(--lime); background: #171b17; }
.portfolio-lightbox-close:focus-visible,
.portfolio-lightbox-nav:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.portfolio-lightbox-close { grid-column: 3; grid-row: 1; justify-self: end; }
.portfolio-lightbox-prev { grid-column: 1; grid-row: 2; justify-self: end; }
.portfolio-lightbox-next { grid-column: 3; grid-row: 2; justify-self: start; }
.portfolio-lightbox-close svg,
.portfolio-lightbox-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.portfolio-lightbox-counter { grid-column: 2; grid-row: 3; margin: 0; color: #cbd0cb; font-size: .82rem; letter-spacing: .04em; }
@media (max-width: 760px) {
  .portfolio-lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; padding: 16px 10px; }
  .portfolio-lightbox-figure { width: 100%; }
  .portfolio-lightbox-close,
  .portfolio-lightbox-nav { width: 42px; height: 42px; }
  .portfolio-lightbox-prev { justify-self: start; }
  .portfolio-lightbox-next { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-lightbox-close,
  .portfolio-lightbox-nav { transition: none; }
}