/* =============================================================
   قالب دراسة الحالة — Master Case Study Template
   =============================================================
   يُحمَّل بعد enterprise.css ويعتمد متغيّراته (--ent-*).

   الغاية: أن تتوقّف صفحة المشروع عن قول «هذا عمل نفّذناه» وتبدأ بقول
   «هذا تحدٍّ في عمل العميل حللناه هندسياً». التسلسل نفسه يحمل هذه الرسالة:
   تحدٍّ ← منهج ← حلّ ← معمارية ← قرارات ← أثر.

   قالب واحد لأربعة وعشرين مشروعاً. لا استثناءات ولا صفحات خاصة —
   ما لا تتوفّر بياناته يختفي قسمه، ولا يُترك فراغاً ولا يُملأ بحشو.

   البادئة .cs- لكل الأصناف هنا.
   ============================================================= */

/* =============================================================
   1. الترويسة
   ============================================================= */

/* الترويسة الداخلية في القالب بنفسجية مسطّحة. لدراسة الحالة نريد سطحاً
   كحلياً يوحي بالعمق التقني — مع بقاء الشكل المائل من هوية الموقع. */
#header-holder.cs-header .bg-animation {
  background-color: var(--ent-navy-800);
  background-image: radial-gradient(
      980px 520px at 70% 8%,
      rgba(117, 109, 231, 0.4),
      transparent 62%
    ),
    radial-gradient(760px 420px at 12% 96%, rgba(56, 189, 248, 0.18), transparent 66%),
    url(../images/headbg.svg);
}

#header-holder.cs-header {
  background-color: #fff;
}

.cs-hero {
  padding-top: 34px;
  padding-bottom: 78px;
}

.cs-hero .crumbs,
.cs-hero .crumbs a {
  color: rgba(255, 255, 255, 0.72);
}

.cs-hero .crumbs a:hover {
  color: #fff;
}

.cs-hero-grid {
  display: flex;
  align-items: flex-end;
  gap: var(--ent-s5);
}

.cs-hero-copy {
  flex: 1 1 60%;
  min-width: 0;
}

.cs-hero-side {
  flex: 0 1 34%;
  min-width: 0;
}

/* شريحة تصنيف المشروع */
.cs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c9c4ff;
  background: rgba(8, 13, 26, 0.55);
  border: 1px solid rgba(143, 136, 255, 0.34);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: var(--ent-s2);
}

.cs-kicker i {
  font-size: 13px;
  opacity: 0.9;
}

h1.cs-title {
  font-size: 42px;
  line-height: 1.4;
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--ent-s3);
  letter-spacing: -0.01em;
  max-width: 15ch;
  text-wrap: balance;
}

.cs-hero-lead {
  font-size: 17px;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 var(--ent-s3);
  max-width: 62ch;
}

.cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.cs-hero-meta i {
  color: var(--ent-cyan);
  font-size: 14px;
}

/* بطاقة الأثر في الهيرو — أول رقم يراه الزائر */
.cs-hero-impact {
  background: rgba(8, 13, 26, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--ent-radius-lg);
  padding: var(--ent-s3);
  backdrop-filter: blur(3px);
}

.cs-hero-impact > span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ent-teal);
  margin-bottom: 10px;
  direction: ltr;
  text-align: start;
}

.cs-hero-impact p {
  font-size: 16px;
  line-height: 1.85;
  color: #fff;
  font-weight: 600;
  margin: 0;
}

/* =============================================================
   2. بطاقة ملخّص المشروع
   =============================================================
   ترتفع فوق حدّ الترويسة لتربط الهيرو بالمتن — حيلة تحريرية تجعل
   الملخّص أول ما تقع عليه العين بعد العنوان. */

.cs-summary-wrap {
  margin-top: 10px;
  position: relative;
  z-index: 3;
  margin-bottom: var(--ent-s6);
}

.cs-summary {
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius-lg);
  box-shadow: var(--ent-shadow-md);
  padding: var(--ent-s3) var(--ent-s4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ent-s3);
}

.cs-fact > span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ent-muted);
  margin-bottom: 8px;
}

.cs-fact > strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ent-ink);
}

