/* ==========================================================================
   about.css — About page (2jnew.pk)
   ========================================================================== */

.about-intro { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); }
@media (min-width: 960px) { .about-intro { grid-template-columns: 1fr 1fr; align-items: start; } }

.about-intro__aside {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
}
.about-intro__aside h3 {
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-dim);
}
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--text-sm);
  margin: 0;
}
.fact-list li:last-child { border-bottom: 0; }
.fact-list dt, .fact-list span:first-child { color: var(--color-charcoal-muted); }
.fact-list b { color: var(--color-charcoal); text-align: right; }

/* Mission pillars */
.pillars { display: grid; gap: var(--space-6); }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Timeline — vertical on mobile, alternating on desktop */
.timeline { position: relative; display: grid; gap: var(--space-8); }
.timeline::before {
  content: "";
  position: absolute;
  left: 15px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), rgba(184, 134, 11, 0.14));
}
.tl-item { position: relative; padding-left: var(--space-12); }
.tl-item__dot {
  position: absolute;
  left: 0; top: 3px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 32% 28%, #FFFFFF, #F4EEDE);
  border: 1px solid var(--color-border-gold-2);
  box-shadow: var(--shadow-medallion);
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--color-accent-dim);
}
.tl-item__year {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-dim);
}
.tl-item h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-lg); font-weight: 800; }
.tl-item p { margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); line-height: var(--line-height-loose); }

html[dir="rtl"] .timeline::before { left: auto; right: 15px; }
html[dir="rtl"] .tl-item { padding-left: 0; padding-right: var(--space-12); }
html[dir="rtl"] .tl-item__dot { left: auto; right: 0; }

/* Editorial two-column prose */
.editorial { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); }
@media (min-width: 940px) { .editorial { grid-template-columns: 0.85fr 1.15fr; } }
.editorial__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: var(--line-height-snug);
  color: var(--color-charcoal);
}
.editorial__label span { color: var(--color-accent); }

/* Team / community roles */
.roles { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.role {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.role:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.role__disc {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-accent-foil);
  box-shadow: var(--shadow-inset-foil);
  color: var(--color-charcoal);
}
.role__disc svg { width: 27px; height: 27px; }
.role h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; }
.role p { margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); }