متطلبات التجاوب

مقالات التغطية مُصَمَّمة بنمط-المجلّة-أوَّلاً على سطح المكتب، خلاصة-مُكَثَّفة على الموبايل. شريط الـ hero، عرض الجسم، وانتقالات الشريط الجانبي كلّها مُدركة-للـ breakpoint. نسبة عرض-إلى-ارتفاع صورة الغلاف تَتَحَوَّل من 16:9 سطح المكتب إلى 4:3 موبايل للحفاظ على تأطير الموضوع على الشاشات الأضيق.

الـ Breakpoints

موبايل (≤640px)

غلاف Hero بـ 4:3. العنوان H1 28px، dek 16px. Byline + شريحة الفعالية الوالد تَتكدَّس عمودياً. عرض الجسم = viewport - 32px padding. كتل الشريط الجانبي تَنطوي إلى شريط scroll أفقي في أسفل الجسم. شريط إفصاح الراعي يَبقى عرض-كامل sticky-top حتى أول scroll للجسم.

تابلت (641-1024px)

غلاف Hero بـ 16:9. العنوان H1 38px. الجسم لا يزال عمود واحد لكن max-width 600px مُتوسَّط. الشريط الجانبي يَظهر بعد محتوى الجسم (ليس بجانبه) — نفس معالجة الشريط الأفقي كالموبايل لكن كروت أوسع.

سطح المكتب (≥1025px)

غلاف Hero بـ 16:9، full-bleed. العنوان H1 48px، dek 20px. عرض الجسم الأقصى 720px في العمود الرئيسي. الشريط الجانبي 320px عرض على اليمين، sticky على التمرير. متغيّرات الكرت بالحجم الكامل — شارة kind فوق العنوان مع معالجة نوع-ولون.

متغيّرات كرت التغطية

• صغير (مضغوط): مُستخدَم داخل كتلة شريط جانبي كرت الفعالية الوالد. غلاف 80x80 + عنوان + dek سطر واحد مُقَطَّع + شارة kind.
• قياسي: مُستخدَم على صفحات تفاصيل الفعالية، شرائط إشارة المؤسّس/الشركة. غلاف 16:9 + عنوان (2-سطر clamp) + dek (3-سطر clamp) + byline.
• كبير (isFeatured=true فقط): غلاف أكبر، dek أطول، شارة kind في الزاوية العلوية اليسرى.
• متغيّر مدفوع: أيّ من الـ 3 أعلاه يَحصل على خلفية مُلَوَّنة-بصبغة-الراعي + تسمية "SPONSORED" تَحلّ محلّ شارة kind.