/* ============================================================
   Zoalk — grid.css
   نظام شبكة 12 عمود بنمط Bootstrap لكن بـ CSS Grid حديث
   RTL-ready تلقائياً (Grid يتبع اتجاه الوثيقة)
   نقاط التوقف: sm 576 / md 768 / lg 992 / xl 1200
   الاستخدام:
     <div class="container">
       <div class="row g-4">
         <div class="c-12 c-md-6 c-lg-4">...</div>
       </div>
     </div>
   ============================================================ */

/* -------- الحاويات -------- */
.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--sp-4);
}
.container--narrow{max-width:var(--container-narrow);}
.container--fluid{max-width:none;}

/* -------- الصف -------- */
.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--sp-4);
}

/* تخصيص الفراغات على مستوى الصف */
.row.g-0{gap:0;}
.row.g-2{gap:var(--sp-2);}
.row.g-3{gap:var(--sp-3);}
.row.g-4{gap:var(--sp-4);}
.row.g-6{gap:var(--sp-6);}
.row.g-8{gap:var(--sp-8);}

/* -------- الأعمدة (موبايل أولاً: الافتراضي عرض كامل) -------- */
[class*="c-"]{grid-column:span 12;min-width:0;}

.c-1{grid-column:span 1;}   .c-2{grid-column:span 2;}
.c-3{grid-column:span 3;}   .c-4{grid-column:span 4;}
.c-5{grid-column:span 5;}   .c-6{grid-column:span 6;}
.c-7{grid-column:span 7;}   .c-8{grid-column:span 8;}
.c-9{grid-column:span 9;}   .c-10{grid-column:span 10;}
.c-11{grid-column:span 11;} .c-12{grid-column:span 12;}

/* -------- sm ≥ 576px -------- */
@media (min-width:576px){
  .c-sm-1{grid-column:span 1;}   .c-sm-2{grid-column:span 2;}
  .c-sm-3{grid-column:span 3;}   .c-sm-4{grid-column:span 4;}
  .c-sm-5{grid-column:span 5;}   .c-sm-6{grid-column:span 6;}
  .c-sm-7{grid-column:span 7;}   .c-sm-8{grid-column:span 8;}
  .c-sm-9{grid-column:span 9;}   .c-sm-10{grid-column:span 10;}
  .c-sm-11{grid-column:span 11;} .c-sm-12{grid-column:span 12;}
}

/* -------- md ≥ 768px -------- */
@media (min-width:768px){
  .c-md-1{grid-column:span 1;}   .c-md-2{grid-column:span 2;}
  .c-md-3{grid-column:span 3;}   .c-md-4{grid-column:span 4;}
  .c-md-5{grid-column:span 5;}   .c-md-6{grid-column:span 6;}
  .c-md-7{grid-column:span 7;}   .c-md-8{grid-column:span 8;}
  .c-md-9{grid-column:span 9;}   .c-md-10{grid-column:span 10;}
  .c-md-11{grid-column:span 11;} .c-md-12{grid-column:span 12;}
}

/* -------- lg ≥ 992px -------- */
@media (min-width:992px){
  .c-lg-1{grid-column:span 1;}   .c-lg-2{grid-column:span 2;}
  .c-lg-3{grid-column:span 3;}   .c-lg-4{grid-column:span 4;}
  .c-lg-5{grid-column:span 5;}   .c-lg-6{grid-column:span 6;}
  .c-lg-7{grid-column:span 7;}   .c-lg-8{grid-column:span 8;}
  .c-lg-9{grid-column:span 9;}   .c-lg-10{grid-column:span 10;}
  .c-lg-11{grid-column:span 11;} .c-lg-12{grid-column:span 12;}
}

/* -------- xl ≥ 1200px -------- */
@media (min-width:1200px){
  .c-xl-1{grid-column:span 1;}   .c-xl-2{grid-column:span 2;}
  .c-xl-3{grid-column:span 3;}   .c-xl-4{grid-column:span 4;}
  .c-xl-5{grid-column:span 5;}   .c-xl-6{grid-column:span 6;}
  .c-xl-7{grid-column:span 7;}   .c-xl-8{grid-column:span 8;}
  .c-xl-9{grid-column:span 9;}   .c-xl-10{grid-column:span 10;}
  .c-xl-11{grid-column:span 11;} .c-xl-12{grid-column:span 12;}
}

/* -------- شبكة تلقائية (بطاقات متساوية بدون حساب أعمدة) --------
   للرفوف: تحسب عدد الأعمدة بنفسها حسب المساحة
   <div class="grid-auto" style="--min:16rem">...</div>       */
.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(var(--min,15rem),100%),1fr));
  gap:var(--sp-4);
}