/* ============================================================
   صفحة «عن الجمعية» — أنماط خاصة بها وحدها.
   تُحمَّل من هذه الصفحة فقط، فلا تُثقل بقية الموقع ولا تخاطر بالتعارض
   مع أنماط site.css المشتركة. كل المُحدِّدات مسبوقة بـab- لهذا السبب.
   ============================================================ */

.ab-open,
.ab-vm,
.ab-values,
.ab-goals,
.ab-story,
.ab-film,
.ab-time,
.ab-partners,
.ab-more { --ab-pad: clamp(52px, 5.4vw, 84px); }

.ab-open-inner,
.ab-vm-inner,
.ab-values-inner,
.ab-goals-inner,
.ab-story-inner,
.ab-film-inner,
.ab-time-inner,
.ab-partners-inner,
.ab-more-inner { max-width: 1180px; margin: 0 auto; }

/* ---------- عناوين الأقسام ---------- */
.ab-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-size:11.5px; font-weight:700;
  color:var(--teal); background:var(--mint-pale);
  border:1px solid rgba(31,120,116,.16);
  padding:6px 15px; border-radius:999px;
}
.ab-eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);}
.ab-sec-head{max-width:660px; margin-bottom:clamp(30px,3.4vw,46px);}
.ab-sec-head h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(24px,2.9vw,34px); font-weight:800; line-height:1.28;
  margin-top:14px; letter-spacing:-.2px; text-wrap:balance;
}
.ab-sec-lede{margin-top:12px; font-size:15px; line-height:1.75; color:#4b5f72;}
.ab-sec-lede p{margin:0;}
.ab-sec-head-light h2{color:#fff;}
.ab-sec-head-light .ab-sec-lede{color:rgba(255,255,255,.72);}
.ab-sec-head-light .ab-eyebrow{
  color:var(--mint); background:rgba(179,222,202,.10); border-color:rgba(179,222,202,.24);
}
.ab-sec-head-light .ab-eyebrow::before{background:var(--mint);}

/* ============ 1) الافتتاحية ============ */
.ab-open{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg, #041D35 0%, var(--navy) 45%, #0A3457 100%);
  color:#fff; padding:clamp(96px,10vw,150px) 28px clamp(60px,6vw,88px);
}
/* شبكة ضوئية خافتة + هالة: عمق بلا صورة تُحمَّل */
.ab-open-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 90% at 88% 12%, rgba(44,148,142,.30), transparent 62%),
    radial-gradient(52% 70% at 8% 96%, rgba(65,127,193,.20), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 84px);
}
.ab-kicker{
  display:inline-block; font-family:var(--font-head); font-size:12.5px; font-weight:700;
  color:var(--mint); background:rgba(179,222,202,.10);
  border:1px solid rgba(179,222,202,.22); padding:7px 16px; border-radius:999px;
  margin-bottom:22px;
}
.ab-open h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(28px,4.2vw,52px); line-height:1.24; letter-spacing:-.6px;
  /* ch = عرض الصفر اللاتيني، والحرف العربي أعرض منه كثيراً، فـ16ch
     تُنتج عموداً ضيّقاً يكسر العنوان لأربعة أسطر. نحدّه بالبكسل. */
  max-width:min(720px, 100%); text-wrap:balance;
}
.ab-open-lede{
  margin-top:20px; max-width:60ch;
  font-size:clamp(15px,1.35vw,17px); line-height:1.8; color:rgba(255,255,255,.78);
}
.ab-open-lede p{margin:0;}
.ab-creds{
  list-style:none; margin:36px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 12px;
}
.ab-creds li{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:999px; padding:9px 17px 9px 14px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.9);
}
.ab-creds svg{width:14px; height:14px; color:var(--mint); flex-shrink:0;}

