/* ============================================================
   Photo viewer on professional profile pages.

   Replaces the single-image lightbox (.kd-lightbox in claude_css.css), which showed one
   photo with its caption under it and offered no way to move to the next one. This is
   a two-part viewer: the photo on a dark stage, details on a white panel beside it
   (below it on a phone), with previous/next, a thumbnail strip, keyboard and swipe.

   Markup: app/Views/includes/photo_viewer.php (#kdGv). Behaviour: js/photo_viewer.js.
   Used by the public profile (/user/<name>) and both private portfolio pages
   (/portfolio/<name> and /portfolio/<name>/showcase).
   Colours and font come from the variables below, so a page can theme it: the main site
   uses the defaults, the portfolio pages add .kd-gv--warm.
   ============================================================ */

/* the page behind must not scroll while the viewer is open; --kd-gv-sbw is the width of the
   scrollbar that disappears, put back as padding so the page does not shift sideways */
html.kd-gv-lock { overflow: hidden; }
html.kd-gv-lock body { padding-right: var(--kd-gv-sbw, 0px); }

/* a photo tile that can be reached and opened from the keyboard */
.kd-photo-item { cursor: pointer; }
.kd-photo-item:focus-visible {
  outline: 3px solid var(--kd-blue, #1e5baa);
  outline-offset: 3px;
}

/* ---------- the overlay ---------- */

.kd-gv {
  position: fixed;
  inset: 0;
  z-index: 100000;            /* above the header, the back-to-top button and the chat pill */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 10, 14, 0.92);
  font-family: 'Poppins', sans-serif;

  --kd-gv-accent:      var(--kd-blue, #1e5baa);    /* the main button */
  --kd-gv-accent-ink:  #ffffff;                    /* text on it */
  --kd-gv-active:      var(--kd-orange, #f47b20);  /* the photo being shown, in the strip */
  --kd-gv-focus:       var(--kd-orange, #f47b20);  /* keyboard focus ring */
  --kd-gv-tint:        #f3f7fc;                    /* the price box */
  --kd-gv-tint-ink:    var(--kd-blue, #1e5baa);
}

/* the private portfolio pages: warm tan on near-black, the type of the page it opens from */
.kd-gv--warm {
  font-family: inherit;       /* the page's own (Jost / Manrope), not Poppins -- which these pages do not load */
  --kd-gv-accent:      #bfae92;
  --kd-gv-accent-ink:  #1f1d19;
  --kd-gv-active:      #bfae92;
  --kd-gv-focus:       #8a6d2f;
  --kd-gv-tint:        #f6f2ea;
  --kd-gv-tint-ink:    #6b5b3a;
}

.kd-gv.is-open {
  display: flex;
  animation: kdGvFade 0.18s ease-out;
}

@keyframes kdGvFade { from { opacity: 0; } to { opacity: 1; } }

.kd-gv__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(1280px, 100%);
  height: min(90vh, 880px);
  background: #0e1116;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ---------- the stage: the photo ---------- */

.kd-gv__stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 18px 64px;
  overflow: hidden;                 /* a zoomed photo is clipped to the stage */
  touch-action: pan-y pinch-zoom;   /* sideways drags are ours (swipe); up/down still scroll */
}

.kd-gv__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  transition: opacity 0.15s ease, transform 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* a mouse can zoom: click the photo (or the magnifier), then move about it */
@media (hover: hover) and (pointer: fine) {
  .kd-gv__img { cursor: zoom-in; }
  .kd-gv__stage.is-zoomed .kd-gv__img { cursor: zoom-out; }
}
.kd-gv__stage.is-zoomed .kd-gv__img { transform: scale(2.4); }

/* the previous photo stays, dimmed, until the next one has arrived: no blank flash */
.kd-gv__stage.is-loading .kd-gv__img { opacity: 0.35; }
.kd-gv__stage.is-error .kd-gv__img   { opacity: 0; }

.kd-gv__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: kdGvSpin 0.8s linear infinite;
}
.kd-gv__stage.is-loading .kd-gv__spinner { opacity: 1; }
@keyframes kdGvSpin { to { transform: rotate(360deg); } }

.kd-gv__error {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  color: #cbd5e1;
  font-size: 14.5px;
  text-align: center;
}
.kd-gv__stage.is-error .kd-gv__error { display: flex; }

/* ---------- previous / next ---------- */

.kd-gv__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kd-gv__nav:hover { background: rgba(255, 255, 255, 0.28); }
.kd-gv__nav:active { transform: scale(0.94); }
.kd-gv__nav--prev { left: 12px; }
.kd-gv__nav--next { right: 12px; }
.kd-gv__nav svg { width: 22px; height: 22px; }

/* ---------- zoom ---------- */

.kd-gv__zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.kd-gv__zoom:hover { background: rgba(255, 255, 255, 0.28); }
.kd-gv__zoom svg { width: 20px; height: 20px; }
.kd-gv__zoom .kd-gv__zoom-out { display: none; }
.kd-gv__stage.is-zoomed .kd-gv__zoom .kd-gv__zoom-in  { display: none; }
.kd-gv__stage.is-zoomed .kd-gv__zoom .kd-gv__zoom-out { display: block; }

/* a touch screen pinches instead; the magnifier is for a mouse */
@media (hover: none), (pointer: coarse) {
  .kd-gv__zoom { display: none; }
}

/* ---------- thumbnails ---------- */

.kd-gv__thumbs {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: #0a0c10;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.kd-gv__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1d24;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.kd-gv__thumb:hover { opacity: 0.9; }
.kd-gv__thumb[aria-current="true"] {
  border-color: var(--kd-gv-active);
  opacity: 1;
}
.kd-gv__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* one photo only: nothing to move between */
.kd-gv.is-single .kd-gv__nav,
.kd-gv.is-single .kd-gv__thumbs { display: none; }
.kd-gv.is-single .kd-gv__stage { padding-left: 18px; padding-right: 18px; }

/* ---------- close ---------- */

.kd-gv__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f6;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease;
}
.kd-gv__close:hover { background: #e3e7ed; }
.kd-gv__close svg { width: 20px; height: 20px; }

/* ---------- the details panel ---------- */

.kd-gv__panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  color: #1f2937;
}

.kd-gv__panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 60px 26px 18px;       /* top clears the close button */
}

.kd-gv__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
}

