/* ════════════════════════════════════════════════════════════════════════════
 * 99-responsive.css — طبقة التجاوب الموحّدة (إضافية، تُحمَّل آخر <link>)
 * ────────────────────────────────────────────────────────────────────────────
 * موديول مستقل ضمن assets/landing/css/ — قابل للإزالة بحذف سطر <link> الخاص به.
 *
 * مبدأ التصميم: «طبقة تحسين أخيرة» تأتي بعد كل شرائح landing.css (01→20) في
 * التتالي. لا تحذف ولا تعدّل أي @media أصلية — فقط تُضيف فوقها:
 *   (أ) منع التمرير الأفقي + حشوة الحاوية.
 *   (ب) سلامة آيفون: env(safe-area-inset-*) للـ nav/footer/wrap (viewport-fit=cover).
 *   (ج) تايبوغرافي سائلة موحّدة (clamp) متّصلة مع مقاس الكمبيوتر عند 1024px (بلا قفزات).
 *   (د) أهداف لمس ≥ 44×44 للأزرار الصغيرة على الجوال.
 *   (هـ) مقاسات حسب نطاقات موحّدة: ≤480 / 481–768 / 769–1024 / ≥1025.
 *
 * ⚠️ الشبكات (.lp-bento/.lp-features) تحتفظ بقواعد تجاوبها الأصلية (تحافظ على
 *    grid-column spans والـ !important عند 540/900) — لا نعيد تشبيكها هنا تفادياً
 *    لكسر تخطيط البنتو. هي أصلاً: كامل/كمبيوتر ← عمودان/تابلت ← عمود/جوال.
 *
 * ⚠️ الـ hover effects محميّة في JS بـ (hover:hover) — لا نلمسها هنا، تبقى للكمبيوتر.
 * ⚠️ يحترم prefers-reduced-motion (لا نُضيف أي حركة جديدة).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── (أ) أمان عام: لا تمرير أفقي على كامل الصفحة ───────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }   /* قيمة تطابق §22 (تكرار غير ضار) */
:where(.lp-wrap) { width: 100%; max-width: 100%; }
.lp-mock { max-width: 100%; }

/* ─── (ب) سلامة آيفون — env(safe-area-inset-*) مع الحفاظ على قيم الحشوة الأصلية ─ */
/* الـ nav العلوي اللاصق: حافة علوية آمنة (notch) + حواف جانبية آمنة (landscape) */
.lp-nav { padding-top: max(14px, env(safe-area-inset-top)); }
.lp-nav-inner {
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.lp-wrap {
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
/* الفوتر: حافة سفلية آمنة (home indicator) */
.lp-footer { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)); }
/* مطابقة قيم §2/§4 المصغّرة (18px) مع إضافة الـ insets */
@media (max-width: 600px) {
  .lp-wrap {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}
@media (max-width: 540px) {
  .lp-nav-inner {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* ─── (ج) تايبوغرافي سائلة موحّدة — متّصلة مع §19(h) عند 1024px (بلا قفزة) ── */
/* القيم مضبوطة بحيث تساوي مقاس الكمبيوتر تماماً عند 1024px ثم تتدرّج بسلاسة للجوال.
 * عند ≥1025px تبقى قواعد §19(h)/§5/§7 كما هي (صفر تغيير على الكمبيوتر). */
@media (max-width: 1024px) {
  .lp-h1      { font-size: clamp(2rem,   5.88vw + 0.72rem, 4.6rem); }
  .lp-h2      { font-size: clamp(1.5rem, 2.68vw + 0.84rem, 2.6rem); }
  .lp-tagline { font-size: clamp(1rem,   1.14vw + 0.77rem, 1.5rem); }
}

/* ════════════════════════════════════════════════════════════════════════════
 *  النطاقات الموحّدة (أهداف اللمس + ضبط المقاسات)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── (1) ≤ 480px — جوال صغير / آيفون ──────────────────────────────────── */
@media (max-width: 480px) {
  /* أهداف لمس ≥ 44×44 لعناصر الـ nav الصغيرة (الزر المربّع + شارة الجلسة) */
  .lp-theme-btn { min-width: 44px; min-height: 44px; }
  .lp-session-pill, .lp-nav-link { min-height: 44px; }
  .lp-footer-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* البوابة: تصغر دون overflow وتبقى داخل العرض (تتجاوز §22's 280px على الجوال الصغير) */
  .lp-portal { max-width: min(240px, 64vw); }
}

/* ─── (2) 481–768px — جوال كبير / آيباد رأسي ───────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  .lp-theme-btn { min-width: 44px; min-height: 44px; }
  .lp-session-pill, .lp-nav-link { min-height: 44px; }
  .lp-footer-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* البنتو/المميزات: عمودان هنا أصلاً عبر قواعد §8/§10 (≤900) — لا حاجة لتدخّل. */
}

/* ─── (3) 769–1024px — آيباد أفقي / لابتوب صغير ────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* الشبكات تحتفظ بقواعدها الأصلية. التايبوغرافي السائلة أعلاه تغطّي هذا النطاق. */
  .lp-portal { max-width: min(460px, 44vw); }   /* اتزان البوابة بجانب النص */
}

/* ─── (4) ≥ 1025px — لابتوب / كمبيوتر ─────────────────────────────────────
 * يبقى كل شيء كما صُمّم في landing.css الأصلي (شرائح 01→20) — لا تغيير.
 * (لا قاعدة هنا عمداً: عدم المساس بمظهر الكمبيوتر.) */