/* משתני בסיס עם ערכי דיפולט; בפועל נדרסים ע"י inline style על .mtg-wrap */
.mtg-wrap{
  --mtg-height: 70vh;
  --mtg-main-share: 70%;
  --mtg-wrap-gap: 12px;
  --mtg-cols: 2;
  --mtg-rows: 2;
  --mtg-grid-gap: 12px;
  --mtg-thumb-custom-h: 20vh;
  --mtg-arrow-offset: 16px;

  --mtg-thumbs-share: calc(100% - var(--mtg-main-share));

  display: grid;
  gap: var(--mtg-wrap-gap);
  height: var(--mtg-height);
  grid-template-areas: "main thumbs";
  align-items: stretch; /* שתי העמודות על אותו גובה */
}

/* אזורי גריד קבועים (לא מושפעים מ-RTL) */
.mtg-main{ grid-area: main; width:100%; height:100%; }
.mtg-thumbs-wrap{
  grid-area: thumbs;
  display:flex;
  align-items:center;
  gap: 8px;
  position: relative; /* לעיגון חיצים מחוץ לעמודה */
  height:100%;
}

/* פריסות – חלוקת אחוזים בין גדולה לממוזערות */
.mtg--pos-right{
  grid-template-columns: var(--mtg-main-share) var(--mtg-thumbs-share);
  grid-template-rows: 1fr;
}
.mtg--pos-left{
  grid-template-columns: var(--mtg-thumbs-share) var(--mtg-main-share);
  grid-template-rows: 1fr;
  grid-template-areas: "thumbs main";
}
.mtg--pos-top{
  grid-template-columns: 1fr;
  grid-template-rows: var(--mtg-thumbs-share) var(--mtg-main-share);
  grid-template-areas: "thumbs" "main";
}
.mtg--pos-bottom{
  grid-template-columns: 1fr;
  grid-template-rows: var(--mtg-main-share) var(--mtg-thumbs-share);
  grid-template-areas: "main" "thumbs";
}

/* הגדולה */
.mtg-main .mtg-main-inner{ position:relative; width:100%; height:100%; }
.mtg-main .mtg-main-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; /* נשלט בבקרים */
  display:block;
}

/* הממוזערות – בסיס */
.mtg-thumbs{
  display: grid;
  gap: var(--mtg-grid-gap);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;       /* ברירת מחדל – גלילה */
  scrollbar-width: thin;
  align-content: start;
  justify-content: start;
}

/* Fill container – חישוב מדויק + אותו גודל גם לאימפליציטיות */
.mtg--size-fill .mtg-thumbs{
  grid-template-columns: repeat(
    var(--mtg-cols),
    calc((100% - (var(--mtg-cols) - 1) * var(--mtg-grid-gap)) / var(--mtg-cols))
  );
  grid-template-rows: repeat(
    var(--mtg-rows),
    calc((100% - (var(--mtg-rows) - 1) * var(--mtg-grid-gap)) / var(--mtg-rows))
  );

  /* חשוב: גם פריטים מעבר לדף הראשון יקבלו את אותו גודל תא */
  grid-auto-columns: calc((100% - (var(--mtg-cols) - 1) * var(--mtg-grid-gap)) / var(--mtg-cols));
  grid-auto-rows:    calc((100% - (var(--mtg-rows) - 1) * var(--mtg-grid-gap)) / var(--mtg-rows));
}

/* Custom size – גובה תא קבוע, הרוחב לפי הגריד; עודפים גולשים וניתן לגלול */
.mtg--size-custom .mtg-thumbs{
  grid-template-columns: repeat(var(--mtg-cols), minmax(0,1fr));
  grid-auto-rows: var(--mtg-thumb-custom-h);
  grid-auto-flow: row;
}

/* יישור קצוות (מצמיד את הממוזערות לראש/תחתית/צדדים) */
.mtg--edges-trim .mtg-thumbs-wrap{ gap: 0; }

/* Scrollbar (במצב גלילה) */
.mtg--nav-arrows .mtg-thumbs{ overflow: hidden; }
.mtg--nav-scroll .mtg-thumbs::-webkit-scrollbar{ height:8px; width:8px; }
.mtg--nav-scroll .mtg-thumbs::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius:10px; }
.mtg--nav-scroll .mtg-thumbs::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.3); border-radius:10px; }

/* תא ממוזערת */
.mtg-thumb{
  display:block; width:100%; height:100%;
  padding:0; border:0; background:#fff; cursor:pointer; overflow:hidden;
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.mtg-thumb[aria-current="true"]{ box-shadow: inset 0 0 0 2px #2271b1; }
.mtg-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* חיצים */
.mtg-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  border:none; cursor:pointer; line-height:1;
  background:#fff; color:#111;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  z-index: 2;
}
.mtg-arrow img{ max-width:70%; max-height:70%; }

/* כיווניות חיצים */
.mtg--pos-right .mtg-thumbs-wrap,
.mtg--pos-left  .mtg-thumbs-wrap{ flex-direction: column; }   /* חיצים למעלה/למטה */
.mtg--pos-top .mtg-thumbs-wrap,
.mtg--pos-bottom .mtg-thumbs-wrap{ flex-direction: row; }     /* חיצים ימין/שמאל */

/* חיצים מחוץ לעמודה (outside) */
.mtg--arrows-outside.mtg--pos-right .mtg-prev,
.mtg--arrows-outside.mtg--pos-left  .mtg-prev{
  position:absolute; top: calc(0px - var(--mtg-arrow-offset)); left: 50%; transform: translateX(-50%);
}
.mtg--arrows-outside.mtg--pos-right .mtg-next,
.mtg--arrows-outside.mtg--pos-left  .mtg-next{
  position:absolute; bottom: calc(0px - var(--mtg-arrow-offset)); left: 50%; transform: translateX(-50%);
}
.mtg--arrows-outside.mtg--pos-top .mtg-prev,
.mtg--arrows-outside.mtg--pos-bottom .mtg-prev{
  position:absolute; left: calc(0px - var(--mtg-arrow-offset)); top: 50%; transform: translateY(-50%);
}
.mtg--arrows-outside.mtg--pos-top .mtg-next,
.mtg--arrows-outside.mtg--pos-bottom .mtg-next{
  position:absolute; right: calc(0px - var(--mtg-arrow-offset)); top: 50%; transform: translateY(-50%);
}

/* אנימציות */
.mtg--anim-fade .mtg-main-img{ transition: opacity var(--mtg-anim,300ms) ease; }
.mtg--anim-slide .mtg-main-img{ transition: transform var(--mtg-anim,300ms) ease, opacity var(--mtg-anim,300ms) ease; }
.mtg-changing.mtg--anim-fade   .mtg-main-img{ opacity: 0; }
.mtg-changing.mtg--anim-slide  .mtg-main-img{ opacity: 0; transform: translateX(12px); }

/* מובייל: הגדולה מעל והממוזערות מתחת */
@media (max-width: 767px){
  .mtg-wrap{
    grid-template-columns: 1fr;
    grid-template-areas: "main" "thumbs";
    grid-template-rows: calc(100% - 200px) 200px;
  }
  .mtg-thumbs-wrap{ flex-direction: row; }
  .mtg--nav-arrows .mtg-thumbs{ overflow:hidden; }
}