/* =========================================================================
   on-path — «از تعیین سطح تا مدرک» · طرح 03-path.html
   کارت‌های گام‌به‌گام با آیکن، شمارهٔ STEP، متن و پیل پایانی.
   وابسته به: de-base.css
   ========================================================================= */

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

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

.onpt-grid { display: grid; grid-template-columns: repeat(var(--onpt-cols, 5), minmax(0, 1fr)); gap: var(--onpt-gap, 14px); align-items: stretch; }

.onpt-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card-bg, var(--onpt-card-bg, rgba(255, 255, 255, .44)));
  border: var(--onpt-card-bw, 2px) solid var(--card-bd, var(--onpt-card-bd, rgba(var(--zn-line), .2)));
  border-radius: var(--onpt-card-r, 20px);
  padding: var(--onpt-card-p, 24px 20px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.onpt-card:hover { transform: translateY(-4px); box-shadow: var(--de-cardsh-hover); }

.onpt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.onpt-ic {
  width: var(--onpt-ic-s, 40px); height: var(--onpt-ic-s, 40px); flex-shrink: 0;
  border-radius: var(--onpt-ic-r, 13px);
  background: var(--ic-bg, linear-gradient(135deg, var(--zn-rose), var(--zn-crim)));
  color: var(--ic-fg, #FFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900;
  box-shadow: 0 0 22px rgba(255, 59, 92, .24);
}
.onpt-ic i, .onpt-ic svg { font-size: 17px; width: 17px; height: 17px; fill: currentColor; }
.onpt-step { direction: ltr; font-size: 11px; font-weight: 900; color: var(--onpt-step-c, var(--zn-t6)); letter-spacing: 1px; white-space: nowrap; }

.onpt-title { font-size: var(--onpt-t-fs, 15.5px); font-weight: 900; color: var(--zn-t1); margin: 0 0 7px; line-height: 1.7; }
.onpt-text { font-size: var(--onpt-x-fs, 12.5px); color: var(--zn-t5); line-height: 1.95; font-weight: 500; flex: 1; }
.onpt-text p { margin: 0 0 8px; color: inherit; font: inherit; }
.onpt-text p:last-child { margin-bottom: 0; }

.onpt-pill {
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 5px 11px;
  margin-top: 14px; align-self: flex-start;
  color: var(--pill-fg, var(--zn-accent-soft));
  background: var(--pill-bg, rgba(255, 59, 92, .1));
}

@media (max-width: 1100px) { .onpt-grid { grid-template-columns: repeat(var(--onpt-cols-t, 3), minmax(0, 1fr)); } }
@media (max-width: 700px) { .onpt-grid { grid-template-columns: repeat(var(--onpt-cols-m, 1), minmax(0, 1fr)); } }