/* صفحهٔ «درباره ما» */

.ab-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 28px 56px;
}

.ab-wrap .rule {
  display: block;
  width: 58px;
  height: 3px;
  border-radius: 2px;
  background: var(--ac);
}
.ab-wrap .rule.mid { margin: 0 auto 30px; }

/* ---------- سربرگ ---------- */
.ab-hero {
  position: relative;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: center;
}
.ab-hero .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-hero .grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    rgba(11, 12, 14, .96) 24%,
    rgba(11, 12, 14, .74) 48%,
    rgba(11, 12, 14, .10) 100%);
  pointer-events: none;
}
.ab-hero:not(.has-bg) .grad { background: linear-gradient(to left, rgba(11, 12, 14, .9), rgba(11, 12, 14, .45)); }

.ab-hero-body {
  position: relative;
  width: 52%;
  min-width: 320px;
  padding: 40px 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.ab-hero-body h1 {
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.25;
  color: #F6F7F8;
  text-wrap: balance;
}
.ab-hero-body h2 {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 700;
  color: #F0F1F3;
}
.ab-hero-body p {
  margin: 0;
  max-width: 460px;
  font-size: 15px;
  line-height: 2.1;
  color: #C4C9CF;
}

/* ---------- بخش‌های صفحه‌ساز ---------- */
.ab-blocks { margin-top: 46px; }

/* ---------- نوار پایانی ---------- */
.ab-banner {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
  padding: 38px 26px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ab-banner .dots {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  background-image: radial-gradient(var(--line-2) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  opacity: .8;
  pointer-events: none;
}
.ab-banner .dots.right { right: 0; }
.ab-banner .dots.left { left: 0; }
.ab-banner .swoosh { position: relative; color: var(--ac); }
.ab-banner h2 {
  position: relative;
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  color: var(--tx);
  text-wrap: balance;
}

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1000px) {
  .ab-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ab-wrap { padding: 18px 18px 44px; }

  .ab-hero { min-height: 300px; }
  .ab-hero-body { width: 100%; padding: 28px 24px; }
  .ab-hero-body h1 { font-size: 30px; }
  .ab-hero-body h2 { font-size: 17px; }
  .ab-hero .grad { background: linear-gradient(to top, rgba(11, 12, 14, .97) 20%, rgba(11, 12, 14, .55) 70%, rgba(11, 12, 14, .25) 100%); }

  .ab-story { flex-direction: column; gap: 22px; padding: 22px; }
  .ab-story-img { flex: none; max-width: 100%; width: 100%; }

  .ab-cards.cols-3 { grid-template-columns: 1fr; }
  .ab-sec { margin-top: 40px; }
  .ab-sec-t { font-size: 22px; }
  .ab-banner h2 { font-size: 19px; }
}

@media (max-width: 520px) {
  .ab-cards.cols-4 { grid-template-columns: 1fr; }
}


/* ---------- سربرگ بدون تصویر ----------
 * لایهٔ تیره فقط وقتی لازم است که تصویری پشت متن باشد. بدون تصویر،
 * در حالت روز یک مستطیل سیاه می‌شد؛ این‌جا با رنگ‌های خود قالب پر می‌شود.
 */
.ab-hero:not(.has-bg) {
  background: linear-gradient(135deg, var(--card-h), var(--card));
  border: 1px solid var(--line);
}
.ab-hero:not(.has-bg) .grad { display: none; }
.ab-hero:not(.has-bg) .ab-hero-body h1 { color: var(--tx); }
.ab-hero:not(.has-bg) .ab-hero-body h2 { color: var(--tx); }
.ab-hero:not(.has-bg) .ab-hero-body p { color: var(--tx-2); }

/* ---------- سربرگ در حالت روز ----------
 * لایهٔ تیره برای متن سفید روی عکس ساخته شده بود؛ در حالت روز همان لایه
 * یک بلوک سیاه می‌شد. این‌جا لایه سفید و متن تیره می‌شود.
 */
:root[data-theme="light"] .ab-hero .grad {
  background: linear-gradient(to left,
    rgba(255, 255, 255, .97) 26%,
    rgba(255, 255, 255, .80) 50%,
    rgba(255, 255, 255, .10) 100%);
}
:root[data-theme="light"] .ab-hero-body h1,
:root[data-theme="light"] .ab-hero-body h2 { color: var(--tx); }
:root[data-theme="light"] .ab-hero-body p { color: var(--tx-2); }

@media (max-width: 860px) {
  :root[data-theme="light"] .ab-hero .grad {
    background: linear-gradient(to top,
      rgba(255, 255, 255, .97) 22%,
      rgba(255, 255, 255, .78) 62%,
      rgba(255, 255, 255, .25) 100%);
  }
}