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

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

@media (min-width: 768px) {
  .about-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.about-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
}

.about-text {
  font-size: var(--fs-base);
}

.about-text--muted {
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

/* صف الميزات مع فواصل رأسية بين العناصر */
.about-icons {
  display: flex;
  align-items: stretch;
  gap: var(--space-24);
  margin-block-start: var(--space-24);
}

.about-icon-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}

.about-icon-item + .about-icon-item {
  padding-inline-start: var(--space-24);
  border-inline-start: var(--border-width) solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

.about-icon-item__icon {
  font-size: var(--space-40);
  color: var(--color-primary);
  line-height: 1;
}

.about-icon-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-icon-item__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.about-icon-item__label {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  font-weight: normal;
}

.about-visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}