/* ============================================================================
 *  CT Tutor — الخطوة 2: صفحة الدورة المفردة
 *  الوجهة: wp-content/themes/blocksy-child/assets/css/ct-tutor-02-single.css
 *
 *  يُحمَّل تلقائياً بعد الملف 01 بحكم الترقيم. لا حاجة لتعديل functions.php.
 *  نطاق هذا الملف: صفحة الدورة وحدها. لا يلمس أي حاوية ولا شبكة.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 *  1 · إصلاح الفراغ في أعلى الصفحة
 *  السبب: قالب Blocksy يلفّ ترويسة Tutor بـ hero-section ويضيف حشواً رأسياً.
 * ------------------------------------------------------------------------- */
.tutor-course-details-page .hero-section {
  padding-block: 0 !important;
  margin-block: 0 !important;
  background: transparent !important;
}

.tutor-course-details-page .tutor-course-details-header {
  padding-block-start: 28px;
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 *  2 · التقييم أعلى العنوان
 * ------------------------------------------------------------------------- */
.tutor-course-details-ratings .tutor-ratings-stars [class*="tutor-icon-star"] {
  color: var(--ct-gold, #e0a72b);
  font-size: 16px;
}

.tutor-course-details-ratings .tutor-ratings-average {
  font-weight: 600;
  color: var(--ct-ink-2, #344054);
}

.tutor-course-details-ratings .tutor-ratings-count {
  color: var(--ct-ink-3, #667085);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
 *  3 · العنوان
 *  عرض محدود بنحو 22 محرفاً في السطر — المدى الذي يُقرأ دفعة واحدة.
 * ------------------------------------------------------------------------- */
.tutor-course-details-title {
  font-size: clamp(28px, 4.2vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: -.015em;
  color: var(--ct-ink, #101828) !important;
  max-width: 22ch;
  margin-block: 10px 0 !important;
}

/* ---------------------------------------------------------------------------
 *  4 · سطر المدرب والتصنيفات
 * ------------------------------------------------------------------------- */
.tutor-course-details-info {
  font-size: 15px;
  color: var(--ct-ink-3, #667085);
  line-height: 1.8;
  gap: 12px;
}

.tutor-course-details-info a {
  color: var(--ct-ink-2, #344054);
  text-decoration: none;
  font-weight: 500;
}

.tutor-course-details-info a:hover {
  color: var(--ct-accent, #0e6e5e);
  text-decoration: underline;
}

.tutor-course-details-info .tutor-avatar {
  width: 44px;
  height: 44px;
}

.tutor-course-details-info .tutor-avatar img {
  border-radius: 50%;
  border: 2px solid var(--ct-line, #e4e7ec);
  object-fit: cover;
}

/* فاصل تحت شريط المعلومات يفصل الترويسة عمّا بعدها */
.tutor-course-details-top {
  padding-block-end: 22px;
  border-block-end: 1px solid var(--ct-line, #e4e7ec);
}

/* ---------------------------------------------------------------------------
 *  5 · أزرار المفضلة والمشاركة
 * ------------------------------------------------------------------------- */
.tutor-course-details-actions .tutor-btn-ghost {
  font-size: 14px;
  font-weight: 500;
  color: var(--ct-ink-3, #667085);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all .2s;
}

.tutor-course-details-actions .tutor-btn-ghost:hover {
  color: var(--ct-accent, #0e6e5e);
  background: var(--ct-accent-50, #eef7f4);
  border-color: #cfe5df;
}

/* ---------------------------------------------------------------------------
 *  6 · تبويبات الصفحة
 * ------------------------------------------------------------------------- */
.tutor-course-details-page .tutor-nav {
  border-block-end: 2px solid var(--ct-line, #e4e7ec);
  gap: 28px;
  margin-block-start: 28px;
}

.tutor-course-details-page .tutor-nav-link {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ct-ink-3, #667085) !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-block-end: 2px solid transparent !important;
  margin-block-end: -2px !important;
  background: none !important;
  transition: color .2s, border-color .2s;
}

.tutor-course-details-page .tutor-nav-link:hover {
  color: var(--ct-ink, #101828) !important;
}

.tutor-course-details-page .tutor-nav-link.is-active {
  color: var(--ct-accent, #0e6e5e) !important;
  font-weight: 600 !important;
  border-block-end-color: var(--ct-accent, #0e6e5e) !important;
}

/* ---------------------------------------------------------------------------
 *  7 · متن وصف الدورة — أهم قسم طباعي في الصفحة
 * ------------------------------------------------------------------------- */
.tutor-course-details-content {
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ct-ink-2, #344054);
}

.tutor-course-details-content p {
  max-width: 68ch;
  margin-block: 0 16px;
  line-height: 1.95;
}

.tutor-course-details-content h2,
.tutor-course-details-content h3,
.tutor-course-details-content h4 {
  line-height: 1.45;
  margin-block: 32px 14px;
  max-width: 34ch;
}

.tutor-course-details-content h2 { font-size: 26px; font-weight: 700; }
.tutor-course-details-content h3 { font-size: 21px; font-weight: 700; }
.tutor-course-details-content h4 { font-size: 18px; font-weight: 600; }

.tutor-course-details-content > h2:first-child,
.tutor-course-details-content > h3:first-child { margin-block-start: 0; }

.tutor-course-details-content strong { font-weight: 600; }

.tutor-course-details-content hr {
  border: 0;
  border-block-start: 1px solid var(--ct-line, #e4e7ec);
  margin-block: 28px;
  max-width: 68ch;
}

.tutor-course-details-content ul,
.tutor-course-details-content ol {
  max-width: 68ch;
  padding-inline-start: 22px;
  margin-block: 0 16px;
}

.tutor-course-details-content li { margin-block-end: 8px; line-height: 1.9; }

.tutor-course-details-content a {
  color: var(--ct-accent, #0e6e5e);
  text-underline-offset: 3px;
}

/* تدرّج لوني أسفل المحتوى المطوي بدل القطع الحاد */
.tutor-toggle-more-collapsed { position: relative; }

.tutor-toggle-more-collapsed::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 *  8 · زر إظهار المزيد
 * ------------------------------------------------------------------------- */
.tutor-btn-show-more {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ct-accent, #0e6e5e) !important;
  border: 1px solid var(--ct-line, #e4e7ec) !important;
  border-radius: 8px !important;
  padding: 11px 22px !important;
  background: #fff !important;
  transition: all .2s;
}

.tutor-btn-show-more:hover {
  background: var(--ct-accent-50, #eef7f4) !important;
  border-color: #cfe5df !important;
}

/* ---------------------------------------------------------------------------
 *  9 · صناديق «ماذا سوف تتعلم؟» ونظائرها
 * ------------------------------------------------------------------------- */
.tutor-course-details-widget {
  background: #fafbfc;
  border: 1px solid var(--ct-line, #e4e7ec);
  border-radius: 14px;
  padding: 26px 28px;
}

.tutor-course-details-widget-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--ct-ink, #101828) !important;
  margin-block: 0 18px !important;
}

.tutor-course-details-widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* عمودان على الشاشات الواسعة، وعمود واحد على الجوال */
.tutor-course-details-widget-col-2 .tutor-course-details-widget-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 32px;
}

@media (max-width: 767px) {
  .tutor-course-details-widget-col-2 .tutor-course-details-widget-list {
    grid-template-columns: 1fr;
  }
  .tutor-course-details-widget { padding: 20px; }
}

.tutor-course-details-widget-list li {
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  color: var(--ct-ink-2, #344054) !important;
  align-items: flex-start;
  margin-block-end: 10px !important;
}

/* استبدال النقطة الرمادية بعلامة صح خضراء */
.tutor-course-details-widget-list .tutor-icon-bullet-point {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-block-start: 5px !important;
  border-radius: 50%;
  background: var(--ct-accent-50, #eef7f4);
}

.tutor-course-details-widget-list .tutor-icon-bullet-point::before {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-accent, #0e6e5e);
}

/* ---------------------------------------------------------------------------
 *  10 · بطاقة الشراء الجانبية
 * ------------------------------------------------------------------------- */
.tutor-course-details-page [class*="course-sidebar"],
.tutor-course-details-page .tutor-course-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

.tutor-course-details-page [class*="course-sidebar"] .tutor-card {
  border: 1px solid var(--ct-line, #e4e7ec);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(16,24,40,.06);
  overflow: hidden;
}

@media (max-width: 991px) {
  .tutor-course-details-page [class*="course-sidebar"] { position: static; }
}

/* ---------------------------------------------------------------------------
 *  11 · نافذة المشاركة
 * ------------------------------------------------------------------------- */
.tutor-social-share-wrap .tutor_share {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 0;
  margin-inline-end: 8px;
  transition: transform .2s, opacity .2s;
}

.tutor-social-share-wrap .tutor_share:hover {
  transform: translateY(-2px);
  opacity: .9;
}

/* ---------------------------------------------------------------------------
 *  12 · الأرقام اللاتينية داخل النص العربي
 * ------------------------------------------------------------------------- */
.tutor-course-details-page .tutor-ratings-average,
.tutor-course-details-page .tutor-meta-value,
.tutor-course-details-page .tutor-course-price { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 *  13 · تقليل الحركة لمن يفضّلها
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tutor-course-details-actions .tutor-btn-ghost,
  .tutor-btn-show-more,
  .tutor-social-share-wrap .tutor_share { transition: none; }
  .tutor-social-share-wrap .tutor_share:hover { transform: none; }
}