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

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

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

.ongd-list { display: flex; flex-direction: column; gap: var(--ongd-gap, 12px); }

.ongd-row {
  display: grid; grid-template-columns: var(--ongd-cols, auto 1.05fr 1fr);
  gap: var(--ongd-col-gap, 24px); align-items: center;
  background: var(--ongd-row-bg, rgba(255, 255, 255, .44));
  border: 1px solid var(--ongd-row-bd, rgba(var(--zn-line), .16));
  border-right: var(--ongd-edge-w, 4px) solid var(--edge-c, var(--ongd-edge-c, var(--zn-crim)));
  border-radius: var(--ongd-row-r, 16px);
  padding: var(--ongd-row-p, 20px 24px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ongd-row:hover { transform: translateX(-3px); box-shadow: var(--de-cardsh-hover); }

.ongd-num { direction: ltr; font-size: var(--ongd-num-fs, 22px); font-weight: 900; color: var(--edge-c, var(--ongd-num-c, var(--zn-accent-head))); line-height: 1; flex-shrink: 0; }
.ongd-q { font-size: var(--ongd-q-fs, 15.5px); font-weight: 900; color: var(--zn-t1); margin: 0; line-height: 1.7; }
.ongd-hint { font-size: 12.5px; color: var(--zn-t6); line-height: 1.9; font-weight: 500; margin-top: 4px; }

.ongd-ans {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ongd-ans-bg, rgba(225, 29, 72, .06));
  border: 1px solid var(--ongd-ans-bd, rgba(225, 29, 72, .2));
  border-radius: var(--ongd-ans-r, 12px);
  padding: var(--ongd-ans-p, 13px 15px);
}
.ongd-tick {
  width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%;
  background: var(--ongd-tick-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--ongd-tick-fg, #FFF);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 900;
}
.ongd-tick i, .ongd-tick svg { font-size: 10px; width: 10px; height: 10px; fill: currentColor; }
.ongd-atext { font-size: var(--ongd-a-fs, 12.5px); color: var(--ongd-a-c, var(--zn-t3)); line-height: 1.95; font-weight: 600; }
.ongd-atext p { margin: 0 0 8px; color: inherit; font: inherit; }
.ongd-atext p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .ongd-row { grid-template-columns: auto 1fr; gap: 16px; }
  .ongd-ans { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ongd-row { padding: 16px 18px; }
}