/* =============================
   Services Section (ASL-like style)
   ============================= */

/* القسم */
.services-section{
  position: relative;
  overflow: hidden;
  background:#05103A;
  color:#fff;
  padding: 60px 20px;
}
.services-section > *{
  position: relative;
  z-index: 2;
}

/* الحاوية */
.services-section .container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* العنوان */
.section-title {
  display:block;
  width:100%;
  font-size:clamp(22px, 3vw, 32px);
  font-weight:700;
  text-align:center;
  margin:0 0 40px;
  color:#ffb367; /* ذهبي */
}

/* الشبكة */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
@media (max-width:1024px){ .cards-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .cards-grid{ grid-template-columns: 1fr; } }

/* البطاقة */
.service-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#0b174e;
  box-shadow: 0 6px 25px rgba(248, 246, 246, 0.35);
  transition: all 0.4s ease;
}

/* تأثير التحويم على البطاقة */
.service-card:hover {
  box-shadow: 0 12px 35px rgba(248, 246, 246, 0.45);
  transform: translateY(-5px);
}

/* الصورة */
.img-wrap{
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
}
.img-wrap img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition: transform .6s ease;
}

/* شريط جانبي داكن */
.img-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:12px;
  left:0;                           /* الشريط يسار مثل الصورة */
  background: rgba(0,0,0,.35);
  opacity:0;
  transition: opacity .35s ease;
  z-index: 1;
  pointer-events:none;
}
html[dir="rtl"] .img-wrap::after{
  left:auto; right:0;               /* لو RTL انقله لليمين */
}

/* طبقة زجاجية مائلة (diagonal glass) */


/* المثلث/الإسفين البرتقالي أعلى الزاوية */
.overlay{
  position:absolute;
  inset:0;
  /* تظليل للنص كما كان */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.45) 40%,
    rgba(0,0,0,0)   100%
  );
  opacity:0;                          /* يظهر مع الهوفر */
  translate: 0 -12px;
  transition: opacity .35s ease, translate .35s ease;
  pointer-events:none;
  z-index:2;                           /* فوق المثلث والزجاج */
}

/* نستخدم ::before على overlay لرسم المثلث */
.overlay::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:120%; height:120%;
  clip-path: polygon(0 0, 100% 0, 0 100%);

  /* برتقالي شفاف (غيّر القيم .45 و .30 حسب الرغبة) */
  background: linear-gradient(
    0deg,
    rgba(209,138,82, .45) 0%,
    rgba(231,169,106, .30) 50%,
    rgba(231,169,106, 0)   100%
  );

  opacity:0;                         /* للظهور عند الهوفر كما هو */
  transition: opacity .35s ease;
}
html[dir="rtl"] .overlay::before{
  left:auto; right:0;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}


/* عند الهوفر: أظهر كل التأثيرات وحرّك الصورة قليلاً */
.service-card:hover .img-wrap::after{ opacity:1; }
.service-card:hover .img-wrap::before{
  opacity:1;
  transform: translateX(0);
}
.service-card:hover .overlay{
  opacity:1;
  translate: 0 0;
}
.service-card:hover .overlay::before{ opacity:1; }
.service-card:hover img{ transform:scale(1.06); }

/* محتوى النص */
.overlay-content{
  position:absolute;
  top:12px; left:12px; right:12px;
  color:#fff;
}
html[dir="rtl"] .overlay-content{ left:auto; right:12px; }

/* العناوين والأوصاف */
.service-title{
  font-size:clamp(16px, 2.2vw, 20px);
  margin:0 0 6px;
  font-weight:800;
  line-height:1.2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.service-desc{
  margin:0;
  font-size:clamp(13px, 1.6vw, 14px);
  line-height:1.45;
  opacity:.95;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* حالة عدم وجود بيانات */
.empty-state{
  grid-column: 1 / -1;
  text-align:center;
  color:#cfd3ff;
  background:rgba(255,255,255,.05);
  padding:18px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}