/* components/course-card.css — کارت دوره، تنها کارت دوره‌ی سایت عمومی
   (قالب: templates/_partials/_course_card.html).

   خواسته‌ی کارفرما (دور L): تصویر دوره بخش اصلی کارت است، نه نواری باریک
   بالای آن. قاب ۴:۳ است و اطلاعات کوتاه (عنوان، مدرس، شروع، قیمت و قسط)
   زیرش می‌آید. وضعیت روی خود تصویر می‌نشیند و پس‌زمینه‌ی روشن دارد تا روی
   هر عکسی خوانا بماند؛ حوزه و نوع برگزاری روی گرادیان تیره‌ی پایین تصویر.
   دوره‌ی برگزارشده همیشه خاکستری است (کلاس is-ended از سرویس)، نه با هاور. */

.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2vw,26px)}
.courses.grid{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:clamp(16px,2vw,24px)}

.course{--course-c:var(--brand-modir);position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--card-radius);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base)}
.course:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--teal-600) 40%,var(--line));
  box-shadow:0 30px 60px -30px rgba(11,18,38,.4)}

/* ── تصویر ─────────────────────────────────────────────────────────── */
.course .cover{aspect-ratio:4/3;border-radius:0;text-decoration:none}
.course .cover .ph{position:absolute;inset:0;margin:auto;inline-size:56px;block-size:56px;opacity:.75}

.cv-top{position:absolute;z-index:2;inset-block-start:12px;inset-inline:12px;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;pointer-events:none}
.cv-top .st-chip{background:rgba(255,255,255,.94);border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(5,7,15,.55);backdrop-filter:blur(6px)}
/* نام جدا از .badge فوتر تا قاعده‌ی سراسری آن روی کارت نریزد */
.cv-badge{margin-inline-start:auto;font-family:var(--font-display);font-size:11px;font-weight:800;
  color:#201700;background:var(--gold-400);padding:4px 10px;border-radius:var(--chip-radius);
  box-shadow:0 6px 18px -8px rgba(5,7,15,.55)}

/* «به‌زودی»: چیپ طلایی با برق آرامی که هر چند ثانیه از رویش می‌گذرد */
.soon-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:11.5px;font-weight:900;letter-spacing:.02em;color:#2a1d00;
  padding:5px 12px;border-radius:var(--chip-radius);
  background:linear-gradient(135deg,var(--gold-300),var(--gold-400) 55%,#e8a100);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 8px 22px -8px color-mix(in oklab,var(--gold-400) 85%,transparent)}
.soon-badge::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:#2a1d00;opacity:.75}
.soon-badge::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(160%);animation:scan 3.6s var(--ease-soft) infinite}

.cv-foot{position:absolute;z-index:1;inset-block-end:0;inset-inline:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:34px 14px 11px;
  font-size:11.5px;line-height:1.7;color:#fff;
  background:linear-gradient(to top,rgba(5,7,15,.86),rgba(5,7,15,.45) 58%,transparent)}
.cv-foot b{font-family:var(--font-display);font-weight:800;font-size:11px;
  padding:2px 9px;border-radius:var(--chip-radius);background:rgba(255,255,255,.18)}
