/* =========================
   Experts Hero Slider — FINAL CSS
   - Image is <img> (NOT background)
   - Centered banner
   - Clean two-column layout (no overlap)
   - Arrows close to the slider
   - Mobile responsive
========================= */

#experts{
  direction: rtl;
  font-family: "Tajawal","Almarai","Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* section spacing */
#experts.najahat-experts{
  padding: 56px 16px;
  background: #fff;
}

#experts .najahat-experts__wrap{
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

#experts .najahat-experts__head{
  text-align:center;
  margin-bottom: 22px;
}

#experts .najahat-experts__title{
  margin:0;
  font-size: 28px;
  font-weight: 900;
  color:#0f172a;
  display:inline-block;
  position:relative;
  padding-bottom: 14px;
}

/* underline */
#experts .najahat-experts__title::after{
  content:"";
  position:absolute;
  right:50%;
  transform: translateX(50%);
  bottom:0;
  width: 116px;
  height: 7px;
  background: #fab519;
  border-radius: 2px;
}

/* ===== HERO WRAPPER ===== */
#experts .experts-hero{
  position: relative;
  max-width: 1120px;      /* وسط + أكبر شوي */
  margin: 60px auto 0;
  border-radius: 18px;
  height: 460px;          /* مهم عشان السلايدات absolute تظهر */
}

/* slides (fade) */
#experts .experts-hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .45s ease;
  pointer-events:none;
}
#experts .experts-hero__slide.is-active{
  opacity:1;
  pointer-events:auto;
}

/* main banner frame */
#experts .experts-hero__frame{
  height: 100%;
  background:#fff;
  border-radius: 18px;
  overflow:hidden;

  display:flex;
  gap: 0;

  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
}

/* image column (right side visually) */
#experts .experts-hero__img{
  flex: 0 0 44%;
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 14px;
  border-left: 1px solid rgba(15,23,42,.06); /* RTL divider */
}

#experts .experts-hero__img img{
  width:100%;
  height:100%;
  object-fit: contain;     /* صورة واضحة بدون قص */
  display:block;
  background:#fff;
}

/* content column */
#experts .experts-hero__content{
  flex:1;
  padding: 26px 26px 22px;
  direction: rtl;
  text-align: right;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;

  background: linear-gradient(135deg, rgba(17,160,154,.10), rgba(250,181,25,.10));
}

/* chip */
#experts .experts-hero__chip{
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(17,160,154,.14);
  border: 1px solid rgba(17,160,154,.22);
  color:#0e8e89;
  font-weight:900;
  font-size: 13px;
}

/* name */
#experts .experts-hero__name{
  font-size: 34px;
  font-weight: 900;
  margin: 0;
  color:#0f172a;
}

/* description */
#experts .experts-hero__desc{
  font-size: 15px;
  line-height: 1.9;
  color:#334155;
  margin: 0;
}

/* meta grid */
#experts .experts-hero__meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  font-weight: 700;
  color:#0f172a;
}

#experts .experts-hero__meta .is-en{
  direction:ltr;
  text-align:left;
  font-weight:600;
  color:#475569;
}

/* footer pill */
#experts .experts-hero__footer{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(17,160,154,.10);
  border: 1px solid rgba(17,160,154,.16);
  color:#0f3d3a;
  font-weight: 800;
  line-height: 1.8;
}

/* arrows close to slider */
#experts .experts-hero__arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(17,160,154,.25);
  background: #11a09a;
  color:#fff;
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
  z-index: 10;
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

#experts .experts-hero__arrow.is-prev{ right: -8px; }
#experts .experts-hero__arrow.is-next{ left: -8px; }

#experts .experts-hero__arrow:hover{ filter: brightness(.97); }
#experts .experts-hero__arrow:active{ transform: translateY(-50%) scale(.98); }

/* ===== Responsive ===== */
@media (max-width: 900px){
  #experts .experts-hero{
    max-width: 94%;
    height: 520px;
  }
  #experts .experts-hero__frame{
    flex-direction: column;
  }
  #experts .experts-hero__img{
    flex: 0 0 auto;
    height: 260px;
    border-left: 0;
    border-bottom: 1px solid rgba(15,23,42,.06);
  }
  #experts .experts-hero__content{
    padding: 16px;
  }
  #experts .experts-hero__name{ font-size: 24px; }
  #experts .experts-hero__meta{ grid-template-columns: 1fr; }
  #experts .experts-hero__arrow.is-prev{ right: 8px; }
  #experts .experts-hero__arrow.is-next{ left: 8px; }
}