/* ============ الفهرس اللاصق ============ */
.ab-toc{
  position:sticky; top:0; z-index:40;
  background:rgba(251,252,251,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.ab-toc-inner{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.ab-toc-inner::-webkit-scrollbar{display:none;}
.ab-toc a{
  position:relative; white-space:nowrap; flex-shrink:0;
  padding:14px 16px; font-size:13.5px; font-weight:600; color:#7c8b99;
  transition:color .25s ease;
}
.ab-toc a::after{
  content:''; position:absolute; bottom:0; inset-inline:14px; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.ab-toc a:hover{color:var(--navy);}
.ab-toc a.is-active{color:var(--teal);}
.ab-toc a.is-active::after{transform:scaleX(1);}

/* ============ 2) الرؤية والرسالة ============ */
.ab-vm{padding:var(--ab-pad) 28px; background:var(--paper-tint);}
.ab-vm-inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,32px);}
.ab-vm-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:#fff; border:1px solid var(--line);
  padding:clamp(28px,3vw,42px);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.ab-vm-card::before{
  content:''; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--teal), var(--teal-soft));
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ab-vm-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.ab-vm-card:hover::before{transform:scaleX(1);}
/* أيقونة عملاقة شبح في الزاوية — عمق بصري بلا ضجيج */
.ab-vm-ghost{
  position:absolute; inset-inline-start:-18px; bottom:-22px; z-index:-1;
  color:rgba(31,120,116,.07); pointer-events:none;
}
.ab-vm-ghost svg{width:150px; height:150px;}
.ab-vm-tag{
  font-family:var(--font-head); font-size:12px; font-weight:700;
  color:var(--teal); letter-spacing:.4px;
}
.ab-vm-card h2{
  font-family:var(--font-head); font-size:clamp(21px,2.3vw,27px); font-weight:800;
  color:var(--navy); margin-top:8px; line-height:1.35;
}
.ab-vm-text{margin-top:12px; font-size:15px; line-height:1.8; color:#4b5f72;}

/* ============ 3) القيم — قائمة تحريرية ============ */
.ab-values{padding:var(--ab-pad) 28px;}
.ab-vlist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.ab-vlist li{
  position:relative; display:grid;
  grid-template-columns:74px 1fr 52px; align-items:center; gap:18px;
  padding:clamp(18px,2vw,26px) 14px;
  border-bottom:1px solid var(--line);
  transition:background .35s ease;
}
/* الشريط الذي ينمو من حافة الصف */
.ab-vlist li::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:var(--teal); transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.ab-vlist li:hover{background:var(--mint-pale);}
.ab-vlist li:hover::before{transform:scaleY(1);}
.ab-vnum{
  font-family:'Roboto',sans-serif; font-size:clamp(28px,3.4vw,42px); font-weight:800;
  line-height:1; color:#e2e9ef; letter-spacing:1px;
  transition:color .35s ease;
}
.ab-vlist li:hover .ab-vnum{color:var(--teal);}
.ab-vbody h3{
  font-family:var(--font-head); font-size:clamp(16px,1.7vw,19px); font-weight:800;
  color:var(--navy); line-height:1.4;
}
.ab-vbody p{margin-top:6px; font-size:14px; line-height:1.7; color:#5d7285; max-width:70ch;}
.ab-vicon{
  width:46px; height:46px; border-radius:50%; justify-self:end;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, color .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.ab-vicon svg{width:20px; height:20px;}
.ab-vlist li:hover .ab-vicon{background:var(--teal); color:#fff; transform:scale(1.08);}

/* ============ 4) الأهداف ============ */
.ab-goals{
  padding:var(--ab-pad) 28px;
  background:linear-gradient(165deg, #06264A 0%, var(--navy) 100%);
}
.ab-gmatrix{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.ab-gcard{
  position:relative; overflow:hidden; isolation:isolate;
  background:#06264A; padding:clamp(22px,2.4vw,30px);
  transition:background .4s ease;
}
.ab-gcard::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(150deg, rgba(31,120,116,.30), rgba(31,120,116,0));
  opacity:0; transition:opacity .45s ease;
}
.ab-gcard:hover::before{opacity:1;}
.ab-gicon{
  width:42px; height:42px; border-radius:50%;
  background:rgba(179,222,202,.10); border:1px solid rgba(179,222,202,.20);
  color:var(--mint); display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.ab-gicon svg{width:19px; height:19px;}
.ab-gcard:hover .ab-gicon{background:rgba(179,222,202,.2); transform:translateY(-3px);}
.ab-gnum{
  position:absolute; top:18px; inset-inline-start:22px;
  font-family:'Roboto',sans-serif; font-size:13px; font-weight:700;
  color:rgba(255,255,255,.22); letter-spacing:.5px;
}
.ab-gcard h3{
  font-family:var(--font-head); font-size:16px; font-weight:800; color:#fff;
  margin-top:18px; line-height:1.45;
}
.ab-gcard p{margin-top:8px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.62);}

/* ============ 5) الهوية — مقال بعمود لاصق ============ */
.ab-story{padding:var(--ab-pad) 28px;}
.ab-story-inner{display:grid; grid-template-columns:0.72fr 1.28fr; gap:clamp(28px,4vw,64px);}
.ab-story-rail{position:sticky; top:96px; align-self:start;}
.ab-story-rail h2{
  font-family:var(--font-head); font-size:clamp(22px,2.6vw,31px); font-weight:800;
  color:var(--navy); margin-top:14px; line-height:1.3;
}
.ab-rule{display:block; width:52px; height:3px; background:var(--teal); margin-top:20px;}
.ab-prose{font-size:15.5px; line-height:1.95; color:#41566a; max-width:68ch;}
.ab-prose p{margin:0 0 16px;}
.ab-prose p:last-child{margin-bottom:0;}
/* الفقرة الافتتاحية أكبر قليلاً — تدرّج بصري يقود القارئ للنص */
.ab-prose-lead > p:first-child{font-size:17px; line-height:1.85; color:var(--navy); font-weight:500;}
.ab-sub{
  font-family:var(--font-head); font-size:19px; font-weight:800; color:var(--navy);
  margin:34px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}

/* ============ 6) الفيديو ============ */
.ab-film{padding:0 28px var(--ab-pad);}
.ab-film-inner h2{
  font-family:var(--font-head); font-size:clamp(20px,2.2vw,26px); font-weight:800;
  color:var(--navy); margin-bottom:20px;
}
.ab-film-frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--navy); box-shadow:var(--shadow-lg);
}
.ab-film-frame iframe,
.ab-film-frame video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;}

/* ============ 7) مسار المراحل ============
   ست مراحل تحمل فترة ومدة وعنواناً ووصفاً — أكثر مما يستوعبه صفٌّ أفقي
   بستة أعمدة. فبُني كمسار رأسي: قضيب على حافة البدء تتعلّق به عُقد
   مرقّمة، وبطاقة لكل مرحلة. القضيب يمتلئ مع تقدّم التمرير فيُقرأ الزمن
   حركةً لا رسماً ساكناً. */
.ab-time{padding:var(--ab-pad) 28px; background:var(--navy);}
.ab-phases{list-style:none; margin:0; padding:0; position:relative;}
/* القضيب */
.ab-rail{
  position:absolute; inset-block:14px 26px; inset-inline-start:23px; width:2px;
  background:rgba(255,255,255,.13); overflow:hidden;
}
.ab-rail i{
  display:block; width:100%; height:100%;
  background:linear-gradient(180deg, var(--mint), var(--teal-soft));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1) .3s;
}
[data-reveal].in-view .ab-rail i{transform:scaleY(1);}

.ab-phase{position:relative; display:flex; gap:22px; padding-bottom:26px;}
.ab-phase:last-child{padding-bottom:0;}
.ab-node{
  position:relative; z-index:1; flex-shrink:0;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Roboto',sans-serif; font-size:14px; font-weight:800; letter-spacing:.5px;
  background:#06264A; color:var(--mint);
  border:2px solid rgba(179,222,202,.35);
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.ab-phase.is-now .ab-node{background:var(--teal); color:#fff; border-color:var(--mint);}

.ab-phase-card{
  flex:1; min-width:0;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  padding:20px 24px 22px;
  transition:background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.ab-phase:hover .ab-phase-card{
  background:rgba(255,255,255,.06); border-color:rgba(179,222,202,.26); transform:translateY(-3px);
}
.ab-phase.is-now .ab-phase-card{border-color:rgba(179,222,202,.34); background:rgba(31,120,116,.14);}

.ab-phase-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.ab-chip{
  display:inline-flex; align-items:center;
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.ab-chip-date{color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.14);}
.ab-chip-dur{color:var(--mint); background:rgba(179,222,202,.10); border-color:rgba(179,222,202,.22);}
.ab-chip-now{color:#fff; background:var(--teal); border-color:var(--teal);}
.ab-phase-card h3{
  font-family:var(--font-head); font-size:clamp(16px,1.8vw,19px); font-weight:800;
  color:#fff; line-height:1.45;
}
.ab-phase-card p{
  margin-top:8px; font-size:14px; line-height:1.8;
  color:rgba(255,255,255,.66); max-width:78ch;
}

/* نبضة حول عقدة المرحلة الحالية */
@media (prefers-reduced-motion: no-preference){
  .ab-phase.is-now .ab-node::after{
    content:''; position:absolute; inset:-2px; border-radius:50%;
    border:2px solid var(--mint); opacity:0;
  }
  [data-reveal].in-view .ab-phase.is-now .ab-node::after{
    animation:ab-pulse 3.2s ease-out 1.6s infinite;
  }
  @keyframes ab-pulse{
    0%{transform:scale(1); opacity:.55;}
    70%{transform:scale(1.5); opacity:0;}
    100%{transform:scale(1.5); opacity:0;}
  }

  /* القضيب يتتبّع التمرير حيث يدعمه المتصفح — أدقّ من امتلاء لمرة
     واحدة، ويسقط بأمان إلى الانتقال أعلاه حين لا يُدعم. */
  @supports (animation-timeline: view()){
    .ab-rail i{
      transition:none; transform:scaleY(0);
      animation:ab-rail-fill linear both;
      animation-timeline:view(); animation-range:cover 8% cover 72%;
    }
    @keyframes ab-rail-fill{from{transform:scaleY(0);} to{transform:scaleY(1);}}
  }
}

/* ============ 8) الشركاء ============ */
.ab-partners{padding:var(--ab-pad) 28px;}
.ab-logos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.ab-logo{
  background:#fff; min-height:128px; padding:22px;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease;
}
.ab-logo img{
  max-width:100%; max-height:64px; object-fit:contain;
  filter:grayscale(1); opacity:.72;
  transition:filter .4s ease, opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.ab-logo:hover{background:var(--paper-tint);}
.ab-logo:hover img{filter:grayscale(0); opacity:1; transform:scale(1.05);}

/* ============ 9) روابط الاستكشاف ============ */
.ab-more{padding:var(--ab-pad) 28px; background:var(--paper-tint);}
.ab-more-inner > h2{
  font-family:var(--font-head); font-size:clamp(20px,2.2vw,26px); font-weight:800;
  color:var(--navy); margin-bottom:24px;
}
.ab-more-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.ab-more-card{
  position:relative; display:flex; flex-direction:column; gap:5px;
  background:#fff; border:1px solid var(--line); padding:20px 22px 22px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.ab-more-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:rgba(31,120,116,.35);}
.ab-more-label{font-family:var(--font-head); font-size:15.5px; font-weight:800; color:var(--navy);}
.ab-more-note{font-size:12.5px; line-height:1.6; color:#7c8b99;}
.ab-more-card svg{
  width:17px; height:17px; color:var(--teal); margin-top:10px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.ab-more-card:hover svg{transform:translateX(-5px);}

/* ============ الحركة ============
   كل ما يلي تحسين اختياري: من يطلب تقليل الحركة يرى الصفحة كاملة ساكنة. */
@media (prefers-reduced-motion: no-preference){
  .ab-creds li,
  .ab-vm-card,
  .ab-vlist li,
  .ab-gcard,
  .ab-logo,
  .ab-more-card{
    animation:ab-rise .7s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i, 0) * 70ms);
  }
  /* الأقسام داخل [data-reveal] لا تبدأ حركتها إلا عند ظهورها */
  [data-reveal] .ab-vm-card,
  [data-reveal] .ab-vlist li,
  [data-reveal] .ab-gcard,
  [data-reveal] .ab-logo,
  [data-reveal] .ab-more-card{animation-play-state:paused;}
  [data-reveal].in-view .ab-vm-card,
  [data-reveal].in-view .ab-vlist li,
  [data-reveal].in-view .ab-gcard,
  [data-reveal].in-view .ab-logo,
  [data-reveal].in-view .ab-more-card{animation-play-state:running;}

  @keyframes ab-rise{
    from{opacity:0; translate:0 18px;}
    to{opacity:1; translate:0 0;}
  }
}

/* ============ الاستجابة ============ */
@media (max-width:960px){
  .ab-vm-inner{grid-template-columns:1fr;}
  .ab-gmatrix{grid-template-columns:repeat(2, 1fr);}
  .ab-story-inner{grid-template-columns:1fr; gap:26px;}
  .ab-story-rail{position:static;}
  .ab-more-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:620px){
  .ab-gmatrix{grid-template-columns:1fr;}
  .ab-more-grid{grid-template-columns:1fr;}
  .ab-vlist li{grid-template-columns:52px 1fr; gap:14px; padding-inline:8px;}
  .ab-vicon{display:none;}
  .ab-open h1{max-width:100%;}
  .ab-creds li{font-size:12.5px; padding:8px 14px;}
  /* على الشاشة الضيقة تنكمش العقدة ويقترب القضيب من الحافة */
  .ab-phase{gap:14px;}
  .ab-node{width:40px; height:40px; font-size:12.5px;}
  .ab-rail{inset-inline-start:19px;}
  .ab-phase-card{padding:16px 17px 18px;}
  .ab-chip{font-size:10.5px; padding:4px 10px;}
}