/* ============ Modern Gallery Styles ============ */
:root{
  --mg-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* ---------- Grid ---------- */
.modern-gallery{
  display:grid;
  gap:var(--mg-gap,15px);
  padding:10px 0;
}

/* حالت خودکار: ستون‌ها بر اساس حداقل عرض کارت */
.modern-gallery.is-auto{
  grid-template-columns: repeat(auto-fill, minmax(var(--mg-mincol,180px), 1fr));
}

/* حالت ثابت: تعداد ستون‌ها ثابت */
.modern-gallery.is-fixed{
  grid-template-columns: repeat(var(--mg-columns,3), 1fr);
}

.modern-gallery .mg-item{
  overflow:hidden;
  border-radius:var(--mg-radius,0px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  transition:transform .3s ease, box-shadow .3s ease, opacity .3s ease;
  will-change: transform;
  box-shadow:none;
}

.modern-gallery .mg-item img{
  width:100%; height:100%;
  display:block; object-fit:cover;
  transition:transform .4s ease;
}

.modern-gallery .mg-item:hover{ transform:translateY(-4px); }
.modern-gallery .mg-item:hover img{ transform:scale(1.06); }

@media (prefers-color-scheme: dark){
  .modern-gallery .mg-item{ background:rgba(255,255,255,.03); }
}

/* ---------- Carousel (Swiper) ---------- */
.mg-carousel { width:100%; position:relative; }
.mg-carousel .swiper-wrapper{ align-items:stretch; }
.mg-carousel .swiper-slide{ height:auto; }

.mg-carousel .mg-slide{
  width:100%;
  height:var(--mg-h,320px);
  border-radius:0px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  background:#0b0f14;
}

.mg-carousel .mg-slide img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease, filter .3s ease;
}

.mg-carousel .mg-slide:hover img{ transform:scale(1.06); }

/* فلش‌ها */
.mg-carousel .swiper-button-next,
.mg-carousel .swiper-button-prev{
  color: var(--mg-arrow, #00d0ff);
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
}

/* نقاط */
.mg-carousel .swiper-pagination-bullet{
  background: var(--mg-bullet, #ccc);
  opacity:.6;
}
.mg-carousel .swiper-pagination-bullet-active{
  background: var(--mg-bullet-a, #00d0ff);
  opacity:1;
}

/* فاصله منطقی اطراف کاروسل در صفحات فشرده */
.mg-carousel{ margin: 6px 0; }