/* =====================================================================
   mobile-fixes.css — إصلاحات الجوال فقط (الصحراء الرقمية)
   ---------------------------------------------------------------------
   - لا يؤثر على الديسكتوب إطلاقًا (كل شيء داخل @media (max-width: 768px))
   - يستخدم CSS Media Queries فقط
   - يُحافظ على الهوية البصرية (ألوان، خطوط، تأثيرات زجاجية)
   - الهدف: إزالة الفراغات الرأسية الزائدة وضمان ملء العرض الكامل
   ===================================================================== */

/* ---------- شاشات الجوال (حتى 768px) ---------- */
@media (max-width: 768px) {

  /* 1) منع الفيض الأفقي الذي يترك أشرطة فارغة على الجنبين */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* 2) تقليص الحشو العمودي الضخم (py-32 = 256px) في كل الأقسام
        py-32 → ما يعادل py-12 تقريبًا على الجوال (3rem علوي + 3rem سفلي) */
  section#hero,
  section#about,
  section#services,
  section#works,
  section#team,
  section#contact {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* 3) قسم الهيرو يحتاج مساحة أعلى إضافية لأن الناف بار ثابت فوقه */
  section#hero {
    padding-top: 5.5rem !important;
    padding-bottom: 2.5rem !important;
    min-height: auto !important;
  }

  /* 4) تصغير الهوامش الكبيرة على عناوين الأقسام والعناصر الداخلية
        (mb-20 = 80px, mt-20 = 80px, mb-16 = 64px, mb-12 = 48px) */
  section .mb-20 { margin-bottom: 2rem !important; }
  section .mt-20 { margin-top: 2rem !important; }
  section .mb-16 { margin-bottom: 1.75rem !important; }
  section .mb-12 { margin-bottom: 1.5rem !important; }
  section .mb-10 { margin-bottom: 1.25rem !important; }
  section .mb-8  { margin-bottom: 1.25rem !important; }
  section .mt-16 { margin-top: 1.75rem !important; }
  section .mt-12 { margin-top: 1.5rem !important; }

  /* 5) تصغير فجوات الجريد والفلِكس التي تُحدث فراغات بين البطاقات */
  section .gap-12 { gap: 1.25rem !important; }
  section .gap-8  { gap: 1rem !important; }
  section .gap-6  { gap: 0.875rem !important; }

  /* 6) ضمان ملء العرض للحاويات الداخلية (max-w-[1600px] ... ) */
  section > div,
  section .max-w-\[1600px\],
  section .max-w-7xl,
  section .max-w-6xl,
  section .max-w-5xl {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 7) البطاقات والبلوكات الزجاجية: ملء العرض مع هامش داخلي مريح */
  .glass-effect,
  .glass-strong {
    width: 100%;
    box-sizing: border-box;
  }

  /* 8) عناصر h-[600px] / h-[700px] / h-[92vh] (تُستخدم في خرائط وصور كبيرة)
        تصبح بارتفاع متناسب بدل ارتفاع ثابت يخلق فراغات على الجوال */
  .h-\[600px\] { height: 380px !important; }
  .h-\[700px\] { height: 420px !important; }
  .h-\[92vh\]  { height: auto !important; min-height: 70vh !important; }

  /* 9) عناصر pt-40 / pt-48 / pb-32 المتناثرة (خارج الأقسام الرئيسية) */
  .pt-48 { padding-top: 5rem !important; }
  .pt-40 { padding-top: 4.5rem !important; }
  .pt-24 { padding-top: 2.5rem !important; }
  .pb-32 { padding-bottom: 2.5rem !important; }
  .pb-16 { padding-bottom: 2rem !important; }
  .py-32 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* 10) الصور داخل الأقسام: منعها من تجاوز العرض */
  section img,
  section video {
    max-width: 100%;
    height: auto;
  }

  /* 11) الفوتر: تقليل الحشو */
  footer {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* 12) تصغير أحجام العناوين الكبيرة قليلًا لتتناسب مع العرض */
  .display-xl {
    line-height: 1.1 !important;
  }
}

/* ---------- شاشات الجوال الصغيرة جدًا (حتى 480px) ---------- */
@media (max-width: 480px) {

  section#hero,
  section#about,
  section#services,
  section#works,
  section#team,
  section#contact {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section#hero {
    padding-top: 5rem !important;
  }

  section .mb-20 { margin-bottom: 1.5rem !important; }
  section .mt-20 { margin-top: 1.5rem !important; }
  section .gap-6 { gap: 0.75rem !important; }
  section .gap-8 { gap: 0.875rem !important; }
}