/* ═══════════════════════════════════════════════════════════════
   mobile.css — إصلاحات موقع المستفيدين على الجوّال (٩ أكتوبر ٢٠٢٦)
   ───────────────────────────────────────────────────────────────
   يُحمَّل بعد visual-v2.css فيتجاوزه. فُحص على محاكي iPhone 18 Pro.
   الحاسوب لا يتغيّر: كلّ ما يخصّ الجوّال داخل media queries،
   وعناصر الدرج الجديدة مخفيّة أو «مفرودة» (display: contents) على الشاشات العريضة.
   ═══════════════════════════════════════════════════════════════ */

/* ملاحظة: جُرّبت شبكة أمان عامّة (body { overflow-x: clip }) فشلّت التمرير العموديّ
   في سفاري الآيفون — فلا تُضِفها. نعالج كلّ عنصرٍ يخرج عن العرض في مكانه. */

/* ─── ٢) الرأس: عناصر الجوّال مخفيّة على الحاسوب ─── */
.v2-nav-mobile-actions,
.v2-drawer-head,
.v2-nav-backdrop,
.v2-drawer-label { display: none; }
.v2-nav-drawer { display: contents; }

@media (max-width: 900px) {
  /* backdrop-filter يجعل الرأسَ مرجعًا لـposition:fixed فيحبس الدرج داخله */
  .v2-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .v2-nav-inner {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 14px;
    row-gap: 0;
  }
  .v2-brand { gap: 9px; min-width: 0; }
  .v2-brand-mark { width: 46px; height: 46px; border-width: 1.5px; }
  .v2-brand-name { font-size: 16px; white-space: nowrap; }
  .v2-brand-sub { display: none; }

  .v2-nav-mobile-actions {
    order: 2;               /* بعد الشعار (order:1) — وإلّا سبقه فصار يمينًا */
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  .v2-nav-mobile-actions .v2-btn-icon { width: 40px; height: 40px; border-radius: 10px; }
  .v2-nav-mobile-actions .v2-btn-icon svg { width: 19px; height: 19px; }
  .v2-btn-sm { padding: 10px 14px; font-size: 13.5px; border-radius: 10px; }
  /* :hover يلتصق بعد اللمس على الآيفون، و.v2-btn-icon:hover أقوى — فنثبّت اللون في كلّ الحالات */
  .v2-burger,
  .v2-burger:hover,
  .v2-burger:active {
    background: var(--v2-steel) !important;
    border-color: var(--v2-steel) !important;
    color: #fff !important;
  }

  /* الدرج الجانبيّ — يخرج من اليمين (بداية السطر في RTL) */
  .v2-nav-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(86vw, 360px);
    background: var(--v2-paper);
    box-shadow: 0 0 46px -12px rgba(19, 42, 74, 0.45);
    z-index: 1001;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  html.v2-nav-open .v2-nav-drawer { transform: none; visibility: visible; }

  .v2-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 31, 58, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 1000;
  }
  html.v2-nav-open .v2-nav-backdrop { opacity: 1; visibility: visible; }
  html.v2-nav-open, html.v2-nav-open body { overflow: hidden; }

  .v2-drawer-head {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--v2-line);
    position: sticky;
    top: 0;
    background: var(--v2-paper);
    z-index: 2;
  }
  .v2-drawer-title {
    font-family: var(--v2-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--v2-steel);
  }
  .v2-drawer-head .v2-btn-icon { width: 40px; height: 40px; border-radius: 10px; }
  .v2-drawer-head .v2-btn-icon svg { width: 18px; height: 18px; }

  /* منطقة الحساب أوّلًا (بحث + حسابي)، ثمّ روابط الموقع */
  .v2-nav-drawer .v2-auth-zone {
    order: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid var(--v2-line);
  }
  .v2-nav-drawer .v2-nav-search { order: 0; margin: 0 0 4px; width: 100%; padding: 3px; }
  /* ١٦px يمنع سفاري من تكبير الصفحة عند لمس الخانة */
  .v2-nav-drawer .v2-nav-search input { flex: 1; width: auto; min-width: 0; font-size: 16px; padding: 9px 12px; }
  .v2-nav-drawer .v2-nav-search button { width: 40px; height: 40px; }
  .v2-nav-drawer .v2-nav-search button svg { width: 17px; height: 17px; }

  .v2-nav-drawer .v2-auth-zone > .v2-btn {
    justify-content: center;
    padding: 13px 16px;
    font-size: 15px;
    border-radius: 10px;
  }
  .v2-nav-drawer .v2-auth-zone > .v2-btn-primary { order: 2; }

  /* مستفيد مسجّل: بطاقة الحساب + صفوف واضحة بأسمائها بدل الأيقونات الصامتة */
  .v2-nav-drawer .v2-user-chip {
    order: 1;
    border-radius: 12px;
    padding: 10px 12px;
    gap: 12px;
    background: #fff;
    flex-wrap: wrap;
  }
  .v2-nav-drawer .v2-user-chip .ava { width: 42px; height: 42px; font-size: 18px; }
  .v2-nav-drawer .v2-user-chip span:not(.ava) {
    display: block;
    font-family: var(--v2-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--v2-steel);
  }
  .v2-nav-drawer .v2-user-chip .v2-chip-hint {
    font-family: var(--v2-body);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--v2-steel-soft);
    flex-basis: calc(100% - 54px);
    margin-inline-start: 54px;
    margin-top: -14px;
  }
  .v2-nav-drawer .v2-auth-zone > .v2-btn-icon {
    order: 3;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-ink) !important;
  }
  .v2-nav-drawer .v2-auth-zone > .v2-btn-icon svg { width: 20px; height: 20px; color: var(--v2-steel); flex-shrink: 0; }
  .v2-nav-drawer .v2-drawer-label { display: inline; order: 1; }
  .v2-nav-drawer .v2-auth-zone .v2-notif-badge {
    position: static;
    order: 2;
    margin-inline-start: auto;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
  }

  /* روابط الموقع: قائمة عموديّة بأهداف لمسٍ مريحة */
  .v2-nav-drawer .v2-nav-links {
    order: 2;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 10px;
    border-top: 0;
    width: auto;
  }
  .v2-nav-drawer .v2-nav-links a {
    display: flex;
    align-items: center;
    padding: 13px 14px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 10px;
    color: var(--v2-ink) !important;
    white-space: normal;
  }
  .v2-nav-drawer .v2-nav-links a.active {
    background: rgba(58, 80, 114, 0.10) !important;
    color: var(--v2-steel) !important;
  }
  .v2-nav-drawer .v2-nav-links a.highlight { color: var(--v2-gold-deep) !important; }

  /* «حاسبات»: القائمة الفرعيّة مفتوحة دائمًا داخل الدرج (لا hover على اللمس) */
  .v2-nav-drawer .v2-nav-dropdown { display: block; }
  .v2-nav-drawer .v2-nav-dropdown .dropdown-trigger .caret { display: none; }
  .v2-nav-drawer .v2-nav-dropdown .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 0 18px 4px 0;
  }
  .v2-nav-drawer .v2-nav-dropdown .dropdown-menu a {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    color: var(--v2-ink-soft) !important;
  }
  .v2-nav-drawer .v2-nav-dropdown .dropdown-menu .coming-soon {
    border-top: 0;
    margin-top: 0;
    padding: 6px 14px 8px;
    font-size: 13px;
  }
}

