/* ============================================================================
 *  CT Tutor — الخطوة 15: شارات الترويسة والمقتطف
 *  الوجهة: wp-content/themes/blocksy-child/assets/css/ct-tutor-15-badges.css
 *
 *  يعمل مع: wp-content/mu-plugins/ct-course-hero.php
 *  الأيقونات مرسومة بصيغة SVG مضمَّنة — بلا خط أيقونات ولا طلب شبكي.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 *  1 · الحاوية
 * ------------------------------------------------------------------------- */
.ct-hero-extras {
  margin-block-start: 18px;
}

/* ---------------------------------------------------------------------------
 *  2 · صف الشارات
 * ------------------------------------------------------------------------- */
.ct-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s;
}

.ct-badge:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.34);
}

/* ---------------------------------------------------------------------------
 *  3 · الأيقونات — SVG مضمَّن بتقنية mask فتتلوّن بلون النص
 * ------------------------------------------------------------------------- */
.ct-bi {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .92;
}

/* المستوى — ثلاثة أعمدة متدرّجة */
.ct-bi-level {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='13.5' width='4.6' height='7.5' rx='1.6' fill='%23000' opacity='.55'/%3E%3Crect x='9.7' y='8.5' width='4.6' height='12.5' rx='1.6' fill='%23000' opacity='.78'/%3E%3Crect x='16.4' y='3' width='4.6' height='18' rx='1.6' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='13.5' width='4.6' height='7.5' rx='1.6' fill='%23000' opacity='.55'/%3E%3Crect x='9.7' y='8.5' width='4.6' height='12.5' rx='1.6' fill='%23000' opacity='.78'/%3E%3Crect x='16.4' y='3' width='4.6' height='18' rx='1.6' fill='%23000'/%3E%3C/svg%3E");
}

/* المدة — ساعة */
.ct-bi-clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2V12l3.4 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2V12l3.4 2'/%3E%3C/svg%3E");
}

/* الملتحقون — شخصان */
.ct-bi-users {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9.2' cy='8' r='3.5' fill='%23000'/%3E%3Cpath d='M2.8 19.4c0-3.2 2.9-5.4 6.4-5.4s6.4 2.2 6.4 5.4a.8.8 0 0 1-.8.8H3.6a.8.8 0 0 1-.8-.8z' fill='%23000'/%3E%3Ccircle cx='17.4' cy='9.4' r='2.6' fill='%23000' opacity='.6'/%3E%3Cpath d='M15 14.3c.8-.3 1.6-.4 2.4-.4 2.6 0 4.4 1.6 4.4 4a.7.7 0 0 1-.7.7h-3.9z' fill='%23000' opacity='.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9.2' cy='8' r='3.5' fill='%23000'/%3E%3Cpath d='M2.8 19.4c0-3.2 2.9-5.4 6.4-5.4s6.4 2.2 6.4 5.4a.8.8 0 0 1-.8.8H3.6a.8.8 0 0 1-.8-.8z' fill='%23000'/%3E%3Ccircle cx='17.4' cy='9.4' r='2.6' fill='%23000' opacity='.6'/%3E%3Cpath d='M15 14.3c.8-.3 1.6-.4 2.4-.4 2.6 0 4.4 1.6 4.4 4a.7.7 0 0 1-.7.7h-3.9z' fill='%23000' opacity='.6'/%3E%3C/svg%3E");
}

/* الدروس — كتاب مفتوح */
.ct-bi-book {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.4C10.4 5 8.4 4.3 6 4.3H3.4v13.4H6c2.4 0 4.4.7 6 2.1'/%3E%3Cpath d='M12 6.4c1.6-1.4 3.6-2.1 6-2.1h2.6v13.4H18c-2.4 0-4.4.7-6 2.1'/%3E%3Cpath d='M12 6.4v13.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.4C10.4 5 8.4 4.3 6 4.3H3.4v13.4H6c2.4 0 4.4.7 6 2.1'/%3E%3Cpath d='M12 6.4c1.6-1.4 3.6-2.1 6-2.1h2.6v13.4H18c-2.4 0-4.4.7-6 2.1'/%3E%3Cpath d='M12 6.4v13.4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 *  4 · المقتطف
 * ------------------------------------------------------------------------- */
.ct-hero-excerpt {
  margin: 16px 0 0 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,.9) !important;
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
 *  5 · الجوال
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ct-hero-extras { margin-block-start: 14px; }
  .ct-hero-badges { gap: 7px; }
  .ct-badge {
    font-size: 13px;
    padding: 6px 12px;
    gap: 6px;
  }
  .ct-bi { width: 15px; height: 15px; flex: 0 0 15px; }
  .ct-hero-excerpt {
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
 *  6 · تقليل الحركة لمن يفضّلها
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ct-badge { transition: none; }
}
/* ============================================================
 *  ترتيب عناصر الترويسة
 *  التقييم ← العنوان ← الشارات ← المقتطف ← المدرب
 *
 *  العناصر داخل .tutor-course-details-header لا داخل الترويسة
 *  مباشرة، فالفلكس يُطبَّق عليها هي.
 * ========================================================= */
.ct-layout-v2 .ct-course-hero {
  display: block;
}

.ct-layout-v2 .ct-course-hero .tutor-course-details-header {
  display: flex;
  flex-direction: column;
}

.ct-layout-v2 .ct-course-hero .tutor-course-details-ratings { order: 1; }

.ct-layout-v2 .ct-course-hero .tutor-course-details-title,
.ct-layout-v2 .ct-course-hero h1 { order: 2; }

/* موضع محجوز للشارات — تُنقل إليه بالقاعدة التالية */
.ct-layout-v2 .ct-course-hero .tutor-course-details-top { order: 4; }

/* المقتطف والشارات يُنقلان داخل الترويسة بالترتيب 3 */
.ct-layout-v2 .ct-hero-extras {
  order: 3;
}

/* الفاصل فوق سطر المدرب */
.ct-layout-v2 .ct-course-hero .tutor-course-details-top {
  margin-block-start: 22px !important;
  padding-block-start: 18px;
  border-block-start: 1px solid rgba(255,255,255,.16) !important;
}
/* ============================================================
 *  ترتيب الترويسة بصرياً — بلا نقل في الشجرة
 *
 *  ct-hero-extras خارج حاوية الترويسة، فلا يخضع لترتيب الفلكس.
 *  الحل: رفعه بهامش سالب ليصعد فوق سطر المدرب،
 *  ودفع سطر المدرب لأسفل بالمقدار نفسه.
 * ========================================================= */
@media (min-width: 992px) {

  .ct-layout-v2 .ct-course-hero {
    --ct-extras-h: 132px;   /* ارتفاع الشارات والمقتطف معاً */
  }

  /* الشارات والمقتطف يصعدان */
  .ct-layout-v2 .ct-hero-extras {
    margin-block-start: calc( var(--ct-extras-h) * -1 ) !important;
    position: relative;
    z-index: 2;
  }

  /* سطر المدرب ينزل ليفسح المكان */
  .ct-layout-v2 .ct-course-hero .tutor-course-details-top {
    margin-block-start: calc( var(--ct-extras-h) + 22px ) !important;
    padding-block-start: 18px;
    border-block-start: 1px solid rgba(255,255,255,.16) !important;
  }
}