/* ==========================================================================
   الشبكة نيوز — السلايدرات العشرة
   ========================================================================== */

.shb-slider-wrap{margin-bottom:var(--shb-gap)}
.shb-sl{position:relative}
.shb-sl-img{position:absolute;inset:0;display:block;overflow:hidden;background:#1a2331}
.shb-sl-img img{width:100%;height:100%;object-fit:cover;transition:transform 7s ease}
.shb-sl-item.is-active .shb-sl-img img{transform:scale(1.07)}

/* التعليق */
.shb-sl-cap{position:absolute;inset-inline:0;bottom:0;z-index:3;padding:24px;color:#fff}
.shb-sl-cap-in{max-width:760px}
.shb-sl-title{font-size:clamp(20px,2.3vw,34px);line-height:1.45;margin:9px 0 0;color:#fff}
.shb-sl-title a{color:#fff}
.shb-sl-title a:hover{color:#fff;opacity:.85}
.shb-sl-ex{color:rgba(255,255,255,.82);font-size:15.5px;margin:10px 0 0;line-height:1.85}
.shb-sl .shb-meta{color:rgba(255,255,255,.78)}
.shb-sl-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(5,9,16,.92));z-index:2;pointer-events:none}
.shb-sl-item>.shb-container{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end}
.shb-sl-item>.shb-container .shb-sl-cap{position:relative;width:100%;padding:0 16px 42px}

/* الأزرار والنقاط */
.shb-sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transition:.25s}
.shb-sl:hover .shb-sl-nav{opacity:1}
.shb-sl-nav:hover{background:var(--shb-primary);color:#fff}
.shb-sl-nav svg{width:18px;height:18px}
.shb-sl-prev{inset-inline-end:16px}
.shb-sl-next{inset-inline-start:16px}
.shb-sl-dots{position:absolute;bottom:14px;inset-inline:0;display:flex;gap:7px;justify-content:center;z-index:6}
.shb-sl-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0;transition:.25s}
.shb-sl-dots button.is-active{background:var(--shb-primary);width:26px;border-radius:9px}

/* ==========================================================================
   1) بانوراما
   ========================================================================== */
.shb-sl-1{display:grid;grid-template-columns:2.15fr 1fr;gap:12px}
.shb-sl-1 .shb-sl-main{position:relative;height:474px;border-radius:var(--shb-radius);overflow:hidden}
.shb-sl-1 .shb-sl-track{position:absolute;inset:0}
.shb-sl-1 .shb-sl-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease}
.shb-sl-1 .shb-sl-item.is-active{opacity:1;visibility:visible}
.shb-sl-side{display:grid;grid-template-rows:repeat(4,1fr);gap:12px}
.shb-sl-sideitem{position:relative;border-radius:var(--shb-radius-sm);overflow:hidden;min-height:108px}
.shb-sl-sideitem .shb-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0}
.shb-sl-sideitem .shb-title{font-size:14.5px}
.shb-sl-sideitem .shb-ov-in{padding:11px}

/* ==========================================================================
   2) شرائح كاملة العرض
   ========================================================================== */
.shb-sl-2{height:clamp(390px,50vw,585px);border-radius:var(--shb-radius);overflow:hidden}
.shb-sl-2 .shb-sl-track{position:absolute;inset:0}
.shb-sl-2 .shb-sl-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease}
.shb-sl-2 .shb-sl-item.is-active{opacity:1;visibility:visible}
.shb-sl-2 .shb-sl-item.is-active .shb-sl-cap-in{animation:shbRise .8s .1s both}
@keyframes shbRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ==========================================================================
   3) موزاييك خماسي
   ========================================================================== */
.shb-sl-3{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:216px;gap:11px}
.shb-sl-3 .shb-item{position:relative;border-radius:var(--shb-radius-sm);overflow:hidden}
.shb-sl-3 .shb-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0}
.shb-sl-3 .shb-mz1{grid-column:span 2;grid-row:span 2}
.shb-sl-3 .shb-mz1 .shb-title{font-size:26px}
.shb-sl-3 .shb-title{font-size:15.5px}

/* ==========================================================================
   4) كاروسيل ثلاثي
   ========================================================================== */
.shb-sl-4 .shb-sl-view{overflow:hidden;margin-inline:-7px}
.shb-sl-4 .shb-sl-track{display:flex;transition:transform .6s cubic-bezier(.25,.8,.3,1)}
.shb-sl-4 .shb-sl-item{flex:0 0 33.3333%;padding-inline:7px;position:relative}
.shb-sl-4 .shb-item{position:relative;height:330px;border-radius:var(--shb-radius);overflow:hidden}
.shb-sl-4 .shb-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0}
.shb-sl-4 .shb-title{font-size:18px}
.shb-sl-4 .shb-sl-dots{position:static;margin-top:14px}
.shb-sl-4 .shb-sl-dots button{background:var(--shb-border)}
.shb-sl-4 .shb-sl-dots button.is-active{background:var(--shb-primary)}
.shb-sl-4 .shb-sl-nav{opacity:1}