@media (max-width: 480px){
  #experts .experts-hero{
    height: 540px;
  }
  #experts .experts-hero__img{ height: 240px; }
}



/* =========================
   Experts Hero Slider — Desktop arrows only + Mobile swipe + Full text
========================= */

#experts{
  direction: rtl;
  font-family: "Tajawal","Almarai","Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

#experts .experts-hero{
  position: relative;
  max-width: 1120px;
  margin: 60px auto 0;
  border-radius: 18px;
  height: 460px;            /* ديسكتوب ثابت */
}

/* Fade slides on desktop */
#experts .experts-hero__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
#experts .experts-hero__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Frame */
#experts .experts-hero__frame{
  height: 100%;
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  display:flex;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
}

/* Image column */
#experts .experts-hero__img{
  flex: 0 0 44%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0; /* مهم عشان الصورة تملأ */
  border-left: 1px solid rgba(15,23,42,.06);
}
#experts .experts-hero__img img{
  width:100%;
  height:100%;
  object-fit: cover;     /* ✅ تملأ الخلفية البيضاء */
  object-position: center;
  display:block;
}

/* Content column */
#experts .experts-hero__content{
  flex:1;
  padding: 26px 26px 22px;
  background: linear-gradient(135deg, rgba(17,160,154,.10), rgba(250,181,25,.10));
  text-align:right;
  direction:rtl;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;
}

#experts .experts-hero__chip{
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(17,160,154,.14);
  border: 1px solid rgba(17,160,154,.22);
  color:#0e8e89;
  font-weight:900;
  font-size: 13px;
}

#experts .experts-hero__name{
  font-size: 34px;
  font-weight: 900;
  margin: 0;
  color:#0f172a;
}

#experts .experts-hero__desc{
  font-size: 15px;
  line-height: 1.9;
  color:#334155;
  margin: 0;
}

#experts .experts-hero__meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  font-weight: 700;
  color:#0f172a;
}
#experts .experts-hero__meta .is-en {
    direction: ltr;
    text-align: left;
    font-weight: 600;
    color: #0f172a;
}

#experts .experts-hero__footer{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(17,160,154,.10);
  border: 1px solid rgba(17,160,154,.16);
  color:#0f3d3a;
  font-weight: 800;
  line-height: 1.8;
}

/* Arrows — desktop only (laptop) */
#experts .experts-hero__arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(17,160,154,.25);
  background: #11a09a;
  color:#fff;
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
  z-index: 10;
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
#experts .experts-hero__arrow.is-prev{ right: -8px; }
#experts .experts-hero__arrow.is-next{ left: -8px; }

/* ✅ الهاتف: بدون أسهم + النص يظهر كامل */
@media (max-width: 900px){
  /* اخفاء الأسهم على الهاتف/تابلت */
  #experts .experts-hero__arrow{ display:none !important; }

  /* نخلي السلايدر ارتفاعه Auto عشان النص ما ينقص */
  #experts .experts-hero{
    max-width: 94%;
    height: auto;          /* ✅ */
  }

  /* بدل absolute/fade: نخلي سلايد واحد يظهر والباقي مخفي */
  #experts .experts-hero__slide{
    position: relative;    /* ✅ */
    inset: auto;
    opacity: 1;
    display:none;          /* ✅ */
    pointer-events:auto;
  }
  #experts .experts-hero__slide.is-active{ display:block; }

  #experts .experts-hero__frame{
    height:auto;
    flex-direction: column;
  }

  #experts .experts-hero__img{
    height: 260px;
    border-left: 0;
    border-bottom: 1px solid rgba(15,23,42,.06);
  }

  #experts .experts-hero__content{
    padding: 16px;
  }

  #experts .experts-hero__name{ font-size: 22px; }
  #experts .experts-hero__meta{ grid-template-columns: 1fr; }
}