.cs-fact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-fact li {
  font-size: 12px;
  font-weight: 600;
  color: var(--ent-ink-2);
  background: var(--ent-surface-mute);
  border: 1px solid var(--ent-line);
  border-radius: 6px;
  padding: 4px 9px;
  line-height: 1.6;
}

.cs-fact li.more {
  background: transparent;
  border-style: dashed;
  color: var(--ent-muted);
}

/* =============================================================
   3. عناوين الأقسام
   ============================================================= */

.cs-sec {
  padding-block: var(--ent-s6);
}

.cs-sec.soft {
  background: var(--ent-surface-soft);
}

.cs-head {
  margin-bottom: var(--ent-s4);
  max-width: 74ch;
}

.cs-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ent-brand-deep);
  margin-bottom: 10px;
  direction: ltr;
  text-align: start;
}

.cs-dark .cs-eyebrow {
  color: var(--ent-brand-1);
}

h2.cs-h2 {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--ent-ink);
  margin: 0 0 var(--ent-s2);
  letter-spacing: -0.01em;
}

.cs-dark h2.cs-h2 {
  color: #fff;
}

.cs-sec-lead {
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ent-muted);
  margin: 0;
}

.cs-dark .cs-sec-lead {
  color: var(--ent-on-dark-2);
}

/* شريط كحلي لأقسام المعمارية والقرارات الهندسية */
.cs-dark {
  position: relative;
  background: var(--ent-navy-800);
  overflow: hidden;
}

/* شريط مائل داكن أعمق — نفس زاوية أشرطة القالب، فيندرج القسم الكحلي
   في الإيقاع البصري نفسه.
   display:block إلزامي — القسم .container-fluid وBootstrap يفرض على
   عنصريه الزائفين display:table في قاعدة clearfix، فينكمشان إلى 0×0. */
.cs-dark::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--ent-navy-900);
  transform: skewY(10deg) scaleY(1.12);
  transform-origin: center center;
}

.cs-dark > .container {
  position: relative;
  z-index: 1;
}

/* =============================================================
   4. نظرة عامة
   ============================================================= */

.cs-overview {
  font-size: 19px;
  line-height: 2;
  color: var(--ent-ink-2);
  max-width: 68ch;
  margin: 0;
}

/* =============================================================
   5. التحدي + مقارنة قبل/بعد
   ============================================================= */

.cs-challenge-body p {
  font-size: 16.5px;
  line-height: 2.05;
  color: var(--ent-ink-2);
  margin: 0 0 var(--ent-s2);
  max-width: 70ch;
}

.cs-challenge-body p:first-of-type {
  font-size: 18.5px;
  color: var(--ent-ink);
  font-weight: 500;
}

/* ---------- قبل ← بعد ---------- */
.cs-ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: var(--ent-s4);
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius-lg);
  overflow: hidden;
  background: #fff;
}

.cs-ba-col {
  padding: var(--ent-s3);
}

.cs-ba-col.before {
  background: #fdf7f7;
}

.cs-ba-col.after {
  background: #f4fbf9;
}

.cs-ba-col > h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--ent-s2);
}

.cs-ba-col.before > h3 {
  color: #a13c3c;
}

.cs-ba-col.after > h3 {
  color: #0f766e;
}

.cs-ba-col ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.cs-ba-col li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ent-ink-2);
}

.cs-ba-col li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 11px;
  border-radius: 2px;
  transform: rotate(45deg);
}

.cs-ba-col.before li::before {
  background: #c66;
}

.cs-ba-col.after li::before {
  background: var(--ent-teal);
}

/* العمود الفاصل بالسهم */
.cs-ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  background: #fff;
  border-inline: 1px solid var(--ent-line);
  color: var(--ent-brand);
  font-size: 20px;
}

/* =============================================================
   6. منهج العمل
   ============================================================= */

.cs-approach {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ent-s2);
  counter-reset: step;
}

.cs-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3) 20px;
}

/* خيط يربط الخطوات — يقرأ كمسار لا كبطاقات متجاورة.
   RTL: يمتدّ يساراً من حافة البطاقة. */
.cs-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 42px;
  left: calc(-1 * var(--ent-s2) - 1px);
  width: var(--ent-s2);
  height: 2px;
  background: linear-gradient(90deg, var(--ent-line), rgba(117, 109, 231, 0.5));
}

