.portfolio-category-hero__photo>a{display:block;width:100%;height:100%;cursor:zoom-in}.portfolio-lightbox{position:fixed;overflow:hidden;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);padding:0;border:0;border-radius:10px;background:#0b1220;box-shadow:0 30px 90px rgba(0,0,0,.45)}.portfolio-lightbox[open]{animation:portfolio-lightbox-in .32s cubic-bezier(.22,.75,.25,1) both}.portfolio-lightbox::backdrop{background:rgba(5,12,23,.8);backdrop-filter:blur(5px);animation:portfolio-backdrop-in .28s ease-out both}.portfolio-lightbox img{display:block;width:auto;height:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);object-fit:contain}.portfolio-lightbox button{position:absolute;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:8px;background:rgba(13,22,36,.72);color:#fff;font:300 22px/1 Arial,sans-serif;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,border-color .2s,transform .2s}.portfolio-lightbox .portfolio-lightbox__close{top:10px;right:10px}.portfolio-lightbox .portfolio-lightbox__prev,.portfolio-lightbox .portfolio-lightbox__next{top:50%;width:40px;height:52px;margin-top:-26px;font-size:32px}.portfolio-lightbox .portfolio-lightbox__prev{left:10px}.portfolio-lightbox .portfolio-lightbox__next{right:10px}.portfolio-lightbox button:hover{border-color:#fff;background:rgba(13,22,36,.94);transform:scale(1.04)}@keyframes portfolio-lightbox-in{from{opacity:0;transform:translateY(12px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes portfolio-backdrop-in{from{background:rgba(5,12,23,0);backdrop-filter:blur(0)}to{background:rgba(5,12,23,.8);backdrop-filter:blur(5px)}}@media(max-width:700px){.portfolio-lightbox{max-width:calc(100vw - 20px);max-height:calc(100vh - 80px)}.portfolio-lightbox img{max-width:calc(100vw - 20px);max-height:calc(100vh - 80px)}}@media(prefers-reduced-motion:reduce){.portfolio-lightbox[open],.portfolio-lightbox::backdrop{animation:none}.portfolio-lightbox button{transition:none}}

[data-project-gallery-source][hidden]{display:none!important}

/* Allow the hero grid to shrink around long titles and gallery contents. */
.portfolio-project-hero__grid > * { min-width: 0; }
.portfolio-project-showcase { grid-template-columns: minmax(0, 1fr); }
.portfolio-project-showcase > * { min-width: 0; }

.portfolio-project-showcase__main {
  position: relative;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;
}

/* Slides keep the existing hero height; originals fit a stable lightbox stage. */
.portfolio-project-showcase__main > .portfolio-gallery-frame {
  display: block;
  width: 100%;
}

.portfolio-lightbox__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: min(1120px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 40px));
  height: min(820px, calc(100dvh - 40px));
  touch-action: pan-y pinch-zoom;
  user-select: none;
  cursor: grab;
}

.portfolio-lightbox__stage > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.portfolio-gallery-frame.is-pending,
.portfolio-gallery-frame.is-entering,
.portfolio-gallery-frame.is-drag-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portfolio-gallery-frame.is-pending { visibility: hidden; }
.portfolio-gallery-frame.is-drag-preview { visibility: visible; }
.portfolio-gallery-frame.is-entering { z-index: 1; }

.portfolio-gallery-status {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  color: #0d1624;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.portfolio-gallery-status[hidden] { display: none; }

@media (max-width: 700px) {
  .portfolio-lightbox__stage {
    width: calc(100vw - 20px);
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
  }
}

.portfolio-project-showcase__main.is-dragging,
.portfolio-lightbox__stage.is-dragging {
  cursor: grabbing;
}

.portfolio-project-showcase__main img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: cover;
  background: transparent;
}

.portfolio-project-showcase__thumb-nav {
  width: 100%;
}

.portfolio-project-showcase__thumb-nav.has-overflow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.portfolio-project-showcase__thumbs {
  display: flex;
  grid-template-columns: none;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.portfolio-project-showcase__thumbs::-webkit-scrollbar {
  display: none;
}

.portfolio-project-showcase__thumbs > [data-project-thumb] {
  display: block;
  flex: 0 0 calc((100% - 40px) / 6);
  min-width: 0;
  overflow: hidden;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #e7eef8;
  cursor: pointer;
  opacity: .72;
  transition: border-color .2s, opacity .2s;
  scroll-snap-align: start;
}

.portfolio-project-showcase__thumbs > [data-project-thumb]:hover,
.portfolio-project-showcase__thumbs > [data-project-thumb].is-active {
  border-color: var(--blue);
  opacity: 1;
}

.portfolio-project-showcase__thumbs > [data-project-thumb]:focus-visible {
  outline: 3px solid rgb(14 104 238 / 24%);
  outline-offset: -3px;
}

.portfolio-project-showcase__thumb-arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 72px;
  padding: 0;
  border: 1px solid #c6d7ee;
  border-radius: 8px;
  background: #fff;
  color: #0d1624;
  box-shadow: 0 8px 22px rgb(13 22 36 / 10%);
  cursor: pointer;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease,
    opacity .2s ease,
    transform .2s ease;
}

.portfolio-project-showcase__thumb-arrow:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}

.portfolio-project-showcase__thumb-arrow:focus-visible {
  outline: 3px solid rgb(14 104 238 / 24%);
  outline-offset: 2px;
}

.portfolio-project-showcase__thumb-arrow:disabled {
  opacity: .35;
  cursor: default;
}

.portfolio-project-showcase__thumb-arrow[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .portfolio-project-showcase__thumb-nav.has-overflow {
    gap: 6px;
  }

  .portfolio-project-showcase__thumbs > [data-project-thumb] {
    flex-basis: calc((100% - 24px) / 4);
    height: 60px;
  }

  .portfolio-project-showcase__thumb-arrow {
    width: 34px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-project-showcase__thumbs {
    scroll-behavior: auto;
  }

  .portfolio-project-showcase__thumb-arrow {
    transition: none;
  }
}