/* ============================================================
   services-index.css — صفحة الخدمات الرئيسية
============================================================ */

/* ─── Hero ─── */
.services-hero {
  position: relative;
  overflow: hidden;
}

.services-hero-bg {
  position:   absolute;
  inset:      0;
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(201,160,48,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,105,20,0.12) 0%, transparent 50%);
  pointer-events: none;
}

/* ─── شريط الإحصائيات ─── */
.stats-bar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  background:      var(--bg-card);
  border-top:      0.5px solid var(--border-gold);
  border-bottom:   0.5px solid var(--border-gold);
  padding:         var(--space-lg) var(--space-xl);
  flex-wrap:       wrap;
}

.stat-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding:        0 var(--space-xl);
}

.stat-num {
  font-family:    var(--font-display);
  font-size:      clamp(32px, 4vw, 52px);
  font-weight:    300;
  color:          var(--color-gold);
  line-height:    1;
  letter-spacing: -1px;
}

.stat-label {
  font-size:      var(--fs-xs);
  letter-spacing: 2px;
  color:          var(--text-muted);
  text-transform: uppercase;
}

.stat-divider {
  width:      0.5px;
  height:     60px;
  background: var(--border-gold);
  flex-shrink: 0;
}

/* ─── Services Main Section ─── */
#services-main {
  max-width: 1280px;
  margin:    0 auto;
  padding:   var(--space-2xl) var(--space-xl);
}

/* ─── Service Block ─── */
.service-block {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           0;
  margin-bottom: var(--space-2xl);
  border:        0.5px solid var(--border-gold);
  overflow:      hidden;
  transition:    border-color 0.4s ease, box-shadow 0.4s ease;
  position:      relative;
}

.service-block:hover {
  border-color: var(--color-gold);
  box-shadow:   0 20px 60px rgba(201,160,48,0.08);
}

/* تبديل الترتيب للمحتوى الفردي */
.service-block-reverse {
  direction: ltr;  /* نعكس RTL للبلوك */
}

.service-block-reverse .service-block-content {
  direction: rtl;  /* نعيد RTL للمحتوى */
}

/* صورة الخدمة */
.service-block-img {
  position:   relative;
  overflow:   hidden;
  min-height: 420px;
}

.service-block-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  position:   absolute;
  inset:      0;
  transition: transform 0.6s ease;
  filter:     brightness(0.75) saturate(0.9);
}

.service-block:hover .service-block-img img {
  transform: scale(1.04);
  filter:    brightness(0.85) saturate(1);
}

/* الرقم الكبير فوق الصورة */
.service-block-num {
  position:    absolute;
  bottom:      var(--space-md);
  right:       var(--space-md);
  font-family: var(--font-display);
  font-size:   80px;
  font-weight: 300;
  color:       rgba(201,160,48,0.25);
  line-height: 1;
  z-index:     2;
  pointer-events: none;
  letter-spacing: -3px;
}

/* محتوى الخدمة */
.service-block-content {
  padding:        var(--space-xl);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            var(--space-md);
  background:     var(--bg-mid);
  transition:     background 0.3s ease;
}

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

.service-block-icon {
  font-size:    42px;
  line-height:  1;
  margin-bottom: 4px;
}

.service-block-title {
  font-size:   clamp(26px, 3vw, 40px);
  font-weight: 300;
  color:       var(--text-primary);
  line-height: 1.1;
  margin:      0;
}

.service-block-desc {
  font-size:   var(--fs-base);
  color:       var(--text-muted);
  line-height: 1.8;
  margin:      0;
}

/* قائمة المميزات */
.service-features {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  list-style:     none;
  padding:        0;
  margin:         0;
}

.service-features li {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
}

.service-features li::before {
  content:          '';
  width:            6px;
  height:           6px;
  background:       var(--color-gold);
  border-radius:    50%;
  flex-shrink:      0;
}

/* زر الخدمة */
.service-block-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  font-size:       var(--fs-sm);
  color:           var(--color-gold);
  letter-spacing:  1px;
  font-weight:     500;
  transition:      gap 0.3s ease, opacity 0.2s ease;
  align-self:      flex-start;
  margin-top:      auto;
}