.cs-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  direction: ltr;
  color: var(--ent-brand-deep);
  background: rgba(117, 109, 231, 0.1);
  border: 1px solid rgba(117, 109, 231, 0.22);
  margin-bottom: 14px;
}

.cs-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ent-ink);
  margin: 0 0 8px;
  line-height: 1.5;
}

.cs-step p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ent-muted);
  margin: 0;
}

/* =============================================================
   7. وحدات الحل
   ============================================================= */

.cs-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ent-s2);
}

.cs-module {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3);
  transition: border-color var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease);
}

.cs-module:hover {
  border-color: rgba(117, 109, 231, 0.3);
  box-shadow: var(--ent-shadow-sm);
}

.cs-module-no {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  direction: ltr;
  color: var(--ent-brand);
  background: rgba(117, 109, 231, 0.09);
  border-radius: 9px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cs-module h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ent-ink);
  margin: 0 0 7px;
  line-height: 1.55;
}

.cs-module p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ent-muted);
  margin: 0;
}

/* =============================================================
   8. المعمارية
   ============================================================= */

.cs-arch-grid {
  display: flex;
  gap: var(--ent-s5);
  align-items: flex-start;
}

.cs-arch-diagram {
  flex: 1 1 56%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--ent-line-dark);
  border-radius: var(--ent-radius-lg);
  padding: var(--ent-s3);
}

.cs-arch-svg {
  width: 100%;
  height: auto;
  display: block;
}

.cs-arch-svg text {
  font-weight: 700;
}

.cs-arch-svg .l-name { font-size: 14px; }
.cs-arch-svg .l-note { font-size: 11.5px; font-weight: 400; }
.cs-arch-svg .l-en   { font-size: 11px; opacity: 0.85; }

.cs-arch-notes {
  flex: 1 1 44%;
  min-width: 0;
  display: grid;
  gap: 14px;
}

.cs-arch-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ent-line-dark);
  border-radius: var(--ent-radius);
  padding: 20px;
}

.cs-arch-note i {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ent-cyan);
  background: rgba(56, 189, 248, 0.12);
}

.cs-arch-note h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.5;
}

.cs-arch-note p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ent-on-dark-2);
  margin: 0;
}

/* =============================================================
   9. الستاك التقني بأسبابه
   ============================================================= */

.cs-stack-group + .cs-stack-group {
  margin-top: var(--ent-s4);
}

.cs-stack-group > h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ent-ink);
  margin: 0 0 var(--ent-s2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ent-line);
}

.cs-stack-group > h3 span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ent-muted);
  direction: ltr;
}

.cs-stack-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ent-s2);
}

.cs-tech {
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: 20px var(--ent-s3);
}

.cs-tech > b {
  display: block;
  direction: ltr;
  text-align: start;
  font-size: 16px;
  font-weight: 800;
  color: var(--ent-brand-deep);
  margin-bottom: 8px;
}

.cs-tech > p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ent-muted);
  margin: 0;
}

/* =============================================================
   10. التحديات الهندسية
   ============================================================= */

.cs-eng-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ent-s2);
}

.cs-eng-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ent-line-dark);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3);
  border-top: 2px solid rgba(56, 189, 248, 0.5);
}

.cs-eng-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.55;
}

.cs-eng-item p {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ent-on-dark-2);
  margin: 0;
}

/* =============================================================
   11. الأثر
   ============================================================= */

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ent-s2);
  margin-bottom: var(--ent-s4);
}

.cs-metric {
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: var(--ent-s3);
  text-align: center;
}

.cs-metric b {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ent-brand-deep);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.cs-metric span {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ent-muted);
  margin-top: 8px;
}

.cs-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-outcomes li {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ent-ink-2);
}

.cs-outcomes li::before {
  content: '\f00c'; /* fa-check */
  font-family: FontAwesome;
  flex: none;
  font-size: 13px;
  color: var(--ent-teal);
  margin-top: 4px;
}

.cs-outcomes li strong {
  color: var(--ent-ink);
  font-weight: 700;
}

