/* ============================================================================
   تفاصيل القوالب المسطّحة (٢٠٢٦-٠٩-٢٢)
   ============================================================================
   كل القوالب المسطّحة كانت نفس الصفحة بالحرف — نفس الهيرو المتمركز، نفس
   العنوان، نفس الكارت — والفرق لون وخط بس. الملف ده بيرسم القيم العامة
   اللي القالب بيختار منها (tenants/presets/_base.py):

     data-hero-layout   center | start | split     ← Preset.hero_layout
     data-heading-mark  none | underline | bar | highlight | bracket | ornament
     data-card          plain | sticker | outline | tab | paper
     data-divider       rule | none | double | dashed | wave | stars
     data-badge         pill | tag | stamp
     data-cover-tint    (موجود أو لأ)             ← Preset.cover_tint

   base.html بيحط الـattributes دي على ``<html>`` وبيحمّل الملف ده للقوالب
   المسطّحة بس — «العارف» (glow) مالوش ولا attribute ولا بيحمّل الملف، فمفيش
   قاعدة هنا تقدر تلمسه. أول قيمة في كل قايمة هي شكل الصفحة القديم ومالهاش
   قاعدة هنا عن قصد.

   Hooks in the markup are ``data-tpl`` attributes, not classes: the hero
   slice of home.html is checked class-by-class against tailwind.min.css
   (core.tests_hero), and an attribute hook costs no Tailwind rebuild.

     [data-tpl="hero"]        the hero <section> (home, /courses/, /teachers/)
     [data-tpl="hero-panel"]  the split panel (home only, rendered only for split),
                              with one empty <span> inside for a third shape
     [data-tpl="heading"]     section h2 (home, catalogue, teachers, course, teacher)
     [data-tpl="section"]     the four full-width home sections (divider sits on
                              their top edge)
     [data-tpl="card"]        course/teacher cards (grid partials + home carousels)
     [data-tpl="badge"]       grade/price/rating chips on cards, the hero's small
                              line above the title
     [data-tpl="cover"]       drawn course cover (courses without a real image)

   الألوان من توكنز ``--tc-*`` بس (قراية، مفيش تعريف هنا). قرار صاحب المنتج
   للمسطّح: لا تدرّج ناعم ولا زجاج ولا ظل مبلور — الحواف المصمتة والخطوط
   والنقوش الحادة هي المطلوب. Every rule is
   ``html[data-x="v"] .theme-student <hook>`` — (0,3,1), enough to beat a
   Tailwind utility (0,1,0) without ``!important``. Where design-system.css
   already styles the same element with a heavier selector, it reads a
   ``--tpl-*`` variable this file sets instead of racing it.
   ========================================================================== */


/* ── المسطّح بلا ظل مبلور ولا زجاج ─────────────────────────────────────
   الكروت في home.html و_course_card/_teacher_card عليها ``hover:shadow-lg``،
   وبادچ الهيرو وزراره التاني ``backdrop-blur-md`` — دول من «العارف» وبيتطبّقوا
   على كل قالب مسطّح، وده بالظبط الظل المبلور والزجاج اللي القرار مانعهم.
   بيتشالوا هنا مش في القالب: الملف ده مابيتحمّلش لـ«العارف» أصلاً.
   Declared before every card style below (and before the group files, which
   load after this one) so the solid sticker/duo edges, at the same
   specificity, still win. */