.service-block-btn:hover {
  gap:     18px;
  opacity: 0.8;
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.service-block-btn:hover .btn-arrow {
  transform: translateX(-4px);
}

/* ─── قسم الأعمال ─── */
#our-works {
  background:  var(--bg-dark);
  padding:     var(--space-2xl) var(--space-xl);
  border-top:  0.5px solid var(--border-gold);
}

.works-header {
  max-width:     860px;
  margin:        0 auto var(--space-2xl);
  text-align:    center;
}

.works-header .section-eyebrow {
  justify-content: center;
}

.works-header .section-title {
  font-size: clamp(28px, 3.5vw, 48px);
  margin-bottom: var(--space-md);
}

.works-header .section-desc {
  font-size:  var(--fs-base);
  text-align: center;
}

/* شبكة الأعمال */
.works-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(2, 260px);
  gap:                   12px;
  max-width:             1200px;
  margin:                0 auto;
}

.work-card {
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
}

/* البطاقة الأولى أكبر */
.work-card:first-child {
  grid-row: span 2;
}

.work-card img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter:     brightness(0.65) saturate(0.8);
}

.work-card:hover img {
  transform: scale(1.06);
  filter:    brightness(0.5) saturate(0.7);
}

.work-overlay {
  position:   absolute;
  inset:      0;
  display:    flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:    var(--space-md);
  background: linear-gradient(to top, rgba(26,18,8,0.85) 0%, transparent 60%);
  opacity:    0;
  transition: opacity 0.35s ease;
}

.work-card:hover .work-overlay {
  opacity: 1;
}

.work-tag {
  display:        inline-block;
  background:     var(--color-gold);
  color:          var(--bg-darkest);
  font-size:      var(--fs-xs);
  font-weight:    700;
  padding:        3px 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  8px;
  align-self:     flex-start;
}

.work-overlay p {
  font-size:   var(--fs-sm);
  color:       var(--text-primary);
  line-height: 1.5;
  margin:      0;
}

/* ─── CTA Section ─── */
#services-cta {
  background:  var(--bg-darkest);
  padding:     var(--space-2xl) var(--space-xl);
  text-align:  center;
  border-top:  0.5px solid var(--border-gold);
  position:    relative;
  overflow:    hidden;
}

.services-cta-inner {
  position:  relative;
  z-index:   2;
  max-width: 700px;
  margin:    0 auto;
}

.cta-deco {
  position:    absolute;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -50%);
  font-family: var(--font-display);
  font-size:   clamp(100px, 18vw, 220px);
  font-weight: 300;
  color:       rgba(201,160,48,0.04);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -5px;
  z-index:     1;
}

.cta-title {
  font-size:     clamp(28px, 4vw, 52px);
  font-weight:   300;
  color:         var(--text-primary);
  margin-bottom: var(--space-md);
  position:      relative;
  z-index:       2;
}

.cta-desc {
  font-size:     var(--fs-base);
  color:         var(--text-muted);
  line-height:   1.8;
  margin-bottom: var(--space-xl);
  position:      relative;
  z-index:       2;
}

.cta-btns {
  display:         flex;
  gap:             var(--space-md);
  justify-content: center;
  flex-wrap:       wrap;
  position:        relative;
  z-index:         2;
}

/* ─── Active Nav Link ─── */
.active-nav {
  color: var(--color-gold) !important;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .service-block,
  .service-block-reverse {
    grid-template-columns: 1fr;
    direction: rtl;
  }
  .service-block-img {
    min-height: 300px;
  }
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .work-card:first-child {
    grid-row: span 1;
  }
  .work-overlay {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  #services-main {
    padding: var(--space-xl) var(--space-md);
  }
  #our-works {
    padding: var(--space-xl) var(--space-md);
  }
  #services-cta {
    padding: var(--space-xl) var(--space-md);
  }
  .stats-bar {
    padding: var(--space-md);
    gap:     var(--space-sm);
  }
  .stat-divider {
    display: none;
  }
  .stat-item {
    padding: var(--space-xs) var(--space-md);
  }
  .works-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 220px);
  }
  .service-block-content {
    padding: var(--space-lg) var(--space-md);
  }
}