.cv-foot i{font-style:normal;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cv-foot i+i::before{content:"";display:inline-block;vertical-align:middle;inline-size:3px;block-size:3px;
  margin-inline-end:8px;border-radius:50%;background:currentColor;opacity:.7}

/* ── متن ───────────────────────────────────────────────────────────── */
.course .body{display:flex;flex-direction:column;gap:8px;flex:1;padding:15px 17px 15px}
/* کارت داخل بخش‌های متنی (.dsec صفحه‌ی دوره و مدرس) فاصله و قد خط متن آن‌ها را نگیرد */
.course .body p{margin:0;max-inline-size:none;line-height:1.7}
.course h3{font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course h3 a{color:inherit;text-decoration:none}
.course h3 a:hover{color:var(--teal-600)}
.course h3 a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

.course .inst{display:flex;align-items:center;gap:8px;min-inline-size:0;font-size:12.5px;color:var(--fg-muted)}
.course .inst>span:not(.rate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course .inst i{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;
  font-style:normal;font-family:var(--font-display);font-weight:800;font-size:10.5px;color:#fff;
  background:color-mix(in oklab,var(--teal-600) 80%,var(--navy-900))}
.course .rate{flex:none;display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;
  font-family:var(--font-display);font-weight:800;font-size:12.5px;color:var(--fg)}
.course .rate svg{inline-size:14px;block-size:14px;color:var(--gold-400)}

.course .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--fg-muted)}
.course .meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.course .meta svg{inline-size:13px;block-size:13px;opacity:.7}

.course .foot{margin-block-start:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-block-start:12px;border-block-start:1px solid var(--line)}
.course .price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px}
.course .price b{font-family:var(--font-display);font-size:16.5px;font-weight:900;color:var(--fg)}
.course .price span{font-size:11px;color:var(--fg-muted)}
.course .price small{flex-basis:100%;font-size:11px;font-weight:700;color:var(--teal-600)}
.course .enroll{flex:none;font-family:var(--font-display);font-size:12.5px;font-weight:800;text-decoration:none;
  color:var(--gold-600);padding:8px 16px;border-radius:11px;border:1px solid color-mix(in oklab,var(--gold-400) 45%,transparent);
  transition:background var(--dur-fast),color var(--dur-fast)}
.course .enroll:hover{background:var(--gold-400);color:#201700}

/* دوره جامع: ته‌رنگ ملایم طلایی روی کل کارت، بدون خروج از قاعده‌ی کارت‌ها */
.course.is-camp{border-color:color-mix(in oklab,var(--gold-600) 34%,var(--line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--gold-600) 4%,var(--surface)),var(--surface))}
.course.is-camp:hover{border-color:color-mix(in oklab,var(--gold-600) 55%,var(--line))}

/* برگزار شده: خاکستری همیشگی تا از دور پیدا باشد که تمام شده است */
.course.is-ended .cover img,.course.is-ended .cover .ph{filter:grayscale(1) contrast(.94);opacity:.92}
.course.is-ended h3{color:color-mix(in oklab,var(--fg) 78%,transparent)}

/* برچسب «دوره جامع» اسلایدر پنج دوره‌ی برتر کاتالوگ */
.kind-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.01em;
  color:var(--gold-700,#8a6206);background:color-mix(in oklab,var(--gold-600) 16%,transparent);
  border:1px solid color-mix(in oklab,var(--gold-600) 38%,transparent);
  padding:4px 10px;border-radius:999px;margin-block-end:2px}
.kind-tag::before{content:"";inline-size:5px;block-size:5px;border-radius:50%;
  background:var(--gold-600)}

/* چیپ وضعیت — دو تا کنار هم: حال دوره، و باز بودن ثبت نام (T-304).
   رنگ از تن موتور می آید، نه از وضعیت خام؛ پنج تن بیشتر نداریم. */
.st-chips{display:flex;flex-wrap:wrap;gap:6px;margin-block:0 8px}
.st-chips--sm{margin-block:2px 6px}
.st-chip{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.01em;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in oklab,currentColor 32%,transparent);
  background:color-mix(in oklab,currentColor 11%,transparent)}
.st-chip::before{content:"";inline-size:5px;block-size:5px;border-radius:50%;background:currentColor}
.st-chip--open{color:var(--teal-700,#0e6b57)}
.st-chip--soon{color:var(--gold-700,#8a6206)}
.st-chip--blocked{color:#a8471f}
.st-chip--done{color:var(--navy-700,#2d3d63)}
.st-chip--muted{color:var(--navy-400,#8894b3)}

@media (prefers-reduced-motion: reduce){
.course,.course .cover img{transition:none}
.course:hover{transform:none}
.soon-badge::after{animation:none;display:none}
}