/*
=========================================================
MAHEDI ALTAYS — وسائط الواجهة
=========================================================

ثلاث طبقات اختيارية في القسم الأول، كلّها مخفيّة حتى
تُضاف من لوحة التحكم:

  .hero-backdrop      صورة خلف القسم كلّه
  .hero-card__video   فيديو أو صورة متحركة مكان الصورة
  .hero-mark          زخرفة أو رمز فوق البطاقة

والقاعدة الحاكمة: ما لم يُملأ لا يظهر، ولا يُحمَّل، ولا يترك
مكانًا فارغًا. فالواجهة اليوم كما كانت أمس حتى يقرّر صاحبها.
=========================================================
*/


/* =========================================================
   خلفية الواجهة
   =========================================================

   الصورة تملأ القسم، وفوقها حجابان: متدرّج من الأسفل يحمي
   النصّ، وطبقة داكنة عامة تخفض التباين.

   ولماذا حجابان لا واحد: الصورة قد تكون فاتحة في أعلاها
   داكنة في أسفلها أو العكس. الطبقة العامة تضمن حدًّا أدنى
   في كل الأحوال، والمتدرّج يشتدّ حيث يقع النصّ.
   ========================================================= */

.hero{
  position:relative;
  isolation:isolate;
}

.hero-backdrop{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

.hero-backdrop img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-backdrop::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(180deg, rgba(var(--brand-bg-rgb), .55), rgba(var(--brand-bg-rgb), .92)),
    linear-gradient(90deg, rgba(var(--brand-bg-rgb), .75), transparent 60%);
}


/* =========================================================
   الوسيط الحيّ
   =========================================================

   الفيديو يأخذ مكان الصورة بالقياس نفسه، فلا يقفز شيء عند
   التبديل ولا عند بطء التحميل.
   ========================================================= */

.hero-card{
  position:relative;
}

/*
الفيديو يأخذ قياس الصورة نفسه حرفًا بحرف — بما فيه
min-height. فلو تُرك height:auto لتغيّر ارتفاع البطاقة بين
الصورة والفيديو، فقفزت الصفحة عند التبديل.
*/
.hero-card__video{
  display:block;
  width:100%;
  height:100%;
  min-height:530px;

  object-fit:cover;
  object-position:center;
}

/*
حين يعمل الفيديو تُخفى الصورة، ويبقى ارتفاع البطاقة كما
هو لأن الاثنين في التدفّق نفسه.
*/
.hero-card.has-video > img[data-managed-media]{
  display:none;
}


/* =========================================================
   الزخرفة
   =========================================================

   في زاوية البطاقة من الداخل لا خارجها.

   جُرّب خارجها أولًا بإزاحة سالبة، فاختفت: البطاقة تحمل
   overflow:hidden لتقصّ الصورة عند حوافها المستديرة —
   فقصّت الزخرفة معها. والداخل أصدق بصريًّا على كل حال:
   ختمٌ على الصورة لا ملصقٌ بجانبها.
   ========================================================= */

.hero-mark{
  position:absolute;
  z-index:2;

  inset-block-start:22px;
  inset-inline-end:22px;

  width:clamp(52px, 9vw, 86px);
  height:auto;

  opacity:.9;
  pointer-events:none;

  /* ظلّ خفيف يفصلها عن صورة فاتحة تحتها */
  filter:drop-shadow(0 4px 14px rgba(var(--tint-dark-rgb), .45));
}

@media (max-width:820px){

  .hero-mark{
    inset-block-start:16px;
    inset-inline-end:16px;
    width:48px;
  }
}


/*
من طلب تقليل الحركة لا يُشغَّل له فيديو: الوسيط الحيّ حركةٌ
دائمة في زاوية العين، وهي بالضبط ما استثناه.

والصورة تعود ظاهرةً — فالبطاقة لا تُترك فارغة.
*/
@media (prefers-reduced-motion:reduce){

  .hero-card__video{
    display:none;
  }

  .hero-card.has-video > img[data-managed-media]{
    display:block;
  }
}