/* ============================================================
   بوابة التطوع — أنماط خاصة بهذه الصفحة وحدها.
   المُحدِّدات مسبوقة بـvp- تجنّباً لأي تعارض مع site.css.
   ============================================================ */

.vp-open, .vp-ops, .vp-cats, .vp-cta{ --vp-pad: clamp(46px, 4.8vw, 74px); }
.vp-inner, .vp-open-inner{max-width:1180px; margin:0 auto;}

.vp-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;
}
.vp-eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);}
.vp-eyebrow-light{color:var(--mint); background:rgba(179,222,202,.10); border-color:rgba(179,222,202,.24);}
.vp-eyebrow-light::before{background:var(--mint);}
.vp-head{margin-bottom:clamp(24px,2.8vw,36px);}
.vp-head h2{
  font-family:var(--font-head); color:var(--navy);
  font-size:clamp(22px,2.6vw,32px); font-weight:800; line-height:1.3; margin-top:13px;
}
.vp-head-light h2{color:#fff;}

/* ---------- الافتتاحية ---------- */
.vp-open{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  background:linear-gradient(152deg, #04203A 0%, var(--navy) 52%, #0B3A5E 100%);
  color:#fff; padding:clamp(84px,8.6vw,126px) 28px clamp(50px,5.2vw,72px);
}
.vp-open-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 76% at 86% 8%, rgba(44,148,142,.28), transparent 60%),
    radial-gradient(46% 62% at 8% 96%, rgba(65,127,193,.18), transparent 62%);
}
.vp-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:18px;
}
.vp-open h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(26px,3.7vw,45px); line-height:1.25; letter-spacing:-.5px;
  max-width:22ch; margin-inline:auto; text-wrap:balance;
}
.vp-lede{
  margin:16px auto 0; max-width:64ch;
  font-size:clamp(14.5px,1.3vw,16.5px); line-height:1.85; color:rgba(255,255,255,.78);
}
.vp-lede p{margin:0;}
.vp-points{
  list-style:none; margin:26px auto 0; padding:0; max-width:900px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.vp-points 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 18px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.88);
}
.vp-points svg{width:14px; height:14px; color:var(--mint); flex-shrink:0;}
.vp-jump{
  display:inline-flex; align-items:center; gap:9px; margin-top:28px;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:14.5px; color:#fff;
  background:linear-gradient(120deg, var(--teal), var(--teal-soft));
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.vp-jump:hover{transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(31,120,116,.65);}
.vp-jump svg{width:16px; height:16px;}

/* ---------- الفرص ---------- */
.vp-ops{padding:var(--vp-pad) 28px;}
.vp-op-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:20px;}
.vp-op{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease;
}
.vp-op:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(31,120,116,.3);}
/* فرصة وحيدة: بطاقة عرضية تملأ الصف بدل بطاقة ضيّقة وسط فراغ */
.vp-op-grid.is-solo{grid-template-columns:1fr;}
.vp-op-grid.is-solo .vp-op{flex-direction:row; align-items:stretch;}
.vp-op-grid.is-solo .vp-op-img{flex:0 0 40%; aspect-ratio:auto;}
.vp-op-grid.is-solo .vp-op-body{flex:1; padding:clamp(24px,2.8vw,34px);}

.vp-op-img{position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--paper-tint);}
.vp-op-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1);}
.vp-op:hover .vp-op-img img{transform:scale(1.04);}
.vp-op-cat{
  position:absolute; top:14px; inset-inline-start:14px;
  background:rgba(5,34,62,.86); backdrop-filter:blur(4px); color:#fff;
  font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:999px;
}
.vp-op-cat.is-inline{position:static; display:inline-block; margin-bottom:12px; background:var(--navy);}

