/* ===================================================================
   X0T — الطبقة الزجاجية: عرض سينمائي ناعم لبقية الصفحات
   (الأعمال · المدونة · التواصل · التوظيف · الوكلاء والصفحات الداخلية)

   الفكرة: الزجاج لا يُقرأ إلا إذا كان خلفه شيء يُشوَّش. لذلك تبدأ الطبقة
   بخلفية ضوئية هادئة ثابتة خلف الصفحة كلها، ثم تجعل البطاقات واللوحات
   أسطحاً نصف شفّافة تُشوّش ما تحتها. بدون تلك الخلفية يتحوّل الزجاج إلى
   مجرّد لون باهت بلا عمق.

   لا يُضاف أي pseudo-element إلى العناصر التي تستعملها طبقة motion-plus
   (‎.mgp-glow‎ تشغل ‎::before‎ و‎::after‎ معاً) — اللمعة العلوية هنا مرسومة
   بـ‎inset box-shadow‎ لهذا السبب.
   =================================================================== */

body.x0t-mg{
  --glass-bg:color-mix(in srgb, var(--mg-panel) 58%, transparent);
  --glass-line:rgba(255,255,255,.11);
  --glass-line-2:rgba(255,255,255,.20);
  --glass-hi:rgba(255,255,255,.07);
  --glass-blur:18px;
  --glass-shadow:0 26px 64px -34px rgba(0,0,0,.72);
}
html[data-theme="light"] body.x0t-mg{
  --glass-bg:color-mix(in srgb, #ffffff 68%, transparent);
  --glass-line:rgba(16,19,34,.10);
  --glass-line-2:rgba(16,19,34,.20);
  --glass-hi:rgba(255,255,255,.65);
  --glass-shadow:0 24px 56px -32px rgba(16,19,34,.26);
}

/* ===================================================================
   1) الخلفية الضوئية — ما يمنح الزجاج عمقه
   =================================================================== */
body.x0t-mg{
  background-image:
    radial-gradient(58vw 58vw at 84% 4%,  rgba(var(--mg-a-rgb),.17), transparent 60%),
    radial-gradient(52vw 52vw at 4% 92%,  rgba(var(--mg-b-rgb),.14),  transparent 60%),
    radial-gradient(40vw 40vw at 50% 48%, rgba(var(--mg-a-rgb),.07), transparent 62%);
  background-repeat:no-repeat;
}
/* الخلفية الثابتة تُربك التمرير على أجهزة اللمس، فتُثبَّت على المكتب فقط */
@media (min-width:901px) and (hover:hover){
  body.x0t-mg{background-attachment:fixed}
}
html[data-theme="light"] body.x0t-mg{
  background-image:
    radial-gradient(58vw 58vw at 84% 4%,  rgba(var(--mg-a-rgb),.10), transparent 60%),
    radial-gradient(52vw 52vw at 4% 92%,  rgba(var(--mg-b-rgb),.08),  transparent 60%),
    radial-gradient(40vw 40vw at 50% 48%, rgba(var(--mg-a-rgb),.05), transparent 62%);
}

/* ===================================================================
   2) هيرو الصفحات الداخلية — نفس الحضور السينمائي في الرئيسية والخدمات
   =================================================================== */
body.x0t-mg .phero{
  background:transparent;              /* كان مصمتاً فيحجب الخلفية الضوئية */
  border-bottom:0;
  min-height:min(38vh,360px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(56px,8vh,104px) clamp(32px,4.5vw,60px);
}
body.x0t-mg .phero h1{
  font-size:clamp(2rem,5vw,4.2rem);
  line-height:1.16;letter-spacing:-.02em;
  max-width:17ch;
}
body.x0t-mg .phero .crumbs{margin-bottom:clamp(16px,2.2vw,26px)}
body.x0t-mg .phero .eyebrow{margin-bottom:clamp(14px,2vw,22px)}
/* .phero فليكس عمودي و.wrap عنده margin-inline:auto — بدون عرض صريح
   يلغي الـauto margins الـstretch فيتقلّص المحتوى ويتوسّط بعيداً عن
   محاذاة الهيدر والشبكة تحته. */
body.x0t-mg .phero > .wrap{position:relative;z-index:2;width:100%}

/* فاصل شعري متدرّج بدل الحدّ الحادّ */
body.x0t-mg .phero::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--mg-hair2) 22%,var(--mg-hair2) 78%,transparent);
}

/* ===================================================================
   3) الأسطح الزجاجية
   =================================================================== */
body.x0t-mg .work,
body.x0t-mg .post,
body.x0t-mg .card,
body.x0t-mg .mgw,
body.x0t-mg .mga,
body.x0t-mg .mgc-card,
body.x0t-mg .tm-card,
body.x0t-mg .step,
body.x0t-mg .mgs-card,
body.x0t-mg .mgi-cell,
body.x0t-mg .mgap-formwrap,
body.x0t-mg .form,
body.x0t-mg .cta,
body.x0t-mg .info-card{
  background:var(--mg-panel);                 /* احتياط لمن لا يدعم color-mix */
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.22);
          backdrop-filter:blur(var(--glass-blur)) saturate(1.22);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  transition:
    transform .6s var(--mg-ease),
    border-color .6s var(--mg-ease),
    box-shadow .6s var(--mg-ease),
    background .6s var(--mg-ease);
}

