/* ============================================================================
   زخارف قوالب مجموعة «centre» — tenants/presets/centre.py (field center academy calm)
   ============================================================================
   الملف ده للقاعدة الخاصة بقالب واحد بس: ``Preset.signature``. base.html
   بيحمّله لوحده (مش الست ملفات) لأي منصة قالبها من المجموعة دي، بعد
   details.css، وبيحط ``data-signature="<key>"`` على ``<html>`` لما المفتاح
   مش فاضي.

   كل قاعدة هنا تبدأ بـ:
     html[data-signature="<key>"] .theme-student <hook>
   والـhooks هي نفسها اللي في details.css:
     [data-tpl="hero"] [data-tpl="hero-panel"] (+ ::before ::after و > span)
     [data-tpl="heading"] [data-tpl="section"] [data-tpl="card"]
     [data-tpl="badge"] [data-tpl="cover"]
   ألوان من ``var(--tc-*)`` بس (قراية، مفيش تعريف ``--tc-`` هنا — ده
   مكانه base.html). مسطّح: لا تدرّج ناعم ولا زجاج ولا ظل مبلور.

   tenants.tests_preset_quality بيتأكد إن كل signature متحطّة في قالب من
   المجموعة ليها قاعدة هنا — مفتاح من غير قاعدة بيبان في الصفحة ولا بيرسم.
   ========================================================================== */


/* ── «كرّاسة» (field): رزمة كروت فهرسة ─────────────────────────────────────
   كارتين فهرسة مسطّرين، واحد فوق التاني بميلة، جنب متن الهيرو على الشاشة
   الواسعة: شريط نعناعي فوق الورا وكحلي فوق اللي قدّام، زي كروت المراجعة
   اللي الطالب بيكتبها بإيده. ده اللي بيفرقه عن «كشكول» (ورقة كرّاسة بخروم
   وهامش أحمر): هنا كروت منفصلة، مش صفحة.
   تحت ١٠٢٤px مفيش مكان جنب النص، فالكروت بتختفي بدل ما تقعد تحته.
   Home hero only (the one whose text sits in ``data-tpl="hero-body"``): the
   /courses/ and /teachers/ heroes are short and their filter bar floats up
   over the hero's bottom edge, straight into where the cards would sit. */
@media (min-width: 1024px) {
  /* Room for the stack: the text column stops 22rem short of the content
     edge, so a long owner-written headline wraps instead of running under
     the cards. */
  html[data-signature="field"] .theme-student [data-tpl="hero"] > [data-tpl="hero-body"] {
    max-width: calc(100% - 22rem);
  }
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::before,
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset-block-start: calc(50% + 2rem);
    width: 16rem;
    height: 10rem;
    border: 2px solid var(--tc-text);
    border-block-start-width: 0.6rem;
    border-radius: min(var(--tc-radius-card, 12px), 8px);
    /* ruled lines: hard stops, one pixel each — a pattern, not a blend. */
    background-color: var(--tc-surface);
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 1.4rem,
      color-mix(in srgb, var(--tc-accent) 28%, transparent) 1.4rem calc(1.4rem + 1px)
    );
    background-position: 0 0.9rem;
    pointer-events: none;
  }
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::before {
    inset-inline-end: calc(max(1.5rem, (100% - 75rem) / 2) + 2.5rem);
    border-block-start-color: var(--tc-primary);
    transform: translateY(-62%) rotate(6deg);
  }
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::after {
    inset-inline-end: calc(max(1.5rem, (100% - 75rem) / 2) + 0.5rem);
    border-block-start-color: var(--tc-accent);
    background-color: color-mix(in srgb, var(--tc-surface) 35%, #fff);
    box-shadow: -6px 6px 0 0 var(--tc-text);
    transform: translateY(-38%) rotate(-3deg);
  }
}

/* تحت ١٠٢٤px مفيش مكان جنب النص، فالرزمة بتنزل تحت الزراير: نفس الكارتين
   أصغر، في شريط بيتزوّد تحت الهيرو، على بداية السطر تحت النص اللي
   الكروت بتكمّله. من غيرهم «كرّاسة» على الموبايل كانت خطوط أرضية وبس — مش
   باينة إنها قالب. الرئيسية بس لنفس سبب الشاشة الواسعة (شريط الفلتر). */
