:root{
  --page-gutter: 16px;    /* هوامش يمين/شمال */
  --grid-gap: 16px;       /* المسافة بين الصور */
  --max-content: 1200px;  /* أقصى عرض للمحتوى */
  --top-margin: 24px;     /* مسافة من فوق */
  --hover-scale: 1.08;    /* درجة التكبير عند الهوفر */
}

/* الشبكة */
.image-grid{
  width: min(var(--max-content), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  margin-top: var(--top-margin);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* الحاوية لكل صورة — بدون أي تدوير */
.image-wrapper{
  position: relative;
  /* border-radius: 50%;  <-- اتشالت */
  border-radius: 0;
  overflow: hidden;                 /* يضمن عدم خروج التكبير برة الحاوية */
  transform: translateZ(0);
  will-change: transform, filter, opacity;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* الصورة */
.image-wrapper img{
  width: 100%;
  height: auto;
  display: block;
}

/* لمعة/شين متحركة تظهر في الهوفر */
.image-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0; /* متوافق مع الحاوية */
  background:
    linear-gradient(130deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,0) 60%);
  transform: translateX(-120%) rotate(10deg);
  transition: transform .6s ease, opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}

/* تأثير الهوفر: تكبير بسيط + تشبع/إضاءة + لمعة تمر */
.image-wrapper:hover{
  transform: scale(var(--hover-scale));
  filter: brightness(1.06) saturate(1.1);
}
.image-wrapper:hover::after{
  transform: translateX(120%) rotate(10deg);
  opacity: 1;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .image-wrapper,
  .image-wrapper::after{
    transition: none;
  }
  .image-wrapper:hover{
    transform: none;
    filter: none;
  }
  .image-wrapper:hover::after{
    opacity: 0;
    transform: none;
  }
}