/* ─── ٣) قسم البطل في الرئيسيّة ───
   «1fr» يعني أنّ أصغر عرضٍ للعمود هو أعرض محتوى فيه، وشريط صور الفريق المتحرّك
   عريضٌ جدًّا، فكان العمود يتمدّد إلى ٧٢٠px ويُقصّ النصّ («في خدمة…» مقطوعة). */
.v2-hero-inner > * { min-width: 0; }
@media (max-width: 980px) {
  .v2-hero-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* الحاوية الأمّ (main) فيها حشوة ٢٠px — فلا نضاعفها */
  .v2-hero-inner { padding: 4px 0 36px; gap: 28px; }
  .v2-hero h1 { font-size: 38px !important; }
  .v2-hero-ctas .v2-btn { flex: 1 1 auto; justify-content: center; }
  .v2-hero-meta { margin-top: 24px; justify-content: space-between; }
}
/* صور الفريق: نسبة 16:9 على الجوّال تقصّ الصفّين الثاني والثالث وأسماءهم */
@media (max-width: 720px) {
  .v2-hero-visual { aspect-ratio: auto; }
  .v2-team-marquee { height: auto; padding: 16px 0; gap: 12px; }
}

/* ─── ٤) شريط «التخصّص» في صفحات القوائم ───
   ٢٣ زرًّا ملتفّة كانت تأخذ شاشةً كاملة قبل أوّل محاضرة/درس/مستشار.
   على الجوّال: صفّ واحد يُسحب أفقيًّا، مع تلاشٍ عند الحافّة يوحي بالمزيد.
   (html body لرفع الأولويّة على أنماط <style> داخل كلّ صفحة) */