.vp-op-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.vp-op-body h3{font-family:var(--font-head); font-size:clamp(17px,1.9vw,21px); font-weight:800; color:var(--navy); line-height:1.45;}
.vp-op-desc{margin-top:10px; font-size:14px; line-height:1.85; color:#5d7285; max-width:62ch;}

.vp-op-meta{
  list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;
}
.vp-op-meta li{display:flex; align-items:flex-start; gap:10px;}
.vp-op-meta svg{width:17px; height:17px; color:var(--teal); flex-shrink:0; margin-top:2px;}
.vp-op-meta span{display:flex; flex-direction:column; gap:2px; font-size:13.5px; color:var(--navy); font-weight:700; line-height:1.5;}
.vp-op-meta b{font-size:11.5px; font-weight:600; color:#8394a3;}

.vp-apply{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:auto; align-self:flex-start;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:14.5px; color:#fff;
  background:var(--navy);
  transition:background .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.vp-op .vp-apply{margin-top:20px;}
.vp-apply:hover{
  background:linear-gradient(120deg, var(--teal), var(--teal-soft));
  transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(31,120,116,.6);
}
.vp-apply svg{width:16px; height:16px; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.vp-apply:hover svg{transform:translateX(-4px);}

/* حالة فارغة */
.vp-empty{
  text-align:center; padding:clamp(36px,4.5vw,58px) 28px;
  background:var(--paper-tint); border:1px dashed var(--line);
}
.vp-empty-ic{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  background:#fff; border:1px solid var(--line); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.vp-empty-ic svg{width:26px; height:26px;}
.vp-empty h3{font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--navy);}
.vp-empty p{margin:10px auto 20px; max-width:52ch; font-size:14px; line-height:1.85; color:#5d7285;}
.vp-empty .vp-apply{align-self:center; margin-top:0;}

/* ---------- مجالات التطوع ---------- */
.vp-cats{padding:var(--vp-pad) 28px; background:linear-gradient(165deg, #06264A, var(--navy));}
.vp-cat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10);
}
.vp-cat{
  position:relative; background:#06264A; padding:clamp(22px,2.5vw,30px);
  display:flex; flex-direction:column; gap:8px;
  transition:background .35s ease;
}
.vp-cat:hover{background:#0a3457;}
.vp-cat-num{
  font-family:'Roboto',sans-serif; font-size:12.5px; font-weight:800;
  color:var(--mint); letter-spacing:.5px; opacity:.55;
}
.vp-cat b{font-family:var(--font-head); font-size:16px; font-weight:800; color:#fff; line-height:1.45;}
.vp-cat span{font-size:13px; line-height:1.75; color:rgba(255,255,255,.62);}

/* ---------- الدعوة ---------- */
.vp-cta{padding:var(--vp-pad) 28px; background:var(--paper-tint);}
.vp-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;}
.vp-cta h2{font-family:var(--font-head); color:var(--navy); font-size:clamp(19px,2.2vw,27px); font-weight:800; line-height:1.4;}
.vp-cta p{margin-top:9px; font-size:14.5px; line-height:1.8; color:#5d7285; max-width:58ch;}
.vp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:14.5px; color:#fff;
  background:var(--navy);
  transition:background .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.vp-btn:hover{
  background:linear-gradient(120deg, var(--teal), var(--teal-soft));
  transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(31,120,116,.6);
}

/* ---------- الحركة ---------- */
@media (prefers-reduced-motion: no-preference){
  .vp-points li,
  [data-reveal] .vp-op,
  [data-reveal] .vp-cat{
    animation:vp-rise .66s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--i, 0) * 70ms);
  }
  [data-reveal] .vp-op,
  [data-reveal] .vp-cat{animation-play-state:paused;}
  [data-reveal].in-view .vp-op,
  [data-reveal].in-view .vp-cat{animation-play-state:running;}
  @keyframes vp-rise{from{opacity:0; translate:0 16px;} to{opacity:1; translate:0 0;}}
}

/* ---------- الاستجابة ---------- */
@media (max-width:860px){
  /* البطاقة العرضية تعود رأسية: 40% من عرض ضيّق صورة لا تُقرأ */
  .vp-op-grid.is-solo .vp-op{flex-direction:column;}
  .vp-op-grid.is-solo .vp-op-img{flex:none; aspect-ratio:16/10;}
  .vp-op-grid.is-solo .vp-op-body{padding:20px 22px 22px;}
}
@media (max-width:620px){
  .vp-op-meta{grid-template-columns:1fr;}
  .vp-cta-inner{flex-direction:column; align-items:flex-start;}
  .vp-btn, .vp-jump{width:100%;}
  .vp-apply{width:100%;}
  .vp-points li{font-size:12.5px; padding:8px 14px;}
}