/* ============================================================
   sections.css — أقسام الصفحة الداخلية

   المحتويات:
   1. Services — قسم الخدمات
   2. Why Us — قسم لماذا آفاق
   3. Testimonials — قسم آراء العملاء
   4. CTA Banner — قسم الحجز
   5. Responsive — الجوال
============================================================ */


/* ============================================================
   1. SERVICES — قسم الخدمات
============================================================ */
#services {
  padding:    var(--space-2xl) 48px;
  background: var(--bg-dark);
}

/* شبكة الخدمات — 3 أعمدة */
.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;   /* فراغ صغير جداً بين البطاقات */
}

/* البطاقة الواحدة */
.service-card {
  display:        flex;
  flex-direction: column;
  padding:        40px 30px 52px;

  background: var(--bg-card);
  border:     1px solid var(--border-light);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);

  position:   relative;
  overflow:   hidden;
  cursor:     pointer;

  transition: background 0.35s ease;
}

.service-card:hover {
  background: var(--bg-mid);
}

/* الخط السفلي المتدرج — يظهر عند التحويم */
.service-card::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  right:      0;
  left:       0;
  height:     2px;
  background: linear-gradient(
    to left,
    var(--color-gold),
    var(--color-green)
  );
  transform:        scaleX(0);
  transform-origin: right;      /* RTL */
  transition:       transform 0.35s ease;
}

.service-card:hover::after {
  transform: scaleX(1);
}

/* الرقم الكبير الشفاف خلف المحتوى */
.service-num {
  font-family: var(--font-display);
  font-size:   56px;
  font-weight: 300;
  color:       rgba(26, 92, 58, 0.10);
  line-height: 1;
  margin-bottom: 16px;
  transition:  color 0.35s ease;
  user-select: none;
}

.service-card:hover .service-num {
  color: rgba(201, 168, 76, 0.12);
}

/* الأيقونة */
.service-icon {
  font-size:     28px;
  margin-bottom: 14px;
  line-height:   1;
}

/* الاسم العربي */
.service-title {
  font-size:     var(--fs-md);
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 4px;
  font-family:   var(--font-arabic);
}

/* الاسم الإنجليزي */
.service-title-en {
  font-size:      var(--fs-xs);
  color:          var(--color-gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom:  14px;
}

/* الوصف */
.service-desc {
  font-size:   var(--fs-sm);
  line-height: 1.75;
  color:       var(--text-muted);
  font-weight: 300;
  flex-grow:   1;   /* يملأ المساحة المتبقية */
}

/* رابط اقرأ أكثر */
.service-link {
  display:        inline-block;
  margin-top:     var(--space-md);
  font-size:      var(--fs-xs);
  letter-spacing: 1px;
  color:          var(--color-gold);
  text-transform: uppercase;
  opacity:        0;
  transform:      translateY(6px);
  transition:     opacity 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-link {
  opacity:   1;
  transform: translateY(0);
}

/* البطاقة السادسة — بطاقة CTA */
.service-cta-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         40px 28px;

  background: linear-gradient(
    135deg,
    rgba(26, 92, 58, 0.10),
    rgba(201, 168, 76, 0.04)
  );
  border: 0.5px solid var(--border-gold);

  /* إلغاء الـ hover العادي لهذه البطاقة */
  cursor: default;
}

/* إخفاء الخط السفلي لبطاقة CTA */
.service-cta-card::after {
  display: none;
}

/* الرمز الكبير ✦ */
.service-cta-icon {
  font-family:   var(--font-display);
  font-size:     44px;
  color:         var(--color-gold);
  line-height:   1;
  margin-bottom: 14px;
  display:       block;
}

.service-cta-card h3 {
  font-family:   var(--font-arabic);
  font-size:     var(--fs-md);
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 10px;
}

.service-cta-card p {
  font-size:     var(--fs-sm);
  color:         var(--text-muted);
  line-height:   1.7;
  margin-bottom: var(--space-md);
}


/* ============================================================
   2. WHY US — قسم لماذا آفاق؟
============================================================ */
#why-us {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         64px;
  align-items: center;
  padding:     var(--space-2xl) 48px;
  background:  var(--bg-mid);
}

