/*
  Reusable portfolio image viewer.

  The component is intentionally self-contained: pages only need to load this
  stylesheet and viewer.js, then pass an array of image records to
  ImagePortfolioViewer.create(). Class names are namespaced so the viewer can
  sit beside different gallery designs without inheriting their button styles.
*/

body.image-viewer-open {
  overflow: hidden;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  color: var(--image-viewer-fg, #f4f0e9);
  background: var(--image-viewer-bg, rgba(3, 3, 3, 0.94));
  font-family: var(--image-viewer-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.image-viewer[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.image-viewer *,
.image-viewer *::before,
.image-viewer *::after {
  box-sizing: border-box;
}

.image-viewer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}

.image-viewer__meta {
  min-width: 0;
  padding-left: clamp(2px, 1vw, 14px);
}

.image-viewer__title {
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  font-weight: 620;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-viewer__count {
  margin-top: 4px;
  color: var(--image-viewer-muted, #a9a29a);
  font-size: 0.82rem;
}

.image-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.image-viewer__image {
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: var(--image-viewer-shadow, 0 24px 70px rgba(0, 0, 0, 0.45));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.image-viewer__image--side {
  pointer-events: none;
}

.image-viewer__image--current {
  z-index: 1;
}

.image-viewer__button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--image-viewer-line, rgba(244, 240, 233, 0.16));
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.image-viewer__button:hover,
.image-viewer__button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(244, 240, 233, 0.36);
  outline: none;
}

.image-viewer__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.image-viewer__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

.image-viewer__prev {
  left: clamp(4px, 2vw, 22px);
}

.image-viewer__next {
  right: clamp(4px, 2vw, 22px);
}

.image-viewer__thumbs {
  display: flex;
  gap: 8px;
  max-width: 100%;
  min-height: 70px;
  margin: 0 auto;
  padding: 4px 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.image-viewer__thumb {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  background: #171615;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.56;
  scroll-snap-align: center;
  transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.image-viewer__thumb[aria-current="true"] {
  opacity: 1;
  border-color: rgba(244, 240, 233, 0.9);
  transform: translateY(-2px);
}

.image-viewer__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .image-viewer {
    gap: 8px;
    padding: 0;
  }

  .image-viewer__top {
    min-height: 44px;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
  }

  .image-viewer__title {
    white-space: normal;
  }

  .image-viewer__button {
    width: 40px;
    height: 40px;
  }

  .image-viewer__nav {
    top: auto;
    bottom: 84px;
    transform: none;
    background: rgba(20, 20, 19, 0.64);
  }

  .image-viewer__thumbs {
    min-height: 62px;
    padding: 4px 10px 6px;
  }

  .image-viewer__thumb {
    width: 52px;
    height: 52px;
  }

  .image-viewer__image {
    border-radius: 0;
  }
}

/*
  Phone landscape is image-first: hide title and thumbnail chrome, then overlay
  the essential controls so a wide image can use the full viewport height.
*/
@media (max-height: 520px) and (max-width: 920px) and (orientation: landscape) {
  .image-viewer {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  .image-viewer__top {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    z-index: 4;
    display: block;
    min-height: 0;
    padding: 0;
  }

  .image-viewer__meta,
  .image-viewer__thumbs {
    display: none;
  }

  .image-viewer__stage {
    grid-row: 1;
    width: 100%;
    height: 100%;
  }

  .image-viewer__nav {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: rgba(20, 20, 19, 0.64);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-viewer,
  .image-viewer * {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}