.cs-attr {
  margin-top: var(--ent-s3);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ent-muted);
  background: var(--ent-surface-mute);
  border-radius: var(--ent-radius);
  padding: 16px 20px;
}

.cs-attr i {
  color: var(--ent-brand);
  margin-inline-end: 6px;
}

/* =============================================================
   12. الخدمات ذات الصلة
   ============================================================= */

.cs-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ent-s2);
}

.cs-service {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--ent-line);
  border-radius: var(--ent-radius);
  padding: 18px 20px;
  text-decoration: none;
  transition: transform var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease), border-color var(--ent-dur) var(--ent-ease);
}

.cs-service:hover,
.cs-service:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ent-shadow-md);
  border-color: rgba(117, 109, 231, 0.3);
  text-decoration: none;
}

.cs-service i {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
}

.cs-service span {
  font-size: 15px;
  font-weight: 700;
  color: var(--ent-ink);
  line-height: 1.55;
}

/* =============================================================
   13. الوصولية والحركة
   ============================================================= */

.cs-service:focus-visible,
.cs-hero .crumbs a:focus-visible {
  outline: 3px solid var(--ent-cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cs-service:hover {
    transform: none;
  }
}

/* =============================================================
   13.5 العمق والتباين — Depth Layer
   =============================================================
   نفس منطق طبقة العمق في enterprise.css، مطبَّقاً على أصناف .cs-.
   موضعها هنا — قبل استعلامات الوسائط — حتى تبقى تسويات الجوال أخيرة.
   ============================================================= */

/* ---------- خلفية أقسام دراسة الحالة — الشريط المائل ----------
   نفس مفردة القالب المستعملة في الرئيسية: شريط لوني مائل بـ
   ‎skewY(10deg)‎ خلف الأقسام الرمادية، والبقية بيضاء نظيفة.
   راجع §13.1 في enterprise.css للتفصيل وسبب ‎scaleY‎ و‎display:block‎. */
.cs-sec.soft {
  background: transparent;
  position: relative;
  isolation: isolate;
}
.cs-sec.soft::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #f6f9fc;
  transform: skewY(10deg) scaleY(0.9);
  transform-origin: center center;
}

#impact::before{
  content: unset;
}
/* ---------- بطاقة الملخّص ---------- */
.cs-summary {
  background: var(--ent-card-bg);
  box-shadow: var(--ent-card-ring), 0 2px 8px rgba(11, 18, 32, 0.06),
    0 30px 60px -22px rgba(30, 41, 71, 0.3);
  border-color: rgba(200, 210, 226, 0.9);
  position: relative;
  overflow: hidden;
}

/* شريط لوني علوي يربط البطاقة بالهيرو الكحلي فوقها */
.cs-summary::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ent-brand), var(--ent-cyan), var(--ent-teal));
}

.cs-fact > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ent-muted);
}

/* أيقونة الحقل — تُضاف في CaseHero.astro */
.cs-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--ent-brand-deep);
  background: linear-gradient(135deg, rgba(117, 109, 231, 0.16), rgba(56, 189, 248, 0.12));
  box-shadow: inset 0 0 0 1px rgba(117, 109, 231, 0.22);
}

/* ---------- أسطح البطاقات ---------- */
.cs-module,
.cs-tech,
.cs-metric,
.cs-service,
.cs-outcomes li {
  background: var(--ent-card-bg);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  border-color: rgba(200, 210, 226, 0.9);
}

.cs-module:hover,
.cs-service:hover,
.cs-service:focus-visible {
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow-hover);
}

.cs-module,
.cs-metric {
  position: relative;
  overflow: hidden;
  /* سياق تكديس: يُبقي الزخرفة تحت المحتوى — راجع الملاحظة في enterprise.css */
  isolation: isolate;
}

/* زخرفة ركنية نقطية — نفس لغة بطاقات الصفحة الرئيسية */
.cs-module::after,
.cs-metric::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30px;
  inset-inline-start: -30px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  pointer-events: none;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(79, 70, 229, 0.15) 1.5px, transparent 0);
  background-size: 11px 11px;
  transition: transform var(--ent-dur) var(--ent-ease);
}

.cs-module:hover::after {
  transform: scale(1.12);
}

