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

.pg-open, .pg-flow, .pg-grid-sec, .pg-extra, .pg-cta{ --pg-pad: clamp(48px, 5vw, 78px); }
.pg-inner, .pg-open-inner{max-width:1180px; margin:0 auto;}

.pg-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;
}
.pg-eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal);}

.pg-head{margin-bottom:clamp(26px,3vw,40px);}
.pg-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;
}

/* ---------- الافتتاحية ---------- */
.pg-open{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  background:linear-gradient(152deg, #04203A 0%, var(--navy) 50%, #0B3A5E 100%);
  color:#fff; padding:clamp(88px,9vw,134px) 28px clamp(52px,5.4vw,74px);
}
.pg-open-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 78% at 86% 8%, rgba(44,148,142,.28), transparent 60%),
    radial-gradient(48% 64% at 8% 96%, rgba(65,127,193,.18), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px);
}
.pg-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:20px;
}
.pg-open h1{
  font-family:var(--font-head); font-weight:800; color:#fff;
  font-size:clamp(27px,3.9vw,48px); line-height:1.24; letter-spacing:-.5px;
  max-width:20ch; margin-inline:auto; text-wrap:balance;
}
.pg-tagline{
  margin:18px auto 0; max-width:62ch;
  font-size:clamp(14.5px,1.35vw,17px); line-height:1.85; color:rgba(255,255,255,.78);
}
.pg-count{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:26px;
  font-size:13px; color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.14); padding:9px 18px; border-radius:999px;
}
.pg-count b{font-family:'Roboto',sans-serif; font-size:19px; font-weight:800; color:var(--mint);}

/* ---------- المسار ---------- */
.pg-flow{padding:var(--pg-pad) 28px; background:var(--paper-tint);}
.pg-steps{
  list-style:none; margin:0 0 clamp(26px,3vw,38px); padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.pg-steps li{
  position:relative; background:#fff; border:1px solid var(--line);
  padding:24px 22px 26px; display:flex; flex-direction:column; gap:6px;
}
/* سهم يربط كل خطوة بالتالية — الاتجاه من اليمين لليسار كاتجاه القراءة */
.pg-steps li:not(:last-child)::after{
  content:''; position:absolute; top:50%; inset-inline-start:-11px;
  width:0; height:0; transform:translateY(-50%);
  border-block:7px solid transparent; border-inline-end:9px solid var(--line);
}
.pg-step-ic{
  width:44px; height:44px; border-radius:50%; margin-bottom:8px;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.pg-step-ic svg{width:21px; height:21px;}
.pg-steps b{font-family:var(--font-head); font-size:16px; font-weight:800; color:var(--navy);}
.pg-steps span{font-size:13.5px; line-height:1.7; color:#5d7285;}

.pg-lede{
  font-size:15px; line-height:1.95; color:#41566a; max-width:78ch;
  padding-top:clamp(22px,2.6vw,32px); border-top:1px solid var(--line);
}
.pg-lede p{margin:0 0 14px;}
.pg-lede p:last-child{margin-bottom:0;}

/* ---------- شبكة بينتو ---------- */
.pg-grid-sec{padding:var(--pg-pad) 28px;}
.pg-bento{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-flow:dense; gap:16px;
}
.pg-card{
  grid-column:span var(--span, 1);
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:26px 24px 24px; min-height:196px;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease;
}
/* موجة كحلية ترتفع من القاعدة — اتجاه واضح بدل تبديل لون مفاجئ */
.pg-card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(165deg, #0a3457, var(--navy));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.pg-card::after{
  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);
}
a.pg-card:hover{transform:translateY(-7px); box-shadow:0 30px 52px -22px rgba(5,34,62,.45); border-color:transparent;}
a.pg-card:hover::before{transform:scaleY(1);}
a.pg-card:hover::after{transform:scaleX(1);}

.pg-card-num{
  position:absolute; top:20px; inset-inline-end:22px;
  font-family:'Roboto',sans-serif; font-size:21px; font-weight:800; line-height:1;
  color:#e3e9ee; letter-spacing:.5px; transition:color .4s ease .06s;
}
a.pg-card:hover .pg-card-num{color:rgba(255,255,255,.3);}
.pg-card-ic{
  width:50px; height:50px; border-radius:50%; margin-bottom:16px;
  background:var(--mint-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(31,120,116,.18);
  transition:background .4s ease .06s, color .4s ease .06s, box-shadow .5s cubic-bezier(.16,1,.3,1) .06s;
}
.pg-card-ic svg{width:23px; height:23px;}
a.pg-card:hover .pg-card-ic{background:var(--teal); color:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.09);}
.pg-card h3{
  font-family:var(--font-head); font-size:17px; font-weight:800; color:var(--navy);
  line-height:1.45; transition:color .4s ease .06s;
}
.pg-card p{
  margin-top:9px; font-size:13.8px; line-height:1.8; color:#5d7285;
  transition:color .4s ease .06s;
}
a.pg-card:hover h3{color:#fff;}
a.pg-card:hover p{color:rgba(255,255,255,.72);}
.pg-card-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:16px;
  font-size:13px; font-weight:800; color:var(--teal);
  transition:color .4s ease .06s;
}
.pg-card-go svg{width:16px; height:16px; transition:transform .35s cubic-bezier(.16,1,.3,1);}
a.pg-card:hover .pg-card-go{color:var(--mint);}
a.pg-card:hover .pg-card-go svg{transform:translateX(-5px);}

/* البطاقة العريضة: عنوان أكبر ومساحة أوسع للوصف */
.pg-card.is-wide{min-height:232px;}
.pg-card.is-wide h3{font-size:clamp(19px,1.9vw,22px);}
.pg-card.is-wide p{font-size:14.5px; max-width:56ch;}

/* ---------- أقسام إضافية ---------- */
.pg-extra{padding:var(--pg-pad) 28px;}
.pg-extra h2{font-family:var(--font-head); font-size:clamp(20px,2.2vw,26px); font-weight:800; color:var(--navy); margin-bottom:14px;}
.pg-prose{font-size:15px; line-height:1.9; color:#41566a; max-width:70ch;}
.pg-prose p{margin:0 0 14px;}

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

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

/* ---------- الاستجابة ---------- */
@media (max-width:1000px){
  /* عمودان: البطاقة العريضة تشغل الصف كاملاً فيبقى الإيقاع مفهوماً */
  .pg-bento{grid-template-columns:repeat(2, minmax(0,1fr));}
  .pg-card{grid-column:span 1;}
  .pg-card.is-wide{grid-column:span 2;}
  .pg-steps{grid-template-columns:1fr; gap:12px;}
  /* بعمود واحد يصير السهم بين الخطوات رأسياً */
  .pg-steps li:not(:last-child)::after{
    top:auto; bottom:-11px; inset-inline-start:50%;
    transform:translateX(50%);
    border-block:0; border-inline:7px solid transparent;
    border-top:9px solid var(--line); border-inline-end:0;
  }
}
@media (max-width:620px){
  .pg-bento{grid-template-columns:1fr;}
  .pg-card, .pg-card.is-wide{grid-column:span 1; min-height:0;}
  .pg-cta-inner{flex-direction:column; align-items:flex-start;}
  .pg-cta-btns{width:100%;}
  .pg-btn{flex:1 1 auto;}
}