/* ==========================================================================
   Bottle Rocket: inline portfolio viewer
   Markup: template-parts/portfolio-viewer.php  |  Behaviour: js/portfolio.js
   Replaces the old fixed-height #portfolio-image-container (700/600/500/200px
   + 200px margin + 150px spacer), which caused the dead space on mobile.
   ========================================================================== */

.portfolio-viewer {
  box-sizing: border-box; /* so the close animation can start from offsetHeight */
  position: relative;
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 0 0;
  /* Fixed header is ~59px; keep the viewer clear of it when scrolled to. */
  scroll-margin-top: 80px;
  transition: opacity .3s ease-in-out;
}
.portfolio-viewer.is-opening { opacity: 0; }
/* Close: fade + height collapse together (COLLAPSE_MS in js/portfolio.js) */
.portfolio-viewer.is-closing {
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  transition: opacity .45s ease-in-out, height .45s ease-in-out, padding-top .45s ease-in-out;
}
.portfolio-viewer[hidden] { display: none !important; }

.portfolio-viewer__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  touch-action: pan-y pinch-zoom; /* horizontal swipes go to js/portfolio.js */
}

/* Prev / next: the original arrow images, full-height tap zones beside the image */
.portfolio-viewer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 29px;
  -webkit-tap-highlight-color: transparent;
}
.portfolio-viewer__nav[hidden] { display: flex; visibility: hidden; } /* keep the column so nothing shifts */
.portfolio-viewer__nav img { display: block; width: 29px; height: auto; }

.portfolio-viewer__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0; /* below the fixed header (#top-container is z-index 1) so it scrolls under the menu */
  line-height: 0;
}
.portfolio-viewer__close img { display: block; width: 29px; height: auto; }

.portfolio-viewer__nav:focus-visible,
.portfolio-viewer__close:focus-visible {
  outline: 2px solid #ff4f00;
  outline-offset: 2px;
}

/* Stage: sized from the category's tallest ratio (--pv-aspect), widest image
   (--pv-max-w) and tallest image (--pv-max-h), so it stays the same size while
   clicking through without padding small pieces like logos. */
.portfolio-viewer__figure { margin: 0; min-width: 0; }

.portfolio-viewer__stage {
  position: relative;
  width: 100%;
  max-width: var(--pv-max-w, 1240px);
  max-height: min(900px, 85vh, var(--pv-max-h, 900px));
  margin: 0 auto;
  aspect-ratio: var(--pv-aspect, 4 / 3);
}
@supports not (aspect-ratio: 1) {
  .portfolio-viewer__stage { height: 60vw; }
}

.portfolio-viewer__image {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: min(100%, var(--img-w, 100%)); /* never upscale beyond natural width */
  height: auto;
  max-height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity .45s ease-in-out; /* crossfade; FADE_MS in js/portfolio.js */
}
.portfolio-viewer__image.is-entering,
.portfolio-viewer__image.is-leaving { opacity: 0; }
.portfolio-viewer__image.is-leaving { pointer-events: none; }
/* Slow network only (applied after 250ms): dim the current image while the next loads */
.portfolio-viewer.is-loading .portfolio-viewer__image:not(.is-leaving) { opacity: .55; }

.portfolio-viewer__caption {
  margin: 14px auto 0;
  max-width: 930px;
  text-align: center;
  color: #4d4d4d;
  font-family: 'Noto Sans Italic';
  font-size: .85em;
  line-height: 1.65em;
}
.portfolio-viewer__caption[hidden] { display: none; }

/* Screen-reader-only live region ("Item title (3 of 16)") */
.portfolio-viewer__status {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Active thumbnail in the brown grid: a tinted overlay (menu highlight gold)
   that follows the viewer, instead of a square border. */
div.portfolio-item-thumbnail a {
  position: relative;
  display: block;
  line-height: 0;
  --pv-thumb-highlight: rgba(241, 90, 36, .8); /* #f15a24 */
  --pv-thumb-radius: 50%; /* thumbnails are circular PNGs; set to 0 for square art */
}
div.portfolio-item-thumbnail a::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--pv-thumb-highlight);
  border-radius: var(--pv-thumb-radius);
  opacity: 0;
  transition: opacity .35s ease-in-out;
  pointer-events: none;
}
div.portfolio-item-thumbnail.is-active a::after { opacity: 1; }
div.portfolio-item-thumbnail a:focus { outline: none; }
div.portfolio-item-thumbnail a:focus-visible::after { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .portfolio-viewer,
  .portfolio-viewer__image,
  div.portfolio-item-thumbnail a::after { transition: none; }
}

/* ---------- Tablet ---------- */
@media only screen and (max-width: 1024px) {
  .portfolio-viewer { width: 92%; }
  .portfolio-viewer__inner { column-gap: 14px; }
  .portfolio-viewer__nav { min-width: 22px; }
  .portfolio-viewer__nav img { width: 22px; }
  .portfolio-viewer__close img { width: 22px; }
  .portfolio-viewer__stage { max-height: min(760px, 75vh, var(--pv-max-h, 760px)); }
}

/* ---------- Mobile ---------- */
@media only screen and (max-width: 640px) {
  .portfolio-viewer {
    width: auto;
    padding: 24px 4px 0;   /* room for the close button above the image */
    scroll-margin-top: 56px;
  }
  .portfolio-viewer__inner { position: static; column-gap: 0; }
  .portfolio-viewer__nav { min-width: 36px; }           /* ~36x(image height) tap target */
  .portfolio-viewer__nav img { width: 14px; }
  .portfolio-viewer__close { top: 0; right: 8px; padding: 3px; }
  .portfolio-viewer__close img { width: 16px; }
  .portfolio-viewer__stage { max-height: min(70vh, var(--pv-max-h, 70vh)); }
  .portfolio-viewer__caption { padding: 0 36px; }
}

/* ---------- Phones in landscape ---------- */
@media only screen and (max-height: 500px) and (orientation: landscape) {
  .portfolio-viewer__stage { max-height: min(calc(100vh - 110px), var(--pv-max-h, 100vh)); }
}