/* ============================================================
   page-hero.css — Hero مشترك لكل الصفحات الداخلية
   يُستخدم في: about, contact, blog, faq, privacy
   وكذلك service-page.css يحتوي نسخته الخاصة
============================================================ */

#page-hero {
  position:        relative;
  min-height:      52vh;
  margin-top:      var(--nav-height);
  background:      var(--section-dark);
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding:         60px 48px 80px;
}

/* شبكة الخلفية */
.page-hero-grid {
  position:         absolute;
  inset:            0;
  background-image:
    linear-gradient(rgba(26,92,58,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,92,58,0.06) 1px, transparent 1px);
  background-size:  52px 52px;
  z-index:          0;
}

/* تدرج سفلي */
#page-hero::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  right:          0;
  left:           0;
  height:         200px;
  background:     linear-gradient(to bottom, transparent, var(--bg-darkest));
  z-index:        1;
  pointer-events: none;
}

/* المحتوى */
.page-hero-content {
  position:  relative;
  z-index:   2;
  max-width: 680px;
}

/* Eyebrow */
.page-hero-eyebrow {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 20px;
  animation:     fade-up 0.7s ease both;
}

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

/* العنوان */
.page-hero-title {
  font-family:   var(--font-display);
  font-size:     clamp(40px, 5vw, 72px);
  font-weight:   300;
  line-height:   1.05;
  margin-bottom: 20px;
  animation:     fade-up 0.7s 0.1s ease both;
}

/* الوصف */
.page-hero-desc {
  font-size:   var(--fs-base);
  color:       var(--text-muted);
  line-height: 1.8;
  font-weight: 300;
  max-width:   560px;
  animation:   fade-up 0.7s 0.2s ease both;
}

/* الكلمة الديكورية */
.page-hero-deco {
  position:       absolute;
  top:            50%;
  left:           48px;
  transform:      translateY(-50%);
  font-family:    var(--font-display);
  font-size:      clamp(80px, 12vw, 160px);
  font-weight:    300;
  color:          rgba(201, 168, 76, 0.04);
  white-space:    nowrap;
  z-index:        0;
  user-select:    none;
  pointer-events: none;
}

/* Breadcrumb */
.breadcrumb {
  position:      relative;
  z-index:       2;
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 32px;
  animation:     fade-up 0.6s ease both;
}

.breadcrumb a {
  font-size:      var(--fs-xs);
  color:          var(--text-muted);
  letter-spacing: 1px;
  transition:     color 0.2s ease;
}

.breadcrumb a:hover       { color: var(--color-gold); }
.breadcrumb-sep           { font-size: var(--fs-xs); color: var(--text-faint); }
.breadcrumb span:last-child {
  font-size:      var(--fs-xs);
  color:          var(--color-gold);
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 900px) {
  #page-hero {
    padding: 48px var(--space-md) 60px;
  }
  .page-hero-deco { display: none; }
}