html[data-card] .theme-student [data-tpl="card"] {
  box-shadow: none;
}
html[data-card] .theme-student [data-tpl="hero"] .backdrop-blur-md {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* ── الهيرو ─────────────────────────────────────────────────────────────── */

/* start وsplit: النص على البداية، في نفس عرض محتوى الصفحة (78rem ناقص
   الحشو) بدل ما يلزق في حافة شاشة واسعة. */
html:is([data-hero-layout="start"], [data-hero-layout="split"]) .theme-student [data-tpl="hero"] {
  text-align: start;
  align-items: stretch;
  padding-inline: max(1.5rem, calc((100% - 75rem) / 2));
}
html:is([data-hero-layout="start"], [data-hero-layout="split"]) .theme-student [data-tpl="hero"] > * {
  margin-inline: 0;
}
html:is([data-hero-layout="start"], [data-hero-layout="split"]) .theme-student [data-tpl="hero"] > [data-tpl="hero-body"] {
  align-items: flex-start;
}
html:is([data-hero-layout="start"], [data-hero-layout="split"]) .theme-student [data-tpl="hero"] .justify-center {
  justify-content: flex-start;
}

/* اللوحة مخفية إلا في split على شاشة واسعة. على الموبايل split = start:
   لوحة زخرفة فوق أول كورس بتدفعه تحت الشاشة. */
.theme-student [data-tpl="hero-panel"] { display: none; }

@media (min-width: 768px) {
  /* العمودين بس للهيرو اللي فيه لوحة (الرئيسية). هيرو /courses/ و/teachers/
     مالوش لوحة، وعلى grid كان العنوان والسطر هيتحطّوا جنب بعض — فهناك split
     بيقع على قواعد start فوق. */
  html[data-hero-layout="split"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-panel"]) {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  /* اللوحة الافتراضية: إطار بلون النص على أرضية الأساسي الخفيفة وملمس
     الهيرو، وتلات أشكال مصمتة — دايرة بلون الفعل، لوح بلون الأساسي بحافة
     مزاحة، وشريط مسطّر. زخرفة القالب (‹data-signature›) بتعيد رسمها كلها. */
  html[data-hero-layout="split"] .theme-student [data-tpl="hero-panel"] {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border: max(2px, var(--tc-border-width, 1px)) solid var(--tc-text);
    border-radius: var(--tc-radius-card, 20px);
    background-color: color-mix(in srgb, var(--tc-primary) 12%, var(--tc-bg));
    background-image: var(--tc-hero-bg, none);
  }
  html[data-hero-layout="split"] .theme-student [data-tpl="hero-panel"]::before {
    content: '';
    position: absolute;
    inset-block-start: 12%;
    inset-inline-end: 10%;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tc-honey);
    border: max(2px, var(--tc-border-width, 1px)) solid var(--tc-text);
  }
  html[data-hero-layout="split"] .theme-student [data-tpl="hero-panel"]::after {
    content: '';
    position: absolute;
    inset-block-end: 12%;
    inset-inline-start: 10%;
    width: 52%;
    height: 34%;
    background: var(--tc-primary);
    border: max(2px, var(--tc-border-width, 1px)) solid var(--tc-text);
    border-radius: min(var(--tc-radius-card, 20px), 12px);
    box-shadow: -8px 8px 0 0 var(--tc-text);
  }
  html[data-hero-layout="split"] .theme-student [data-tpl="hero-panel"] > span {
    position: absolute;
    inset-block-start: 18%;
    inset-inline-start: 10%;
    width: 34%;
    height: 22%;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--tc-text) 0 3px,
      transparent 3px 14px
    );
    opacity: 0.55;
  }
}

/* الموبايل: split من غير زخرفة قالب بياخد نفس اللوحة شريط واطي تحت الزراير
   (دايرة الفعل، لوح الأساسي بحافته، والسطور) — تحت الزراير فمش بيزق الفعل
   الأساسي، وواطي فأول كورس يفضل قريب. ``:not([data-signature])`` عن قصد:
   كل قالب split شغّال النهارده ليه زخرفة بترسم لوحته بنفسها فوق ٧٦٨px،
   والشريط العام ده كان هيطلع تحت اللي منهم مالوش رسمة موبايل لسه ويبان
   قالب تاني. زخرفة القالب بتقرّر شكلها على الموبايل في ملف مجموعتها. */
