/* לייטבוקס העבודות — משותף ל-gallery.html ולרצועה בעמוד הבית.
   נשען על טוקני הפלטה (--white, --band-2, --ink-soft, --bronze-deep,
   --line) שמוגדרים ב-:root של כל עמוד. */

.lb{position:fixed;inset:0;z-index:200;background:rgba(20,16,13,.94);
  display:flex;align-items:center;justify-content:center;padding:20px}
.lb.hidden{display:none!important}
.lb-nav-wrap{position:relative;width:100%;max-width:1300px;max-height:100%;display:flex}
.lb-inner{display:flex;flex-direction:column;gap:0;max-width:1300px;width:100%;
  max-height:100%;background:var(--white);overflow:hidden}
@media(min-width:900px){
  .lb-inner{flex-direction:row;max-height:88vh}
  .lb-media{flex:1 1 62%;min-width:0}
  .lb-text{flex:0 0 38%;max-width:460px;overflow-y:auto}
}
/* contain ולא cover: מתוך 34 העבודות **18 לגובה ו-16 לרוחב** (נמדד
   מ-cover_width/cover_height ב-DB, 13/09/2026). אין יחס אחד שמתאים
   לשתי הקבוצות, ו-cover היה חותך מכל אחת מהן בדיוק את מה שהיא
   מתעדת — את גובה הקיר או את רוחב החדר.
   ⚠️ הרקע לבן ולא --band-2: contain משאיר פסים בצדדים בכל תמונה
   שהיחס שלה שונה מהמסגרת, ובבז' הם נקראו כמסגרת מכוונת סביב
   הצילום. לבן זהה לפאנל הטקסט שלצידו, ולכן המודאל נקרא כיריעה
   אחת שהתמונה יושבת עליה — הפסים מפסיקים להיות אלמנט. */
/* position:relative — העוגן של החיצים. בלעדיו הם נופלים לעוטף,
   ושם top:50% במובייל נוחת בתוך הטקסט. */
.lb-media{position:relative;background:var(--white);display:flex;align-items:center;justify-content:center;
  min-height:0;max-height:52vh}
/* ⚠️ min-height מתחת ל-900px — לא אסתטיקה, מניעת התנגשות.
   ב-RTL גם .lb-close (על העוטף) וגם .lb-prev (על המדיה) יושבים
   ב-inset-inline-end:14px, כלומר באותו צד פיזי. בעבודה עם שער
   רוחבי המדיה נמוכה, החץ — שממורכז בתוכה — עולה ונכנס מתחת
   לכפתור הסגירה: הקשה שכוונה לחץ סוגרת את הלייטבוקס.
   החשבון: הסגירה נגמרת ב-80, מרווח 8, והחץ מתחיל ב-20+H/2-23.
   מכאן H ≥ 182; 200 נותן 17px מרווח. 52vh נשאר התקרה. */
@media(max-width:899px){.lb-media{min-height:200px}}
@media(min-width:900px){.lb-media{max-height:none}}
/* ===== למה המדיה אינה מתכווצת מתחת ל-900px =====
   ⚠️ שני הערכים מדדו דברים שונים, ולכן זה לא יכול היה להסתדר לבד.
   ה-max-height של התמונה הוא 52vh — יחידת **מסך**; .lb-media היה
   פריט flex מתכווץ בעמודה, ולכן גובהו נקבע ממה שנשאר אחרי .lb-text.
   בעבודה לגובה (624×1600) התמונה יצאה 384.8 והמכל 239.7, ו-align-
   items:center חילק את ההפרש לשניים: 72.5px נחתכו למעלה ב-overflow
   hidden של .lb-inner ו-72.5px שכבו על הכותרת. נמדד ב-360×740; ב-
   412×915 אותו דפוס עם 51.8px. הורדת התקרה לא הייתה פותרת — היא רק
   מקטינה את ההפרש.
   הכלל: המדיה מקבלת את גובה התוכן שלה (גובה התמונה, עד 52vh) ואינה
   מתכווצת מתחתיו; פאנל הטקסט לוקח את מה שנשאר וגולל, כפי שהוא כבר
   עושה עם overflow-y:auto.
   ⚠️ אין כאן כפיית גובה אחיד: עבודה לרוחב (1600×721) ממשיכה לקבל
   מכל של 200px — ה-min מלמעלה — ולא את גובה התמונה לגובה. ההחלטה
   על contain ועל היעדר יחס קבוע לא השתנתה.
   ⚠️ overflow:hidden כאן אינו חותך את החיצים: הם 46×46 בתוך מכל
   שגובהו 200 לפחות, כלומר 77px מרווח למעלה ולמטה ו-14px בצד. */
