/* Findly — تنسيق الجوال وحده
   يُحمَّل بعد dark.css و glass.css في الصفحات الثماني.

   ⚠ قاعدة الملف الوحيدة: **كل ما فيه داخل استعلام وسائط**
   `max-width: 860px` أو أضيق. لا قاعدة عامة واحدة هنا — لأن
   الغرض المعلن هو إصلاح الجوال دون أن يتغيّر في نسخة الحاسب
   بكسل واحد، وحصرُ الملف في الاستعلام يجعل ذلك مضموناً بالبناء
   لا بالانتباه. من يضيف قاعدة خارج الاستعلام يكسر الضمانة.

   وسبب وجوده ملفّاً مستقلّاً لا كتلةً في dark.css: يُقرأ ويُراجَع
   ويُنزع كوحدة واحدة، ولا يختلط بقواعد الحاسب فيُعدَّل أحدها سهواً. */


/* ════════════ ≤ 860px — الجوال واللوح الصغير ════════════ */

@media (max-width: 860px) {

  /* ── الهيدر ──
     كان 108px من ارتفاع الشاشة قبل أي محتوى، وشعاره 86px.
     على شاشة 844px ذلك ثُمن الشاشة لشعار وزرَّين. */

  :root { --header-h: 68px; }
  .brand img { block-size: 42px; }
  .hdr-in { gap: 10px; }

  /* زرّ عرض السعر يعود إلى الهيدر على الجوال.
     كان مخفيّاً تحت 860px، فيبقى زائر الجوال — وهو الأكثر —
     بلا دعوة ظاهرة إلا بعد تمرير طويل. يعود مضغوطاً: نصّ أقصر
     وحشوة أصغر، ويسبق زرّ اللغة في الترتيب البصري. */
  .hdr-cta { display: inline-flex; }
  html[dir] .hdr-cta {
    padding: 8px 8px 8px 14px;
    font-size: 13px; font-weight: 700;
  }
  html[dir="ltr"] .hdr-cta { padding: 8px 14px 8px 8px; }
  .hdr-cta .pill-arrow { inline-size: 26px; block-size: 26px; }
  .hdr-cta .pill-arrow svg { inline-size: 13px; block-size: 13px; }

  /* أضيق من 380px لا يتّسع للأربعة معاً، فيسقط زرّ اللغة:
     التبديل متاح من الفوتر، أما «اطلب عرض سعر» فلا بديل عنه. */
  @media (max-width: 379px) {
    #langToggle { display: none; }
  }


  /* ── الواجهة: البطاقات صفٌّ يُسحب لا عمودٌ يُمرَّر ──
     ستّ بطاقات فوق بعضها جعلت الواجهة 2.2 شاشة، فيمرّ الزائر
     ستّ مرّات قبل أن يصل إلى أول محتوى. صفّان أفقيّان يقصّانها
     إلى أقلّ من شاشة، ويبقيان البطاقات الستّ كلّها متاحة. */

  .hero-x-grid { gap: 22px; }

  .hx-col {
    display: flex;
    grid-template-columns: none;          /* يلغي شبكة 1180px */
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;       /* لا يسحب الصفحة معه */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* ينزف إلى حافّتي الشاشة: بطاقة نصف ظاهرة عند الحافّة هي ما
       يقول «هنا المزيد» دون شريط تمرير ولا سهم */
    margin-inline: calc(var(--pad, 18px) * -1);
    padding-inline: var(--pad, 18px);
    padding-block-end: 2px;
  }
  .hx-col::-webkit-scrollbar { display: none; }
  .hx-col > * {
    flex: 0 0 min(74%, 290px);
    scroll-snap-align: start;
  }

  .hx-center { padding-block: 14px 4px; }
  .hx-sub { font-size: 15.5px; }
  .hx-actions { margin-block-start: 22px; }


  /* ── أهداف اللمس ──
     نقاط تقليب البطاقات 6px: تُرى ولا تُصاب. الحدّ الشفّاف
     يوسّع مساحة الإصابة إلى 26px والنقطة تبقى 6px بصرياً —
     `background-clip: padding-box` هو ما يمنع الحدّ من التلوّن. */

  .gs-dots { gap: 0; }
  .gs-dots button {
    /* ⚠ flex: none إلزامية: النقاط داخل صفّ مرن، فبدونها تنكمش
       من 26px إلى 19px ويضيع نصف ما وُسِّع من مساحة الإصابة. */
    flex: none;
    inline-size: 30px; block-size: 30px;
    border: 12px solid transparent;
    background-clip: padding-box;
    border-radius: 50%;
  }
  .gs-dots button.is-on {
    inline-size: 36px; border-radius: 999px;
    background-clip: padding-box;
  }

  /* حقول المحوّلين: 23px ارتفاعاً لا يُصاب بإصبع. الحاوية .gfx-f
     هي هدف اللمس فعلاً (الحقل داخل label)، فتُرفع هي والحقل معاً. */
  .gfx-f { padding-block: 11px; }
  .gfx-f input, .gfx-f output { min-block-size: 22px; line-height: 22px; }

  /* روابط الفوتر: 26px متلاصقة، إصبعٌ واحد يصيب اثنين */
  .ftr-nav a, .ftr-links a { padding-block: 9px; display: inline-block; }


  /* ── أصغر حجم خطّ مقروء ──
     11px على شاشة صغيرة تُقرأ بجهد، والحدّ العملي 12px. */

  .gfx-note, .gfx-chg, .gs-from, .hx-src-txt span { font-size: 12px; }


  /* ── الجداول ──
     جدول 640px داخل شاشة 390px يُسحب جانبياً داخل حاويته. ذلك
     مقصود (13.19)، لكن لا شيء كان يخبر الزائر أن فيه ما يُسحب.
     حشوة أضيق تقرّبه من الاتّساع، وتدرّج عند الحافّة يقول الباقي. */

  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 10px 11px; }
  .tbl-wrap, .cbm-scroll { position: relative; }
  .tbl-wrap::after, .cbm-scroll::after {
    content: ""; position: absolute; pointer-events: none;
    inset-block: 0; inset-inline-end: 0; inline-size: 34px;
    background: linear-gradient(to left, rgba(4,18,31,.92), transparent);
  }
  [dir="ltr"] .tbl-wrap::after, [dir="ltr"] .cbm-scroll::after {
    background: linear-gradient(to right, rgba(4,18,31,.92), transparent);
  }


  /* ── إيقاع الصفحة ──
     الرئيسية كانت 17 شاشة، وخدماتنا 12. الحشوة الرأسية وحدها
     تصنع نحو ثلث ذلك على الجوال. */

  .section { padding-block: clamp(40px, 9vw, 58px); }

  /* الفجوات والحشوات تتراكم عبر عشرات البطاقات: تقليصها على
     الجوال وحده يقصّ الصفحة دون أن يمسّ سطراً من المحتوى. */
  .srv-grid, .pcards, .ccards, .formula-grid { gap: 14px; }
  .gcard { padding: 16px; }
  .head { margin-block-end: 28px; }
}


/* ════════════ ≤ 520px — الهواتف الضيّقة ════════════ */

@media (max-width: 520px) {

  /* يغلب قاعدة 520px في dark.css (الملف يُحمَّل بعده) */
  .brand img { block-size: 38px; }

  .hx-col > * { flex: 0 0 min(80%, 270px); }

  /* الزرّان تحت العنوان: بعرض الشاشة، إصبعٌ واحد يصيبهما */
  .hx-actions .pill, .hx-actions .glass-btn { flex: 1 1 100%; }
  .glass-btn.hx-src { inline-size: 100%; justify-content: center; }

  /* ⚠ `.pill` تحمل `white-space: nowrap` عمداً كي لا ينكسر نصّها على
     الحاسب. لكن أحد أزرار النسخة الإنكليزية يبلغ 394px، فيدفع صفحةً
     عرضها 360px ويصنع تمريراً أفقياً — والعربية لا تُظهره لأن نصّها
     أقصر. على الهاتف الضيّق يُسمح بالانكسار: سطران أهون من صفحة
     تنزلق جانبياً. */
  .pill { white-space: normal; max-inline-size: 100%; }
}