/* =========================================================================
   ab-base — پایهٔ مشترک سری «درباره ما» (ab-*)
   طرح مرجع: Zaban-Negar-About.dc.html

   این فایل عمداً کوچک است: پالت، سه تم، بافت کاغذی، کانتینر و انیمیشن
   شناور همگی از zn-base.css می‌آیند که مقادیرش بایت‌به‌بایت با طرح یکی است.
   اینجا فقط چیزهایی نوشته می‌شود که در zn-base نیست.

   وابسته به: zn-base.css ، zn-effects.css   ·   تعامل: zn-effects.js
   ========================================================================= */

/* بج چرخانِ هیرو — تنها انیمیشنی که در zn-base نبود. */
@keyframes ab-badgepop {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .zn-scope [class*="ab"] [style*="ab-badgepop"],
  .zn-scope .ab-badge { animation: none !important; }
}

/* =========================================================================
   پوستهٔ سکشن
   ========================================================================= */

.zn-scope .ab-sec {
  position: relative;
  padding-block: var(--ab-py, clamp(46px, 6vw, 84px));
  scroll-margin-top: 96px;
}

/* دو پس‌زمینهٔ متناوب طرح: bg0 با هالهٔ رنگی، و bg1 با خط بالا و پایین. */
.zn-scope .ab-sec.is-wash {
  overflow: hidden;
  background:
    radial-gradient(var(--ab-wash-size, 820px 480px) at var(--ab-wash-pos, 88% -8%), var(--ab-wash, var(--zn-wash1)), transparent 60%),
    var(--zn-bg0);
}
.zn-scope .ab-sec.is-plain {
  background: var(--zn-bg1);
  border-block: 1px solid rgba(var(--zn-line), .08);
}

.zn-scope .ab-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--ab-mw, 1200px);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* =========================================================================
   متن محو پس‌زمینه (توخالی) — zn-effects.js با [data-ghost] پارالاکسش می‌کند
   ========================================================================= */

.zn-scope .ab-ghost {
  position: absolute;
  top: var(--ab-ghost-top, 8px);
  left: var(--ab-ghost-left, 2%);
  font-size: var(--ab-ghost-fs, 150px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: var(--ab-ghost-stroke, 1.5px) var(--zn-ghost);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* =========================================================================
   سرتیتر بخش: چیپ + عنوان + توضیح
   ========================================================================= */

.zn-scope .ab-head { max-width: var(--ab-head-w, 58ch); margin-bottom: var(--ab-head-mb, 32px); }
.zn-scope .ab-head.is-center { margin-inline: auto; text-align: center; }

.zn-scope .ab-chip {
  display: inline-block;
  border-radius: 999px;
  padding: var(--ab-chip-p, 6px 15px);
  font-size: var(--ab-chip-fs, 12px);
  font-weight: 800;
  background: var(--ab-chip-bg, rgba(225, 29, 72, .1));
  border: 1px solid var(--ab-chip-bd, rgba(225, 29, 72, .28));
  color: var(--ab-chip-c, var(--zn-soft));
}
/* گونهٔ طلایی — در بخش‌های «در یک نگاه»، «فرمت» و «مزیت‌ها» به کار رفته. */
.zn-scope .ab-chip.is-gold {
  background: var(--ab-chip-bg, rgba(217, 149, 0, .12));
  border-color: var(--ab-chip-bd, rgba(217, 149, 0, .3));
  color: var(--ab-chip-c, var(--zn-goldsoft));
}

.zn-scope .ab-h2 {
  margin: var(--ab-h2-mt, 14px) 0 0;
  font-size: var(--ab-h2-fs, clamp(24px, 3.2vw, 38px));
  font-weight: 900;
  line-height: 1.35;
  color: var(--ab-h2-c, var(--zn-t1));
}
.zn-scope .ab-lead {
  margin: var(--ab-lead-mt, 10px) 0 0;
  font-size: var(--ab-lead-fs, 14.5px);
  line-height: var(--ab-lead-lh, 2.05);
  color: var(--ab-lead-c, var(--zn-t4));
}
.zn-scope .ab-lead p { margin: 0 0 10px; color: inherit; font: inherit; }
.zn-scope .ab-lead p:last-child { margin-bottom: 0; }

/* =========================================================================
   کارت پایه
   ========================================================================= */

.zn-scope .ab-card {
  background: var(--ab-card-bg, var(--zn-card));
  border: 1px solid var(--ab-card-bd, rgba(var(--zn-line), .14));
  border-radius: var(--ab-card-r, 16px);
  box-shadow: var(--ab-card-sh, var(--zn-cardsh));
}
.zn-scope .ab-card.is-lift {
  transition: transform .2s ease, box-shadow .2s ease;
}
.zn-scope .ab-card.is-lift:hover {
  transform: translateY(var(--ab-card-lift, -4px));
  box-shadow: var(--ab-card-sh-h, 0 24px 50px rgba(120, 55, 30, .2));
}

/* =========================================================================
   دکمه‌ها
   ========================================================================= */

.zn-scope a.ab-btn {
  display: inline-block;
  font-weight: 800;
  cursor: pointer;
  padding: var(--ab-btn-p, 14px 26px);
  border-radius: var(--ab-btn-r, 14px);
  font-size: var(--ab-btn-fs, 14px);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease;
}
.zn-scope a.ab-btn:hover { transform: translateY(-2px); }

.zn-scope a.ab-btn.is-pri {
  background: var(--ab-pri-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--ab-pri-c, #FFF);
  box-shadow: var(--ab-pri-sh, 0 14px 32px rgba(225, 29, 72, .32));
}
.zn-scope a.ab-btn.is-pri:hover { color: var(--ab-pri-c, #FFF); }

.zn-scope a.ab-btn.is-ghost {
  background: var(--ab-gh-bg, var(--zn-card));
  border: 1px solid var(--ab-gh-bd, rgba(var(--zn-line), .2));
  color: var(--ab-gh-c, var(--zn-t1));
  box-shadow: var(--zn-cardsh);
}
.zn-scope a.ab-btn.is-ghost:hover { color: var(--ab-gh-c, var(--zn-t1)); }

/* =========================================================================
   شبکهٔ عمومی — ستون‌ها از کنترل واکنش‌گرای المنتور می‌آیند
   ========================================================================= */

.zn-scope .ab-grid {
  display: grid;
  grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
  gap: var(--ab-gap, 16px);
}
.zn-scope .ab-two {
  display: grid;
  grid-template-columns: var(--ab-two-cols, 1fr 1fr);
  gap: var(--ab-two-gap, 36px);
  align-items: center;
}

/* =========================================================================
   جای‌گیر تصویر — روی .zn-img-ph تم سوار می‌شود
   ========================================================================= */

.zn-scope .ab-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--ab-frame-r, 24px);
  background: var(--zn-img);
  border: 1px solid rgba(var(--zn-line), .14);
  box-shadow: var(--ab-frame-sh, var(--zn-cardsh));
}
.zn-scope .ab-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zn-scope .ab-frame > .zn-img-ph { position: absolute; inset: 0; }