@media(max-width:899px){
  .lb-media{flex:0 0 auto;overflow:hidden}
  .lb-text{flex:1 1 auto;min-height:0}
}
/* ===== בלי מתיחה: תמונה לא תוצג רחבה מהרוחב הטבעי שלה =====
   כאן היה width:100%;height:100% עם object-fit:contain. contain
   מונע **עיוות** אבל אינו מונע **הגדלה**: הוא פורס את הביטמאפ כך
   שיכסה את תיבת האלמנט, וכשהתיבה גדולה מהתמונה הוא מגדיל אותה.
   קובץ 450px הוצג כך ברוחב 715 בדסקטופ — 159% מהרוחב הטבעי, וזה
   מה שנראה רך.
   width:auto + max-width/max-height נותן בדיוק את הכלל: התמונה
   נפרסת בגודלה הטבעי, ורק אם היא גדולה מהמכל היא מוקטנת. ב-replaced
   element שני ה-max יחד שומרים על היחס, ולכן object-fit הופך
   למיותר ויצא.
   ⚠️ למה לא max-width לפי naturalWidth ב-JS ולא attr(width):
   ‏attr() עם יחידות אינו נתמך בדפדפנים (CSS Values 5, לא מומש),
   ומדידה ב-JS הייתה מוסיפה תלות בסדר הטעינה עבור מה ש-CSS עושה
   לבד. הפתרון כאן הוא היעדר קוד, לא קוד נוסף.
   המשטח הלבן שמאחורי התמונה כבר קיים ב-media-surface.css, ולכן
   תמונה קטנה יושבת ממורכזת עליו. */
.lb-media img{width:auto;height:auto;max-width:100%;max-height:52vh}
@media(min-width:900px){.lb-media img{max-height:88vh}}
.lb-text{padding:28px 26px 32px;overflow-y:auto}
.lb-text h2{margin-bottom:8px}
.lb-lead{color:var(--ink-soft);font-size:1rem}
.lb-blocks{margin-top:22px}
.lb-blocks h3{font-size:0.9375rem;font-weight:500;letter-spacing:.03em;color:var(--bronze-deep);
  margin-top:20px;margin-bottom:6px}
.lb-blocks h3:first-child{margin-top:0}
.lb-blocks p{font-size:0.9375rem;color:var(--ink-soft)}
.lb-cats{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px}
.lb-cats a{font-size:0.8125rem;border:1px solid var(--line);padding:6px 12px;color:var(--ink-soft)}
.lb-cats a:hover{border-color:var(--ink);color:var(--ink)}
.lb-close,.lb-prev,.lb-next{position:absolute;z-index:2;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;background:rgba(20,16,13,.55);
  color:var(--white);border:0;cursor:pointer;font-size:1.375rem;line-height:1;font-family:inherit}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(20,16,13,.85)}
.lb-close{top:14px;inset-inline-end:14px}
.lb-prev{top:50%;transform:translateY(-50%);inset-inline-end:14px}
.lb-next{top:50%;transform:translateY(-50%);inset-inline-start:14px}
.lb-prev.hidden,.lb-next.hidden{display:none!important}
.lb :focus-visible{outline-color:var(--white)}