/* ============================================================================
 *  CT Tutor — الخطوة 14: تراكب البطاقة على الترويسة
 *  الوجهة: wp-content/themes/blocksy-child/assets/css/ct-tutor-14-overlap.css
 *
 *  ما يصنع الرقيّ في تصميم إدراك ليس موضع الصورة، بل أن البطاقة
 *  ترتفع فتتراكب على حافة الشريط الملوّن — نصفها فوق اللون ونصفها
 *  على الأبيض.
 *
 *  الآلية: حشو سفلي إضافي على الشريط يفسح مكاناً، وهامش علوي سالب
 *  على العمود الجانبي يرفعه إليه.
 *
 *  ⚠ لا يُطبَّق إلا فوق 1200 بكسل. وفي الجوال يعود التخطيط طبيعياً.
 * ========================================================================== */

@media (min-width: 1200px) {

  .ct-layout-v2 {
    /* مقدار ارتفاع البطاقة داخل الشريط */
    --ct-overlap: 200px;
  }

  /* ---- الشريط يتوسّع من أسفل ليستقبل البطاقة ---- */
  .ct-layout-v2 .ct-course-hero {
    padding-block-end: var(--ct-overlap) !important;
    margin-block-end: 0 !important;
  }

  /* ---- العمود الجانبي يرتفع ---- */
  .ct-layout-v2 .tutor-single-course-sidebar {
    margin-block-start: calc(var(--ct-overlap) * -1) !important;
    position: relative;
    z-index: 5;
  }

  /* ---- العمود الرئيسي يبدأ تحت الشريط ---- */
  .ct-layout-v2 main.tutor-col-xl-8 {
    padding-block-start: 30px;
  }

  /* ---- الصورة تصبح رأس البطاقة لا عنصراً منفصلاً ---- */
  .ct-layout-v2 .ct-sidebar-thumb {
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    border: 1px solid #e4e7ec !important;
    border-block-end: 0 !important;
    box-shadow: none !important;
  }

  /* ---- بطاقة الشراء تلتحم بالصورة من أعلى ---- */
  .ct-layout-v2 .ct-sidebar-thumb + * .tutor-card,
  .ct-layout-v2 .ct-sidebar-thumb + .tutor-card,
  .ct-layout-v2 .ct-sidebar-thumb ~ * > .tutor-sidebar-card,
  .ct-layout-v2 .ct-sidebar-thumb ~ .tutor-sidebar-card {
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
    border-block-start: 0 !important;
  }

  /* ---- ظل موحّد يلف الصورة والبطاقة معاً ---- */
  .ct-layout-v2 .tutor-single-course-sidebar > *:first-child,
  .ct-layout-v2 .tutor-single-course-sidebar .tutor-sidebar-card {
    box-shadow: 0 18px 46px rgba(16,24,40,.18) !important;
  }

  .ct-layout-v2 .ct-sidebar-thumb {
    box-shadow: 0 -2px 0 rgba(16,24,40,.02) !important;
  }
}

/* ---------------------------------------------------------------------------
 *  دون 1200 بكسل: لا تراكب
 *  البطاقة تنزل تحت الشريط طبيعياً كما هي الآن.
 * ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .ct-layout-v2 .tutor-single-course-sidebar {
    margin-block-start: 0 !important;
  }
}
/* ============================================================
 *  نقل زرَّي المفضلة والمشاركة إلى أعلى يسار الترويسة
 * ========================================================= */
@media (min-width: 1200px) {

  .ct-layout-v2 .ct-course-hero {
    position: relative;
  }

  .ct-layout-v2 .ct-course-hero .tutor-course-details-actions {
    position: absolute !important;
    inset-block-start: 22px;
    inset-inline-start: auto;
    inset-inline-end: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 6;
    display: flex;
    gap: 10px;
  }

  /* العمود الذي كان يحويهما لم يعد يحجز ارتفاعاً */
  .ct-layout-v2 .ct-course-hero .tutor-course-details-actions:empty,
  .ct-layout-v2 .ct-course-hero [class*="col"]:has(> .tutor-course-details-actions) {
    min-height: 0 !important;
    padding-block: 0 !important;
  }
}