/* ═══════════════════════════════════════════════════════════
   GM Kit · Hero Slider
   خصائص منطقية بالكامل (inline-start/end) فالاتجاهان مدعومان
   بلا ملف RTL منفصل. كل قيمة قابلة للتحكم عبر متغيّر CSS
   يكتبه Elementor، فلا يوجد !important في أي مكان.
   ═══════════════════════════════════════════════════════════ */

.gmk-hero{
  /* ——— القيم الافتراضية: هي نفسها تصميم Golden Meat ——— */
  --gmk-ease:cubic-bezier(.16,1,.3,1);
  --gmk-gold:#D4AF37;
  --gmk-bg:#0A0807;
  --gmk-scrim-1:rgba(10,8,7,.90);
  --gmk-scrim-2:rgba(10,8,7,.76);
  --gmk-scrim-3:rgba(10,8,7,.40);
  --gmk-scrim-4:rgba(10,8,7,.10);
  --gmk-scrim-b:rgba(10,8,7,.62);
  --gmk-scrim-dir:left;
  --gmk-min-h:100svh;
  --gmk-offset:0px;
  --gmk-pad-b:clamp(40px,6vh,72px);
  --gmk-container:1320px;
  --gmk-gut:clamp(20px,5vw,48px);
  --gmk-max:44rem;
  --gmk-align:flex-start;
  --gmk-valign:center;
  --gmk-count:3;
  --gmk-scroll-per:83;
  --gmk-scroll:calc(var(--gmk-scroll-per) * var(--gmk-count) * 1vh);
  --gmk-slide:5500ms;
  --gmk-wipe:1.05s;
  --gmk-title-min:2rem;
  --gmk-title-max:9rem;
  --gmk-img-pos:center center;
  --gmk-bar-origin:100% 50%;

  position:relative;
  display:block;
  height:auto;
}

/* وضع التثبيت: الطول هو مساحة السكرول، والمشهد يلتصق داخله */
.gmk-hero.gmk-is-pinned{height:var(--gmk-scroll)}

.gmk-hero__pin{
  position:relative;
  display:flex;
  align-items:var(--gmk-valign);
  min-height:var(--gmk-min-h);
  overflow:hidden;
  background:var(--gmk-bg);
  padding-block:calc(var(--gmk-offset) + 24px) var(--gmk-pad-b);
}
.gmk-hero.gmk-is-pinned .gmk-hero__pin{
  position:sticky;
  inset-block-start:0;
  height:var(--gmk-min-h);
  min-height:0;
}

/* ── طبقة الصور ───────────────────────────────────────────
   بلا تثبيت: تلاشٍ بسيط. مع التثبيت: مسح شريحي (SLICE)
   مقود بموضع السكرول نفسه، لا بانتقال زمني. */
.gmk-hero__media{position:absolute;inset:0;overflow:hidden}
.gmk-shot{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity .9s var(--gmk-ease);
}
.gmk-shot.is-on{opacity:1}
.gmk-shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--gmk-img-pos);
  transform:scale(1.08);
}
.gmk-shot.is-on img{transform:scale(1);transition:transform 8s linear}

.gmk-is-pinned .gmk-shot{
  opacity:1;
  clip-path:var(--gmk-clip-hidden,inset(0 0 0 100%));
  transition:clip-path var(--gmk-wipe) var(--gmk-ease);
  will-change:clip-path;
}
.gmk-is-pinned .gmk-shot.is-on{clip-path:inset(0 0 0 0)}
.gmk-is-pinned .gmk-shot.is-out{clip-path:var(--gmk-clip-out,inset(0 100% 0 0))}
.gmk-is-pinned .gmk-shot img{transform:scale(1.06)}
.gmk-is-pinned .gmk-shot.is-on img{transition:none}

/* ── الحجب: تدرّج جانبي يحمل النص + تدرّج سفلي ──────────── */
.gmk-hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* خمس محطات لا أربع: المحطة الرابعة الخفيفة عند 70% هي ما يمنع
     ظهور حافة واضحة حيث ينتهي التعتيم فوق الصورة. */
  background:
    linear-gradient(to var(--gmk-scrim-dir),
      var(--gmk-scrim-1) 0%,
      var(--gmk-scrim-2) 24%,
      var(--gmk-scrim-3) 48%,
      var(--gmk-scrim-4) 70%,
      transparent 84%),
    linear-gradient(to top, var(--gmk-scrim-b) 0%, transparent 44%);
}

