/* ECS — layout
   التخطيط: الحاويات والشبكات ورؤوس الأقسام.
   هذا الملف جزء من نظام الأنماط: الترتيب في src/modules/setup.php
   هو ترتيب التتالي، فلا يُعاد ترتيبه إلا بعلم. */
/* ============================================================
   02 — LAYOUT HELPERS
   الشبكات على الحاوية الأب. إليمنتور يضيف ويحذف الأبناء،
   والشبكة تتكيّف تلقائيًا — أمتن من عرض ثابت لكل عمود.
   ============================================================ */
.ecs-sec{ padding-block: var(--ecs-sect) }
.ecs-sec--tight{ padding-block: calc(var(--ecs-sect) * .62) }

.ecs-grid-2,
.ecs-grid-3,
.ecs-grid-4,
.ecs-grid-5{ display:grid; gap: var(--ecs-gap) }

.ecs-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ecs-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.ecs-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.ecs-grid-5{ grid-template-columns:repeat(5,minmax(0,1fr)) }

/* شبكات بلا فراغ — للبطاقات ذات الحدود المتلاصقة */
/* خط شعري واحد بين الخانات: كل خانة ترسم إطارها بظل 1px فتتراكب الحدود
   المتجاورة في خط واحد. كانت الشبكة تلوّن خلفيتها بلون الخط، فيظهر حشوها
   العلوي (المضبوط من إليمنتور) شريطًا رماديًا فوق البطاقات. */
.ecs-grid-tight{ gap:0; background:transparent; border:0 }
.ecs-grid-tight > *{ background: var(--ecs-white); box-shadow:0 0 0 1px var(--ecs-line) }

@media (max-width: 1024px){
  .ecs-grid-3,.ecs-grid-4,.ecs-grid-5{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 767px){
  .ecs-grid-2,.ecs-grid-3,.ecs-grid-4,.ecs-grid-5{ grid-template-columns:1fr }
}

.ecs-dark{ background: var(--ecs-ink); color:#C3D2E2 }
.ecs-dark :is(h1,h2,h3,h4,h5){ color:#fff }
.ecs-dark p{ color:#AEC0D3 }

.ecs-white{ background: var(--ecs-white) }

/* شريط مائل صناعي — يوضع أعلى الهيرو */
.ecs-zigzag{
  height: 6px;
  background: repeating-linear-gradient(135deg,
    var(--ecs-hv) 0 16px, var(--ecs-ink) 16px 32px);
}

/* ============================================================
   03 — SECTION HEAD
   <span class="ecs-eyebrow">, ثم h2, ثم p
   ============================================================ */
.ecs-eyebrow{
  display:inline-block;
  font-family: var(--ecs-sans);
  font-size: var(--fs-xxs); font-weight:600; letter-spacing:.08em;
  color: var(--ecs-hv-d);
  border-bottom:2px solid var(--ecs-hv);
  padding-bottom:5px; margin-bottom:18px;
}
.ecs-dark .ecs-eyebrow{ color: var(--ecs-hv) }

.ecs-lede{ font-size: var(--fs-md); color: var(--ecs-muted); max-width:56ch }
.ecs-dark .ecs-lede{ color:#93A6BC }