/* ==========================================================
   حارس الجوال العام — يُطبَّق على كل صفحات الواجهة
   الرئيسية · الجهات · البطاقات · المدونة · الصفحات · التواصل
   ==========================================================
   ثلاث قواعد مستخلصة من أعطال حقيقية وقعت في هذا المستودع:

   1) أعمدة بلا أساس: الوسم يستعمل col-md-* بلا col-12 يسبقه. تحت
      768px لا تنطبق أي فئة، فيصير العمود عنصر فلكس بلا عرض وينكمش
      إلى مقاس محتواه ويترك نصف الشاشة بيضاء بجواره.

   2) هوامش الصف السالبة: .row يرث هامشاً سالباً، فإن فُرض على
      أبنائه عرض 100% خرجوا عن حشوة حاويتهم وظهرت أطرافهم مقطوعة
      عند حافة الشاشة.

   3) زخرفة مطلقة بلا قص: هالة بعرض 480px و right:-100px مدّت
      المستند إلى 496px على شاشة 375px، فصار للرئيسية تمرير أفقي.
   ========================================================== */

@media (max-width: 767.98px) {
    /* (1) كل عمود يملأ العرض ما لم يُطلب خلاف ذلك صراحةً بفئة تنطبق
           على هذا المقاس (col-4 مثلاً). */
    [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-4"]):not([class*="col-6"]):not([class*="col-3"]) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* (2) لا فيض عن حشوة الحاوية. */
    .container > .row,
    .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* أهداف لمس مريحة في كل الواجهة. */
    .btn,
    button:not(.close):not([class*="lib-"]),
    input[type="submit"] {
        min-height: 44px;
    }

    /* خط المدخلات 16px فأعلى وإلا قفز iOS بالشاشة عند التركيز. */
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* (3) الزخارف المطلقة تبقى داخل أقسامها ولا تمدّ المستند.
       يسري على كل المقاسات لأن الفيض الأفقي عطل في كل عرض. */
.premium-home-hero,
.page-top-header,
.entity-hero,
.entity-hero-section,
.blog-hero {
    overflow: hidden;
}

/* ==========================================================
   مقياس الطباعة على الجوال — تناسق بصري
   ----------------------------------------------------------
   القياس على شاشة 375px أظهر عنواناً بـ30px وأيقونات حتى 20px،
   وهي أحجام مصمَّمة لشاشة عريضة فتبدو ثقيلة على الهاتف.
   خُفِّضت بنسبة متدرّجة: كلما كبر العنصر كبرت نسبة التخفيض،
   فيبقى التدرّج بين المستويات محفوظاً ولا تتسطّح الهرمية.

   نص المتن ونص المدخلات يبقيان 16px عمداً: أقل من ذلك يجعل iOS
   يكبّر الشاشة تلقائياً عند التركيز على أي حقل — عطل أوضح للمستخدم
   من فارق بكسلين في الحجم.
   ========================================================== */
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 25px; line-height: 1.35; }
    h2, .h2 { font-size: 21px; line-height: 1.4; }
    h3, .h3 { font-size: 18px; line-height: 1.45; }
    h4, .h4 { font-size: 16px; line-height: 1.5; }

    /* الأيقونات الكبيرة وحدها تُقلَّص؛ الصغيرة (12px وأخواتها) متناسقة
       أصلاً فلا تُمسّ. */
    .fa-2x  { font-size: 1.5em; }
    .fa-3x  { font-size: 2em; }
    .fa-lg  { font-size: 1.15em; }

    /* أيقونة داخل زر أو عنوان تتبع حجم نصها بدل حجم ثابت. */
    .btn .fa,
    h1 .fa, h2 .fa, h3 .fa {
        font-size: 0.9em;
    }
}
/* (4) لا عنصر يتجاوز عرض الشاشة.
   صفحات الجهة تجعل body حاوية flex عمودية، وفي هذه الحالة يأخذ
   الابن عرضَ أعرضِ عنصر في السطر لا عرضَ الحاوية — فيتمدّد القسم
   إلى ٦٣٠ بكسلاً على شاشة ٣٧١، ويخرج المحتوى من الجهتين معاً.
   العطل لا يظهر إلا حين يكون body نفسه flex، ولهذا نجت منه بقية
   الصفحات وظهر في صفحات الجهة وحدها.

   وبعد توحيد القوالب صار القسم حفيداً لا ابناً — غلاف
   main-page-wrapper بينهما — فلم تعد قاعدة الأبناء تبلغه وعاد
   التآكل. فشملت القاعدة الغلاف وأبناءه وحاوياتهم.

   مُقاس على الإنتاج مرتين: ٦٣٠ ← ٣٧١ أولاً، ثم ٦٨٨ ← ٣٦٠ بعد
   التوحيد. */
@media (max-width: 767.98px) {
    body > *,
    .main-page-wrapper > *,
    .main-page-wrapper > * > .container,
    .main-page-wrapper > * > .container-fluid {
        max-width: 100%;
    }
}