/* assets/css/pages/about/section-4.css */
/* ABOUT - Section 4 (Company Leadership) */

.lp-aboutLeaders{
  background: #ffffff;
  color: #111;
}

.lp-aboutLeaders__inner{
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--lp-page-pad);
  padding-top: clamp(72px, 7.2vw, 120px);
  padding-bottom: clamp(46px, 6vw, 92px);
  position: relative;
}

/* =========================
   Leadership stage
   ========================= */

.lp-aboutLeaders__stage{
  /*
   * حجم متوسط للكروت والصور على الكمبيوتر.
   */
  --leader-card-width: clamp(280px, 29vw, 360px);
  --gap: clamp(20px, 3vw, 42px);

  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* =========================
   Leadership cards grid
   ========================= */

.lp-aboutLeaders__grid{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;

  /*
   * مهم:
   * عدم استخدام stretch حتى يحتفظ كل كرت
   * بارتفاع صورته الحقيقي بشكل مستقل.
   */
  align-items: flex-start;

  gap: var(--gap);
  width: fit-content;
  max-width: 100%;
  padding: 10px 2px;
  overflow: visible;
}

/* =========================
   Individual leadership card
   ========================= */

.lp-aboutLeaders__grid .lp-sectorCard{
  position: relative;

  flex: 0 0 var(--leader-card-width) !important;
  width: var(--leader-card-width) !important;
  max-width: var(--leader-card-width) !important;

  min-width: 0;
  height: auto !important;

  /*
   * يجعل كل كرت نطاقًا مستقلًا للوحة الخاصة به.
   */
  isolation: isolate;
}

.lp-aboutLeaders__card{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* المحافظة على أبعاد الصورة الأصلية */
.lp-aboutLeaders__card > img{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  margin-inline: auto;
}

/* دعم الصورة إذا كانت داخل picture */
.lp-aboutLeaders__card > picture{
  display: block;
  width: 100%;
  height: auto;
}

.lp-aboutLeaders__card > picture img{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  margin-inline: auto;
}

/* =========================
   Individual leader panel
   ========================= */

.lp-leaderPanel{
  /*
   * اللوحة أصبحت داخل كرت المسؤول.
   * inset: 0 يجعلها تأخذ نفس عرض وارتفاع الكرت فقط.
   */
  position: absolute;
  inset: 0;

  box-sizing: border-box;
  width: 100%;
  height: 100%;

  border-radius: 22px;
  background: var(--lp-about-title);
  color: #fff;

  /*
   * أعلى من الصورة والزر واسم المسؤول.
   */
  z-index: 20;

  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: clamp(18px, 2.3vw, 28px);
  padding-top: calc(clamp(18px, 2.3vw, 28px) + 44px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease;

  box-shadow: 0 20px 45px rgba(0,0,0,.22);
  scroll-margin-top: calc(var(--lp-header-h, 0px) + 14px);

  /*
   * شريط تمرير أنحف داخل اللوحة.
   */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.5) transparent;
}

.lp-leaderPanel::-webkit-scrollbar{
  width: 6px;
}

.lp-leaderPanel::-webkit-scrollbar-track{
  background: transparent;
}

.lp-leaderPanel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.5);
  border-radius: 999px;
}

