/* =========================================================================
   ab-teachers — «مدرسان زبان نگار» · بلوک ۷
   دو ستونه: متن در یک سو، عکس قاب‌دار در سوی دیگر.
   وابسته به: zn-base.css ، ab-base.css
   ========================================================================= */

.zn-scope .abtc-two {
  display: grid;
  grid-template-columns: var(--abtc-cols, 1fr 1fr);
  gap: var(--abtc-gap, 36px);
  align-items: center;
}
/* جای عکس و متن را عوض می‌کند بدون دست‌زدن به ترتیب HTML،
   تا ترتیب خواندن برای صفحه‌خوان همیشه «متن، سپس عکس» بماند. */
.zn-scope .abtc-two.is-flip .abtc-txt { order: 2; }
.zn-scope .abtc-two.is-flip .abtc-media { order: 1; }

.zn-scope .abtc-txt { min-width: 0; }

.zn-scope .abtc-body {
  margin: 0;
  font-size: var(--abtc-body-fs, 14.5px);
  line-height: var(--abtc-body-lh, 2.1);
  color: var(--abtc-body-c, var(--zn-t4));
}
.zn-scope .abtc-body p { margin: 0 0 14px; color: inherit; font: inherit; }
.zn-scope .abtc-body p:last-child { margin-bottom: 0; }

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

/* سرتیتر این بخش داخل ستون متن است، پس عرضش را خودش می‌گیرد. */
.zn-scope .abtc .ab-head { max-width: none; margin-bottom: var(--abtc-head-mb, 0); }
.zn-scope .abtc .ab-h2 { margin-bottom: 12px; }

@media (max-width: 900px) {
  .zn-scope .abtc-two { grid-template-columns: 1fr; }
  .zn-scope .abtc-two.is-flip .abtc-txt,
  .zn-scope .abtc-two.is-flip .abtc-media { order: 0; }
}