/* رفعة ناعمة عند المرور — بطيئة ومتحفّظة لا قافزة */
body.x0t-mg .work:hover,
body.x0t-mg .post:hover,
body.x0t-mg .card:hover,
body.x0t-mg .mgw:hover,
body.x0t-mg .mga:hover,
body.x0t-mg .mgc-card:hover,
body.x0t-mg .tm-card:hover,
body.x0t-mg .mgs-card:hover,
body.x0t-mg .mgi-cell:hover{
  transform:translateY(-7px);
  border-color:var(--glass-line-2);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 84px -38px rgba(0,0,0,.8);
}
html[data-theme="light"] body.x0t-mg .work:hover,
html[data-theme="light"] body.x0t-mg .post:hover,
html[data-theme="light"] body.x0t-mg .card:hover,
html[data-theme="light"] body.x0t-mg .mgw:hover,
html[data-theme="light"] body.x0t-mg .mga:hover,
html[data-theme="light"] body.x0t-mg .mgs-card:hover{
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 34px 70px -34px rgba(16,19,34,.34);
}

/* الوسائط داخل البطاقة الزجاجية تحتاج قصّاً موافقاً للحواف */
body.x0t-mg .post > img,
body.x0t-mg .work img{border-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}

/* ===================================================================
   4) حقول النماذج زجاجية أيضاً — الاتساق يصنع الإحساس «العصري»
   =================================================================== */
/* الحقول لها في magnet-sections.css قاعدة بخصوصية أعلى ومعها ‎!important‎
   (‎html body.x0t-mg .nf-form-cont .nf-field-element input:not(...)‎)، فلا
   يكفي ‎!important‎ وحده — نطابق نفس شكل المُحدِّد، وملفّنا يُحمَّل بعده. */
html body.x0t-mg .nf-form-cont .nf-field-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
html body.x0t-mg .nf-form-cont .nf-field-element textarea,
html body.x0t-mg .nf-form-cont .nf-field-element select,
html body.x0t-mg .mgap-field input:not([type=submit]),
html body.x0t-mg .mgap-field textarea,
html body.x0t-mg .mgap-field select{
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
          backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid var(--glass-line)!important;
  border-radius:12px!important;
  color:var(--mg-text)!important;
  box-shadow:inset 0 1px 0 var(--glass-hi)!important;
  transition:border-color .35s var(--mg-ease),box-shadow .35s var(--mg-ease),background .35s var(--mg-ease)!important;
}
html body.x0t-mg .nf-form-cont .nf-field-element input:focus,
html body.x0t-mg .nf-form-cont .nf-field-element textarea:focus,
html body.x0t-mg .nf-form-cont .nf-field-element select:focus,
html body.x0t-mg .mgap-field input:focus,
html body.x0t-mg .mgap-field textarea:focus{
  border-color:var(--mg-soft)!important;
  background:color-mix(in srgb, var(--mg-panel) 72%, transparent)!important;
  box-shadow:0 0 0 4px rgba(var(--mg-a-rgb),.16)!important;
  outline:0!important;
}

/* ===================================================================
   5) شبكات الأعمال والمدوّنة — إيقاع أهدأ ومسافات أوسع قليلاً
   =================================================================== */
body.x0t-mg .work-grid,
body.x0t-mg .posts,
body.x0t-mg .mga-grid{gap:clamp(18px,2.1vw,28px)}

body.x0t-mg .work,
body.x0t-mg .post,
body.x0t-mg .mga{border-radius:14px;overflow:hidden}

/* ===================================================================
   6) احترام تفضيل تقليل الحركة
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  body.x0t-mg .work,
  body.x0t-mg .post,
  body.x0t-mg .card,
  body.x0t-mg .mgw,
  body.x0t-mg .mga,
  body.x0t-mg .mgs-card{transition:none}
  body.x0t-mg .work:hover,
  body.x0t-mg .post:hover,
  body.x0t-mg .card:hover,
  body.x0t-mg .mgw:hover,
  body.x0t-mg .mga:hover,
  body.x0t-mg .mgs-card:hover{transform:none}
}

/* ===================================================================
   7) الشاشات الصغيرة — تشويش أخفّ حفاظاً على الأداء
   =================================================================== */
@media (max-width:768px){
  body.x0t-mg{--glass-blur:12px}
  body.x0t-mg .phero{min-height:min(46vh,420px);padding-block:clamp(70px,11vh,120px) clamp(34px,6vw,60px)}
  body.x0t-mg .phero h1{max-width:none}
}