.lp-leaderPanel:target{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@supports (clip-path: inset(0 0 0 0 round 22px)){
  .lp-leaderPanel{
    clip-path: inset(0 0 100% 0 round 22px);

    transition:
      clip-path .34s ease,
      opacity .2s ease,
      visibility .2s ease,
      transform .25s ease;
  }

  .lp-leaderPanel:target{
    clip-path: inset(0 0 0 0 round 22px);
  }
}

/* =========================
   Close button
   ========================= */

.lp-leaderPanel__close{
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  text-decoration: none;
}

.lp-leaderPanel .lp-iconBtn__stroke{
  border-color: rgba(255,255,255,.9);
}

.lp-leaderPanel .lp-iconBtn__layer{
  background: #ffffff;
}

.lp-leaderPanel .lp-iconBtn__layer i{
  color: var(--lp-about-title);
}

/* =========================
   Panel title
   ========================= */

.lp-leaderPanel__title{
  margin: 0 0 14px;
  color: #fff;
  font-weight: 900;
  line-height: 1.3;
  font-size: clamp(18px, 1.7vw, 24px);
  text-align: center;
}

/* =========================
   Panel message
   ========================= */

.lp-leaderPanel__text{
  margin: 0;
  width: 100%;
  max-width: none;

  color: rgba(255,255,255,.95);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.9;
  font-synthesis: weight style;

  text-align: justify;
  text-justify: inter-word;
  word-spacing: .03em;
  text-align-last: start;
}

html[dir="rtl"] .lp-leaderPanel__text{
  text-align-last: right;
}

.lp-leaderPanel__text > :first-child{
  margin-top: 0;
}

.lp-leaderPanel__text > :last-child{
  margin-bottom: 0;
}

.lp-leaderPanel__text p,
.lp-leaderPanel__text div,
.lp-leaderPanel__text blockquote,
.lp-leaderPanel__text ul,
.lp-leaderPanel__text ol{
  margin: 0 0 1em;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.lp-leaderPanel__text ul,
.lp-leaderPanel__text ol{
  padding-inline-start: 1.35em;
}

.lp-leaderPanel__text li{
  margin-bottom: .35em;
}

.lp-leaderPanel__text h2,
.lp-leaderPanel__text h3{
  color: inherit;
  line-height: 1.45;
  margin: 0 0 .55em;
  font-weight: 800;
}

.lp-leaderPanel__text h2{
  font-size: clamp(18px, 1.8vw, 25px);
}

.lp-leaderPanel__text h3{
  font-size: clamp(17px, 1.6vw, 22px);
}

.lp-leaderPanel__text strong,
.lp-leaderPanel__text b{
  font-weight: 900 !important;
}

.lp-leaderPanel__text em,
.lp-leaderPanel__text i{
  font-style: italic !important;
}

.lp-leaderPanel__text u{
  text-decoration: underline !important;
}

.lp-leaderPanel__text s,
.lp-leaderPanel__text strike{
  text-decoration: line-through !important;
}

.lp-leaderPanel__text a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .16em;
  font-weight: 700;
}

.lp-leaderPanel__text blockquote{
  border: 0;
  padding: 0;
  margin: 0 0 1em;
  opacity: 1;
}

/* =========================
   Signature
   ========================= */

.lp-leaderPanel__sign{
  margin-top: 18px;
  padding-bottom: 4px;

  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-leaderPanel__signRole{
  color: var(--lp-accent);
  font-weight: 800;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

.lp-leaderPanel__signName{
  color: #fff;
  font-weight: 800;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

.lp-leaderPanel__signName > :first-child{
  margin-top: 0;
}

.lp-leaderPanel__signName > :last-child{
  margin-bottom: 0;
}

/* =========================
   Tablet
   ========================= */

@media (max-width: 900px){
  .lp-aboutLeaders__stage{
    --leader-card-width: min(330px, 86vw);
    --gap: 28px;

    width: fit-content;
    max-width: 100%;
  }

  .lp-aboutLeaders__grid{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;

    width: fit-content;
    max-width: 100%;
  }

  .lp-aboutLeaders__grid .lp-sectorCard{
    flex: 0 0 auto !important;
    width: var(--leader-card-width) !important;
    max-width: var(--leader-card-width) !important;
  }

  .lp-leaderPanel{
    border-radius: 20px;
    padding: 21px;
    padding-top: 68px;
  }

  .lp-leaderPanel__title{
    font-size: 21px;
  }

  .lp-leaderPanel__text{
    font-size: 15px;
    line-height: 1.9;
  }
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 520px){
  .lp-aboutLeaders__stage{
    --leader-card-width: min(290px, 84vw);
    --gap: 22px;
  }

  .lp-aboutLeaders__inner{
    padding-top: 58px;
    padding-bottom: 48px;
  }

  .lp-leaderPanel{
    border-radius: 18px;
    padding: 17px;
    padding-top: 62px;
  }

  .lp-leaderPanel__close{
    top: 11px;
    inset-inline-end: 11px;
  }

  .lp-leaderPanel__title{
    margin-bottom: 12px;
    font-size: 19px;
  }

  .lp-leaderPanel__text{
    font-size: 14px;
    line-height: 1.85;
    word-spacing: normal;
  }

  .lp-leaderPanel__sign{
    margin-top: 14px;
    gap: 7px;
  }

  .lp-leaderPanel__signRole,
  .lp-leaderPanel__signName{
    font-size: 14px;
  }
}

/* =========================
   Very small screens
   ========================= */

@media (max-width: 360px){
  .lp-aboutLeaders__stage{
    --leader-card-width: min(270px, 82vw);
    --gap: 18px;
  }

  .lp-leaderPanel{
    padding: 15px;
    padding-top: 58px;
  }

  .lp-leaderPanel__title{
    font-size: 18px;
  }

  .lp-leaderPanel__text{
    font-size: 13.5px;
    line-height: 1.8;
  }

  .lp-leaderPanel__signRole,
  .lp-leaderPanel__signName{
    font-size: 13.5px;
  }
}

/* =========================
   Dynamic content colors
   ========================= */

.lp-aboutLeaders .color,
.lp-aboutLeaders span.color,
.lp-aboutLeaders [data-color].color,
.lp-aboutLeaders [data-color][style*="--color"]{
  color: var(--color) !important;
}

.lp-aboutLeaders strong .color,
.lp-aboutLeaders b .color,
.lp-aboutLeaders em .color,
.lp-aboutLeaders i .color,
.lp-aboutLeaders u .color,
.lp-aboutLeaders s .color,
.lp-aboutLeaders strike .color{
  color: var(--color) !important;
}