/* ============================================================
   مكتبة المحاضرات — css/lectures.css
   تُحمَّل في صفحتين فقط: pages/lectures.html و pages/lecture.html
   (بعد css/style.css). كل ما هنا خاصّ بهما.

   ملاحظة: لا نستعمل الصنف .videobox هنا — دالة applyVideoConfig
   في js/script.js تلتقط أول .videobox في الصفحة وتخفي القسم الحاوي
   لها حين يكون SITE.video.enabled = false، فتختفي هذه الصفحة كلّها.
   ============================================================ */

/* ---------- 1 · المعرض (lectures.html) ---------- */

.lecgrid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:600px){.lecgrid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.lecgrid{grid-template-columns:repeat(3,1fr)}}

.leccard{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid rgba(21,32,46,.08);border-radius:22px;
  box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.leccard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue)}

/* الغلاف: نسبة 16:9 ثابتة حتى لا تقفز الصفحة أثناء تحميل الصور */
.lec-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(140deg,var(--night),var(--night2))}
.lec-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s}
.leccard:hover .lec-thumb img{transform:scale(1.04)}
/* بديل الصورة حين لا يوجد ملف في assets/lectures/ */
.lec-thumb.is-blank::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 70% 10%,rgba(74,179,226,.35),transparent 60%),
             radial-gradient(90% 80% at 20% 90%,rgba(200,151,42,.30),transparent 60%)}

/* زرّ التشغيل المرسوم فوق الغلاف */
.lec-play{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:2;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,19,34,.72);border:1.5px solid rgba(255,255,255,.5);
  transition:background .25s,transform .25s}
.leccard:hover .lec-play{background:var(--blue);transform:scale(1.08)}
.lec-play svg{width:18px;height:18px;fill:#fff;margin-inline-start:2px}

.lec-body{display:flex;flex-direction:column;gap:9px;padding:18px 18px 20px;flex:1}
.lec-body h3{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.55}
.lec-speaker{display:block;font-size:.9rem;font-weight:600;color:var(--blue-deep)}
.lec-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.lec-tag{font-size:.76rem;font-weight:600;color:var(--ink-2);
  background:var(--paper-2);border-radius:999px;padding:4px 11px}
.lec-tag.ltr{direction:ltr;unicode-bidi:isolate}

/* الحالة الفارغة (لا محاضرات في الإعدادات بعد): لوحة كاملة الحضور بدل
   صندوق صغير متقطّع، وهامش المقطع يضيق حولها كي لا تبدو الصفحة مكسورة. */
.lecempty{display:grid;align-content:center;min-height:200px;
  margin-top:0;padding:52px 28px;border-radius:24px;text-align:center;
  font-size:1.08rem;line-height:1.9;color:var(--ink);max-width:560px;margin-inline:auto;
  background:linear-gradient(160deg,var(--paper-2),#eaf5fb);border:1px solid rgba(74,179,226,.28);
  box-shadow:var(--shadow-sm,0 6px 20px rgba(21,32,46,.06))}
.lecempty a{font-weight:700;color:var(--blue-deep)}
.lecgrid:empty{display:none}
section:has(>.wrap>.lecempty:not([hidden])){padding-block:28px 40px}
@media(min-width:760px){section:has(>.wrap>.lecempty:not([hidden])){padding-block:36px 56px}}

/* ---------- 2 · صفحة المشاهدة (lecture.html) ---------- */

/* صفحة المشاهدة تبدأ بالمشغّل مباشرة بلا .phero، فتحتاج نفس المسافة
   التي تتركها .phero للترويسة الثابتة. */
.lecwatch{padding-top:120px}
@media(min-width:760px){.lecwatch{padding-top:136px}}

.lecwrap{max-width:880px;margin-inline:auto}

.lec-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.92rem;
  color:var(--blue-deep);margin-bottom:16px}
.lec-back::before{content:"→"}
.lec-back:hover{text-decoration:underline;text-underline-offset:3px}

/* المشغّل: إطار «باسبارتو» كإطار الفيديو التعريفي في الصفحة الرئيسية */
.lecstage{position:relative;border-radius:26px;padding:10px;background:#fff;
  border:1.5px solid rgba(74,179,226,.45);box-shadow:var(--shadow-md)}
.lecframe{display:block;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:linear-gradient(140deg,var(--night),var(--night2))}
.lecframe img,.lecframe iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block}
.lecframe img{object-fit:cover}

/* زرّ التشغيل الكبير: الفيديو لا يُحمَّل من يوتيوب إلا بعد الضغط عليه */
.lec-start{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  width:100%;border:0;cursor:pointer;background:rgba(10,19,34,.42);
  transition:background .25s}
.lec-start:hover{background:rgba(10,19,34,.25)}
.lec-start .disc{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);box-shadow:0 10px 30px -8px rgba(10,19,34,.7);
  transition:transform .25s}
.lec-start:hover .disc{transform:scale(1.08)}
.lec-start .disc svg{width:28px;height:28px;fill:#fff;margin-inline-start:4px}
.lec-start .lbl{position:absolute;inset-block-end:14px;font-size:.84rem;font-weight:700;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}

.lechead{margin-top:22px}
.lechead h1{font-size:clamp(1.35rem,4.2vw,1.95rem);font-weight:700;color:var(--ink);
  line-height:1.5;margin-bottom:10px}
.lec-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.lec-by b{color:var(--blue-deep);font-size:1rem}
.lec-by span{color:var(--ink-2);font-size:.9rem}
.lec-blurb{color:var(--ink-2);font-size:1rem;line-height:1.9;max-width:66ch}

.lecmore{margin-top:40px}
.lecmore .lecgrid{grid-template-columns:1fr}
@media(min-width:600px){.lecmore .lecgrid{grid-template-columns:repeat(3,1fr)}}

/* حالة «لم نجد المحاضرة» */
.lecmiss{margin-top:24px;padding:38px 24px;border-radius:24px;text-align:center;
  background:var(--white);border:1px solid rgba(21,32,46,.08);box-shadow:var(--shadow-sm)}
.lecmiss h2{font-size:1.35rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.lecmiss p{color:var(--ink-2);margin-bottom:18px}

@media(prefers-reduced-motion:reduce){
  .leccard,.lec-thumb img,.lec-play,.lec-start,.lec-start .disc{transition:none}
  .leccard:hover{transform:none}
  .leccard:hover .lec-thumb img{transform:none}
}