/* ── الحاوية والكتلة النصية ─────────────────────────────── */
.gmk-hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--gmk-container);
  margin-inline:auto;padding-inline:var(--gmk-gut);
  display:flex;justify-content:var(--gmk-align);
}
.gmk-hero__block{position:relative;width:min(var(--gmk-max),100%)}

/* ── السطر التمهيدي ─────────────────────────────────────── */
.gmk-hero__eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 clamp(14px,1.6vw,22px);
  font-size:.8125rem;font-weight:500;
  color:rgba(255,255,255,.88);
}
.gmk-hero__eyebrow i{width:34px;height:1px;background:var(--gmk-gold);flex:none}

/* ── العنوان: الفصول تتشارك خلية شبكة واحدة، فالصندوق
      بارتفاع أطولها ولا شيء يقفز عند التبديل ──────────────── */
.gmk-hero__title{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  margin:0 0 clamp(14px,1.4vw,22px);
  font-size:clamp(var(--gmk-title-min),min(8vw,5vh),var(--gmk-title-max));
  font-weight:800;line-height:1.15;letter-spacing:0;color:#fff;
}
.gmk-hline{grid-area:1/1;min-width:0;visibility:hidden}
.gmk-hline.is-on{visibility:visible}
.gmk-hline:not(.is-on){pointer-events:none}
.gmk-line{
  display:block;overflow:hidden;
  /* القناع لازم يفسح لنزول الحروف العربية، وإلا فقدت ل و ط ذيولها */
  padding-block-end:.14em;margin-block-end:-.14em;
}
.gmk-line b{
  display:block;font-weight:inherit;color:inherit;
  transform:translateY(112%);
  transition:transform .8s var(--gmk-ease);
}
.gmk-hline.is-on .gmk-line b{transform:none}
.gmk-hline.is-on .gmk-line:nth-child(2) b{transition-delay:.09s}
.gmk-line--2 b{color:var(--gmk-title-2,var(--gmk-gold))}

/* ── الوصف ──────────────────────────────────────────────── */
.gmk-hero__sub{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  margin:0 0 clamp(22px,2.4vw,34px);
  font-size:clamp(.95rem,1.9vh,1.125rem);
  font-weight:400;line-height:1.85;
  color:rgba(255,255,255,.9);
  max-width:var(--gmk-sub-max,60ch);
}
.gmk-hsub{
  grid-area:1/1;min-width:0;display:block;
  opacity:0;transform:translateY(12px);visibility:hidden;
  transition:opacity .6s var(--gmk-ease),transform .6s var(--gmk-ease),visibility .6s;
}
.gmk-hsub.is-on{opacity:1;transform:none;visibility:visible;transition-delay:.16s}