@media (max-width: 1023px) {
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"]) {
    padding-bottom: 10rem;
  }
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::before,
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset-block-end: 2.75rem;
    width: 9.5rem;
    height: 5.75rem;
    border: 2px solid var(--tc-text);
    border-block-start-width: 0.5rem;
    border-radius: min(var(--tc-radius-card, 12px), 8px);
    background-color: var(--tc-surface);
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 1.15rem,
      color-mix(in srgb, var(--tc-accent) 28%, transparent) 1.15rem calc(1.15rem + 1px)
    );
    background-position: 0 0.6rem;
    pointer-events: none;
  }
  /* الورا بيطل من ورا اللي قدّام ناحية نهاية السطر، بميلة عكسه. */
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::before {
    inset-inline-start: calc(1.5rem + 6.75rem);
    inset-block-end: 3.4rem;
    border-block-start-color: var(--tc-primary);
    transform: rotate(-5deg);
  }
  html[data-signature="field"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::after {
    inset-inline-start: 1.75rem;
    border-block-start-color: var(--tc-accent);
    background-color: color-mix(in srgb, var(--tc-surface) 35%, #fff);
    box-shadow: -5px 5px 0 0 var(--tc-text);
    transform: rotate(3deg);
  }
}


/* ── «يافطة» (center): حافة اليافطة ─────────────────────────────────────────
   شريط مايل أصفر وأسود تحت الهيرو، وفوقه خط أحمر — زي حافة يافطة السنتر
   على الباب — في الرئيسية بس: هيرو /courses/ و/teachers/ شريط الفلتر بتاعه
   طالع فوق حافته، فالشريط كان بيعدّي من ورا الفلتر. ``divider='none'`` في centre.py عن قصد:
   الشريط ده هو الفاصل الوحيد، ومن غيره الصفحة كانت هتبقى خطوط في خطوط. */
html[data-signature="center"] .theme-student [data-tpl="hero"]:has(> [data-tpl="hero-body"])::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0.9rem;
  border-block-start: 4px solid var(--tc-primary);
  /* Hard-stop stripes (0 → 0.9rem, then 0.9rem → 1.8rem): a flat band,
     not a blend. */
  background: repeating-linear-gradient(
    -45deg,
    var(--tc-honey) 0 0.9rem,
    var(--tc-text) 0.9rem 1.8rem
  );
  pointer-events: none;
}


/* ── «جامعة» (academy): ختم الشهادة ────────────────────────────────────────
   لوحة الهيرو (split) بتترسم من جديد: ورقة شهادة بإطار ذهبي مزدوج، ختم
   نبيتي بحلقتين ذهبي وحلقة متقطّعة جوّه، شريطتين ذهبي نازلين من تحته، وسطرين
   التوقيع تحت. والعنوان تحته سطرين ذهبي رفيعين زي كتب الجامعة المطبوعة.
   الـdefault بيرسم على ::before و::after و> span، فالتلاتة متعاد تعريفهم هنا. */
@media (min-width: 768px) {
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"] {
    border: 1px solid var(--tc-primary);
    background-color: var(--tc-surface);
    background-image: none;
    outline: 5px double var(--tc-honey);
    outline-offset: -14px;
  }
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"]::before {
    inset: auto;
    inset-block-start: 40%;
    left: 50%;
    z-index: 2;
    width: 36%;
    background: var(--tc-primary);
    border: 3px solid var(--tc-honey);
    /* Two crisp rings (spread only, zero blur) around the seal. */
    box-shadow:
      0 0 0 6px var(--tc-surface),
      0 0 0 8px var(--tc-honey);
    outline: 2px dashed var(--tc-honey);
    outline-offset: -14px;
    transform: translate(-50%, -50%);
  }
  /* The ribbon: one polygon, two tails with a V cut; its top is hidden
     behind the seal. */
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"]::after {
    inset: auto;
    inset-block-start: 48%;
    left: 50%;
    z-index: 1;
    width: 24%;
    height: 32%;
    background: var(--tc-honey);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 82% 86%, 62% 100%, 62% 30%,
      38% 30%, 38% 100%, 18% 86%, 0 100%
    );
    transform: translateX(-50%);
  }
  /* Signature lines at the foot of the certificate. */
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"] > span {
    inset: auto;
    inset-inline: 22%;
    inset-block-end: 13%;
    width: auto;
    height: 5px;
    background-image: none;
    border-block: 1px solid color-mix(in srgb, var(--tc-text) 45%, transparent);
    opacity: 1;
  }
}
/* الموبايل: الشهادة كلها ماتنفعش في شريط، بس الختم لوحده بيقول «جامعة».
   ورقة واطية بنفس الإطار الذهبي المزدوج، الختم بشريطته على نهاية السطر،
   وسطرين نص وسطر توقيع على البداية — زي أسفل شهادة التخرّج. تحت الزراير
   فمش بيزق الفعل. */
