/*
=========================================================
MAHEDI ALTAYS — FOCUS RAIL
=========================================================

المشكلة

«ما أعمل عليه حاليًا» كان شبكةً تُطوى: بطاقتان ظاهرتان
وزرّ «المزيد» يفتح الباقي. والطيّ حلٌّ لطول الصفحة، لكنه
حلّ ساكن: الزائر يضغط زرًّا ليرى، ثم يضغطه ليخفي.

وهذا القسم يختلف عن أخوته: بطاقاته مشاريع — لكلٍّ اسمه
وربّما موقعه. والمشاريع تُستعرض لا تُطوى.

الحلّ

شريط أفقيّ يُسحب بالإصبع. كل بطاقة تستقرّ في مكانها عند
انتهاء السحب (scroll-snap)، فلا تقف الصفحة بين بطاقتين.

    السحب يسارًا يُقدّم، ويمينًا يُرجع — وفي العربية
    ينعكس المعنى تلقائيًّا لأن الاتجاه من الوثيقة لا
    من الشيفرة.

ولماذا لا يُطوى بعد اليوم

لأن كل البطاقات صارت في المتناول بسحبة. وزرّ «المزيد»
فوق شريط قابل للسحب يقول شيئين متناقضين في موضع واحد.
لذلك أُخرج هذا القسم من قائمة الطيّ في site-collapse.js.

الانضباط

الحركة كلها من سُلَّم --motion، والسحب السلس يتوقّف عند
prefers-reduced-motion فيقفز إلى البطاقة بلا انزلاق.

=========================================================
*/


/* ---------------------------------------------------------
   1 — الشريط على الهاتف واللوح
   --------------------------------------------------------- */

@media (max-width:900px){

  #focus .focus-grid{
    display:grid;

    /*
    base.css يعلن grid-template-columns: repeat(2,1fr) على
    الهاتف. والأعمدة الصريحة تسبق التلقائية، فبقيت البطاقات
    في عمودين وتجاهلت grid-auto-columns تمامًا — قِيست
    مراكزها فخرجت متفاوتة: 74 و211 و430 و723.

    فتُلغى الأعمدة الصريحة أولًا، ثم يُقرأ التدفّق التلقائي.
    */
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    gap:14px;

    /*
    الحشو الجانبي يجعل أول بطاقة وآخرها تستقرّان بمحاذاة
    النصّ فوقهما، لا ملتصقتين بحافّة الشاشة.
    */
    padding-inline:4px;
    padding-block-end:10px;

    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;

    /* شريط التمرير يُخفى: السحب نفسه هو الإشارة */
    scrollbar-width:none;
    max-width:100%;
    min-width:0;
  }

  #focus .focus-grid::-webkit-scrollbar{
    display:none;
  }

  #focus .focus-grid > *{
    scroll-snap-align:center;
    min-height:100%;
  }

  /* الشريط لا يُطوى، فزرّ الطيّ إن وُجد لا يُعرض */
  #focus .site-collapse-toggle{
    display:none;
  }
}


/* ---------------------------------------------------------
   2 — النقاط

   مؤشّر واحد يقول كم بطاقة وأين نحن منها. يُبنى من
   focus-rail.js لأن عددها يتبع المحتوى لا التصميم.
   --------------------------------------------------------- */

.focus-rail-dots{
  display:none;
}

@media (max-width:900px){

  .focus-rail-dots{
    display:flex;
    justify-content:center;
    gap:2px;

    margin-block-start:14px;
  }

  /*
  =========================================================
  مساحة اللمس في الزرّ نفسه، لا في طبقة فوقه
  =========================================================

  أول محاولة وسّعت مساحة اللمس بعنصر زائف مداه ١٤ بكسل في
  كل اتجاه. والفجوة بين نقطة وأخرى ٩ بكسل — فتداخلت
  المساحتان، وصارت كل نقطة تبتلع ضغطات جارتها.

  أمسكه الاختبار الآليّ فورًا: «زرّ يعترض أحداث المؤشّر».

      ما يوسّع مساحة اللمس يجب أن يوسّع العنصر نفسه،
      لا أن يفرش طبقة فوق جيرانه.

  فالزرّ الآن ٢٦ بكسل شفّافًا، والنقطة ثمانية في وسطه.
  =========================================================
  */
  .focus-rail-dots button{
    width:26px;
    height:26px;
    padding:0;

    display:grid;
    place-items:center;

    border:0;
    background:transparent;
    cursor:pointer;
  }

  .focus-rail-dots button::before{
    content:"";

    width:8px;
    height:8px;

    border-radius:50%;
    background:rgba(var(--tint-light-rgb), .22);

    transition:background var(--motion-fast) ease, width var(--motion-fast) ease;
  }

  .focus-rail-dots button.is-active::before{
    width:22px;
    border-radius:999px;
    background:var(--brand-bronze);
  }
}


/* ---------------------------------------------------------
   3 — من طلب سكونًا
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){

  #focus .focus-grid{
    scroll-behavior:auto;
  }
}