/* ── الأزرار: مستقلة عن الثيم بالكامل ───────────────────── */
.gmk-hero__actions{display:flex;flex-wrap:wrap;gap:var(--gmk-btn-gap,14px);margin:0}
.gmk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;border-radius:5px;
  font-size:.9375rem;font-weight:500;line-height:1;
  white-space:nowrap;text-decoration:none;
  border:1px solid transparent;
  transition:background .35s var(--gmk-ease),color .35s var(--gmk-ease),
             border-color .35s var(--gmk-ease),transform .35s var(--gmk-ease);
}
.gmk-btn--1{background:#8B1E1E;border-color:#8B1E1E;color:#fff}
.gmk-btn--1:hover,.gmk-btn--1:focus-visible{background:#A32626;border-color:#A32626;color:#fff;transform:translateY(-2px)}
.gmk-btn--2{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.gmk-btn--2:hover,.gmk-btn--2:focus-visible{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;transform:translateY(-2px)}

/* ── شرائط الضمان ───────────────────────────────────────── */
.gmk-hero__chips{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(18px,3vw,40px);
  margin:clamp(20px,2.4vw,32px) 0 0;
  padding:26px 0 0;
  border-block-start:1px solid var(--gmk-chip-rule,rgba(255,255,255,.24));
  list-style:none;
}
.gmk-hero__chips li{display:flex;align-items:center;gap:11px;font-size:.875rem;color:rgba(255,255,255,.88)}
.gmk-chip__icon{display:inline-flex;color:var(--gmk-gold);flex:none}
/* أيقونات Elementor تُرسم SVG بلا تعبئة معلنة، فتقع على الأسود
   الافتراضي ولا تسمع للون. currentColor يعيدها إلى لون العنصر،
   فيعمل تحكّم اللون على أيقونات الخط والـ SVG المرفوع معاً. */
.gmk-chip__icon svg{width:24px;height:24px;display:block;fill:currentColor}
/* والأيقونات الخطّية ترسم بالحدود لا بالتعبئة */
.gmk-chip__icon svg [stroke]:not([stroke="none"]){stroke:currentColor}
.gmk-chip__icon i{font-size:24px;line-height:1;color:inherit}

/* ── التوقيع العمودي ────────────────────────────────────── */
.gmk-hero__spine{
  position:absolute;z-index:3;
  inset-block-end:clamp(58px,9vh,110px);
  inset-inline-end:clamp(18px,2.4vw,36px);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.6875rem;font-weight:500;letter-spacing:.3em;
  color:rgba(255,255,255,.45);
}

/* ── مؤشّر الفصول ───────────────────────────────────────── */
.gmk-hero__rules{
  position:absolute;z-index:4;
  inset-block-end:clamp(58px,9vh,110px);
  display:flex;flex-direction:column;gap:10px;
}
.gmk-hero__rules--start{inset-inline-start:clamp(16px,2.2vw,34px)}
.gmk-hero__rules--end{inset-inline-end:clamp(16px,2.2vw,34px)}
.gmk-hero__rules button{
  width:22px;height:44px;padding:0;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.gmk-hero__rules i{
  display:block;width:2px;height:100%;position:relative;overflow:hidden;
  background:var(--gmk-rule-track,rgba(255,255,255,.28));
}
.gmk-hero__rules i::after{
  content:"";position:absolute;inset-inline:0;inset-block:0;
  background:var(--gmk-rule-fill,var(--gmk-gold));
  transform:scaleY(var(--fill,0));transform-origin:50% 0;
  will-change:transform;
}
.gmk-hero__rules button:hover i{background:var(--gmk-rule-hover,rgba(255,255,255,.45))}
.gmk-hero__rules button:focus-visible{outline:2px solid var(--gmk-gold);outline-offset:3px}

/* بلا تثبيت: المؤشّر يصير شريطاً أفقياً بمقاس إبهام، ويمتلئ مع المؤقّت */
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules{
  flex-direction:row;gap:8px;
  inset-block-end:clamp(28px,5vh,48px);
}
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules--start{inset-inline-start:var(--gmk-gut)}
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules--end{inset-inline-end:var(--gmk-gut)}
/* شبكة بـ place-items:center تقيس العنصر بمحتواه، والشريط فارغ،
   فـ width:100% يُحسب على مسار عرضه صفر ويختفي الشريط تماماً.
   flex مع flex:1 يملأ العرض حتماً بلا اعتماد على تمدّد المسارات. */
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules button{
  width:54px;height:44px;
  display:flex;align-items:center;
}
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules i{
  flex:1 1 auto;width:auto;height:3px;border-radius:2px;
}
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules i::after{transform:scaleX(0);transform-origin:var(--gmk-bar-origin)}
.gmk-hero:not(.gmk-is-pinned) .gmk-hero__rules button.is-on i::after{animation:gmk-fill var(--gmk-slide) linear forwards}
@keyframes gmk-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* حاوية Elementor لا يجوز أن تقصّ المشهد الملتصق */
.elementor-widget-gmk-hero,
.elementor-widget-gmk-hero > .elementor-widget-container{overflow:visible}

/* ── الهاتف ─────────────────────────────────────────────── */
@media (max-width:640px){
  .gmk-hero__block{width:100%}
  .gmk-hero__spine{display:none}
  .gmk-hero__title{font-size:clamp(1.9rem,9.6vw,2.7rem);line-height:1.34;overflow-wrap:break-word}
  .gmk-hero__sub{font-size:1rem;line-height:1.8}
  .gmk-hero__actions{flex-direction:column;align-items:stretch}
  .gmk-hero__actions .gmk-btn{width:100%}
  .gmk-hero__chips{flex-direction:column;align-items:flex-start;gap:12px;padding-block-start:20px}
  .gmk-hero__chips li{font-size:.8125rem}
  .gmk-chip__icon svg{width:20px;height:20px}
  .gmk-chip__icon i{font-size:20px}
}

/* ── احترام تفضيل تقليل الحركة ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .gmk-hero.gmk-is-pinned{height:auto}
  .gmk-hero.gmk-is-pinned .gmk-hero__pin{position:relative;height:auto;min-height:var(--gmk-min-h)}
  .gmk-hero__rules{display:none}
  .gmk-shot{clip-path:none;transition:none}
  .gmk-shot img,.gmk-shot.is-on img{transform:none;transition:none}
  .gmk-line b{transform:none;transition:none}
  .gmk-hsub{transition:none}
}