/* =====================================================================
   about.css — أنماط صفحة «من نحن» فقط
   (كل الألوان والمسافات من التوكنز في base.css — برتقالي اللوقو على الفحمي)
   ===================================================================== */

/* ---- حقائق سريعة تحت قصة الشركة ---- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}
.fact { display: grid; gap: 2px; align-content: start; }
.fact__value {
  font-family: var(--font-head); font-weight: 700; line-height: 1.1;
  font-size: var(--fs-xl); color: var(--ink);
}
@media (min-width: 768px) { .fact__value { font-size: var(--fs-2xl); } }
.fact__value::after {
  content: ""; display: block; width: 24px; height: 2px;
  background: var(--grad-orange); margin-block: 8px 4px;
}
.fact__label { font-size: var(--fs-sm); color: var(--steel); line-height: 1.45; }

/* ---- الرؤية + بالأرقام (داخل .stats.stats--outline) ---- */
.vision { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .vision { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-10); }
}
.vision__title {
  margin-block-start: var(--s-4);
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--orange);
  font-family: var(--font-head); font-weight: 700; line-height: 1.4;
  font-size: var(--fs-2xl); color: var(--white);
}
@media (min-width: 768px) { .vision__title { font-size: var(--fs-3xl); line-height: 1.35; } }
.vision__cite { margin-block-start: var(--s-4); color: var(--on-dark-muted); font-size: var(--fs-sm); }
.vision .vision__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.vision__stats .stat__value { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
.vision__stats .stat__value small { white-space: nowrap; }

/* ---- الخط الزمني (نقطتان) ---- */
/* ol.timeline (وليس .timeline فقط) حتى تتغلب على تصفير ol[class] { padding: 0 } في base.css */
ol.timeline { position: relative; display: grid; gap: var(--s-6); padding-inline-start: var(--s-6); }
.timeline::before {
  content: ""; position: absolute; inset-block: 6px; inset-inline-start: 7px; width: 2px;
  background: linear-gradient(to bottom, var(--orange), var(--orange-deep));
}
.timeline__item { position: relative; display: grid; gap: var(--s-2); align-content: start; }
.timeline__item::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--s-6)); inset-block-start: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--orange); box-shadow: 0 0 0 4px var(--paper);
}
.timeline__year {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: var(--fs-4xl); color: var(--orange-deep);
}
.timeline__title { font-size: var(--fs-xl); }
.timeline__text { color: var(--steel); max-width: 52ch; }
@media (min-width: 768px) {
  ol.timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8); padding-inline-start: 0; padding-block-start: var(--s-7);
  }
  .timeline::before {
    inset-block: 7px auto; inset-inline: 8px; width: auto; height: 2px;
    background: linear-gradient(to left, var(--orange), var(--orange-deep));
  }
  .timeline__item::before { inset-inline-start: 0; inset-block-start: calc(-1 * var(--s-7)); }
}

/* ---- المصانع داخل البطاقة ---- */
.agent__mills .mill-strip { justify-content: flex-start; }
.agent__mills .mill-strip__note { text-align: start; }

/* ---- شريط الأسطول ---- */
.band__content { max-width: 640px; }
.band__content .section-title { color: var(--white); margin-block-start: var(--s-4); }
.band__content .section-lead { color: var(--on-dark-soft); }

/* ---- شريط الشعارات ---- */
.slogans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  border-block: 1px solid var(--line);
}
.slogans__item {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding-block: var(--s-3);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); color: var(--ink);
  text-align: center;
}
.slogans__item::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--orange); transform: rotate(45deg);
}
@media (min-width: 768px) {
  .slogans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .slogans__item { font-size: var(--fs-xl); border-inline-start: 1px solid var(--line); }
  .slogans__item:first-child { border-inline-start: 0; }
}

/* محاذاة سنة الخط الزمني إلى بداية العمود (الرقم LTR داخل شبكة RTL) */
.timeline__year { justify-self: start; }

/* ---- حركة (GSAP، js/motion-about.js): الخط الزمني وعلامتا الاقتباس ---- */
/* الخط يُرسم مع التمرير: GSAP تحرّك --tl-progress من 0 إلى 1. بدون JS القيمة 1 = الخط مرسوم كاملًا */
.timeline::before { transform: scaleY(var(--tl-progress, 1)); transform-origin: 50% 0; }
@media (min-width: 768px) {
  .timeline::before { transform: scaleX(var(--tl-progress, 1)); transform-origin: 100% 50%; }
  [dir="ltr"] .timeline::before { transform-origin: 0 50%; }
}
.timeline.is-drawing::before { will-change: transform; }
/* «» في عنوان الرؤية تُلفّ مؤقتًا بـ span أثناء الحركة (inline-block حتى يعمل scale) */
.m-quote { display: inline-block; }