@media (max-width: 767px) {
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"] {
    display: block;
    position: relative;
    width: 100%;
    /* بين ٤٠٠ و٧٦٧px الشريط بعرض الشاشة كان بيبان فاضي؛ بيقف عند عرض
       الزراير تقريباً. */
    max-width: 24rem;
    height: 7.25rem;
    margin-block-start: 2rem;
    overflow: hidden;
    border: 1px solid var(--tc-primary);
    border-radius: var(--tc-radius-card, 12px);
    background-color: var(--tc-surface);
    outline: 4px double var(--tc-honey);
    outline-offset: -10px;
  }
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"]::before,
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"]::after {
    content: '';
    position: absolute;
    /* مركز الختم: 1.6rem من الحافة + نص عرضه. */
    left: calc(1.6rem + 1.6rem);
  }
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"]::before {
    inset-block-start: 1.3rem;
    z-index: 2;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--tc-primary);
    border: 2px solid var(--tc-honey);
    box-shadow:
      0 0 0 3px var(--tc-surface),
      0 0 0 5px var(--tc-honey);
    outline: 1.5px dashed var(--tc-honey);
    outline-offset: -8px;
    transform: translateX(-50%);
  }
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"]::after {
    inset-block-start: 3.2rem;
    z-index: 1;
    width: 2.2rem;
    height: 2.5rem;
    background: var(--tc-honey);
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 82% 86%, 62% 100%, 62% 30%,
      38% 30%, 38% 100%, 18% 86%, 0 100%
    );
    transform: translateX(-50%);
  }
  /* سطر التوقيع (حدّين)، وفوقه سطرين «نص» الشهادة: ظلال مصمتة بنفس
     العرض، والـspread السالب بيرفّعهم من ٥px لـ٣px. */
  html[data-signature="academy"] .theme-student [data-tpl="hero-panel"] > span {
    position: absolute;
    display: block;
    inset-inline-start: 1.75rem;
    inset-block-end: 1.5rem;
    width: calc(100% - 9rem);
    max-width: 13rem;
    height: 5px;
    border-block: 1px solid color-mix(in srgb, var(--tc-text) 45%, transparent);
    box-shadow:
      0 -2.1rem 0 -1px color-mix(in srgb, var(--tc-text) 16%, transparent),
      0 -1.3rem 0 -1px color-mix(in srgb, var(--tc-text) 16%, transparent);
  }
}
html[data-signature="academy"] .theme-student [data-tpl="heading"]::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 5px;
  margin-block-start: 0.5rem;
  border-block: 1px solid var(--tc-honey-text, var(--tc-honey));
}


/* ── «هادي» (calm): أشكال عضوية مصمتة ─────────────────────────────────────
   لوحة الهيرو (split) من غير إطار: شكل مريمية كبير، حصاية طوبي مقصوصة منه
   بحلقة من لون الأرضية، ودايرة مفرّغة رفيعة — الدفء من الشكل نفسه، مفيش
   blur ولا تدرّج. الحركة الوحيدة إن الأشكال بتتنفّس ببطء، ولمن طالب حركة
   أقل بتقف. */
