/* ============================================================================
 *  CT Tutor — الخطوة 12: تخطيط صفحة الدورة بنمط المنصات العالمية
 *  الوجهة: wp-content/themes/blocksy-child/assets/css/ct-tutor-12-hero.css
 *
 *  يعمل مع الملف المرافق: mu-plugins/ct-course-layout.php
 *  الذي ينقل صورة الدورة إلى أعلى بطاقة الشراء.
 *
 *  البنية الناتجة:
 *    ┌──────────────────────────────────────────┬─────────────┐
 *    │  العنوان · الشارات · الوصف الموجز        │   الصورة    │
 *    │  (شريط ملوّن يمتد عرض الصفحة)            │   السعر     │
 *    └──────────────────────────────────────────┤   المزايا   │
 *                                               │   الزر      │
 *                                               └─────────────┘
 *  البطاقة تتراكب على حافة الشريط الملوّن — وهذه التفصيلة
 *  هي ما يصنع الإحساس بالرقيّ لا الصورة نفسها.
 * ========================================================================== */

body.ct-course-layout {
  --h-brand:    #0e6e5e;
  --h-brand-2:  #0a574a;
  --h-on:       #ffffff;
  --h-on-soft:  rgba(255,255,255,.88);
  --h-line:     #e4e7ec;
  --h-ink:      #101828;
  --h-ink-2:    #344054;
  --h-ink-3:    #667085;
  --h-overlap:  120px;   /* مقدار تراكب البطاقة على الشريط */
}

/* ---------------------------------------------------------------------------
 *  1 · الشريط الملوّن
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-full-width-course-top {
  position: relative;
  background: linear-gradient(135deg, var(--h-brand) 0%, var(--h-brand-2) 100%);
  color: var(--h-on);
  padding-block: clamp(34px, 5vw, 60px) var(--h-overlap);
  margin-block-end: calc(var(--h-overlap) * -1);
}

/* العناصر النصية تنقلب إلى الأبيض */
body.ct-course-layout .tutor-full-width-course-top :is(h1, h2, h3, .tutor-course-details-title) {
  color: var(--h-on) !important;
}

body.ct-course-layout .tutor-full-width-course-top :is(p, span, div, li) {
  color: var(--h-on-soft);
}

body.ct-course-layout .tutor-full-width-course-top a {
  color: var(--h-on) !important;
}

body.ct-course-layout .tutor-full-width-course-top a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 *  2 · العنوان
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-course-details-title {
  font-size: clamp(1.75rem, 3.8vw, 2.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: -.015em;
  max-width: 24ch;
  margin-block: 8px 16px !important;
}

/* ---------------------------------------------------------------------------
 *  3 · شريط البيانات — شارات لا سطر نصي
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-course-details-top {
  border: 0 !important;
  padding-block-end: 0 !important;
  margin-block-start: 14px !important;
}

body.ct-course-layout .tutor-course-details-info {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px !important;
  font-size: 14px !important;
}

/* كل عنصر بيانات يصبح شارة شفافة */
body.ct-course-layout .tutor-course-details-info > * {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(6px);
  line-height: 1.6;
}

body.ct-course-layout .tutor-course-details-info .tutor-avatar {
  background: none;
  border: 0;
  padding: 0;
}

body.ct-course-layout .tutor-course-details-info .tutor-avatar img {
  border: 2px solid rgba(255,255,255,.5);
}

/* التقييم */
body.ct-course-layout .tutor-course-details-ratings [class*="tutor-icon-star"] {
  color: #ffd166 !important;
}

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

/* أزرار المفضلة والمشاركة */
body.ct-course-layout .tutor-course-details-actions .tutor-btn-ghost {
  color: var(--h-on-soft) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px;
}

body.ct-course-layout .tutor-course-details-actions .tutor-btn-ghost:hover {
  background: rgba(255,255,255,.14) !important;
  color: var(--h-on) !important;
}

/* ---------------------------------------------------------------------------
 *  4 · البطاقة الجانبية — تتراكب على الشريط
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-single-course-sidebar {
  position: relative;
  z-index: 3;
  margin-block-start: calc(var(--h-overlap) * -1) !important;
}

body.ct-course-layout .tutor-sidebar-card,
body.ct-course-layout .tutor-single-course-sidebar .tutor-card {
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(16,24,40,.16);
}

/* ---------------------------------------------------------------------------
 *  5 · الصورة داخل البطاقة
 * ------------------------------------------------------------------------- */
body.ct-course-layout .ct-card-thumb {
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f2f4f7;
  position: relative;
}

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

body.ct-course-layout .ct-card-thumb .tutor-ratio { padding: 0 !important; }

/* إخفاء زر تشغيل الفيديو المتراكب إن لم يكن ثمة فيديو */
body.ct-course-layout .ct-card-thumb a[href="javascript:;"]:empty { display: none !important; }

/* ---------------------------------------------------------------------------
 *  6 · محتوى البطاقة
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-course-sidebar-card-pricing {
  padding: 22px 24px 0 !important;
}

body.ct-course-layout .tutor-course-sidebar-card-pricing .tutor-fs-4 {
  font-size: 34px !important;
  font-weight: 700 !important;
  color: var(--h-ink) !important;
  letter-spacing: -.02em;
}

body.ct-course-layout [data-cy="tutor-buy-now"] {
  border-radius: 12px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 16px !important;
}

/* ---------------------------------------------------------------------------
 *  7 · العمود الرئيسي يبدأ بعد التراكب
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-course-details-page,
body.ct-course-layout .tutor-course-details-tab {
  position: relative;
  z-index: 2;
  padding-block-start: calc(var(--h-overlap) + 16px);
}

/* ---------------------------------------------------------------------------
 *  8 · تبويبات المحتوى
 * ------------------------------------------------------------------------- */
body.ct-course-layout .tutor-course-details-tab .tutor-nav {
  border-block-end: 1px solid var(--h-line) !important;
  margin-block-start: 0 !important;
}

/* ---------------------------------------------------------------------------
 *  9 · الجوال
 *  التراكب يُلغى — البطاقة تنزل تحت الشريط طبيعياً
 * ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  body.ct-course-layout {
    --h-overlap: 0px;
  }

  body.ct-course-layout .tutor-full-width-course-top {
    padding-block: 28px 34px;
    margin-block-end: 0;
  }

  body.ct-course-layout .tutor-single-course-sidebar {
    margin-block-start: 24px !important;
  }

  body.ct-course-layout .tutor-course-details-page,
  body.ct-course-layout .tutor-course-details-tab {
    padding-block-start: 24px;
  }

  body.ct-course-layout .tutor-course-details-title { max-width: none; }
}

/* ---------------------------------------------------------------------------
 *  10 · تقليل الحركة لمن يفضّلها
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ct-course-layout .ct-card-thumb img { transition: none !important; }
}