@media (max-width: 767px) {
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"] {
    display: block;
    position: relative;
    width: 100%;
    max-width: 24rem;
    height: 6rem;
    margin-block-start: 2rem;
    overflow: hidden;
    border: max(2px, var(--tc-border-width, 1px)) solid var(--tc-text);
    border-radius: var(--tc-radius-card, 20px);
    background-color: color-mix(in srgb, var(--tc-primary) 12%, var(--tc-bg));
    background-image: var(--tc-hero-bg, none);
  }
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"]::before,
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"]::after,
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"] > span {
    content: '';
    position: absolute;
    display: block;
  }
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"]::before {
    inset-block-start: 50%;
    inset-inline-end: 1.25rem;
    width: 3.25rem;
    height: 3.25rem;
    margin-block-start: -1.625rem;
    border-radius: 50%;
    background: var(--tc-honey);
    border: max(2px, var(--tc-border-width, 1px)) solid var(--tc-text);
  }
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"]::after {
    inset-block-end: 1.1rem;
    inset-inline-start: 1.25rem;
    width: 38%;
    height: 2.25rem;
    background: var(--tc-primary);
    border: max(2px, var(--tc-border-width, 1px)) solid var(--tc-text);
    border-radius: min(var(--tc-radius-card, 20px), 10px);
    box-shadow: -5px 5px 0 0 var(--tc-text);
  }
  html[data-hero-layout="split"]:not([data-signature]) .theme-student [data-tpl="hero-panel"] > span {
    inset-block-start: 1rem;
    inset-inline-start: calc(38% + 2.75rem);
    width: 22%;
    height: 2.5rem;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--tc-text) 0 3px,
      transparent 3px 11px
    );
    opacity: 0.55;
  }
}


/* ── علامة عنوان القسم ─────────────────────────────────────────────────── */

/* خط تحت العنوان بلون الأساسي (الأساسي على الأرضية مضمون ٣:١ —
   tenants.tests_preset_quality). */
html[data-heading-mark="underline"] .theme-student [data-tpl="heading"]::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 0.25rem;
  margin-block-start: 0.55rem;
  background: var(--tc-primary);
  border-radius: var(--tc-radius-button, 9999px);
}

/* عمود على بداية السطر. */
html[data-heading-mark="bar"] .theme-student [data-tpl="heading"] {
  padding-inline-start: 0.6em;
  border-inline-start: 0.22em solid var(--tc-primary);
}

/* قلم تمييز تحت آخر نص العنوان. ``box-shadow`` داخلي مش تدرّج: حافة حادة،
   ومن غير ما يدخل ``linear-gradient`` على قالب مسطّح. */
html[data-heading-mark="highlight"] .theme-student [data-tpl="heading"] {
  width: fit-content;
  max-width: 100%;
  padding-inline: 0.15em;
  box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--tc-accent) 40%, transparent);
}

/* قوسين في ركنين متقابلين. */
html[data-heading-mark="bracket"] .theme-student [data-tpl="heading"] {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 0.2em 0.7em;
}
html[data-heading-mark="bracket"] .theme-student [data-tpl="heading"]::before,
html[data-heading-mark="bracket"] .theme-student [data-tpl="heading"]::after {
  content: '';
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  border: 0 solid var(--tc-primary);
}
html[data-heading-mark="bracket"] .theme-student [data-tpl="heading"]::before {
  inset-block-start: 0;
  inset-inline-start: 0;
  border-block-start-width: 3px;
  border-inline-start-width: 3px;
}
html[data-heading-mark="bracket"] .theme-student [data-tpl="heading"]::after {
  inset-block-end: 0;
  inset-inline-end: 0;
  border-block-end-width: 3px;
  border-inline-end-width: 3px;
}

/* معيّن قبل العنوان وشرطة بعده: «◆ العنوان ——». لون الفعل المقروء
   (``--tc-honey-text``) مش الخام — أصفر «سنتر» على الأبيض مابيبانش. */
