/* =========================================================================
   on-teachers — «اساتید و منابع آموزشی» · طرح 10-teachers.html
   ستون چپ: فیلترهای انتخاب مدرس + باکس خط‌چین ‖ ستون راست: چیپ منابع + پنل گوته.
   وابسته به: de-base.css
   ========================================================================= */

.ontc { position: relative; overflow: hidden; background: var(--ontc-bg, var(--zn-bg0)); border-bottom: 2px solid rgba(var(--zn-line), .14); }
.ontc-ghost { top: 30px; left: -16px; font-size: var(--ontc-ghost-fs, 150px); --ghost-stroke: 1.5px; }
.ontc-wrap { position: relative; z-index: 1; max-width: var(--ontc-mw, 1180px); margin: 0 auto; }

/* چیپ این بخش طلایی است */
.ontc-chip {
  background: var(--ontc-chip-bg, rgba(245, 179, 1, .14));
  border-color: var(--ontc-chip-bd, rgba(245, 179, 1, .45));
  color: var(--ontc-chip-fg, var(--zn-gold-soft));
}
.ontc-chip .dot { background: var(--zn-gold); box-shadow: 0 0 15px var(--zn-gold); }

.ontc-h2 {
  margin: 16px 0 10px; font-size: var(--ontc-h-fs, 34px); font-weight: 900; line-height: 1.55;
  background: linear-gradient(110deg, var(--ontc-h1, var(--zn-t1)) 35%, var(--ontc-h2c, #B87600));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ontc-lead { margin: 0 0 36px; font-size: 14.5px; line-height: 2.1; color: var(--zn-t5); max-width: var(--ontc-lead-w, 620px); font-weight: 500; text-wrap: pretty; }
.ontc-lead p { margin: 0 0 12px; color: inherit; font: inherit; }
.ontc-lead p:last-child { margin-bottom: 0; }

.ontc-split { display: grid; grid-template-columns: var(--ontc-cols, 1.02fr 1fr); gap: var(--ontc-gap, 40px); align-items: start; }

/* ---------- فیلترهای مدرس ---------- */
.ontc-filters { display: flex; flex-direction: column; gap: var(--ontc-f-gap, 14px); }
.ontc-filter {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--ontc-f-bg, rgba(255, 255, 255, .44));
  border: 1px solid var(--ontc-f-bd, rgba(var(--zn-line), .16));
  border-right: var(--ontc-f-ew, 4px) solid var(--f-accent, var(--zn-crim));
  border-radius: var(--ontc-f-r, 16px);
  padding: var(--ontc-f-p, 20px 22px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ontc-filter:hover { transform: translateX(-3px); box-shadow: var(--de-cardsh-hover); }
.ontc-fnum { direction: ltr; font-size: var(--ontc-fn-fs, 20px); font-weight: 900; color: var(--f-accent, var(--zn-crim)); line-height: 1; flex-shrink: 0; }
.ontc-ft { font-size: var(--ontc-ft-fs, 15.5px); font-weight: 900; color: var(--zn-t1); margin: 0; line-height: 1.7; }
.ontc-fx { font-size: var(--ontc-fx-fs, 12.5px); color: var(--zn-t5); line-height: 1.95; font-weight: 500; margin-top: 5px; }

.ontc-dash {
  background: var(--ontc-dash-bg, rgba(255, 255, 255, .44));
  border: 2px dashed var(--ontc-dash-bd, rgba(var(--zn-line), .3));
  border-radius: var(--ontc-f-r, 16px);
  padding: var(--ontc-f-p, 20px 22px);
}
.ontc-dtitle { font-size: 13.5px; font-weight: 900; color: var(--zn-t1); margin-bottom: 8px; }
.ontc-dtext { font-size: 12.5px; color: var(--zn-t5); line-height: 2; font-weight: 500; }
.ontc-dtext p { margin: 0 0 10px; color: inherit; font: inherit; }
.ontc-dtext p:last-child { margin-bottom: 0; }

/* ---------- چیپ منابع ---------- */
.ontc-rlabel { font-size: 13px; font-weight: 900; color: var(--zn-t6); letter-spacing: 1px; margin-bottom: 16px; }
.ontc-chips { display: flex; flex-wrap: wrap; gap: var(--ontc-chip-gap, 11px); }
.ontc-res {
  direction: ltr; display: inline-flex; align-items: center; gap: 9px;
  background: var(--r-bg, rgba(255, 59, 92, .1));
  border: 1px solid var(--r-bd, rgba(255, 59, 92, .32));
  color: var(--r-fg, var(--zn-accent-soft));
  border-radius: var(--ontc-res-r, 14px);
  padding: var(--ontc-res-p, 12px 18px);
  font-size: var(--ontc-res-fs, 13.5px); font-weight: 800;
  transition: transform .18s ease;
}
.ontc-res:hover { transform: translateY(-2px); }
.ontc-res.is-rtl { direction: rtl; }
.ontc-res .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--r-dot, var(--zn-rose)); box-shadow: 0 0 8px var(--r-dot, var(--zn-rose)); }

/* ---------- پنل گوته ---------- */
.ontc-goethe {
  margin-top: 24px;
  background: var(--ontc-g-bg, linear-gradient(160deg, rgba(245, 179, 1, .12), rgba(255, 252, 246, .6)));
  border: 2px solid var(--ontc-g-bd, rgba(245, 179, 1, .42));
  border-radius: var(--ontc-g-r, 20px);
  padding: var(--ontc-g-p, 24px 26px);
}
.ontc-gchip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ontc-gc-bg, rgba(245, 179, 1, .2));
  border: 1px solid var(--ontc-gc-bd, rgba(245, 179, 1, .5));
  color: var(--ontc-gc-fg, var(--zn-gold-soft));
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 900;
}
.ontc-gtitle { font-size: var(--ontc-gt-fs, 18px); font-weight: 900; color: var(--zn-t1); margin: 14px 0 8px; line-height: 1.6; }
.ontc-gtext { font-size: 13px; color: var(--zn-t5); line-height: 2.05; font-weight: 500; margin-bottom: 16px; }
.ontc-gtext p { margin: 0 0 10px; color: inherit; font: inherit; }
.ontc-gtext p:last-child { margin-bottom: 0; }
.ontc-glist { display: flex; flex-direction: column; gap: 9px; }
.ontc-gitem { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--zn-t3); font-weight: 600; line-height: 1.9; }
.ontc-gtick {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  background: var(--ontc-gtick-bg, linear-gradient(135deg, var(--zn-gold), var(--zn-gold2)));
  color: var(--ontc-gtick-fg, #1A1204);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 900;
}

@media (max-width: 980px) { .ontc-split { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) {
  .ontc-filter { padding: 16px 18px; gap: 12px; }
  .ontc-goethe { padding: 20px; }
}