/* ============================================================
   Zoalk — utils.css
   يوتيليتيز قصيرة الأسماء — مجموعة مضبوطة، ليست Tailwind
   القاعدة: اليوتيليتي للتعديلات الصغيرة، والمكوّن للأنماط المتكررة
   ============================================================ */

/* -------- Flexbox -------- */
.flx{display:flex;}
.flx-col{display:flex;flex-direction:column;}
.flx-wrap{flex-wrap:wrap;}
.ai-c{align-items:center;}
.ai-s{align-items:flex-start;}
.ai-e{align-items:flex-end;}
.jc-c{justify-content:center;}
.jc-b{justify-content:space-between;}
.jc-e{justify-content:flex-end;}
.flx-1{flex:1;}
.shrink-0{flex-shrink:0;}

/* -------- الفراغات gap -------- */
.g-1{gap:var(--sp-1);} .g-2{gap:var(--sp-2);} .g-3{gap:var(--sp-3);}
.g-4{gap:var(--sp-4);} .g-6{gap:var(--sp-6);} .g-8{gap:var(--sp-8);}

/* -------- الهوامش (logical: تنعكس تلقائياً في RTL) -------- */
.mt-2{margin-block-start:var(--sp-2);} .mt-4{margin-block-start:var(--sp-4);}
.mt-6{margin-block-start:var(--sp-6);} .mt-8{margin-block-start:var(--sp-8);}
.mb-2{margin-block-end:var(--sp-2);}   .mb-4{margin-block-end:var(--sp-4);}
.mb-6{margin-block-end:var(--sp-6);}   .mb-8{margin-block-end:var(--sp-8);}
.mi-a{margin-inline:auto;}
.ms-a{margin-inline-start:auto;} /* يدفع العنصر للطرف المقابل */

/* -------- الحشوات -------- */
.p-2{padding:var(--sp-2);} .p-4{padding:var(--sp-4);}
.p-6{padding:var(--sp-6);} .p-8{padding:var(--sp-8);}
.px-4{padding-inline:var(--sp-4);} .py-4{padding-block:var(--sp-4);}
.py-8{padding-block:var(--sp-8);}  .py-12{padding-block:var(--sp-12);}
.py-16{padding-block:var(--sp-16);}

/* -------- النص -------- */
.txt-c{text-align:center;}
.txt-s{text-align:start;}
.txt-e{text-align:end;}
.txt-muted{color:var(--text-muted);}
.txt-dim{color:var(--text-dim);}
.txt-primary{color:var(--primary);}
.txt-accent{color:var(--accent);}
.txt-danger{color:var(--danger);}
.fs-sm{font-size:var(--fs-sm);}
.fs-xs{font-size:var(--fs-xs);}
.fw-m{font-weight:500;}
.fw-b{font-weight:700;}
.fw-x{font-weight:800;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* السطر الذهبي فوق عناوين الأقسام */
.eyebrow{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--accent);
  letter-spacing:.03em;
}

/* -------- الخلفيات والأسطح -------- */
.bg-surface{background:var(--surface);}
.bg-elevated{background:var(--bg-elevated);}
.bg-primary-tint{background:var(--primary-tint);}
.bg-accent-tint{background:var(--accent-tint);}

/* -------- الحواف والظلال -------- */
.r-sm{border-radius:var(--r-sm);} .r-md{border-radius:var(--r-md);}
.r-lg{border-radius:var(--r-lg);} .r-pill{border-radius:var(--r-pill);}
.bordered{border:1px solid var(--border);}
.shadow-sm{box-shadow:var(--shadow-sm);}
.shadow-md{box-shadow:var(--shadow-md);}

/* -------- الإظهار والإخفاء المتجاوب -------- */
.hide{display:none;}
@media (max-width:767.98px){ .hide-sm{display:none;} }
@media (min-width:768px){ .hide-md-up{display:none;} }

/* -------- الظهور عند التمرير (مع IntersectionObserver) -------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible{opacity:1;transform:none;}
/* بدون JS أو مع reduced-motion: المحتوى ظاهر */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;}
}