html[data-heading-mark="ornament"] .theme-student [data-tpl="heading"]::before {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-inline-end: 0.5em;
  vertical-align: 0.16em;
  background: var(--tc-honey-text, var(--tc-honey));
  transform: rotate(45deg);
}
html[data-heading-mark="ornament"] .theme-student [data-tpl="heading"]::after {
  content: '';
  display: inline-block;
  width: 2.2em;
  height: 2px;
  margin-inline-start: 0.5em;
  vertical-align: 0.3em;
  background: var(--tc-primary);
}


/* ── الكروت ────────────────────────────────────────────────────────────── */

/* ستيكر: حد بلون النص وحافة مصمتة مزاحة تحت ولآخر السطر (شمال في RTL). */
html[data-card="sticker"] .theme-student [data-tpl="card"] {
  --tpl-card-border: max(2px, var(--tc-border-width, 1px));
  border-color: var(--tc-text);
  box-shadow: -5px 5px 0 0 var(--tc-text);
}
html[data-card="sticker"] .theme-student [data-tpl="card"]:hover {
  box-shadow: -8px 8px 0 0 var(--tc-text);
}

/* حد تقيل بلون النص. */
html[data-card="outline"] .theme-student [data-tpl="card"] {
  --tpl-card-border: max(2px, calc(var(--tc-border-width, 1px) * 2));
  border-color: var(--tc-text);
}

/* شريط ملوّن فوق — الحد العلوي نفسه، فمفيش عنصر زيادة ولا تعارض مع قص
   ``overflow-hidden`` بتاع الكارت. */
html[data-card="tab"] .theme-student [data-tpl="card"] {
  --tpl-card-border: 6px var(--tc-border-width, 1px) var(--tc-border-width, 1px);
  border-top-color: var(--tc-primary);
}

/* ورقة: ركن مطوي (مثلثين بحيلة الحدود، من غير تدرّج) وسطور كرّاسة تحت
   الغلاف. ``--tc-page-canvas`` هو لون الأرضية اللي الكارت قاعد عليها. */
html[data-card="paper"] .theme-student [data-tpl="card"] {
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    color-mix(in srgb, var(--tc-text) 9%, transparent) 27px 28px
  );
}
html[data-card="paper"] .theme-student [data-tpl="card"]::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 0;
  height: 0;
  border-block-start: 1.6rem solid var(--tc-page-canvas, var(--tc-bg));
  border-inline-start: 1.6rem solid color-mix(in srgb, var(--tc-text) 22%, var(--tc-surface));
}


/* ── الفاصل بين أقسام الرئيسية ─────────────────────────────────────────── */
/* 'rule' = الخط الشعرة اللي في الوسم أصلاً (``border-t``)، مالوش قاعدة. */

html[data-divider="none"] .theme-student [data-tpl="section"] {
  border-top-style: none;
}
html[data-divider="double"] .theme-student [data-tpl="section"] {
  border-top: 5px double color-mix(in srgb, var(--tc-text) 38%, transparent);
}
html[data-divider="dashed"] .theme-student [data-tpl="section"] {
  border-top: 2px dashed color-mix(in srgb, var(--tc-text) 32%, transparent);
}

/* موجة وتلات نجوم: SVG كـ``mask`` واللون من التوكن — data URI لوحده
   مايقدرش يقرا متغيّر CSS. */
html:is([data-divider="wave"], [data-divider="stars"]) .theme-student [data-tpl="section"] {
  position: relative;
}
html[data-divider="wave"] .theme-student [data-tpl="section"] {
  border-top-color: transparent;
}
/* base.html gives every <section> ``overflow-x: hidden`` up to 768px, which
   makes overflow-y compute to ``auto`` and clips anything drawn above the
   section's top edge — the top half of the wave and of the stars (and linen's
   fleuron) vanished on phones. ``clip`` still stops sideways scroll but
   leaves the other axis ``visible``; a browser without ``clip`` keeps the
   old ``hidden`` and is no worse off. */