/* الجانب البصري الأيسر */
.why-visual {
  position:        relative;
  height:          440px;
  background:      var(--bg-card);
  border:          1px solid var(--border-green);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  padding:         var(--space-lg);
}

/* زوايا ذهبية ديكورية */
.why-corners {
  position:       absolute;
  inset:          0;
  pointer-events: none;
}

.corner {
  position:     absolute;
  width:         44px;
  height:        44px;
  border-color:  var(--color-gold);
  border-style:  solid;
  opacity:       0.5;
}

/* الزاوية العلوية اليمنى (RTL) */
.corner-tr {
  top:   14px;
  right: 14px;
  border-width: 1px 1px 0 0;
}

/* الزاوية السفلية اليسرى (RTL) */
.corner-bl {
  bottom: 14px;
  left:   14px;
  border-width: 0 0 1px 1px;
}

/* الشعار داخل القسم */
.why-logo {
  width:         150px;
  height:        auto;
  margin-bottom: 20px;
  opacity:       0.85;
  transition:    opacity 0.3s ease, transform 0.3s ease;
}

.why-logo:hover {
  opacity:   1;
  transform: scale(1.04);
}

/* نص اللغات */
.why-langs-label {
  font-size:      var(--fs-xs);
  letter-spacing: 3px;
  color:          var(--text-muted);
  text-transform: uppercase;
  margin-bottom:  16px;
}

/* شارات اللغات */
.why-langs {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  justify-content: center;
}

.why-langs span {
  font-size:   12px;
  color:       var(--color-gold);
  border:      0.5px solid var(--border-gold);
  padding:     4px 14px;
  background:  rgba(201, 168, 76, 0.04);
  transition:  background 0.2s ease, border-color 0.2s ease;
}

.why-langs span:hover {
  background:   rgba(201, 168, 76, 0.10);
  border-color: var(--color-gold);
}

/* الرقم الكبير في الخلفية */
.why-visual::before {
  content:     '5';
  position:    absolute;
  top:         -20px;
  left:        -10px;

  font-family: var(--font-display);
  font-size:   200px;
  font-weight: 300;
  color:       rgba(201, 168, 76, 0.04);
  line-height: 1;

  pointer-events: none;
  user-select:    none;
}

/* محتوى الجانب اليمين */
.why-content {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.why-content .section-title {
  margin-bottom: var(--space-xl);
}

/* قائمة المميزات */
.features-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* الميزة الواحدة */
.feature {
  display:       flex;
  gap:           20px;
  align-items:   flex-start;
  padding-bottom: 26px;
  margin-bottom:  26px;
  border-bottom:  0.5px solid rgba(26, 92, 58, 0.3);
  transition:     border-color 0.3s ease;
}

.feature:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom:  0;
}

.feature:hover {
  border-bottom-color: var(--border-gold);
}

/* الرقم الأخضر */
.feature-num {
  font-family: var(--font-display);
  font-size:   34px;
  font-weight: 600;
  color:       var(--color-green-light);
  line-height: 1;
  min-width:   38px;
  flex-shrink: 0;
  transition:  color 0.3s ease;
}

.feature:hover .feature-num {
  color: var(--color-gold);
}

/* عنوان الميزة */
.feature h4 {
  font-family:   var(--font-arabic);
  font-size:     var(--fs-base);
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 6px;
}

/* وصف الميزة */
.feature p {
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: 1.75;
  font-weight: 300;
}


/* ============================================================
   3. TESTIMONIALS — قسم آراء العملاء
============================================================ */
#testimonials {
  padding:    var(--space-2xl) 48px;
  background: var(--bg-dark);
}

/* شبكة البطاقات — 3 أعمدة */
.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-md);
  margin-top:            var(--space-xl);
}

/* البطاقة */
.testimonial-card {
  display:        flex;
  flex-direction: column;
  padding:        32px 28px;

  background:  var(--bg-dark);
  border:      0.5px solid var(--border-gold);
  border-top:  2px solid var(--color-green);   /* حد أعلى أخضر مميز */

  transition:  transform 0.35s ease, border-top-color 0.35s ease;
}

.testimonial-card:hover {
  transform:        translateY(-6px);
  border-top-color: var(--color-gold);
}

