/* ===================================================================
   ABOUT.CSS — صفحه‌ی درباره‌ی من
=================================================================== */

/* =========================== بیوگرافی =========================== */
.bio-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items:start;
}
.bio-portrait{
  position:relative;
  height: 520px;
}
.bio-portrait-panel{
  position:absolute; inset:0;
  border-radius: var(--r-xl);
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(124,58,237,.35), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(6,182,212,.28), transparent 55%),
    linear-gradient(160deg, #15171f, #0a0b10);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-lg);
}
.bio-portrait-panel svg{ position:absolute; inset:0; margin:auto; width:60%; top:8%; opacity:.92; }
.bio-badge{
  position:absolute;
  bottom: -22px;
  right: -22px;
  padding: 18px 22px;
  text-align:center;
  z-index:2;
}
.bio-badge strong{ display:block; font-size:30px; }
.bio-badge span{ font-size:12.5px; color: var(--text-soft); }

.bio-content .eyebrow{ margin-bottom:14px; }
.bio-content h1{
  font-size: clamp(30px,4vw,44px);
  margin-bottom: 22px;
}
.bio-content p{ margin-bottom:18px; font-size:16px; }
.bio-content p:last-of-type{ margin-bottom:0; }

.bio-info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin: 32px 0;
}
.bio-info-grid .info-item{
  padding: 18px 20px;
}
.bio-info-grid .info-item span{ display:block; font-size:12.5px; color: var(--text-faint); margin-bottom:6px; }
.bio-info-grid .info-item strong{ font-size:15px; }

.bio-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

/* =========================== خط زمانی =========================== */
.timeline-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom: 60px;
}
.timeline-tabs button{
  padding: 12px 28px;
  border-radius: var(--r-pill);
  background: var(--card);
  border:1px solid var(--card-border);
  color: var(--text-soft);
  font-weight:700;
  font-size:14.5px;
  transition: all .35s var(--ease-luxury);
}
.timeline-tabs button.active{
  color:#fff;
  background: var(--grad-primary);
  box-shadow: 0 10px 28px rgba(124,58,237,.35);
}

.timeline{
  position:relative;
  max-width: 880px;
  margin: 0 auto;
  display:none;
}
.timeline.active{ display:block; }
.timeline::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  right: 29px;
  width:2px;
  background: linear-gradient(180deg, var(--primary), transparent);
}
.timeline-item{
  position:relative;
  padding-right: 76px;
  padding-bottom: 54px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute;
  right: 14px; top:2px;
  width:32px; height:32px;
  border-radius:50%;
  background: var(--bg);
  border:2px solid var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.timeline-dot::after{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background: var(--grad-primary);
}
.timeline-card{
  padding: 26px 30px;
}
.timeline-date{
  display:inline-block;
  font-size:12.5px;
  font-weight:700;
  color: var(--accent-soft);
  background: var(--accent-dim);
  padding:5px 14px;
  border-radius: var(--r-pill);
  margin-bottom:14px;
}
.timeline-card h3{ font-size:19px; margin-bottom:6px; }
.timeline-card .org{ font-size:13.5px; color: var(--text-soft); margin-bottom:14px; display:block; }
.timeline-card p{ font-size:14.5px; }

/* =========================== افتخارات =========================== */
.achieve-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:24px;
}
.achieve-card{
  text-align:center;
  padding: 40px 26px;
}
.achieve-icon{
  width:64px; height:64px;
  margin: 0 auto 22px;
  border-radius:50%;
  background: var(--grad-primary-soft);
  display:flex; align-items:center; justify-content:center;
}
.achieve-icon svg{ width:28px; height:28px; }
.achieve-card strong{ display:block; font-size: 26px; margin-bottom:8px; }
.achieve-card span{ font-size:13.5px; color: var(--text-soft); }

/* =========================== نقل‌قول الهام‌بخش =========================== */
.about-quote{
  max-width: 760px;
  margin:0 auto;
  text-align:center;
  padding: 60px 50px;
  position:relative;
}
.about-quote svg{ width:38px; height:38px; color: var(--primary-soft); margin:0 auto 24px; opacity:.8; }
.about-quote p{ font-size:22px; color:#fff; line-height:1.8; font-weight:600; }
.about-quote span{ display:block; margin-top:20px; font-size:13.5px; color: var(--text-soft); }

@media (max-width: 1000px){
  .bio-grid{ grid-template-columns:1fr; gap:60px; }
  .bio-portrait{ height:420px; }
  .achieve-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .bio-info-grid{ grid-template-columns: 1fr; }
  .timeline-tabs{ flex-wrap:wrap; }
  .timeline::before{ right:19px; }
  .timeline-item{ padding-right:58px; }
  .timeline-dot{ right:4px; width:28px; height:28px; }
  .achieve-grid{ grid-template-columns: 1fr; }
  .about-quote{ padding:40px 20px; }
  .about-quote p{ font-size:18px; }
}