/* ==========================================================================
   5) بطاقات متراكمة
   ========================================================================== */
.shb-sl-5 .shb-sl-stage{position:relative;height:440px;perspective:1400px;transform-style:preserve-3d}
.shb-sl-5 .shb-sl-item{position:absolute;top:0;inset-inline-start:50%;width:min(62%,700px);height:100%;margin-inline-start:calc(min(62%,700px) / -2);border-radius:var(--shb-radius);overflow:hidden;transition:transform .6s cubic-bezier(.25,.8,.3,1),opacity .6s;box-shadow:var(--shb-shadow-lg);cursor:pointer}
.shb-sl-5 .shb-sl-cap{padding:20px}
.shb-sl-5 .shb-sl-title{font-size:22px}
.shb-sl-5 .shb-sl-dots{position:static;margin-top:16px}
.shb-sl-5 .shb-sl-dots button{background:var(--shb-border)}
.shb-sl-5 .shb-sl-dots button.is-active{background:var(--shb-primary)}
.shb-sl-5 .shb-sl-nav{opacity:1}

/* ==========================================================================
   6) جانبي بقائمة عناوين
   ========================================================================== */
.shb-sl-6{display:grid;grid-template-columns:2.25fr 1fr;gap:12px}
.shb-sl-6 .shb-sl-main{position:relative;height:460px;border-radius:var(--shb-radius);overflow:hidden}
.shb-sl-6 .shb-sl-track{position:absolute;inset:0}
.shb-sl-6 .shb-sl-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s}
.shb-sl-6 .shb-sl-item.is-active{opacity:1;visibility:visible}
.shb-sl-list{background:var(--shb-card);border:1px solid var(--shb-border);border-radius:var(--shb-radius);overflow:auto;max-height:460px}
.shb-sl-listitem{display:flex;align-items:flex-start;gap:10px;width:100%;background:transparent;border:0;border-bottom:1px solid var(--shb-border);padding:13px;text-align:start;position:relative;color:var(--shb-text)}
.shb-sl-listitem:last-child{border-bottom:0}
.shb-sl-li-num{font-family:var(--shb-font-head);font-weight:900;color:var(--shb-muted);font-size:14px;flex:0 0 auto;width:22px}
.shb-sl-li-t{font-weight:700;font-size:14.5px;line-height:1.7}
.shb-sl-listitem.is-active{background:rgba(200,16,46,.06)}
.shb-sl-listitem.is-active .shb-sl-li-num{color:var(--shb-primary)}
.shb-sl-li-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:0;background:var(--shb-primary)}
.shb-sl-listitem.is-active .shb-sl-li-bar{width:100%;transition:width linear}

/* ==========================================================================
   7) تمرير عمودي
   ========================================================================== */
.shb-sl-7{border-radius:var(--shb-radius);overflow:hidden;height:clamp(380px,46vw,520px)}
.shb-sl-7 .shb-sl-view{height:100%;overflow:hidden}
.shb-sl-7 .shb-sl-track{height:100%;transition:transform .7s cubic-bezier(.25,.8,.3,1)}
.shb-sl-7 .shb-sl-item{position:relative;height:100%}
.shb-sl-7 .shb-sl-vnav{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:6}
.shb-sl-7 .shb-sl-nav{position:static;transform:none;opacity:1;width:40px;height:40px}
.shb-sl-7 .shb-sl-prev svg{transform:rotate(90deg)}
.shb-sl-7 .shb-sl-next svg{transform:rotate(90deg)}
.shb-sl-count{position:absolute;bottom:18px;inset-inline-start:22px;z-index:6;color:#fff;font-family:var(--shb-font-head);display:flex;align-items:baseline;gap:4px}
.shb-sl-count b{font-size:26px;font-weight:900}
.shb-sl-count span{opacity:.6}
.shb-sl-count i{font-style:normal;opacity:.7}

/* ==========================================================================
   8) شبكة الأبطال
   ========================================================================== */
.shb-sl-8{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:12px}
.shb-sl-8 .shb-item{position:relative;border-radius:var(--shb-radius-sm);overflow:hidden}
.shb-sl-8 .shb-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0}
.shb-sl-8 .shb-hero1{grid-column:span 2;grid-row:span 2}
.shb-sl-8 .shb-hero1 .shb-title{font-size:27px}
.shb-sl-8 .shb-title{font-size:15px}
.shb-sl-8 .shb-sl-ex{font-size:14.5px}

