/* ============================================================
   hero.css — القسم الرئيسي (Hero)

   المحتويات:
   1. Hero Container — الحاوية الرئيسية
   2. Hero Left — جانب النص
   3. Eyebrow — النص الصغير فوق العنوان
   4. Hero Title — العنوان الرئيسي
   5. Hero Desc & Buttons — الوصف والأزرار
   6. Hero Stats — الإحصائيات
   7. Hero Right (Visual) — الجانب البصري
   8. Grid Background — شبكة الخلفية
   9. Hero Cards — البطاقات العائمة
   10. Scroll Indicator — مؤشر التمرير
   11. Responsive — الجوال
============================================================ */


/* ============================================================
   1. Hero Container — الحاوية الرئيسية
   
   نستخدم Grid لتقسيم الصفحة لعمودين:
   - يسار: النص والأزرار
   - يمين: البطاقات البصرية
============================================================ */
#hero {
  display:   grid;
  grid-template-columns: 1fr 1fr;   /* عمودان متساويان */
  min-height: calc(100vh - var(--nav-height));  /* طول الشاشة ناقص الـ Nav */
  margin-top: var(--nav-height);    /* هامش علوي بحجم الـ Nav الثابت */
  position:   relative;
  overflow:   hidden;
}


/* ============================================================
   2. Hero Left — جانب النص
============================================================ */
.hero-content {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        80px 48px 60px;
  position:       relative;
  z-index:        2;
}


/* ============================================================
   3. Eyebrow — النص الصغير الذهبي فوق العنوان
============================================================ */
.hero-eyebrow {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 28px;

  /* ظهور متأخر عند تحميل الصفحة */
  animation: fade-up 0.8s ease both;
}

.hero-eyebrow span:last-child {
  font-size:      var(--fs-xs);
  letter-spacing: 4px;
  color:          var(--color-gold);
  text-transform: uppercase;
  font-weight:    500;
}


/* ============================================================
   4. Hero Title — العنوان الرئيسي
============================================================ */
.hero-title {
  font-family: var(--font-display);
  font-size:   var(--fs-hero);    /* clamp(44px, 5.5vw, 76px) */
  font-weight: 300;
  line-height: 1.05;
  color:       var(--text-primary);
  margin-bottom: 10px;

  animation: fade-up 0.8s 0.1s ease both;  /* تأخير 0.1s */
}

/* الجزء المائل الذهبي */
.hero-title em {
  font-style: italic;
  color:      var(--color-gold);
}

/* السطر الثانوي الإنجليزي تحت العنوان */
.hero-subtitle {
  font-family:   var(--font-display);
  font-size:     clamp(18px, 2.2vw, 32px);
  font-weight:   300;
  font-style:    italic;
  color:         var(--text-muted);
  margin-bottom: 24px;
  line-height:   1.2;

  animation: fade-up 0.8s 0.2s ease both;
}


/* ============================================================
   5. Hero Desc & Buttons — الوصف والأزرار
============================================================ */
.hero-desc {
  font-size:     var(--fs-base);
  line-height:   1.85;
  color:         var(--text-muted);
  font-weight:   300;
  max-width:     420px;
  margin-bottom: var(--space-lg);

  animation: fade-up 0.8s 0.3s ease both;
}

.hero-buttons {
  display:       flex;
  gap:           var(--space-sm);
  margin-bottom: var(--space-xl);
  flex-wrap:     wrap;   /* على الجوال تنزل لسطر ثانٍ */

  animation: fade-up 0.8s 0.4s ease both;
}

/* الزر الأساسي في Hero أكبر قليلاً من الزر العادي */
.hero-buttons .btn-primary {
  padding: 14px 32px;
  font-size: var(--fs-base);
}

.hero-buttons .btn-secondary {
  padding: 14px 32px;
  font-size: var(--fs-base);
}


/* ============================================================
   6. Hero Stats — الإحصائيات الثلاث
============================================================ */
.hero-stats {
  display:       flex;
  gap:           var(--space-xl);
  padding-top:   var(--space-md);
  border-top:    0.5px solid var(--border-gold);

  animation: fade-up 0.8s 0.5s ease both;
}