.kd-gv__title {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

.kd-gv__desc {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
  white-space: pre-line;          /* keeps the paragraph breaks a professional typed */
  overflow-wrap: anywhere;
}

.kd-gv__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eceff3;
}

.kd-gv__who-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.kd-gv__who-avatar.kd-initials { font-size: 17px; }

.kd-gv__who-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}
.kd-gv__who-role {
  margin-top: 2px;
  font-size: 13px;
  color: #6b7280;
}

.kd-gv__actions {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 16px 26px 22px;
  border-top: 1px solid #eceff3;
  background: #ffffff;
}

.kd-gv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.kd-gv__btn:hover { filter: brightness(0.94); }
.kd-gv__btn svg { width: 18px; height: 18px; }
.kd-gv__btn--primary { background: var(--kd-gv-accent); color: var(--kd-gv-accent-ink); }
.kd-gv__btn--wa      { background: #25d366; color: #ffffff; }
.kd-gv__btn--primary:hover { color: var(--kd-gv-accent-ink); }
.kd-gv__btn--wa:hover { color: #ffffff; }

.kd-gv button:focus-visible,
.kd-gv a:focus-visible {
  outline: 3px solid var(--kd-gv-focus);
  outline-offset: 2px;
}

/* ---------- phones and narrow windows: photo on top, details underneath ---------- */

@media (max-width: 860px) {
  .kd-gv { padding: 0; }

  .kd-gv__dialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .kd-gv__stage { padding: 56px 8px 8px; }   /* top clears the close button */
  /* centred on the PHOTO, not on the box: the stage's top padding (56px) is 48px more than its
     bottom (8px), so the photo's centre is 24px below the box's. Half the button is -20px. */
  .kd-gv__nav { width: 40px; height: 40px; margin-top: 4px; }
  .kd-gv__nav--prev { left: 6px; }
  .kd-gv__nav--next { right: 6px; }
  .kd-gv__nav svg { width: 20px; height: 20px; }

  .kd-gv__thumbs { grid-row: 2; padding: 8px 10px; }
  .kd-gv__thumb { width: 52px; height: 52px; }

  .kd-gv__panel { grid-column: 1; grid-row: 3; max-height: 40vh; }
  .kd-gv__panel-scroll { padding: 14px 18px 8px; }
  .kd-gv__title { font-size: 17px; margin-top: 6px; }
  .kd-gv__desc  { font-size: 14px; line-height: 1.6; margin-top: 8px; }
  .kd-gv__who { margin-top: 14px; padding-top: 12px; }
  .kd-gv__who-avatar { width: 40px; height: 40px; }
  .kd-gv__actions { grid-template-columns: 1fr 1fr; padding: 10px 18px 14px; }
  .kd-gv__actions .kd-gv__btn:only-child { grid-column: 1 / -1; }

  .kd-gv__close { background: rgba(0, 0, 0, 0.6); color: #ffffff; top: 10px; right: 10px; }
  .kd-gv__close:hover { background: rgba(0, 0, 0, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .kd-gv.is-open { animation: none; }
  .kd-gv__img, .kd-gv__nav, .kd-gv__thumb, .kd-gv__btn, .kd-gv__close { transition: none; }
  .kd-gv__spinner { animation-duration: 2.4s; }
}

/* ---------- the photographer's price and bio: the panel's content when a photo has no caption ---------- */

.kd-gv__who-price {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--kd-gv-tint);
  color: var(--kd-gv-tint-ink);
  font-size: 14px;
  font-weight: 600;
}

.kd-gv__bio {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #4b5563;
  overflow-wrap: anywhere;
}

/* a phone has no room to spare under the photo: the price stays, the longer bio does not */
@media (max-width: 860px) {
  .kd-gv__bio { display: none; }
  .kd-gv__who-price { margin-top: 10px; padding: 8px 12px; font-size: 13px; }
}