/* ============================================================
   ARTWORK LIGHTBOX — shared component
   See CLAUDE.md §15.

   Layout: image on white background, square arrows L/R, tiny caption below.
   Mobile: arrows overlay the image so it can stretch full-width; caption stays below.
   ============================================================ */

.alb{
  position:fixed;
  /* Mobile: panel below sticky header (header stays visible). Desktop overrides to inset:0. */
  top:var(--site-header-h,53px);right:0;bottom:0;left:0;
  z-index:50;
  display:none;
  background:#FFFFFF;
  font-family:"Copperplate","Times New Roman",serif;
  text-transform:uppercase;            /* matches global §9.2 rule */
  --alb-stage-pad-y:112px;
  --alb-max-image-h:min(80vh, calc(100dvh - var(--site-header-h, 53px) - var(--alb-stage-pad-y)));
}
.alb.is-open{display:flex;flex-direction:column}
html.alb-lock,
body.alb-lock{
  overflow:hidden;
  height:100%;
  touch-action:none;
  overscroll-behavior:none;
}

/* ===== DESKTOP ===== */
.alb-stage{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  gap:48px;padding:0 96px;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
}
.alb-figure{
  position:relative;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  flex:0 1 auto;min-width:0;min-height:0;
  max-width:80vw;max-height:100%;
  background:#FFFFFF;
}
/* image + its below-image extras (alt text, CTA) sized to image rendered width via JS */
.alb-imgwrap{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;
  flex:1;min-width:0;min-height:0;
  max-width:100%;
}
.alb-figure img,
.alb-figure .alb-video{
  display:block;align-self:center;
  width:auto;height:auto;
  max-width:80vw;max-height:var(--alb-max-image-h);
  min-width:0;min-height:0;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  background:#FFFFFF;
}
.alb-figure .alb-video[hidden]{display:none}
/* clickable artwork → navigates to its own page (data-artwork-page set on trigger) */
.alb.has-page .alb-figure img{cursor:pointer}

.alb-imgwrap picture{
  display:block;
  max-width:100%;
}
.alb.is-video .alb-imgwrap picture{display:none !important}
.alb:not(.has-alt):not(.has-cta) .alb-imgwrap picture{
  width:100%;
  height:100%;
  flex:1 1 auto;
  min-height:0;
}
/* alt-text caption shown below image when [data-artwork-alt] is present on source.
   Font/direction switch via JS-applied .is-he / .is-en class. */