@media (max-width: 720px) {
  html body .spec-filter-bar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    padding-inline-start: 14px;
  }
  html body .spec-filter-bar .spec-label { padding: 0; }
  html body .spec-filter-bar .spec-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
    padding-inline-end: 14px;
    min-width: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
            mask-image: linear-gradient(to right, transparent 0, #000 28px);
  }
  html body .spec-filter-bar .spec-chips::-webkit-scrollbar { display: none; }
  html body .spec-chip { padding: 8px 14px; font-size: 13.5px; flex-shrink: 0; }
}

/* ─── ٥) التذييل ───
   كان عمودًا واحدًا بطول شاشتين تقريبًا؛ صار الهويّة والتواصل بعرض كامل
   و«خدماتنا» و«شاركنا» جنبًا إلى جنب، مع روابط أكبر قليلًا للّمس. */
@media (max-width: 560px) {
  .v2-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }
  .v2-footer-grid > .v2-footer-brand,
  .v2-footer-grid > div:last-child { grid-column: 1 / -1; }
  .v2-footer-list { gap: 2px; }
  .v2-footer-list a { display: inline-block; font-size: 14px; padding: 6px 0; }
  .v2-footer-contact .row { font-size: 14px; padding: 2px 0; }
}

/* ─── ٦) بطاقات «فريق وتد» ───
   البطاقة كانت ~٣٣٠px (صورة كبيرة فوق الاسم) × ٣٨ عضوًا ≈ ١٢٥٠٠px تمرير.
   على الجوّال: الصورة بجانب الاسم، والنبذة سطران. */
@media (max-width: 560px) {
  html body .work-grid { gap: 12px; }
  html body .work-card-hero {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: start;
    padding: 14px 16px;
  }
  html body .work-avatar {
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    margin: 0;
    border-width: 2px;
  }
  html body .work-card h3 { font-size: 16px; margin: 0 0 2px; align-self: end; }
  html body .work-card .rank { align-self: start; font-size: 12.5px; }
  html body .work-card-body { padding: 12px 16px; }
  html body .work-card-info > div[style] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ─── ٧) «اختر تخصّصك» في الرئيسيّة: عمودان مضغوطان بدل ٢٣ صفًّا ─── */
@media (max-width: 560px) {
  .v2-specs-section { padding: 24px 0 36px; }
  .v2-specs-head { margin-bottom: 20px; }
  .v2-specs-grid { gap: 8px; }
  .v2-spec-card { padding: 11px 10px; gap: 8px; min-height: 58px; }
  .v2-spec-card .icon { width: 32px; height: 32px; }
  .v2-spec-card .icon svg { width: 18px; height: 18px; }
  .v2-spec-card .name { font-size: 13.5px; line-height: 1.35; }
  .v2-spec-card .chev { width: 12px; height: 12px; }
}