/* صفحهٔ درباره — چیدمان واکنش‌گرا با hero، سرِ بخش، داستان، باورها، چشم‌انداز و چک‌لیست */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* کلاس‌های qa-hero فقط در home.css تعریف شده‌اند و این صفحه آن را بار نمی‌کند؛ اینجا نسخهٔ صفحه‌ایِ متمرکز می‌آید */
.about-hero {
  padding: var(--section-y-lg) 0;
}

.about-hero .qa-hero {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.about-hero .qa-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  max-inline-size: 62ch;
  margin-inline: auto;
}

.about-hero .qa-hero__kicker {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.about-hero .qa-hero__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--color-text-strong);
}

.about-hero .qa-hero__lead {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ── سرِ بخش‌ها ─────────────────────────────────────────────────────────── */
/* section-header هم تنها در home.css بود؛ نسخهٔ صفحه‌ایِ چپ‌چین با گزینهٔ وسط‌چین */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.section-header--center {
  align-items: center;
  text-align: center;
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  color: var(--color-brand-ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.section-header__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-text-strong);
}

.section-header__lead {
  margin: 0;
  max-inline-size: 54ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ── Story ─────────────────────────────────────────────────────────────── */
.about-layout {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .about-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-10);
  }
}

.about-story {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.about-story .section-header {
  margin-bottom: var(--sp-2);
}

.about-story p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.about-story .checklist {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

@media (min-width: 600px) {
  .about-story .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-5);
  }
}

.about-story .checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.about-story .checklist li i {
  flex: 0 0 auto;
  margin-block-start: 0.35em;
  color: var(--color-brand);
  font-size: var(--fs-xs);
}

/* ── Pillars ───────────────────────────────────────────────────────────── */
.about-pillars {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .about-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.about-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  block-size: 100%;
  padding: var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.about-pillar:hover,
.about-pillar:focus-within {
  border-color: var(--color-brand-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* نشانِ تصویری هر باور، برای لنگرِ بصری و سلسله‌مراتب روشن‌تر */
.about-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-size: var(--fs-lg);
}

.about-pillar h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.about-pillar p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* ── Vision ────────────────────────────────────────────────────────────── */
.about-vision-lead {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  text-align: center;
}

.about-vision-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.about-vision-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.about-vision-list li i {
  flex: 0 0 auto;
  margin-block-start: 0.3em;
  color: var(--color-brand);
  font-size: var(--fs-xs);
}

/* ── ورودی قهرمان ──────────────────────────────────────────────────────── */
/* ورود ملایم و پلکانیِ سه عنصرِ قهرمان تا صفحه با حسِ ساختاریافته باز شود؛ مدتِ کوتاه و بدون جهش */
.about-hero .qa-hero__kicker {
  animation: about-fade-up 0.55s var(--ease-out) both;
  animation-delay: 0.05s;
}

.about-hero .qa-hero__title {
  animation: about-fade-up 0.55s var(--ease-out) both;
  animation-delay: 0.14s;
}

.about-hero .qa-hero__lead {
  animation: about-fade-up 0.55s var(--ease-out) both;
  animation-delay: 0.23s;
}

@keyframes about-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-hero .qa-hero__kicker,
  .about-hero .qa-hero__title,
  .about-hero .qa-hero__lead {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .about-pillar {
    transition: none;
  }

  .about-pillar:hover,
  .about-pillar:focus-within {
    transform: none;
  }
}