/* ===== Mobile: Keep banner horizontal (not stacked) ===== */
@media (max-width: 900px){

  /* لا نخفي الأسهم هنا إذا تبغاها تظهر على اللابتوب فقط
     (الأسهم للهاتف عندك مخفية سابقًا — اتركها) */

  /* خلي السلايدر عريض وأفقي */
  #experts .experts-hero{
    max-width: 96%;
    height: 260px;              /* ارتفاع بنر مناسب للجوال */
  }

  /* رجّع السلايد للوضع العادي (لا نستخدم display:block/none هنا) */
  #experts .experts-hero__slide{
    position:absolute;
    inset:0;
    opacity:0;
    display:block;
    pointer-events:none;
  }
  #experts .experts-hero__slide.is-active{
    opacity:1;
    pointer-events:auto;
  }

  /* بنر أفقي (يمين صورة / يسار محتوى) */
  #experts .experts-hero__frame{
    flex-direction: row;        /* أهم سطر */
    height: 100%;
  }

  /* الصورة أصغر */
  #experts .experts-hero__img{
    flex: 0 0 42%;
    height: 100%;
    border-left: 1px solid rgba(15,23,42,.06);
    border-bottom: 0;
  }

  /* المحتوى أصغر */
  #experts .experts-hero__content{
    padding: 14px 14px 12px;
    gap: 8px;
  }

  #experts .experts-hero__chip{
    padding: 6px 10px;
    font-size: 11.5px;
  }

  #experts .experts-hero__name{
    font-size: 18px;
    line-height: 1.25;
  }

  #experts .experts-hero__desc{
    font-size: 12.5px;
    line-height: 1.6;
  }

  #experts .experts-hero__meta{
    grid-template-columns: 1fr; /* عمود واحد عشان ما يزدحم */
    gap: 6px;
    font-size: 12px;
  }

  #experts .experts-hero__footer{
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ===== Smaller phones (very narrow) ===== */
@media (max-width: 480px){
  #experts .experts-hero{
    height: 240px;
  }
  #experts .experts-hero__img{
    flex: 0 0 44%;
  }
  #experts .experts-hero__name{ font-size: 16.5px; }
  #experts .experts-hero__desc{ font-size: 12px; }
}


@media (max-width: 900px){
  /* تقليل padding العام للمحتوى */
  #experts .experts-hero__content{
    padding: 10px 10px 8px !important;
    gap: 11px !important;
  }

  /* تصغير الشيب */
  #experts .experts-hero__chip{
    padding: 5px 9px !important;
    font-size: 8.5px !important;
    border-radius: 999px !important;
  }

  /* تصغير الاسم */
  #experts .experts-hero__name{
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  /* تصغير الوصف */
  #experts .experts-hero__desc{
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* تصغير الميتا */
  #experts .experts-hero__meta{
    gap: 4px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #experts .experts-hero__meta > div{
    margin: 0 !important;
  }

  /* السطر الإنجليزي أصغر */
  #experts .experts-hero__meta .is-en{
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  /* تصغير الفوتر */
  #experts .experts-hero__footer{
    padding: 6px 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }
}

/* هواتف صغيرة جدًا */
@media (max-width: 480px){
  #experts .experts-hero__content{ padding: 8px !important; }
  #experts .experts-hero__name{ font-size: 15px !important; }
  #experts .experts-hero__desc{ font-size: 11px !important; }
  #experts .experts-hero__meta{ font-size: 10.5px !important; }
  #experts .experts-hero__footer{ font-size: 10.5px !important; }
}


@media (max-width: 900px) {

    #experts .experts-hero__frame {
        flex-direction: row;
        height: 115%;
    }
}

/* ===== Center all texts (all devices) ===== */
#experts .experts-hero__content{
  text-align: center !important;
  align-items: center !important;   /* يوسّط العناصر داخل flex عموديًا */
}

/* توسيط الـ chip */
#experts .experts-hero__chip{
  margin: 0 auto !important;
}

/* توسيط الميتا */
#experts .experts-hero__meta{
  justify-items: center !important;
  text-align: center !important;
}

/* السطر الإنجليزي: يبقى LTR لكن في المنتصف */
#experts .experts-hero__meta .is-en{
  direction: ltr !important;
  text-align: center !important;
}

/* توسيط الفوتر */
#experts .experts-hero__footer{
  text-align: center !important;
  width: 100%;
}


#experts .experts-hero__desc {
    font-size: 16px;
    line-height: 1.9;
    color: #11a09a;
    margin: 0;
    font-weight: bolder;
}

@media (max-width: 480px) {
    #experts .experts-hero {
        height: 301px;
    }
}


#experts.najahat-experts {
    padding: 56px 16px;
    background: #fff;
    padding-bottom: 115px;
}