@media (min-width: 768px) {
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"] {
    border: 0;
    background-color: transparent;
    background-image: none;
    overflow: visible;
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::before {
    inset: auto;
    inset-block-start: 4%;
    inset-inline-start: 6%;
    width: 70%;
    aspect-ratio: 1.08;
    background: var(--tc-primary);
    border: 0;
    border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::after {
    inset: auto;
    inset-block-end: 6%;
    inset-inline-end: 8%;
    width: 38%;
    height: auto;
    aspect-ratio: 1;
    background: var(--tc-accent);
    border: 0;
    border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
    /* A crisp ring in the page colour (spread, no blur) cuts the pebble out
       of the big shape where they overlap. */
    box-shadow: 0 0 0 10px var(--tc-page-canvas, var(--tc-bg));
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"] > span {
    inset: auto;
    /* Straddles the big shape's edge, so it reads as placed, not dropped. */
    inset-block-start: 5%;
    inset-inline-end: 17%;
    width: 17%;
    height: auto;
    aspect-ratio: 1;
    background-image: none;
    border: 3px solid var(--tc-text);
    border-radius: 50%;
    opacity: 1;
  }
}
/* الموبايل: نفس التلات أشكال صغيرين في شريط تحت الزراير على نهاية السطر —
   كتلة مريمية، حصاية طوبي مقصوصة منها، ودايرة مفرّغة. مفيش إطار ولا أرضية،
   فالشريط بيبان زخرفة هادية مش كارت. */
@media (max-width: 767px) {
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"] {
    display: block;
    position: relative;
    width: 100%;
    /* نفس سقف «ألوان» و«جامعة»: على شاشة ٥٠٠–٧٦٧px الأشكال كانت هتلزق في
       الحافة بعيد عن النص. */
    max-width: 24rem;
    height: 5.5rem;
    margin-block-start: 2rem;
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::before,
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::after,
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"] > span {
    content: '';
    position: absolute;
    display: block;
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::before {
    inset-block-start: 0;
    inset-inline-end: 2.25rem;
    width: 9rem;
    height: 4.75rem;
    background: var(--tc-primary);
    border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::after {
    inset-block-end: 0;
    inset-inline-end: 8.75rem;
    width: 3rem;
    height: 3rem;
    background: var(--tc-accent);
    border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%;
    box-shadow: 0 0 0 6px var(--tc-page-canvas, var(--tc-bg));
  }
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"] > span {
    inset-block-start: 0.2rem;
    inset-inline-end: 1.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 2.5px solid var(--tc-text);
    border-radius: 50%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-signature="calm"] .theme-student [data-tpl="hero-panel"]::before {
    animation: tpl-calm-breathe 14s ease-in-out infinite alternate;
  }
}
@keyframes tpl-calm-breathe {
  to {
    border-radius: 48% 52% 42% 58% / 58% 44% 56% 42%;
  }
}


/* ── «مقر» (campus): جدول الأسبوع ─────────────────────────────────────────────
   ده اللي السنتر بيبيعه: مواعيد المجموعات. شبكة الأيام بخط خفيف، ومجموعات
   بالأساسي والفعل. */
@media (min-width: 768px) {
  html[data-signature="campus"] .theme-student [data-tpl="hero-panel"] {
    background-color: var(--tc-surface);
    background-image: none;
    border-color: color-mix(in srgb, var(--tc-text) 35%, transparent);
  }
  html[data-signature="campus"] .theme-student [data-tpl="hero-panel"]::before {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: color-mix(in srgb, var(--tc-text) 30%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M40 40V370'/%3E%3Cpath d='M132 40V370'/%3E%3Cpath d='M224 40V370'/%3E%3Cpath d='M316 40V370'/%3E%3Cpath d='M408 40V370'/%3E%3Cpath d='M460 40V370'/%3E%3Cpath d='M40 40H460'/%3E%3Cpath d='M40 80H460'/%3E%3Cpath d='M40 150H460'/%3E%3Cpath d='M40 220H460'/%3E%3Cpath d='M40 290H460'/%3E%3Cpath d='M40 370H460'/%3E%3C/g%3E%3Cg%3E%3Crect x='54' y='52' width='48' height='14' rx='7'/%3E%3Crect x='146' y='52' width='48' height='14' rx='7'/%3E%3Crect x='238' y='52' width='48' height='14' rx='7'/%3E%3Crect x='330' y='52' width='48' height='14' rx='7'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M40 40V370'/%3E%3Cpath d='M132 40V370'/%3E%3Cpath d='M224 40V370'/%3E%3Cpath d='M316 40V370'/%3E%3Cpath d='M408 40V370'/%3E%3Cpath d='M460 40V370'/%3E%3Cpath d='M40 40H460'/%3E%3Cpath d='M40 80H460'/%3E%3Cpath d='M40 150H460'/%3E%3Cpath d='M40 220H460'/%3E%3Cpath d='M40 290H460'/%3E%3Cpath d='M40 370H460'/%3E%3C/g%3E%3Cg%3E%3Crect x='54' y='52' width='48' height='14' rx='7'/%3E%3Crect x='146' y='52' width='48' height='14' rx='7'/%3E%3Crect x='238' y='52' width='48' height='14' rx='7'/%3E%3Crect x='330' y='52' width='48' height='14' rx='7'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="campus"] .theme-student [data-tpl="hero-panel"]::after {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Crect x='48' y='88' width='76' height='54' rx='6'/%3E%3Crect x='232' y='88' width='76' height='54' rx='6'/%3E%3Crect x='140' y='228' width='76' height='54' rx='6'/%3E%3Crect x='324' y='158' width='76' height='124' rx='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Crect x='48' y='88' width='76' height='54' rx='6'/%3E%3Crect x='232' y='88' width='76' height='54' rx='6'/%3E%3Crect x='140' y='228' width='76' height='54' rx='6'/%3E%3Crect x='324' y='158' width='76' height='124' rx='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html[data-signature="campus"] .theme-student [data-tpl="hero-panel"] > span {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    background-image: none;
    background: var(--tc-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Crect x='140' y='88' width='76' height='54' rx='6'/%3E%3Crect x='48' y='298' width='76' height='64' rx='6'/%3E%3Crect x='232' y='298' width='76' height='64' rx='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Crect x='140' y='88' width='76' height='54' rx='6'/%3E%3Crect x='48' y='298' width='76' height='64' rx='6'/%3E%3Crect x='232' y='298' width='76' height='64' rx='6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}