/* =========================================================
   Article (مقال الرياضات الإلكترونية) — Figma node 2151:68
   Full-width band, RTL. Background: #F7F7FB
   Uses global tokens: --tint (#EEEDF6), --border (#6B6790)
   Section-specific colors kept as hex.
   ========================================================= */

.article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 557px;                 /* Figma frame height @1280 */
  padding: 0 64px;                   /* px-64; content vertically centered */
  background: #f7f7fb;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  color: #241b4f;
  box-sizing: border-box;
}

.article *,
.article *::before,
.article *::after { box-sizing: border-box; }

.article__inner {
  width: 100%;
  max-width: 1152px;                 /* 1280 - 64*2 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin: 0 auto;
}

/* ---------- Head ---------- */
.article__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.article__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.42px;
  color: #372873;
  white-space: nowrap;
}

.article__heading {
  margin: 0;
  max-width: 860px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  color: #241b4f;
}

/* ---------- Body: facts (left) + text (right) ---------- */
.article__body {
  display: flex;
  flex-direction: row-reverse;       /* RTL: facts left, text right (Figma order) */
  align-items: flex-start;
  gap: 48px;
  width: 100%;
  text-align: right;
}

/* ---------- Facts panel ---------- */
.article__facts {
  flex: 0 0 auto;
  width: 470px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding: 24px;
  background: var(--tint);           /* #EEEDF6 */
  border-radius: 20px 8px 20px 8px;  /* tl tr br bl */
}

.article__facts-title {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  color: #372873;
  text-align: right;
}

.article__frow {
  display: flex;
  flex-direction: row-reverse;       /* keep left/right card order under RTL */
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

.article__fact {
  flex: 1 1 0;
  min-width: 0;
  min-height: 103px;
  display: flex;
  flex-direction: column;
  align-items: stretch;              /* children full width; text-align governs */
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 14px 6px 14px 6px;  /* tl tr br bl */
  text-align: right;
}

.article__fact--white {
  background: #ffffff;
  border-color: #e7e5f0;
}

.article__fact--lime {
  background: #f3f8dd;
  border-color: #f3f8dd;
  color: #3f5106;
}

.article__fact-num {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 26px;
  line-height: normal;
  white-space: nowrap;
  text-align: right;
  color: #372873;
}

.article__fact-label {
  margin: 0;
  width: 100%;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--border);              /* #6B6790 */
}

.article__fact--lime .article__fact-num,
.article__fact--lime .article__fact-label { color: #3f5106; }

/* ---------- Text column ---------- */
.article__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.article__lead {
  margin: 0;
  width: 100%;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: #454070;
}

.article__para {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--border);              /* #6B6790 */
}

/* =========================================================
   Responsive reflow
   ========================================================= */
@media (max-width: 900px) {
  .article {
    min-height: 0;
    padding: 56px 32px;
  }
  .article__inner { gap: 32px; }
  .article__heading { max-width: 100%; font-size: 28px; }
  .article__body {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .article__facts { width: 100%; }
  .article__text { align-items: stretch; }
}

@media (max-width: 560px) {
  .article { padding: 40px 20px; }
  .article__eyebrow { white-space: normal; }
  .article__heading { font-size: 22px; }
  .article__facts { padding: 18px; }
  .article__frow { flex-direction: column; gap: 12px; }
  /* stacked cards must size to their content — flex:1 1 0 + min-height:0 in a
     column collapses them to just the padding, spilling the number/label out */
  .article__fact { flex: 0 0 auto; min-height: 0; }
  .article__lead { font-size: 16px; }
  .article__para { font-size: 15px; }
}