/* =========================================================
   viewer.css — the shared full-screen photo viewer (.akv),
   used by BOTH the albums page (album-viewer.js via albums.js)
   and the essay pages (album-viewer.js via effects.js).
   Colors come from the CSS variables in styles.css.
   ========================================================= */

.akv { position: fixed; inset: 0; z-index: 200; background: #0b0d13; display: flex; flex-direction: column; touch-action: none; }
.akv[hidden] { display: none; }
/* z-index 3: the zoomed image spills out of the stage (overflow visible),
   so the top chrome must stay above it to remain visible and clickable */
.akv-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; color: var(--cream-ink-soft); font-family: var(--sans); font-size: 13px; letter-spacing: 0.15em; position: relative; z-index: 3; }
.akv-close { background: none; border: none; color: var(--cream-ink); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; }
/* overflow visible: full-bleed zoom — the scaled image extends past the
   stage and covers the caption strip instead of being clipped to leave it
   dead space (the caption keeps its layout slot, so nothing reflows) */
.akv-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: visible; position: relative; touch-action: none; }
.akv-img { max-width: 92%; max-height: 100%; object-fit: contain; will-change: transform; user-select: none; -webkit-user-drag: none; touch-action: none; cursor: zoom-in; }
.akv-img.akv-zoomed { cursor: grab; }
.akv-img.akv-grabbing { cursor: grabbing; }
.akv-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cream-ink-soft); font-family: var(--serif); font-size: 44px; cursor: pointer; padding: 20px 16px; z-index: 2; }
.akv-arrow:hover { color: var(--cream-ink); }
.akv-arrow[hidden] { display: none; }
.akv-arrow[disabled] { opacity: 0.25; cursor: default; }
.akv-prev { left: 6px; }
.akv-next { right: 6px; }
/* flex: 0 0 auto is load-bearing: overflow-y auto zeroes the automatic
   minimum size of a flex item, so without it the stage's intrinsic basis
   (the image's natural px height — 1600 on tall portraits) crushes the
   caption into a mini scroll box whose last line clips past the screen
   edge. Non-shrinking, the caption keeps its natural height (capped at
   24vh) and the stage absorbs all the squeeze. The margin (not padding —
   it sits outside the scroll area) keeps the container off the screen
   edge even when a very long caption does scroll at the 24vh cap. */
.akv-caption { flex: 0 0 auto; text-align: center; font-family: var(--sans); font-size: clamp(14px, 1.8vw, 17px); line-height: 1.55; color: #cbc1ae; padding: 14px clamp(20px, 10vw, 120px) 0; margin-bottom: max(12px, env(safe-area-inset-bottom)); max-height: 24vh; overflow-y: auto; }
/* Bottom breathing room via a spacer child, not padding: a scroll container's
   padding-bottom is dropped once it's scrollable (WebKit/Chrome), which left
   the last caption line flush to the screen edge. A spacer counts as content,
   so the gap survives whether or not the caption scrolls. */
.akv-caption::after { content: ""; display: block; height: 30px; }
/* edit mode is the exception to caption-gets-covered: the inline editor
   stays above the zoomed image (type while zooming into faces), with a
   solid backing so the field reads over the photo */
.akv-caption.akv-editing { position: relative; z-index: 3; background: rgba(11, 13, 19, 0.92); }
/* essay figcaptions carry markup — style it like the caption strip */
.akv-caption .figure-note { display: block; margin-top: 4px; font-style: italic; opacity: 0.85; }
.akv-caption strong { color: var(--cream-ink); font-weight: 700; }
.akv-capedit { display: block; width: min(720px, 100%); margin: 0 auto 8px; min-height: 76px; resize: vertical; box-sizing: border-box; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(230, 220, 203, 0.3); color: var(--cream-ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; padding: 10px 12px; }
.akv-capedit:focus { outline: none; border-color: var(--gold); }
.akv-capedit::placeholder { color: rgba(203, 193, 174, 0.5); }
.akv-capsave { padding: 7px 18px; border: 1px solid var(--gold); background: none; color: var(--gold-soft); font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.akv-capsave:hover:not([disabled]) { color: var(--gold); }
.akv-capsave[disabled] { opacity: 0.35; cursor: default; }
.akv-loading { color: var(--cream-ink-soft); font-family: var(--sans); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; }
@media (max-width: 640px) { .akv-arrow { display: none; } }