/* ---------- أرقام مفرّغة للمتتاليات ----------
   وحدات الحل وخطوات المنهج متتاليتان مرقّمتان، فالرقم فيهما عنصر
   تصميم لا شارة: كبير مفرّغ يظهر حدّه فقط، فيعطي إيقاعاً للتسلسل. */
.cs-module-no,
.cs-step-no {
  width: auto;
  height: auto;
  min-width: 46px;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 38px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ent-brand);
}

.cs-step-no {
  margin-bottom: 10px;
  color: var(--ent-brand-deep);
}

@supports (-webkit-text-stroke: 1px red) {
  .cs-module-no {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--ent-brand);
  }

  .cs-step-no {
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(79, 70, 229, 0.75);
  }
}

/* البطاقة عند المرور تملأ الرقم لوناً — إشارة تفاعل بلا حركة */
.cs-module:hover .cs-module-no {
  color: rgba(117, 109, 231, 0.16);
}

/* ---------- خطوات المنهج ---------- */
.cs-step {
  background: var(--ent-card-bg);
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  border-color: rgba(200, 210, 226, 0.9);
}

/* أيقونة المرحلة إلى جانب الرقم المفرّغ — تُضاف في CaseApproach.astro */
.cs-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.cs-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 8px 18px -6px rgba(79, 70, 229, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- بطاقات التقنيات ---------- */
.cs-tech {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cs-tech-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 17px;
  color: var(--ent-brand-deep);
  background: linear-gradient(135deg, rgba(117, 109, 231, 0.16), rgba(56, 189, 248, 0.12));
  box-shadow: inset 0 0 0 1px rgba(117, 109, 231, 0.22);
}

/* أيقونة عنوان المجموعة */
.cs-stack-group > h3 {
  gap: 10px;
}

.cs-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 6px 14px -5px rgba(79, 70, 229, 0.5);
}

/* ---------- التحديات الهندسية (كحلي) ---------- */
.cs-eng-item {
  background: var(--ent-card-bg-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--ent-dur) var(--ent-ease),
    box-shadow var(--ent-dur) var(--ent-ease);
}

.cs-eng-item:hover {
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 44px -18px rgba(0, 0, 0, 0.75);
}

.cs-eng-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 18px;
  color: var(--ent-cyan);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(143, 136, 255, 0.14));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
  margin-bottom: 14px;
}

.cs-arch-note i {
  width: 40px;
  height: 40px;
  font-size: 17px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(45, 212, 191, 0.14));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
}

/* ---------- الأثر ---------- */
.cs-metric {
  padding-top: var(--ent-s3);
}

.cs-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--ent-brand), var(--ent-brand-deep));
  box-shadow: 0 10px 22px -7px rgba(79, 70, 229, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  margin-bottom: 12px;
}

/* الرقم بتدرّج لوني — يجعله بؤرة البطاقة دون تكبير مفرط */
.cs-metric b {
  background: linear-gradient(135deg, var(--ent-brand-deep), var(--ent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .cs-metric b {
    color: transparent;
  }
}

.cs-outcomes li::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: 1px;
  color: #0f766e;
  background: rgba(45, 212, 191, 0.16);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.24);
}

/* ---------- قبل / بعد ---------- */
.cs-ba {
  box-shadow: var(--ent-card-ring), var(--ent-card-shadow);
  border-color: rgba(200, 210, 226, 0.9);
}