.stat {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

/* الرقم الكبير */
.stat-number {
  font-family: var(--font-display);
  font-size:   clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  color:       var(--color-gold);
  line-height: 1;
}

/* الوصف تحت الرقم */
.stat-label {
  font-size:      var(--fs-xs);
  color:          var(--text-muted);
  letter-spacing: 0.5px;
}


/* ============================================================
   7. Hero Right (Visual) — الجانب البصري
============================================================ */
.hero-visual {
  position:   relative;
  overflow:   hidden;
  background: var(--bg-dark);
}

/* تدرج من اليسار يندمج مع خلفية اليسار (تأثير التلاشي) */
.hero-visual::before {
  content:  '';
  position: absolute;
  top:      0;
  right:    0;          /* RTL: من اليمين */
  bottom:   0;
  width:    100px;
  background: linear-gradient(
    to left,
    transparent,
    var(--bg-darkest)   /* نفس لون خلفية Hero اليسار */
  );
  z-index: 2;
  pointer-events: none;
}

/* ضوء أخضر خفي في المنتصف */
.hero-visual::after {
  content:       '';
  position:      absolute;
  top:           30%;
  left:          20%;
  width:         300px;
  height:        300px;
  border-radius: 50%;
  background:    radial-gradient(
    circle,
    rgba(26, 92, 58, 0.15),
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}


/* ============================================================
   8. Grid Background — شبكة الخلفية المتحركة
============================================================ */
.hero-grid-bg {
  position: absolute;
  inset:    0;          /* يملأ كل الحاوية */
  z-index:  0;

  background-image:
    linear-gradient(rgba(26, 92, 58, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 92, 58, 0.07) 1px, transparent 1px);
  background-size: 52px 52px;

  /* حركة بطيئة مستمرة */
  animation: grid-drift 25s linear infinite;
}

@keyframes grid-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(52px, 52px); }
}

/* الشعار كعلامة مائية شفافة في الخلفية */
.hero-logo-watermark {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  width:      260px;
  height:     auto;
  opacity:    0.04;      /* شفاف جداً */
  filter:     grayscale(1);
  z-index:    1;
  pointer-events: none;
  user-select:    none;
}


/* ============================================================
   9. Hero Cards — البطاقات العائمة
============================================================ */
.hero-cards {
  position:        absolute;
  inset:           0;
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;   /* RTL: من اليسار */
  padding:         40px 36px;
  gap:             20px;
}

/* البطاقة الواحدة */
.hero-card {
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  width:           210px;
  padding:         18px 22px;

  background:      rgba(8, 14, 11, 0.88);
  border:          0.5px solid var(--border-gold);
  border-right:    2px solid var(--color-green);   /* RTL: حد أيمن أخضر */

  /* تأثير زجاج */
  backdrop-filter: blur(10px);

  /* حركة الطفو */
  animation: gentle-float 6s ease-in-out infinite;
}

/* تأخير مختلف لكل بطاقة */
.hero-card:nth-child(1) { animation-delay: 0s;   }
.hero-card:nth-child(2) { animation-delay: 2s;   }
.hero-card:nth-child(3) { animation-delay: 4s;   }

.hero-card:hover {
  border-color:  var(--color-gold);
  border-right-color: var(--color-gold);
  transform:     translateY(-4px);
  transition:    border-color 0.3s ease, transform 0.3s ease;

  /* إيقاف حركة الطفو عند التحويم */
  animation-play-state: paused;
}

/* الأيقونة */
.card-icon {
  font-size:    20px;
  line-height:  1;
}

/* الاسم العربي */
.card-title {
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1.3;
}

/* الاسم الإنجليزي */
.card-sub {
  font-size:      10px;
  color:          var(--color-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* ============================================================
   10. Scroll Indicator — مؤشر التمرير
   السهم الصغير في أسفل Hero يدل على التمرير للأسفل
============================================================ */
.scroll-indicator {
  position: absolute;
  bottom:   36px;
  right:    48px;    /* RTL */
  z-index:  4;

  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}

.scroll-indicator-line {
  width:      1px;
  height:     56px;
  background: linear-gradient(
    to bottom,
    var(--color-gold),
    transparent
  );
  animation: scroll-line 2.2s ease-in-out infinite;
}

.scroll-indicator-text {
  font-size:      9px;
  letter-spacing: 3px;
  color:          var(--text-muted);
  text-transform: uppercase;
  writing-mode:   vertical-rl;   /* نص عمودي */
  transform:      rotate(180deg);
}


/* ============================================================
   11. Responsive — الجوال
============================================================ */
@media (max-width: 900px) {

  /* من عمودين إلى عمود واحد */
  #hero {
    grid-template-columns: 1fr;
    min-height:            auto;
  }

  /* الجانب النصي */
  .hero-content {
    padding:    60px var(--space-md) var(--space-lg);
    text-align: center;
    align-items: center;
  }

  .hero-eyebrow {
    justify-content: center;
  }

  .hero-desc {
    max-width: 100%;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    gap:             var(--space-lg);
  }

  /* الجانب البصري — أصغر على الجوال */
  .hero-visual {
    height:    320px;
    min-height: unset;
  }

  /* البطاقات أصغر */
  .hero-card {
    width: 160px;
    padding: 14px 16px;
  }

  /* إخفاء مؤشر التمرير */
  .scroll-indicator {
    display: none;
  }
}

@media (max-width: 480px) {

  .hero-content {
    padding: 40px var(--space-sm) var(--space-md);
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    text-align: center;
  }

  .hero-stats {
    gap: var(--space-md);
  }
}