@media (max-width: 768px) {
  html:is([data-divider="wave"], [data-divider="stars"]) .theme-student [data-tpl="section"] {
    overflow-x: clip;
  }
}
html[data-divider="wave"] .theme-student [data-tpl="section"]::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: -7px;
  height: 14px;
  background: color-mix(in srgb, var(--tc-primary) 60%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 7q7-6 14 0t14 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 28px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 7q7-6 14 0t14 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 28px 14px;
}
/* النجوم قاعدة على الخط نفسه: ::before رقعة بلون الأرضية بتقطع الخط، و
   ::after النجوم فوقها. */
html[data-divider="stars"] .theme-student [data-tpl="section"]::before,
html[data-divider="stars"] .theme-student [data-tpl="section"]::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  left: 50%;
  width: 6.5rem;
  height: 1.25rem;
  transform: translate(-50%, -50%);
}
html[data-divider="stars"] .theme-student [data-tpl="section"]::before {
  width: 8rem;
  background: var(--tc-page-canvas, var(--tc-bg));
}
html[data-divider="stars"] .theme-student [data-tpl="section"]::after {
  background: var(--tc-honey-text, var(--tc-honey));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='20'%3E%3Cpath d='M22 2l2.4 7.6L32 10l-7.6 2.4L22 20l-2.4-7.6L12 10l7.6-.4zM52 0l3 7 7 3-7 3-3 7-3-7-7-3 7-3zM82 2l2.4 7.6L92 10l-7.6 2.4L82 20l-2.4-7.6L72 10l7.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='20'%3E%3Cpath d='M22 2l2.4 7.6L32 10l-7.6 2.4L22 20l-2.4-7.6L12 10l7.6-.4zM52 0l3 7 7 3-7 3-3 7-3-7-7-3 7-3zM82 2l2.4 7.6L92 10l-7.6 2.4L82 20l-2.4-7.6L72 10l7.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ── البادچات ──────────────────────────────────────────────────────────── */

/* بطاقة سعر: زاوية حادة وسن مدبّب على بداية السطر (يمين، الصفحة RTL كلها). */
html[data-badge="tag"] .theme-student [data-tpl="badge"] {
  --tpl-badge-radius: 3px;
  border-radius: 3px;
  padding-inline-start: 1.1em;
  clip-path: polygon(0 0, calc(100% - 0.65em) 0, 100% 50%, calc(100% - 0.65em) 100%, 0 100%);
}

/* ختم: إطار متقطّع جوّه البادچ وميلة خفيفة. */
html[data-badge="stamp"] .theme-student [data-tpl="badge"] {
  --tpl-badge-radius: 3px;
  border-radius: 3px;
  outline: 1.5px dashed currentColor;
  outline-offset: -4px;
  padding-inline: 0.85em;
  transform: rotate(-3deg);
}


/* ── أغلفة من ألوان القالب ─────────────────────────────────────────────── */
/* الأرضية نفسها بتتحسب في core/templatetags/covers.py (``cover_bg``). هنا
   بس خطوط العلامة اللي كانت عسلي ثابت (#FFB020) — بتاخد لون فعل القالب،
   مفتّح عشان يتقري على الأرضية الغامقة. */
html[data-cover-tint] .theme-student [data-tpl="cover"] [stroke="#FFB020"] {
  stroke: color-mix(in srgb, var(--tc-honey) 60%, #fff);
}
html[data-cover-tint] .theme-student [data-tpl="cover"] [fill="#FFB020"] {
  fill: color-mix(in srgb, var(--tc-honey) 60%, #fff);
}


/* ── حركة خلفية الهيرو (hero_motion، static/js/hero-motion.js) ─────────────
   الـcanvas أول ابن للهيرو، ورا المحتوى: الهيرو ``isolate``، فـz-index -1
   بيترسم فوق أرضيته وتحت النص من غير ما نلمس ترتيب أي عنصر تاني. */
html[data-motion] .theme-student [data-tpl="hero"] > .hero-motion {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}