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

أسطح التقويم مُهيَّأة أولاً responsive. شريحة التاريخ هي العنصر-اللا-يَنطوي: تبقى مرئية عند كل breakpoint، حتى حين عرض الكرت ينزل إلى 320px. شرائط الفلتر تنطوي إلى drawer sticky-bottom على الموبايل. نصّ Hero يُقاس من 48px سطح المكتب إلى 28px موبايل.

الـ Breakpoints

موبايل (≤640px)

شبكة كرت عمود واحد. شريحة التاريخ + العنوان في صفّ واحد (شريحة يسار، عنوان يمين). الفلاتر تنطوي إلى drawer sticky-bottom مُحفَّز بزرّ فلتر عائم. شرائط الهبوط: scroll-snap أفقي، 1.2-card peek ليعرف المستخدم أن يُمرِّر.

تابلت (641-1024px)

شبكة كرت عمودَيْن. شريط الفلتر يبقى مرئياً لكن مضغوطاً (شريحة-فقط، لا panel). شرائط الهبوط تعرض 2.5 كرت لكل viewport.

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

شبكة كرت 3 أعمدة (أو 4 على ≥1440px). شريط الفلتر panel كامل، sticky على التمرير. شرائط الهبوط تعرض 4 كروت لكل viewport مع تنقّل chevron.

تفاصيل صفحة التفاصيل

• سطح المكتب: تخطيط عمودَيْن (الرئيسي 2/3، الشريط الجانبي 1/3). الشريط الجانبي sticky على التمرير حتى يصطدم بـ footer.
• تابلت: الشريط الجانبي ينزل أسفل المحتوى الرئيسي؛ إشارات cross-module تصبح شريط scroll أفقي.
• موبايل: عمود واحد. الـ CTAs تصبح عرض-كامل، مكدَّسة. الخريطة تنطوي إلى صورة مصغّرة tap-to-expand.