قواعد التجاوب

الموبايل أولاً افتراضياً. 14 حارس CSS عالمي + طبقة §15 لتحسين الموبايل + رقعة §17 لتضييق الهوامش تتعامل مع كل قضية تجاوب شائعة دون كتابة لكل صفحة.

نقاط التوقّف

≥1440px · ديسكتوب

شبكة كاملة: كروت 3-up أو 4-up، شريط جانبي ثابت، كل الـ chrome.

1024px · لابتوب

الأشرطة الجانبية الثابتة تنشط (مثل sidebar الـ docs). شبكات قوائم 3-up.

768px · تابلت بورتريه

شبكات قوائم 2-up. قائمة الموبايل لا تزال نشطة في الـ header.

640px · موبايل كبير

طبقة التحسين §15 تنشط تحت هذا. كل `py-*`, `gap-*`, `mb-*` تتضاغط.

375px · موبايل صغير

القسم §16 يضاغط أكثر. حشو الكروت 0.75rem. سقف على عدد كروت swipe-scroll.

14 حارس CSS عالمي (§14 في styles.scss)

1. `html, body { max-width: 100%; overflow-x: hidden }` — يلغي horizontal scroll العَرَضي.
2. `body { word-wrap: break-word }` — الـ URLs / hashtags الطويلة تلتفّ بدل الفيض.
3. `img, svg, video, iframe { max-width: 100%; height: auto }` — الـ media لا تخرج أبداً.
4. منع iOS auto-zoom: حقول النماذج بـ `font-size: 16px` تحت 640px.
5. أهداف لمس 44px عبر `@media (hover: none) and (pointer: coarse)`.
6. ارتفاع سطر الـ hero يضيق إلى 1.1 على الموبايل.
7. أداة `.no-mobile` تخفي المحتوى الزخرفي تحت 640px.
8. momentum scroll ناعم على iOS للأشرطة الأفقية.
9. الأشرطة الجانبية الثابتة تُحرَّر إلى `position: static` تحت 1024px.
10. RTL `.icon-flip` يعكس الأسهم تلقائياً.
11. تحوّلات hover معطّلة على أجهزة اللمس.
12. نص روابط الـ footer يلتفّ بنظافة عبر `overflow-wrap: anywhere`.
13. أداة `.btn-mobile-full` تمدّ الأزرار إلى 100% تحت 480px.
14. `.grid > * { min-width: 0 }` عالمي — يمنع فيض شبكة grid من المحتوى الطويل.