/* =============================================================
   gallery.css - גלריית עבודות בדף הבית
   רשת אחידה + תצוגה מוגדלת (Lightbox). קובץ מבודד ללא איפוסים גלובליים.
   ============================================================= */

/* איפוס הכללים הישנים (float/height קבוע) שיצרו שורות משוננות */
.mk-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:20px;
  margin:10px 0 6px;
  padding:0;
  direction:rtl;
}
.mk-gallery::after{content:none}

.mk-gallery__item{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:#eceae4;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(28,39,50,.12);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
  aspect-ratio:4/3;
  line-height:0;
  will-change:transform;
}
/* גיבוי לדפדפנים ישנים ללא aspect-ratio */
@supports not (aspect-ratio: 4 / 3){
  .mk-gallery__item{height:270px}
}

.mk-gallery__item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  object-position:center;
  display:block;
  float:none!important;   /* ביטול ה-float הישן */
  margin:0!important;      /* ביטול ה-margin הישן */
  border-radius:0;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}

/* ריחוף: הרמה, הצללה עמוקה וזום חלק על התמונה */
.mk-gallery__item:hover{transform:translateY(-7px);box-shadow:0 20px 44px rgba(28,39,50,.30)}
.mk-gallery__item:hover img{transform:scale(1.1)}
.mk-gallery__item:focus-visible{outline:3px solid #bd9a5f;outline-offset:3px}

/* שכבת כיסוי הדרגתית + מסגרת זהב בריחוף */
.mk-gallery__item::after{
  content:"";
  position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(to top,rgba(28,39,50,.35),rgba(28,39,50,0) 55%);
  box-shadow:inset 0 0 0 0 rgba(189,154,95,0);
  opacity:0;
  transition:opacity .3s ease, box-shadow .3s ease;
  pointer-events:none;
}
.mk-gallery__item:hover::after{opacity:1;box-shadow:inset 0 0 0 3px rgba(189,154,95,.9)}

.mk-gallery__zoom{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.8);
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;z-index:2;
}
.mk-gallery__item:hover .mk-gallery__zoom{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mk-gallery__zoom svg{width:22px;height:22px;fill:#1c2732}

/* =============================================================
   Lightbox - תצוגה מוגדלת
   ============================================================= */
.mk-lb{
  position:fixed;inset:0;z-index:9999999;
  background:rgba(12,17,22,.94);
  display:flex;align-items:center;justify-content:center;
  padding:56px 16px;
  opacity:0;visibility:hidden;
  /* visibility מתחלפת מיידית (0s) בפתיחה, ורק ההסתרה מתעכבת עד תום ההנפשה.
     כך כפתורי החלונית ניתנים למיקוד מיד עם הפתיחה - קריטי לניווט במקלדת. */
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.mk-lb.is-open{
  opacity:1;visibility:visible;
  transition:opacity .22s ease, visibility 0s linear 0s;
}
.mk-lb__figure{margin:0;text-align:center;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.mk-lb__img{
  max-width:min(1100px,92vw);max-height:78vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.55);background:#1c2732;
}
.mk-lb__caption{
  color:#e8ecef;font-family:'Heebo','Assistant',Arial,sans-serif;font-size:15.5px;
  line-height:1.6;max-width:760px;margin:0;direction:rtl;
}
.mk-lb__counter{color:#9aa4ad;font-size:14px;font-family:'Heebo',Arial,sans-serif}

.mk-lb__btn{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;transition:background .2s;font-family:Arial,sans-serif;
}
.mk-lb__btn:hover{background:rgba(255,255,255,.26)}
.mk-lb__btn:focus-visible{outline:3px solid #bd9a5f;outline-offset:2px}
.mk-lb__close{top:14px;left:14px;font-size:22px}
.mk-lb__prev{top:50%;transform:translateY(-50%);left:14px}
.mk-lb__next{top:50%;transform:translateY(-50%);right:14px}

/* נעילת גלילת הרקע כשהתצוגה פתוחה */
body.mk-lb-open{overflow:hidden}

@media (max-width:720px){
  .mk-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .mk-gallery__item{border-radius:11px}
  @supports not (aspect-ratio: 4 / 3){ .mk-gallery__item{height:135px} }
  .mk-lb{padding:64px 10px}
  .mk-lb__img{max-height:66vh}
  .mk-lb__btn{width:42px;height:42px;font-size:22px}
  .mk-lb__prev{left:8px}
  .mk-lb__next{right:8px}
  .mk-lb__caption{font-size:14px}
}