.cs-ba-col.before {
  background: linear-gradient(180deg, #fdf6f6 0%, #fbeeee 100%);
}

.cs-ba-col.after {
  background: linear-gradient(180deg, #f2fbf9 0%, #e9f7f4 100%);
}

.cs-ba-col > h3 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
}

.cs-ba-col.before > h3 i {
  color: #fff;
  background: #b4504f;
}

.cs-ba-col.after > h3 i {
  color: #fff;
  background: #0f766e;
}

.cs-ba-arrow {
  background: linear-gradient(180deg, #ffffff, #f7f9fd);
  color: var(--ent-brand-deep);
  font-size: 22px;
}

/* ---------- الخدمات ---------- */
.cs-service i {
  box-shadow: 0 9px 20px -6px rgba(79, 70, 229, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* =============================================================
   14. الاستجابة
   ============================================================= */

@media (max-width: 1199px) {
  h1.cs-title { font-size: 36px; }
  .cs-approach { grid-template-columns: repeat(3, 1fr); }
  .cs-step:not(:last-child)::after { display: none; }
}

@media (max-width: 991px) {
  .cs-hero-grid,
  .cs-arch-grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ent-s3);
  }

  .cs-hero-copy,
  .cs-hero-side,
  .cs-arch-diagram,
  .cs-arch-notes {
    flex: 1 1 100%;
    width: 100%;
  }

  h1.cs-title {
    font-size: 32px;
    max-width: none;
  }

  .cs-summary { grid-template-columns: repeat(2, 1fr); }
  .cs-summary-wrap { margin-top: -34px; }
  h2.cs-h2 { font-size: 27px; }
}

@media (max-width: 767px) {
  .cs-hero {
    padding-top: 20px;
    padding-bottom: 54px;
  }

  h1.cs-title {
    font-size: 25px;
    line-height: 1.5;
  }

  .cs-hero-lead { font-size: 15.5px; }
  h2.cs-h2 { font-size: 22px; }
  .cs-sec-lead,
  .cs-challenge-body p { font-size: 15.5px; }
  .cs-challenge-body p:first-of-type { font-size: 16.5px; }
  .cs-overview { font-size: 16.5px; }

  .cs-summary {
    grid-template-columns: 1fr;
    padding: var(--ent-s3);
    gap: 20px;
  }

  .cs-summary-wrap {
    margin-top: -26px;
    margin-bottom: var(--ent-s5);
  }

  .cs-approach { grid-template-columns: 1fr; }
  .cs-modules,
  .cs-stack-list,
  .cs-eng-list,
  .cs-outcomes { grid-template-columns: 1fr; }

  .cs-metrics { grid-template-columns: repeat(2, 1fr); }
  .cs-metric b { font-size: 26px; }

  /* المقارنة تنقلب إلى كتلتين فوق بعضهما، والسهم يصير أفقياً بينهما */
  .cs-ba {
    grid-template-columns: 1fr;
  }

  .cs-ba-arrow {
    width: auto;
    height: 44px;
    border-inline: 0;
    border-block: 1px solid var(--ent-line);
    transform: rotate(-90deg);
  }

  .cs-module,
  .cs-eng-item,
  .cs-tech,
  .cs-arch-note { padding: 20px; }

  /* الزخرفة الركنية تصغر مع البطاقة، والرقم المفرّغ يترك مساحة أكبر للعنوان */
  .cs-module::after,
  .cs-metric::after {
    width: 84px;
    height: 84px;
    top: -22px;
    inset-inline-start: -22px;
  }

  .cs-module-no,
  .cs-step-no { font-size: 32px; min-width: 38px; }

  .cs-arch-diagram { padding: 16px 12px; }

  /* ---------- المخطّط على الجوال ----------
     عرض المخطّط يهبط إلى نحو 290px، أي 0.63 من مقاسه، فيصبح نصّ 11.5px
     عند 7px — دون القراءة. ورفع الحجم وحده لا يكفي: عرض مستطيلات الرقاقات
     يُحسب في المكوّن على أساس الحجم الأصلي، فيخرج النصّ المكبَّر عن إطاره.

     فنبدّل التركيب بدل أن نكبّره: تختفي الرقاقات والتسميات اللاتينية،
     ويبقى اسم الطبقة كبيراً مقروءاً. لا تضيع معلومة — محتوى الرقاقات
     معروض كاملاً في قسم التقنيات والأنظمة المرتبطة أسفل الصفحة مباشرة،
     والطبقات نفسها تبقى مختلفة من مشروع لآخر. */
  .cs-arch-svg g > g,
  .cs-arch-svg .l-en {
    display: none;
  }

  .cs-arch-svg .l-name { font-size: 24px; }
  .cs-arch-svg .l-note { font-size: 19px; }

  /* روابط فتات الخبز ارتفاعها 24px — دون حدّ اللمس الموصى به */
  .cs-hero .crumbs a {
    display: inline-block;
    padding-block: 10px;
    min-height: 44px;
    line-height: 24px;
  }
}