/* البطاقة الوسطى — مرفوعة قليلاً */
.testimonial-offset {
  transform: translateY(20px);
}

.testimonial-offset:hover {
  transform: translateY(14px);
}

/* علامة الاقتباس " */
.quote-mark {
  display:     block;
  font-family: var(--font-display);
  font-size:   72px;
  color:       var(--color-gold);
  opacity:     0.28;
  line-height: 0.7;
  margin-bottom: 20px;
}

/* نص الشهادة */
.testimonial-card p {
  font-size:   var(--fs-sm);
  line-height: 1.85;
  color:       var(--text-muted);
  font-style:  italic;
  font-weight: 300;
  flex-grow:   1;
  margin-bottom: var(--space-md);
}

/* معلومات صاحب الشهادة */
.testimonial-author {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* الصورة / الأيقونة */
.author-avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--bg-card);
  border:          1px solid var(--border-green);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  flex-shrink:     0;
}

/* الاسم */
.testimonial-author strong {
  display:     block;
  font-size:   var(--fs-sm);
  font-weight: 700;
  color:       var(--text-primary);
  margin-bottom: 2px;
}

/* البلد */
.testimonial-author span {
  display:        block;
  font-size:      10px;
  color:          var(--color-gold);
  letter-spacing: 1px;
}


/* ============================================================
   4. CTA BANNER — قسم الحجز
============================================================ */
#cta-banner {
  padding:     var(--space-2xl) 48px;
  background:  var(--section-dark);
  color:       var(--text-on-dark);
  text-align:  center;
  position:    relative;
  overflow:    hidden;
}

/* توهج أخضر في المنتصف */
.cta-glow {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  width:          600px;
  height:         600px;
  border-radius:  50%;
  background:     radial-gradient(
    circle,
    rgba(26, 92, 58, 0.08),
    transparent 65%
  );
  pointer-events: none;
}

/* دوائر ديكورية */
#cta-banner::before,
#cta-banner::after {
  content:       '';
  position:      absolute;
  border-radius: 50%;
  border:        0.5px solid var(--border-gold);
  pointer-events: none;
}

#cta-banner::before {
  width:     500px;
  height:    500px;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  opacity:   0.3;
}

#cta-banner::after {
  width:     280px;
  height:    280px;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  opacity:   0.2;
}

/* العنوان */
#cta-banner h2 {
  font-family:   var(--font-display);
  font-size:     clamp(32px, 4.5vw, 60px);
  font-weight:   300;
  line-height:   1.1;
  margin-bottom: var(--space-sm);
  position:      relative;
  z-index:       1;
}

/* الوصف */
#cta-banner p {
  font-size:    var(--fs-base);
  color:        var(--text-muted);
  line-height:  1.75;
  max-width:    440px;
  margin:       0 auto var(--space-lg);
  position:     relative;
  z-index:      1;
}

/* الأزرار */
.cta-buttons {
  display:         flex;
  gap:             var(--space-sm);
  justify-content: center;
  flex-wrap:       wrap;
  position:        relative;
  z-index:         1;
}

.cta-buttons .btn-primary {
  padding:   14px 36px;
  font-size: var(--fs-base);
}

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


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

  /* الخدمات: من 3 إلى 2 أعمدة */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {

  /* الخدمات */
  #services {
    padding: var(--space-xl) var(--space-md);
  }

  /* Why Us: عمود واحد */
  #why-us {
    grid-template-columns: 1fr;
    gap:                   var(--space-xl);
    padding:               var(--space-xl) var(--space-md);
  }

  .why-visual {
    height: 320px;
  }

  /* Testimonials */
  #testimonials {
    padding: var(--space-xl) var(--space-md);
  }

  /* الشهادات: من 3 إلى 1 عمود */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* إلغاء الإزاحة في الجوال */
  .testimonial-offset {
    transform: none;
  }

  .testimonial-offset:hover {
    transform: translateY(-6px);
  }

  /* CTA */
  #cta-banner {
    padding: var(--space-xl) var(--space-md);
  }
}

@media (max-width: 600px) {

  /* الخدمات: عمود واحد */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }

  .cta-buttons {
    flex-direction: column;
    align-items:    center;
  }

  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary {
    width:      100%;
    max-width:  320px;
    text-align: center;
  }
}