/* قدراتك — شريط دروس الفيديو في الرئيسية */
#home-lessons { margin: 0 auto 22px; }
.hl-head { text-align:center; margin-bottom:14px; }
.hl-head h2 { font-size:24px; margin:0 0 4px; } .hl-head p { margin:0; color:var(--ink-soft); font-size:14.5px; }
.hl-stage { position:relative; }
.hl-track { display:flex; align-items:center; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px 18vw 10px; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; }
.hl-track::-webkit-scrollbar { display:none; }
/* كل البطاقات بمقاس واحد في التخطيط؛ الجانبية تصغَّر بالتحويل (transform) فقط حتى لا يتغير ارتفاع الصفحة ولا تهتز عند الحركة */
.hl-card { position:relative; z-index:1; flex:0 0 640px; margin:0 -150px; scroll-snap-align:center; direction:rtl; cursor:pointer; transition:transform .45s cubic-bezier(.22,.8,.3,1), opacity .45s; opacity:.85; transform:scale(.68); will-change:transform; }
.hl-card.is-main { cursor:default; }
.hl-track.hl-scrolling .hl-card { transition:none; }   /* أثناء التمرير يتولى السكربت الحجم لحظيًا */
.hl-thumb { position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#122244 center/cover no-repeat; box-shadow:0 14px 40px rgba(16,30,60,.22); color:#fff; }
.hl-card.is-main .hl-thumb { box-shadow:0 22px 60px rgba(16,30,60,.32); }
.hl-tpl { background:radial-gradient(120% 90% at 85% 10%, #27477A 0%, #152A50 45%, #0E1C3A 100%); }
.hl-deco { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px); background-size:18px 18px; opacity:.6; mask-image:linear-gradient(to left, rgba(0,0,0,.9), transparent 70%); -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.9), transparent 70%); }
.hl-sec { position:absolute; top:10px; left:12px; font-size:12px; font-weight:800; color:#241B0A; background:var(--gold); padding:3px 10px; border-radius:999px; }
.hl-ttl { position:absolute; right:14px; top:50%; transform:translateY(-50%); left:84px; font-size:clamp(15px, 2.6vw, 28px); font-weight:800; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.hl-img::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); }
.hl-play { position:absolute; left:14px; bottom:14px; width:50px; height:50px; border-radius:50%; background:var(--gold); color:#241B0A; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.4), 0 0 0 7px rgba(242,169,60,.18); transition:transform .2s; cursor:pointer; }
.hl-card.is-main .hl-play { width:66px; height:66px; } .hl-card.is-main .hl-play:hover { transform:scale(1.07); }
.hl-dur { position:absolute; left:76px; bottom:26px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:700; padding:2px 8px; border-radius:6px; direction:ltr; }
.hl-card.is-main .hl-dur { left:94px; bottom:34px; }
.hl-meta { text-align:right; padding:10px 6px 0; } .hl-meta b { display:block; font-size:15px; } .hl-meta span { font-size:12.5px; color:var(--ink-soft); }
.hl-card:not(.is-main) .hl-meta { display:none; }
.hl-meta { display:none; }
.hl-player { position:absolute; inset:0; background:#000; z-index:3; } .hl-player[hidden] { display:none; }
.hl-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.hl-wm { position:absolute; top:8px; right:10px; z-index:2; pointer-events:none; font-size:11px; font-weight:600; color:rgba(255,255,255,.42); white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.hl-x { position:absolute; top:8px; left:8px; z-index:4; width:34px; height:34px; border-radius:9px; border:0; background:rgba(0,0,0,.5); color:#fff; font-size:15px; cursor:pointer; }
.hl-goto { position:absolute; bottom:8px; right:10px; z-index:4; font-size:12.5px; color:#fff; background:rgba(0,0,0,.5); padding:4px 10px; border-radius:8px; text-decoration:none; }
.hl-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.hl-gate { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; background:radial-gradient(120% 90% at 85% 10%, #27477A 0%, #152A50 45%, #0E1C3A 100%); color:#fff; }
.hl-gate b { font-size:18px; } .hl-gate span { font-size:13.5px; color:rgba(255,255,255,.8); } .hl-gate .btn { margin-top:4px; }
.hl-login { font-size:13px; color:#fff; text-decoration:underline; }
.hl-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:var(--ink); font-size:26px; line-height:1; box-shadow:0 6px 18px rgba(16,30,60,.2); cursor:pointer; }
.hl-prev { right:8px; } .hl-next { left:8px; }
.hl-hover { position:absolute; top:0; bottom:0; width:12%; z-index:4; } .hl-hover-l { left:0; } .hl-hover-r { right:0; }
@media (max-width: 860px) {
  .hl-track { padding:10px 14vw 6px; }
  .hl-card { flex-basis:72vw; margin:0 -9vw; opacity:.9; transform:scale(.8); } .hl-card.is-main { transform:scale(1); }
  .hl-arrow, .hl-hover { display:none; }
  .hl-head h2 { font-size:20px; }
  .hl-card.is-main .hl-play { width:50px; height:50px; } .hl-card.is-main .hl-dur { left:76px; bottom:26px; }
  .hl-thumb { border-radius:14px; }
}
@media (hover: none) { .hl-hover { display:none; } }