.alb-alt{
  display:none;
  font-weight:300;font-size:14px;line-height:1.45;
  color:#1B1B1B;letter-spacing:normal;padding:0 2px;
}
.alb-alt.is-he{font-family:"FbEzmel","Arial Hebrew","David Libre",serif;text-align:right;direction:rtl;text-transform:none}
.alb-alt.is-en{font-family:"Copperplate","Times New Roman",serif;text-align:left;direction:ltr;text-transform:uppercase}
.alb.has-alt .alb-alt{display:block}
/* CTA — square, white bg, black border; width fills the image-wrapper (= image rendered width) */
.alb-cta{
  display:none;
  width:100%;
  padding:14px 16px;
  border:1px solid #1B1B1B;background:#FFFFFF;color:#1B1B1B;
  font-family:"Copperplate","Times New Roman",serif;
  font-weight:400;font-size:13px;letter-spacing:.1em;line-height:1;
  text-align:center;text-transform:uppercase;text-decoration:none;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.alb-cta:hover{background:#1B1B1B;color:#FFFFFF}
.alb.has-cta .alb-cta{display:inline-block}
/* The Hebrew label override is handled by the .alb-cta.is-hebrew variant set in JS */
.alb-cta.is-hebrew{
  font-family:"FbEzmel","Arial Hebrew","David Libre",serif;
  font-weight:400;letter-spacing:.04em;direction:rtl;
}
/* Page-navigation CTA: a small, centered button — not the full image width. */
.alb-cta.is-page{
  width:auto;align-self:center;
  padding:10px 22px;font-size:13px;letter-spacing:.06em;
}

/* chevrons — direct children of .alb (like .alb-close), never in flex row */
.alb-nav{
  position:absolute;
  z-index:6;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border:0;border-radius:0;
  background:#FFFFFF;color:#1B1B1B;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.alb-nav.prev{left:48px;right:auto}
.alb-nav.next{right:48px;left:auto}
.alb-nav:hover{background:#EEF0EF;color:#1B1B1B}
.alb-nav:disabled{opacity:.3;cursor:not-allowed}
.alb-nav svg{width:14px;height:24px}
.alb-nav.next svg{transform:rotate(180deg)}

/* close button — bare X glyph, fixed to the viewport's top-right corner.
   Lives on `.alb` (NOT inside `.alb-figure`) so it never overlaps the image. */
.alb-close{
  position:absolute;top:16px;right:16px;z-index:5;
  width:32px;height:32px;
  border:0;border-radius:0;
  background:transparent;color:#1B1B1B;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:opacity .2s,transform .2s;
}
.alb-close:hover{opacity:.6}
.alb-close:focus-visible{outline:1px solid #1B1B1B;outline-offset:4px}
.alb-close svg{width:20px;height:20px}

/* caption — below image, very small, centered */
.alb-caption{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:12px 24px 24px;
  color:#1B1B1B;text-align:center;
}
/* title font is language-aware: Hebrew → FbEzmel, English → Copperplate (UPPER). JS toggles .is-he / .is-en. */
.alb-caption .alb-title{font-weight:400;font-size:11px;letter-spacing:.08em}
.alb-caption .alb-title.is-he{font-family:"FbEzmel","Arial Hebrew","David Libre",serif;text-transform:none;direction:rtl}
.alb-caption .alb-title.is-en{font-family:"Copperplate","Times New Roman",serif;text-transform:uppercase;direction:ltr}
.alb-caption .alb-title .lat,.alb-alt .lat{font-family:"Copperplate","Times New Roman",serif;text-transform:uppercase;direction:ltr;unicode-bidi:isolate;letter-spacing:.08em}
.alb-caption .alb-artist{font-weight:300;font-size:11px;letter-spacing:.08em;display:flex;gap:4px;line-height:1.2;font-family:"Copperplate","Times New Roman",serif;text-transform:uppercase}
.alb-caption .alb-artist.is-he{font-family:"FbEzmel","Arial Hebrew","David Libre",serif;text-transform:none;direction:rtl;letter-spacing:.06em}
.alb-caption .alb-artist.is-he .alb-caption-link--artist{display:inline-flex;flex-direction:row;gap:4px;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;direction:inherit}
.alb-caption .alb-artist.is-he .first,
.alb-caption .alb-artist.is-he .last{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;direction:inherit}
.alb-caption .alb-artist .first,
.alb-caption .alb-artist .last{font-weight:300;font-size:11px;letter-spacing:.08em}
.alb-caption a.alb-caption-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(27,27,27,.25);
  text-underline-offset:2px;
  cursor:pointer;
  transition:text-decoration-color .2s,opacity .2s;
}
.alb-caption a.alb-caption-link:hover{text-decoration-color:currentColor;opacity:.85}
.alb-caption .alb-title.is-he .alb-caption-link--title{
  font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:none;direction:inherit;
}
.alb-caption .alb-artist.has-he-line2{
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.alb-caption .alb-artist.has-he-line2 .alb-caption-link--artist{
  display:flex;
  flex-direction:row;
  gap:4px;
}
.alb-caption .alb-artist-heline2{
  font-family:"FbEzmel","Arial Hebrew","David Libre",serif;
  font-weight:300;font-size:11px;letter-spacing:.06em;line-height:1.25;
  text-transform:none;direction:rtl;
}
.alb.no-caption .alb-caption{display:none}
.alb.no-caption .alb-figure{gap:0}

/* Scale small thumbs up inside the viewport box (intrinsic 158×192 etc.) — desktop only */
@media (min-width:769px){
  /* Full viewport overlay — covers site header (z-index 100 in site-chrome.css) */
  .alb{
    top:0;
    z-index:110;
    --alb-max-image-h:min(80vh, calc(100dvh - var(--alb-stage-pad-y)));
  }
  /* Stack stage + chrome in one grid cell so chevrons center on the stage box */
  .alb.is-open{
    display:grid;
    grid-template-areas:"stage";
    grid-template-rows:1fr;
    grid-template-columns:1fr;
  }
  .alb-stage{grid-area:stage;flex:none;width:100%;height:100%;min-height:0}
  .alb-close{
    grid-area:stage;
    position:relative;
    justify-self:end;
    align-self:start;
    margin:16px;
    top:auto;right:auto;
  }
  .alb-nav{
    grid-area:stage;
    position:relative;
    top:auto;
    transform:none;
    align-self:center;
    z-index:6;
  }
  .alb-nav.prev{justify-self:start;margin-left:48px;left:auto;right:auto}
  .alb-nav.next{justify-self:end;margin-right:48px;left:auto;right:auto}
  .alb:not(.has-alt):not(.has-cta) .alb-imgwrap{
    width:80vw !important;
    height:auto;
    max-width:80vw;
    max-height:min(100%, var(--alb-max-image-h));
    flex:0 1 auto;
  }
  .alb:not(.has-alt):not(.has-cta) .alb-imgwrap picture{
    width:100%;
    height:auto;
    max-height:var(--alb-max-image-h);
    flex:none;
  }
  .alb:not(.has-alt):not(.has-cta) .alb-figure img,
  .alb:not(.has-alt):not(.has-cta) .alb-figure .alb-video{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:var(--alb-max-image-h);
    object-fit:contain;
  }
  .alb.is-video:not(.has-alt):not(.has-cta) .alb-figure .alb-video{
    width:auto;
    height:auto;
    max-width:80vw;
    max-height:var(--alb-max-image-h);
  }
}

/* ===== MOBILE — immersive gallery (Figma landing::361:169) ===== */
@media (max-width:768px){
  .alb{
    top:var(--site-header-h,53px);
    z-index:50;
    --alb-max-image-h:min(80vh, calc(100dvh - var(--site-header-h, 53px) - var(--alb-stage-pad-y)));
  }
  .alb{background:#1B1B1B}
  .alb-stage{
    padding:0;gap:0;
    width:100%;flex:1;min-height:0;
    flex-direction:row;align-items:stretch;justify-content:stretch;
    position:relative;
  }
  .alb-figure{
    position:absolute;inset:0;
    flex:none;width:100%;max-width:none;max-height:none;
    min-height:0;margin:0;gap:0;
    background:transparent;
    align-items:stretch;
  }
  .alb-imgwrap{
    position:relative;
    width:100% !important;
    height:100% !important;
    max-width:none;
    max-height:none;
    flex:1;
    gap:0;
  }
  .alb-imgwrap::after{
    content:"";
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(27,27,27,0) 0%,rgba(27,27,27,0) 55%,rgba(27,27,27,.92) 100%);
  }
  .alb:not(.has-alt):not(.has-cta) .alb-imgwrap picture{
    position:absolute;inset:0;
    width:100%;
    height:100%;
    /* The lightbox starts below the sticky header (top:--site-header-h), so the
       image's box is vertically centered within that lower region — which reads
       as ~half-header-height BELOW the true screen center. Pull it up so the
       contained image sits at the visual center of the full viewport. */
    transform:translateY(calc(var(--site-header-h, 52px) / -2));
  }
  .alb-figure img,
  .alb-figure .alb-video{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    background:#1B1B1B;
  }
  .alb:not(.has-alt):not(.has-cta) .alb-imgwrap{
    width:100% !important;
    height:100% !important;
    max-width:none;
    max-height:none;
  }
  .alb:not(.has-alt):not(.has-cta) .alb-figure img,
  .alb:not(.has-alt):not(.has-cta) .alb-figure .alb-video{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
  }
  .alb.has-alt .alb-figure,
  .alb.has-cta .alb-figure{
    position:static;inset:auto;flex:1;display:flex;flex-direction:column;background:#FFFFFF;
  }
  /* alt / CTA below image — white panel when present */
  .alb.has-alt .alb-imgwrap,
  .alb.has-cta .alb-imgwrap{
    position:static;
    height:auto !important;
    min-height:min(72dvh, 100%);
    max-height:calc(100dvh - 120px);
    padding:48px 16px 0;
    box-sizing:border-box;
    background:#FFFFFF;
  }
  .alb.has-alt .alb-imgwrap::after,
  .alb.has-cta .alb-imgwrap::after{display:none}
  .alb.has-alt .alb-imgwrap picture,
  .alb.has-cta .alb-imgwrap picture{position:static;width:100%;height:auto;flex:none}
  .alb.has-alt .alb-figure img,
  .alb.has-cta .alb-figure img,
  .alb.has-alt .alb-figure .alb-video,
  .alb.has-cta .alb-figure .alb-video{
    width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 200px);object-fit:contain;background:#FFFFFF;
  }

  /* PAGE-CTA ("לעמוד היצירה") — image + button + caption share one viewport-tall
     white panel. The image area flexes (object-fit:contain) so it shrinks to leave
     room: the button and caption are ALWAYS on screen, never pushed off the bottom.
     The caption flows in-flow with DARK text (the mobile white caption would be
     invisible on this white panel). */
  .alb.has-cta:not(.has-alt) .alb-figure{
    min-height:0;
  }
  .alb.has-cta:not(.has-alt) .alb-imgwrap{
    width:100% !important;
    height:auto !important;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;
    padding:16px;
  }
  .alb.has-cta:not(.has-alt) .alb-imgwrap picture{
    flex:1 1 auto;min-height:0;
    display:flex;align-items:center;justify-content:center;
    width:100%;
  }
  .alb.has-cta:not(.has-alt) .alb-figure img{
    width:auto;height:auto;
    max-width:100%;max-height:100%;
    object-fit:contain;
  }
  .alb.has-cta:not(.has-alt) .alb-cta.is-page{
    flex:none;margin:0;
  }
  .alb.has-cta:not(.has-alt) .alb-caption{
    position:static;
    left:auto;right:auto;bottom:auto;
    flex:none;
    color:#1B1B1B;
    padding:2px 16px 16px;
  }

  /* chevrons — vertically centered on image area */
  .alb-nav{
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    width:24px;height:24px;
    background:transparent;
    border:0;border-radius:0;
    color:#FFFFFF;
  }
  .alb-nav.prev{left:16px;right:auto}
  .alb-nav.next{right:16px;left:auto}
  .alb-nav svg{width:10px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

  /* close — top-left of lightbox panel (below site header) */
  .alb-close{
    position:absolute;top:8px;left:8px;right:auto;
    width:32px;height:32px;
    background:transparent;
    border:0;
    color:#FFFFFF;
    z-index:6;
  }
  .alb-close svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  /* Menu open over lightbox — one X only (hamburger); hide lightbox close to avoid overlap */
  body.menu-open.alb-lock .alb-close{
    visibility:hidden;
    pointer-events:none;
  }

  /* mobile alt + CTA: slightly smaller */
  .alb-alt{font-size:13px}
  .alb-cta{padding:12px 14px;font-size:12px}

  /* caption — overlaid at bottom when visible */
  .alb-caption{
    position:fixed;
    left:0;right:0;bottom:max(52px, calc(36px + env(safe-area-inset-bottom, 0px)));
    z-index:5;
    flex-direction:column;align-items:center;gap:2px;
    padding:8px 16px;
    color:#FFFFFF;text-align:center;
    pointer-events:auto;
  }
  .alb-caption .alb-title{font-weight:400;font-size:10px;letter-spacing:.06em;text-align:center}
  .alb-caption .alb-title.is-he{font-family:"FbEzmel","Arial Hebrew","David Libre",serif;text-transform:none;direction:rtl}
  .alb-caption .alb-title.is-en{font-family:"Copperplate","Times New Roman",serif;text-transform:uppercase;direction:ltr}
  .alb-caption .alb-artist{
    flex-direction:row;gap:4px;
    font-weight:300;font-size:10px;letter-spacing:.06em;line-height:1.2;
    font-family:"Copperplate","Times New Roman",serif;text-transform:uppercase;
  }
  .alb-caption .alb-artist.is-he{font-family:"FbEzmel","Arial Hebrew","David Libre",serif;text-transform:none;direction:rtl;letter-spacing:.06em}
  .alb-caption .alb-artist.is-he .alb-caption-link--artist{display:inline-flex;flex-direction:row;gap:4px;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;direction:inherit}
  .alb-caption .alb-artist.is-he .first,
  .alb-caption .alb-artist.is-he .last{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;direction:inherit}
  .alb-caption .alb-artist .first,
  .alb-caption .alb-artist .last{font-size:10px;font-weight:300}
  .alb-caption .alb-artist.has-he-line2{
    flex-direction:column;
    gap:3px;
  }
  .alb-caption .alb-artist-heline2{font-size:10px}
}

/* ===== TABLET fallback ===== */
@media (min-width:769px) and (max-width:1100px){
  .alb{--alb-stage-pad-y:64px}
  .alb-stage{padding:0 24px;gap:24px}
  .alb-nav.prev{margin-left:24px}
  .alb-nav.next{margin-right:24px}
  .alb-figure{max-width:80vw;max-height:100%}
  .alb-figure img,.alb-figure .alb-video{max-width:80vw;max-height:100%}
}

/* artwork cursor hint on the source pages */
[data-artwork-id]:not(button):not(a),
[data-artwork-src]:not(button):not(a){cursor:zoom-in}