/* ============================================================================
 *  CT Tutor — الخطوة 13: شريط ترويسة الدورة
 *  الوجهة: wp-content/themes/blocksy-child/assets/css/ct-tutor-13-coursehero.css
 *
 *  يعمل مع الصنف ct-course-hero المضاف في تجاوز القالب:
 *  blocksy-child/tutor/single-course.php
 *
 *  ⚠ نطاق محدود عمداً: .ct-course-hero وحدها لا الصفحة.
 *  الخطأ السابق كان استهداف tutor-full-width-course-top وهو يلف الصفحة كلها.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 *  1 · الشريط الملوّن
 *
 *  الخلفية تمتد عرض الشاشة كاملاً عبر عنصر زائف، بينما يبقى المحتوى
 *  داخل حدود الحاوية. فلا هوامش سالبة ولا تراكب يكسر التخطيط.
 * ------------------------------------------------------------------------- */
.ct-layout-v2 .ct-course-hero {
  --hero-1: #0e6e5e;
  --hero-2: #0a4f43;
  --hero-on: #ffffff;
  --hero-soft: rgba(255,255,255,.86);

  position: relative;
  padding-block: clamp(30px, 4vw, 52px);
  margin-block-end: 28px;
  color: var(--hero-on);
  isolation: isolate;
}

.ct-layout-v2 .ct-course-hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 100vw;
  transform: translateX(50%);
  background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%);
  z-index: -1;
}

[dir="ltr"] .ct-layout-v2 .ct-course-hero::before { transform: translateX(-50%); }

/* ---------------------------------------------------------------------------
 *  2 · نصوص الترويسة
 * ------------------------------------------------------------------------- */
.ct-layout-v2 .ct-course-hero :is(h1, h2, h3, .tutor-course-details-title) {
  color: var(--hero-on) !important;
}

.ct-layout-v2 .ct-course-hero :is(p, span, div, li, a) {
  color: var(--hero-soft);
}

.ct-layout-v2 .ct-course-hero a:hover {
  color: var(--hero-on);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ct-layout-v2 .ct-course-hero .tutor-course-details-title {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  letter-spacing: -.015em;
  max-width: 26ch;
  margin-block: 10px 0 !important;
}

/* ---------------------------------------------------------------------------
 *  3 · التقييم — نجوم ذهبية تظهر على الخلفية الداكنة
 * ------------------------------------------------------------------------- */
.ct-layout-v2 .ct-course-hero [class*="tutor-icon-star"] {
  color: #ffd166 !important;
}

.ct-layout-v2 .ct-course-hero :is(.tutor-ratings-average, .tutor-ratings-count) {
  color: var(--hero-on) !important;
}

/* ---------------------------------------------------------------------------
 *  4 · سطر المدرب والتصنيف — شارات شفافة
 * ------------------------------------------------------------------------- */
.ct-layout-v2 .ct-course-hero .tutor-course-details-top {
  border: 0 !important;
  padding-block-end: 0 !important;
  margin-block-start: 18px !important;
}

.ct-layout-v2 .ct-course-hero .tutor-course-details-info {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px !important;
  font-size: 14.5px !important;
  line-height: 1.7;
}

.ct-layout-v2 .ct-course-hero .tutor-course-details-info > *:not(.tutor-avatar) {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 7px 15px;
  backdrop-filter: blur(6px);
}

.ct-layout-v2 .ct-course-hero .tutor-avatar {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.ct-layout-v2 .ct-course-hero .tutor-avatar img {
  border: 2px solid rgba(255,255,255,.45) !important;
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
 *  5 · أزرار المفضلة والمشاركة
 * ------------------------------------------------------------------------- */
.ct-layout-v2 .ct-course-hero .tutor-btn-ghost {
  color: var(--hero-soft) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 9px !important;
  padding: 8px 15px !important;
}

.ct-layout-v2 .ct-course-hero .tutor-btn-ghost:hover {
  background: rgba(255,255,255,.14) !important;
  color: var(--hero-on) !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* ============================================================================
 *  6 · معالجة التكرارات
 *
 *  Tutor 4.0.8 يكرّر بعض العناصر في البطاقة الجانبية.
 *  الحل: إخفاء النسخة الثانية فقط، بلا مساس بالأولى.
 * ========================================================================= */

/* «تقدم الدورة» مكرر — يُخفى العنوان الثاني */
.tutor-single-course-sidebar .tutor-course-progress-wrapper
  .tutor-fs-6 + .tutor-fs-6,
.tutor-single-course-sidebar [class*="progress"] > [class*="title"] ~ [class*="title"] {
  display: none !important;
}

/* «آخر تحديث» مكرر — يُخفى السطر الثاني منه */
.tutor-course-details-page .tutor-card-footer .tutor-ul
  > li.ct-dup-hide { display: none !important; }

/* ---------------------------------------------------------------------------
 *  7 · الصورة في الشريط الجانبي
 * ------------------------------------------------------------------------- */
.ct-sidebar-thumb {
  margin: 0 0 18px !important;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  box-shadow: 0 4px 16px rgba(16,24,40,.08);
  aspect-ratio: 16 / 9;
  background: #f2f4f7;
}

.ct-sidebar-thumb :is(img, .tutor-ratio) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
}

.ct-sidebar-thumb .tutor-ratio { padding: 0 !important; }

/* إخفاء رابط المعاينة الفارغ */
.ct-sidebar-thumb a[href="javascript:;"]:empty { display: none !important; }

/* ---------------------------------------------------------------------------
 *  8 · الجوال
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ct-layout-v2 .ct-course-hero {
    padding-block: 24px 28px;
    margin-block-end: 20px;
  }
  .ct-layout-v2 .ct-course-hero .tutor-course-details-title {
    max-width: none;
    font-size: 1.6rem !important;
  }
  .ct-layout-v2 .ct-course-hero .tutor-course-details-info {
    font-size: 13.5px !important;
    gap: 8px !important;
  }
  .ct-layout-v2 .ct-course-hero .tutor-course-details-info > *:not(.tutor-avatar) {
    padding: 5px 12px;
  }
}