/* ==========================================================================
   why-us.css — قسم "لماذا يثق بنا" + شريط الإحصائيات
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   تخطيط ثلاثي: مجموعتا ميزات تحيطان بإطار مركزي، تحته شريط إحصائيات.
   يعتمد على مكوّنات: feature-item.css و stat-counter.css.
   مُستخدَم في: الصفحة الرئيسية وصفحة "من نحن".
   ملاحظة: هذه القواعد تعكس ما في home.css — تُوحَّد عند إعادة هيكلة الرئيسية.
   WC-NOTE: ثابت (static)
   ========================================================================== */

/* العنوان بلونين — اللون والحجم من .section-title، والجزء المميّز عنابي */
.why-us-title__accent {
  color: var(--color-primary);
}

.why-us-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

@media (min-width: 768px) {
  .why-us-layout {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-48);
  }

  /* البطاقات تلاصق الحافة الخارجية ليبقى خط الوصل ناحية المركز */
  .feature-item-group--right {
    align-items: flex-start;
  }

  .feature-item-group--left {
    align-items: flex-end;
  }
}

.why-us-center img {
  width: 360px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

/* الجوال: توحيد كل عناصر "لماذا يثق بنا" — الأيقونة يمين والنص شمال،
   وإخفاء الإطار المركزي لتوفير المساحة */
@media (max-width: 767px) {
  .why-us-center {
    display: none;
  }

  /* إلغاء عكس بطاقات جهة اليمين حتى تعود الأيقونة للبداية (يمين) مثل الباقي */
  .feature-item--right {
    flex-direction: row;
  }

  .feature-item--right .feature-item__body {
    text-align: start;
  }

  /* البطاقات بعرض كامل لمظهر موحّد */
  .feature-item {
    width: 100%;
  }
}

/* خطوط الوصل من البطاقات نحو دائرة الإطار — جريديانت يتلاشى ناحية المركز. */
@media (min-width: 768px) {
  .why-us-layout {
    --connector-len: var(--space-64);
  }

  .feature-item {
    position: relative;
  }

  .feature-item--right::after,
  .feature-item--left::before {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--connector-len);
    height: 1px;
  }

  /* المجموعة اليمنى: الخط يمتد نحو المركز ويتلاشى ناحيته */
  .feature-item--right::after {
    inset-inline-end: calc(-1 * var(--connector-len));
    background: linear-gradient(to left, var(--color-primary), transparent);
  }

  /* المجموعة اليسرى: الخط يمتد نحو المركز ويتلاشى ناحيته */
  .feature-item--left::before {
    inset-inline-start: calc(-1 * var(--connector-len));
    background: linear-gradient(to right, var(--color-primary), transparent);
  }

  /* عكس اتجاه التلاشي عند LTR */
  [dir="ltr"] .feature-item--right::after {
    background: linear-gradient(to right, var(--color-primary), transparent);
  }

  [dir="ltr"] .feature-item--left::before {
    background: linear-gradient(to left, var(--color-primary), transparent);
  }
}

/* ---- الإحصائيات — بطاقة بيضاء بفواصل رصاصية ---- */
.stat-counter-group {
  --stat-gap: calc(var(--space-64) + var(--space-48)); /* 112px */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--stat-gap);
  margin-block-start: var(--space-48);
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.stat-counter {
  position: relative;
}

/* الفاصل الرصاصي بين كل إحصائيتين — 3×96 في منتصف الفجوة */
.stat-counter-group .stat-counter+.stat-counter::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--stat-gap) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: calc(var(--space-64) + var(--space-32)); /* 96px */
  background: var(--color-divider);
}

/* موبايل: فجوة أصغر بدون فواصل */
@media (max-width: 767px) {
  .stat-counter-group {
    --stat-gap: var(--space-32);
  }

  .stat-counter-group .stat-counter+.stat-counter::before {
    display: none;
  }
}