/* =========================================================================
   ab-placement — «تعیین سطح؛ نقطه شروع درست» · بلوک ۸
   دو ستونه: کارت گرادیانتی با متن محو و دکمه | متن و جعبهٔ نکته.
   وابسته به: zn-base.css ، ab-base.css
   ========================================================================= */

.zn-scope .abpl-two {
  display: grid;
  grid-template-columns: var(--abpl-cols, 1fr 1fr);
  gap: var(--abpl-gap, 36px);
  align-items: center;
}

/* ---------- کارت گرادیانتی ---------- */
.zn-scope .abpl-card {
  position: relative;
  overflow: hidden;
  padding: var(--abpl-card-p, clamp(26px, 3vw, 40px));
  border-radius: var(--abpl-card-r, 24px);
  color: var(--abpl-card-c, #FFF);
  background: var(--abpl-card-bg, linear-gradient(120deg, var(--zn-crim), var(--zn-rose) 60%, var(--zn-rose2)));
  box-shadow: var(--abpl-card-sh, 0 24px 54px rgba(225, 29, 72, .3));
  min-width: 0;
}

/* متن محو داخل کارت — جدا از متن محو سکشن. */
.zn-scope .abpl-cghost {
  position: absolute;
  left: var(--abpl-cghost-left, 14px);
  bottom: var(--abpl-cghost-bottom, -32px);
  direction: ltr;
  font-size: var(--abpl-cghost-fs, 110px);
  font-weight: 900;
  line-height: 1;
  opacity: var(--abpl-cghost-op, .14);
  pointer-events: none;
  user-select: none;
}

.zn-scope .abpl-ctitle {
  position: relative;
  margin: 0 0 10px;
  font-size: var(--abpl-ctitle-fs, clamp(20px, 2.4vw, 27px));
  font-weight: 900;
  line-height: 1.45;
  color: inherit;
}
.zn-scope .abpl-ctext {
  position: relative;
  margin: 0 0 22px;
  font-size: var(--abpl-ctext-fs, 14px);
  line-height: var(--abpl-ctext-lh, 2.05);
  color: var(--abpl-ctext-c, rgba(255, 255, 255, .9));
}
.zn-scope .abpl-ctext p { margin: 0 0 10px; color: inherit; font: inherit; }
.zn-scope .abpl-ctext p:last-child { margin-bottom: 0; }

.zn-scope a.abpl-btn {
  position: relative;
  display: inline-block;
  background: var(--abpl-btn-bg, #FFF);
  color: var(--abpl-btn-c, var(--zn-crim));
  font-size: var(--abpl-btn-fs, 13.5px);
  font-weight: 800;
  padding: var(--abpl-btn-p, 13px 24px);
  border-radius: var(--abpl-btn-r, 12px);
  box-shadow: var(--abpl-btn-sh, 0 10px 26px rgba(0, 0, 0, .18));
  transition: transform .18s ease, box-shadow .18s ease;
}
.zn-scope a.abpl-btn:hover { color: var(--abpl-btn-c, var(--zn-crim)); transform: translateY(-2px); }

/* ---------- ستون متن ---------- */
.zn-scope .abpl-txt { min-width: 0; }

.zn-scope .abpl-body {
  margin: 0 0 20px;
  font-size: var(--abpl-body-fs, 15px);
  line-height: var(--abpl-body-lh, 2.1);
  color: var(--abpl-body-c, var(--zn-t4));
}
.zn-scope .abpl-body p { margin: 0 0 14px; color: inherit; font: inherit; }
.zn-scope .abpl-body p:last-child { margin-bottom: 0; }
/* پاراگراف اول در طرح پررنگ‌تر است. */
.zn-scope .abpl-body p:first-child { color: var(--abpl-body-c1, var(--zn-t3)); }

.zn-scope .abpl-note {
  padding: var(--abpl-note-p, 18px 20px);
  border-radius: var(--abpl-note-r, 16px);
  background: var(--abpl-note-bg, var(--zn-card));
  border: 1px solid var(--abpl-note-bd, rgba(var(--zn-line), .14));
  box-shadow: var(--zn-cardsh);
  font-size: var(--abpl-note-fs, 13.5px);
  line-height: 2;
  color: var(--abpl-note-c, var(--zn-t3));
}
.zn-scope .abpl-note b { color: var(--abpl-note-b, var(--zn-soft)); }
.zn-scope .abpl-note p { margin: 0; color: inherit; font: inherit; }

@media (max-width: 900px) {
  .zn-scope .abpl-two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .zn-scope .abpl-cghost { font-size: var(--abpl-cghost-fs-m, 72px); }
}