/* ECS — components
   المكوّنات: الأزرار والأرقام والبطاقات والخطوات وشعارات العملاء.
   هذا الملف جزء من نظام الأنماط: الترتيب في src/modules/setup.php
   هو ترتيب التتالي، فلا يُعاد ترتيبه إلا بعلم. */
/* ============================================================
   04 — BUTTONS
   ============================================================ */
.ecs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--ecs-sans); font-size: var(--fs-sm); font-weight:600;
  padding:13px 22px; cursor:pointer; text-align:center;
  border:2px solid transparent; transition: var(--ecs-tr);
}
.ecs-btn--lg{ padding:16px 28px; font-size: var(--fs-md) }

.ecs-btn--ink  { background: var(--ecs-ink); color:#fff }
.ecs-btn--ink:hover  { background: var(--ecs-ink-deep) }

.ecs-btn--hv   { background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-btn--hv:hover   { background:#ffb524 }

.ecs-btn--line { border-color: var(--ecs-ink); color: var(--ecs-ink); background:transparent }
.ecs-btn--line:hover { background: var(--ecs-ink); color:#fff }

.ecs-btn--ghost{ border-color: rgba(255,255,255,.4); color:#fff; background:transparent }
.ecs-btn--ghost:hover{ background: rgba(255,255,255,.12); border-color:#fff }

/* ============================================================
   05 — STATS  (شبكة الأرقام أسفل الهيرو)
   ============================================================ */
.ecs-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ecs-line-d);
}
.ecs-stats > *{
  padding:26px 22px 46px;
  border-inline-start:1px solid var(--ecs-line-d);
  padding-inline-start:22px;
}
.ecs-stats > *:first-child{ border-inline-start:0; padding-inline-start:0 }
.ecs-stat__n{
  font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,44px); color:#fff; display:block; line-height:1;
}
.ecs-stat__l{ font-size: var(--fs-xs); color:#8FA4BB; display:block; margin-top:9px; line-height:1.4 }

/* ويدجت العدّاد في إليمنتور — نفرض عليه هيئة ecs-stat */
.ecs-stat .elementor-counter-number-wrapper{
  font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,44px); line-height:1; color: var(--ecs-ink);
}
.ecs-dark .ecs-stat .elementor-counter-number-wrapper{ color:#fff }
.ecs-stat .elementor-counter-title{
  font-family: var(--ecs-sans); font-size: var(--fs-xs); font-weight:400;
  color: var(--ecs-muted); margin-top:9px; line-height:1.5; text-align:start;
}
.ecs-dark .ecs-stat .elementor-counter-title{ color:#8FA4BB }
.ecs-stat .elementor-counter-number-suffix{ color: var(--ecs-hv); font-weight:400 }

/* ============================================================
   06 — FORK  (مسار أصحاب الأعمال / الباحثين عن عمل)
   أهم مكوّن في الموقع.
   ============================================================ */
.ecs-fork{ display:grid; grid-template-columns:1fr 1fr }
.ecs-fork__panel{ padding:38px 34px; border-top:5px solid var(--ecs-ink) }
.ecs-fork__panel--employer{ background: var(--ecs-white) }
.ecs-fork__panel--seeker  { background: var(--ecs-hv); color: var(--ecs-hv-ink) }

.ecs-fork__tag{ font-size: var(--fs-xxs); font-weight:600; letter-spacing:.06em; margin-bottom:12px }
.ecs-fork__panel--employer .ecs-fork__tag{ color: var(--ecs-hv-d) }
.ecs-fork__panel--seeker   .ecs-fork__tag{ color:#7A5400 }

.ecs-fork__panel p{ font-size: var(--fs-sm); color: var(--ecs-muted); max-width:40ch }
.ecs-fork__panel--seeker :is(h2,h3,h4,h5){ color: var(--ecs-hv-ink) }
.ecs-fork__panel--seeker p { color:#5A4000 }
.ecs-fork__panel--seeker .ecs-btn--line{ border-color: var(--ecs-hv-ink); color: var(--ecs-hv-ink) }
.ecs-fork__panel--seeker .ecs-btn--line:hover{ background: var(--ecs-hv-ink); color: var(--ecs-hv) }

/* ============================================================
   07 — STEPS  (كيف نعمل)
   ============================================================ */
.ecs-steps{ display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ecs-line); background: var(--ecs-white) }
.ecs-step{ padding:34px 30px; border-inline-start:1px solid var(--ecs-line) }
.ecs-step:first-child{ border-inline-start:0 }
.ecs-step__n{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size: var(--fs-num-l); color: var(--ecs-hv); line-height:.85; margin-bottom:16px;
}
.ecs-step p{ font-size: var(--fs-sm); color: var(--ecs-muted) }

/* جملة مفتاحية بعرض كامل */
.ecs-punch{
  background: var(--ecs-ink); color:#fff; padding:26px 30px;
  font-family: var(--ecs-display); font-size:clamp(22px,2.6vw,32px); line-height:1.15;
}
[dir="rtl"] .ecs-punch{ line-height:1.4; font-size:clamp(19px,2vw,26px) }
.ecs-punch em{ color: var(--ecs-hv); font-style:normal }

/* ============================================================
   08 — SERVICE CARD
   ============================================================ */
.ecs-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background: var(--ecs-line); border:1px solid var(--ecs-line) }
.ecs-card{
  position:relative; background: var(--ecs-white); padding:34px 30px;
  transition: background var(--ecs-tr);
}
.ecs-card:hover{ background: var(--ecs-hv-soft) }
/* شريط كهرماني ينمو من الأعلى — إشارة تفاعل أدق من تغيّر الخلفية وحده */
.ecs-card::before{
  content:""; position:absolute; top:0; inset-inline-start:0;
  width:3px; height:0; background: var(--ecs-hv);
  transition: height .34s cubic-bezier(.22,.61,.36,1);
}
.ecs-card:hover::before,
.ecs-card:focus-within::before{ height:100% }
.ecs-card:hover .ecs-card__n{ color: var(--ecs-ink) }
.ecs-card__n{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size: var(--fs-sm); color: var(--ecs-hv-d); letter-spacing:.06em; margin-bottom:12px;
}
.ecs-card p{ font-size: var(--fs-sm); color: var(--ecs-muted); margin-bottom:16px }

/* قائمة بنقاط كهرمانية مربعة */
.ecs-list{ margin:0; padding:0; list-style:none; font-size: var(--fs-sm) }
.ecs-list li{ padding:8px 0; border-top:1px solid var(--ecs-line); display:flex; gap:10px }
.ecs-list li::before{
  content:""; width:6px; height:6px; background: var(--ecs-hv);
  flex:none; margin-top:9px;
}

/* ============================================================
   09 — LAW BOX  (قانون العمل 14/2025)
   ============================================================ */
.ecs-lawbox{ border:1px solid var(--ecs-line-d); background:rgba(255,255,255,.03); padding:32px }
.ecs-lawbox__date{ font-size: var(--fs-xs); color: var(--ecs-hv); margin:8px 0 20px }
.ecs-lawbox ul{ list-style:none; margin:0 0 24px; padding:0; font-size: var(--fs-sm) }
.ecs-lawbox li{
  padding:12px 0; border-top:1px solid var(--ecs-line-d);
  display:flex; gap:14px; color:#C3D2E2;
}
.ecs-lawbox li b{ color: var(--ecs-hv); font-family:'Barlow Condensed',sans-serif; font-size: var(--fs-md); flex:none }

/* ============================================================
   10 — JOB ROW  (صف وظيفة في صفحة الوظائف)
   ============================================================ */
.ecs-jobrow{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background: var(--ecs-white); border:1px solid var(--ecs-line);
  padding:16px 20px; margin-bottom:10px; transition: var(--ecs-tr);
}
.ecs-jobrow:hover{ border-color: var(--ecs-hv) }
.ecs-jobrow__t{ font-family: var(--ecs-display); font-size: var(--ecs-lg); color: var(--ecs-ink) }
[dir="rtl"] .ecs-jobrow__t{ font-weight:700 }
.ecs-jobrow__m{ font-size: var(--fs-xs); color: var(--ecs-muted); margin-top:3px }

/* شريحة دور وظيفي */
.ecs-chip{
  display:inline-block; background: var(--ecs-white); border:1px solid var(--ecs-line);
  padding:11px 17px; font-size: var(--fs-sm); color: var(--ecs-ink); font-weight:500;
  transition: var(--ecs-tr);
}
.ecs-chip:hover{ border-color: var(--ecs-hv); background: var(--ecs-hv-soft) }

/* ============================================================
   11 — CLIENT MARKS
   ============================================================ */
/* جدار فسيفسائي بخط شعري واحد. كل خانة ترسم إطارها بظل 1px،
   فتتراكب الحدود المتجاورة في خط واحد ويبقى الصف الأخير الناقص
   متمركزًا ومؤطّرًا دون خانات فارغة.
   الخانة = عنصر صورة (شعار) أو عنوان (اسم مؤقت لعميل بلا شعار).
   مقاس كل شعار يُضبط من إليمنتور: الصورة ← Style ← Width (px)،
   والمقاسات الحالية موزونة بصريًا ليبدو كل شعار بنفس الثقل.
   الأعمدة: 5 على الشاشات الكبيرة، 2 على الهاتف — مناسبة لعشرة شعارات.
   المسافات الخارجية تُضبط من إعدادات الحاوية في إليمنتور كالمعتاد. */
.elementor .e-con.ecs-marks{
  --mk-n: 5; --mk-h: 108px; --mk-z: 1;
  display:flex; flex-flow:row wrap; justify-content:center; align-items:stretch;
  gap:0;
}
.elementor .e-con.ecs-marks > .ecs-mark{
  flex:0 0 calc(100% / var(--mk-n)); width:auto; max-width:none;
  min-height: var(--mk-h); margin:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--ecs-white);
  box-shadow: 0 0 0 1px var(--ecs-line);
}
.ecs-marks .ecs-mark img{
  zoom: var(--mk-z); max-width:none; height:auto; display:block;
  filter: grayscale(1); opacity:.72;
  transition: filter var(--ecs-tr), opacity var(--ecs-tr);
}
.ecs-marks .ecs-mark:hover img{ filter:none; opacity:1 }
.ecs-marks .ecs-mark .elementor-heading-title{
  padding:16px; text-align:center;
  font-family: var(--ecs-sans); font-weight:700; font-size: var(--ecs-lg);
  line-height:1.2; color: var(--ecs-muted); transition: color var(--ecs-tr);
}
.ecs-marks .ecs-mark:hover .elementor-heading-title{ color: var(--ecs-ink) }

/* الأجهزة اللمسية لا تعرف التحويم: الشعارات بألوانها */
@media (hover: none){
  .ecs-marks .ecs-mark img{ filter:none; opacity:1 }
}
@media (max-width: 900px){
  .elementor .e-con.ecs-marks{ --mk-z: .88 }
}
@media (max-width: 767px){
  .elementor .e-con.ecs-marks{ --mk-n: 2; --mk-h: 88px; --mk-z: .86 }
}
@media (max-width: 380px){
  .elementor .e-con.ecs-marks{ --mk-h: 80px; --mk-z: .76 }
}

/* سطر أسفل الجدار: عملاء بلا شعار مرفوع + رابط القائمة الكاملة.
   الاتجاه والتوزيع من إعدادات الحاوية (صف · توزيع بين الطرفين). */
.elementor .e-con.ecs-marks__foot > .elementor-widget{ width:auto; max-width:100% }
.ecs-marks__more p{ margin:0; font-size: var(--fs-sm); color: var(--ecs-muted) }
.ecs-marks__more b{ color: var(--ecs-body); font-weight:700 }
.ecs-marks__all .elementor-heading-title{ font-size: var(--fs-sm); line-height:1.5 }
.ecs-marks__all .elementor-heading-title a{
  display:inline-block; font-family: var(--ecs-sans); font-weight:700;
  color: var(--ecs-ink); border-bottom:2px solid var(--ecs-hv); padding-bottom:2px;
  transition: color var(--ecs-tr);
}
.ecs-marks__all .elementor-heading-title a:hover{ color: var(--ecs-hv-d) }
@media (max-width: 767px){
  .ecs-marks__all .elementor-heading-title a{ padding-top:12px }
}

/* ============================================================
   12 — REVEAL  (يُفعَّل من assets/ecs.js)
   ============================================================ */
/* ⚠️ حرب أسبقية موثّقة.
   إليمنتور يضع في frontend.min.css:
     .elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base))
     :not(:has(.elementor-widget-container)){ transition: background .3s,
     border .3s, border-radius .3s, box-shadow .3s, transform .4s }
   قوّته (0,2,0) — لأن :not(:has(.class)) يَرث قوة وسيطه — ويُحمَّل
   بعد ملفنا. النتيجة: لائحة الانتقال لا تحتوي opacity أصلًا، فكانت
   الشفافية تقفز بلا تدرّج، وأي transition-delay يُمحى.
   .elementor + صنفين = (0,3,0) يحسمها بلا !important. */
.ecs-rv{ opacity:0; transform:translateY(14px) }
.ecs-rv.is-in{ opacity:1; transform:none }

.elementor .ecs-rv.ecs-rv{
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}

/* تدرّج داخل الشبكات: البطاقات تدخل تباعًا لا ككتلة واحدة.
   assets/ecs.js يضع --i على كل ابن ويضيف الصنف للحاويات فقط. */
.ecs-rv--stagger > *{ opacity:0; transform:translateY(12px) }
.ecs-rv--stagger.is-in > *{ opacity:1; transform:none }

.elementor .ecs-rv--stagger.ecs-rv--stagger > *{
  transition: opacity .5s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 55ms),
              transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce){
  .ecs-rv,
  .ecs-rv--stagger > *{ opacity:1 !important; transform:none !important }
}

/* ============================================================
   NEWSLETTER — النشرة البريدية
   إضافة MC4WP تطبع وسم النموذج بنفسها، فنُنسّق ما تطبعه داخل غلافنا
   بدل أن نفرض عليها قالبًا تفقده مع أول تحديث للإضافة.
   ============================================================ */
.ecs-news{
  position:relative;
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap:28px 48px; align-items:center;
  padding:34px; border:1px solid var(--ecs-line); background: var(--ecs-white);
}
.ecs-news::before{
  content:""; position:absolute; top:-1px; inset-inline:-1px; height:3px;
  background: var(--ecs-hv);
}
.ecs-news__k{
  display:block; margin-bottom:8px;
  font-size: var(--fs-xxs); font-weight:700; letter-spacing:.04em; color: var(--ecs-hv-d);
}
.ecs-news :is(h2,h3,h4){ font-size: var(--ecs-h4); line-height:1.4; margin:0 0 8px }
.ecs-news__t p{ margin:0; font-size: var(--fs-sm); line-height:1.75; color: var(--ecs-muted) }
.ecs-news__n{ margin:12px 0 0; font-size: var(--fs-xxs); line-height:1.6; color: var(--ecs-muted) }
.ecs-news__n a{ color: var(--ecs-ink); text-underline-offset:3px }

/* ما تطبعه الإضافة */
.ecs-news .mc4wp-form-fields{ display:flex; flex-wrap:wrap; gap:10px }
.ecs-news input[type="email"]{
  flex:1 1 220px; min-width:0; height:52px; padding:0 14px;
  font-family: var(--ecs-sans); font-size: var(--fs-sm); color: var(--ecs-ink);
  background: var(--ecs-white); border:1px solid var(--ecs-line); border-radius:0;
  transition: border-color var(--ecs-tr), box-shadow var(--ecs-tr);
}
.ecs-news input[type="email"]::placeholder{ color: var(--ecs-muted) }
.ecs-news input[type="email"]:focus{
  outline:none; border-color: var(--ecs-ink); box-shadow: inset 0 0 0 1px var(--ecs-ink);
}
.ecs-news :is(input[type="submit"], button[type="submit"]){
  flex:0 0 auto; height:52px; padding:0 26px; border:0; border-radius:0; cursor:pointer;
  font-family: var(--ecs-sans); font-size: var(--fs-sm); font-weight:700;
  background: var(--ecs-ink); color: var(--ecs-white);
  transition: background var(--ecs-tr);
}
.ecs-news :is(input[type="submit"], button[type="submit"]):hover{ background: var(--ecs-ink-2) }
.ecs-news .mc4wp-alert{ margin:12px 0 0; padding:10px 12px; font-size: var(--fs-xs); line-height:1.6 }
.ecs-news .mc4wp-success{ background: var(--ecs-hv-soft); color: var(--ecs-hv-ink) }
.ecs-news .mc4wp-error{ background: var(--ecs-err-soft); color: var(--ecs-err) }
.ecs-news .mc4wp-error a{ color: inherit }

@media (max-width: 860px){
  .ecs-news{ grid-template-columns: minmax(0,1fr); gap:20px; padding:24px }
}