/* ═══════════════════════════════════════════════════════
   css/05-about.css
   ABOUT / "THE SAGE" SECTION
   Two-column layout: quote + body left, Arabic + stats right.
═══════════════════════════════════════════════════════ */

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem; align-items: start;
}

/* ── Pull quote ── */
.about-pull {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-style: italic; line-height: 1.82;
  color: var(--text-dim);
  border-left: 2px solid var(--gold);
  padding-left: 1.4rem;
  margin-bottom: 1.6rem;
  transition: color var(--ease), border-color var(--ease);
}

/* ── Body text ── */
.about-body {
  font-size: 1.05rem; line-height: 1.95;
  color: var(--text-dim);
  transition: color var(--ease);
}
.about-body em { font-style: italic; color: var(--text-primary); }
.about-body br + br { display: block; content: ''; margin-top: 0.8rem; }

/* ── Arabic aside (decorative, low opacity) ── */
.about-ar {
  font-family: var(--font-arabic);
  font-size: 1.55rem;
  color: var(--gold-border2);
  direction: rtl; text-align: right;
  line-height: 1.7; margin-bottom: 1.8rem;
  transition: color var(--ease);
}
body.light .about-ar { color: rgba(110,72,16,0.3); }

/* ── Stat cards grid ── */
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
}
.stat {
  padding: 1.4rem;
  border: 1px solid var(--gold-border);
  border-top: 2px solid var(--gold);
  background: var(--bg-surface2);
  transition: background var(--ease), border-color var(--ease);
}
.stat-n {
  font-family: var(--font-display);
  font-size: 1.9rem; color: var(--gold);
  font-weight: 600;
  transition: color var(--ease);
}
.stat-l {
  font-family: var(--font-display);
  font-size: 0.58rem; letter-spacing: 0.12em;
  color: var(--text-muted); margin-top: 0.3rem;
  text-transform: uppercase;
  transition: color var(--ease);
}

/* ── Responsive ── */
@media (max-width: 740px) {
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}