/* ================================================= */
/*   VELAR — قسم "عروض حصرية" (Bento Grid)             */
/* ================================================= */

.home_section_container{
  max-width:1320px;
  margin:0 auto;
  padding:0 16px;
}

/* ================================================= */
/*   العنوان                                           */
/* ================================================= */

.home_section_container > div[title]{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
  margin-bottom:4px;
}

.home_section_container .description{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0a58ff !important;
  order:-1;
}

.home_section_container h3{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-weight:800 !important;
  color:#111827 !important;
  margin:0 !important;
}

/* ================================================= */
/*   الشبكة (Bento Grid)                               */
/* ================================================= */

.home_section_container .grid.grid-cols-1{
  gap:14px !important;
}

/* الصورة الكبيرة (البانر الرئيسي) */
.home_section_container .grid > div.md\:col-span-3{
  height:auto !important;
}

.home_section_container .grid > div.md\:col-span-3 > div{
  aspect-ratio:21/9;
  height:auto !important;
}

/* الصور الثلاثة الصغيرة */
.home_section_container .grid > div:not(.md\:col-span-3){
  height:auto !important;
}

.home_section_container .grid > div:not(.md\:col-span-3) > div{
  aspect-ratio:4/5;
  height:auto !important;
}

/* الإطار المشترك لكل الصور */
.home_section_container .grid > div > div{
  border-radius:16px !important;
  border:1px solid rgba(17,24,39,.08);
}

.home_section_container .grid img{
  border-radius:16px !important;
  transition:transform .5s cubic-bezier(.25,.8,.25,1) !important;
}

.home_section_container .grid > div > div:hover img{
  transform:scale(1.05);
}

/* تظليل خفيف عند الهوفر يدي إحساس تفاعلي */
.home_section_container .grid > div > div{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.home_section_container .grid > div > div::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18) 100%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.home_section_container .grid > div > div:hover::after{
  opacity:1;
}

/* ================================================= */
/*   تجاوب الموبايل                                    */
/* ================================================= */

@media (max-width:768px){
  .home_section_container .grid.grid-cols-1{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .home_section_container .grid > div.md\:col-span-3 > div{
    aspect-ratio:16/11;
  }

  .home_section_container .grid > div:not(.md\:col-span-3) > div{
    aspect-ratio:16/10;
  }

  .home_section_container .grid > div > div,
  .home_section_container .grid img{
    border-radius:14px !important;
  }
}