/* ==========================================================================
   9) شريط تقدّم ومصغّرات
   ========================================================================== */
.shb-sl-9 .shb-sl-main{position:relative;height:clamp(360px,44vw,500px);border-radius:var(--shb-radius);overflow:hidden}
.shb-sl-9 .shb-sl-track{position:absolute;inset:0}
.shb-sl-9 .shb-sl-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s}
.shb-sl-9 .shb-sl-item.is-active{opacity:1;visibility:visible}
.shb-sl-prog{position:absolute;top:0;inset-inline:0;height:3px;background:rgba(255,255,255,.2);z-index:7}
.shb-sl-prog i{display:block;height:100%;width:0;background:var(--shb-primary)}
.shb-sl-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:10px;overflow-x:auto;margin-top:11px;padding-bottom:6px}
.shb-sl-thumb{position:relative;border:0;background:var(--shb-card);border-radius:var(--shb-radius-sm);overflow:hidden;padding:0;text-align:start;opacity:.65;transition:.25s;border:1px solid var(--shb-border)}
.shb-sl-thumb img{width:100%;height:74px;object-fit:cover}
.shb-sl-thumb span{display:block;padding:8px 10px;font-size:13px;font-weight:700;line-height:1.6;color:var(--shb-text)}
.shb-sl-thumb.is-active,.shb-sl-thumb:hover{opacity:1;border-color:var(--shb-primary)}

/* ==========================================================================
   10) كشف متدرّج
   ========================================================================== */
.shb-sl-10{height:clamp(400px,50vw,570px);border-radius:var(--shb-radius);overflow:hidden}
.shb-sl-10 .shb-sl-track{position:absolute;inset:0}
.shb-sl-10 .shb-sl-item{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:clip-path .9s cubic-bezier(.65,.05,.25,1);z-index:1}
.shb-sl-10 .shb-sl-item.is-active{clip-path:inset(0 0 0 0);z-index:2}
.shb-sl-pager{position:absolute;inset-inline-end:22px;top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;gap:6px}
.shb-sl-pg{background:transparent;border:0;color:rgba(255,255,255,.55);font-family:var(--shb-font-head);font-weight:800;font-size:14px;padding:4px 7px;border-inline-end:2px solid rgba(255,255,255,.25);transition:.25s}
.shb-sl-pg.is-active{color:#fff;border-inline-end-color:var(--shb-primary);font-size:19px}
.shb-sl-10 .shb-sl-item>.shb-container .shb-sl-cap{padding-bottom:52px}

/* ==========================================================================
   الاستجابة
   ========================================================================== */
@media(max-width:1024px){
  .shb-sl-1,.shb-sl-6{grid-template-columns:1fr}
  .shb-sl-1 .shb-sl-main,.shb-sl-6 .shb-sl-main{height:400px}
  .shb-sl-side{grid-template-rows:none;grid-template-columns:repeat(4,1fr)}
  .shb-sl-list{max-height:250px}
  .shb-sl-4 .shb-sl-item{flex:0 0 50%}
  .shb-sl-5 .shb-sl-item{width:74%;margin-inline-start:-37%}
  .shb-sl-3,.shb-sl-8{grid-auto-rows:165px}
}
@media(max-width:782px){
  .shb-sl-1 .shb-sl-main,.shb-sl-6 .shb-sl-main{height:320px}
  .shb-sl-side{grid-template-columns:repeat(2,1fr)}
  .shb-sl-3{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .shb-sl-3 .shb-mz1{grid-column:span 2;grid-row:span 1}
  .shb-sl-3 .shb-mz1 .shb-title{font-size:19px}
  .shb-sl-8{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .shb-sl-8 .shb-hero1{grid-column:span 2;grid-row:span 1}
  .shb-sl-8 .shb-hero1 .shb-title{font-size:20px}
  .shb-sl-8 .shb-sl-ex{display:none}
  .shb-sl-4 .shb-sl-item{flex:0 0 85%}
  .shb-sl-5 .shb-sl-stage{height:330px}
  .shb-sl-5 .shb-sl-item{width:88%;margin-inline-start:-44%}
  .shb-sl-nav{opacity:1;width:38px;height:38px}
  .shb-sl-cap,.shb-sl-item>.shb-container .shb-sl-cap{padding:16px}
  .shb-sl-item>.shb-container .shb-sl-cap{padding-bottom:30px}
  .shb-sl-pager{inset-inline-end:10px}
}
@media(max-width:560px){
  .shb-sl-1 .shb-sl-main,.shb-sl-6 .shb-sl-main{height:260px}
  .shb-sl-2,.shb-sl-10{height:330px}
  .shb-sl-7{height:330px}
  .shb-sl-ex{display:none}
  .shb-sl-thumbs{grid-auto-columns:minmax(130px,1fr)}
}