/* ============================================================
   phone-sections — المشكلة · طريقة العمل · عن ياسر · الفيديوهات · المكالمة + الأسئلة · الفوتر
   على الموبايل بس (≤767px وتحت html.phone-app). الكمبيوتر مايتلمسش.
   نفس الكلام ونفس الهوية — بس كل سكشن أقصر وأهدى، كروت بخطوط رفيعة،
   ومفيش كلام أصغر من 12px (العلامات 11px) ولا زرار أصغر من 44×44 ولا blur.
   ============================================================ */

/* أيقونات السوشيال في الفوتر — عنصر للموبايل بس (الدوك العايم بيستخبى على الموبايل).
   مستخبي في كل المقاسات برّه الميديا كويري، وبيظهر تحت بس. */
.ft__soc { display: none; }

@media (max-width: 767px) {

  /* ───────── المشكلة: القمع + التقرير ───────── */
  html.phone-app #problem .prob__sub { margin-top: .55rem; font-size: 15px; line-height: 1.65; }
  html.phone-app #problem .prob__wrap { gap: 1.1rem; }
  /* القمع أصغر شوية ومتوسّط — الأسامي والأرقام فوقه بنِسَب من نفس اللوحة فبتصغر معاه */
  html.phone-app #problem .fn__pic { width: min(100%, 310px); margin-inline: auto; }
  html.phone-app #problem .fn__tiers span { font-size: 12px; }
  html.phone-app #problem .fn__q span { font-size: 12px; }
  /* التسريبات التلاتة = تقرير واحد: كارت واحد بسطور بينها خط رفيع */
  html.phone-app #problem .fn__leaks {
    margin-top: .7rem;
    border: 1px solid rgba(255,107,90,.28); border-radius: 18px; overflow: hidden;
    background: linear-gradient(rgba(255,107,90,.05), rgba(255,107,90,.05)), var(--surface);
  }
  html.phone-app #problem .fn__leak {
    margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
    display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: baseline;
    padding: .75rem .95rem;
  }
  html.phone-app #problem .fn__leak + .fn__leak { border-top: 1px solid rgba(255,107,90,.18); }
  html.phone-app #problem .fn__leak b { margin: 0; font-size: 11px; white-space: nowrap; }
  html.phone-app #problem .fn__leak > span { font-size: 13.5px; line-height: 1.6; }

  /* ───────── طريقة العمل: المنحنى في كارت والمحطات قايمة تحته ───────── */
  html.phone-app #how .cv { padding-top: calc(170px + 1rem); }
  /* الكارت ورا الرسمة — الرسمة نفسها فوق خالص (top:0) عشان حساب الجافاسكربت للنقطة و«أول نتيجة» */
  html.phone-app #how .cv::before {
    content: ''; position: absolute; top: 0; inset-inline: 0; height: 170px;
    border-radius: 20px; border: 1px solid var(--glass-brd); background: var(--surface);
  }
  html.phone-app #how .cv__svg { height: 170px; }
  html.phone-app #how .cv__y { top: 12px; inset-inline-start: 14px; z-index: 1; font-size: 12px; }
  html.phone-app #how .cv__win b { font-size: 12px; }
  html.phone-app #how .cv__steps { gap: 0; }
  /* كل محطة سطر: الرقم في الدايرة · الاسم + المدة في سطر · الشرح تحت */
  html.phone-app #how .cv__st {
    grid-template-columns: 28px auto 1fr; column-gap: .65rem; align-items: baseline;
    padding: .8rem 0; border-top: 1px solid var(--glass-brd);
  }
  html.phone-app #how .cv__st:first-child { border-top: 0; padding-top: .2rem; }
  html.phone-app #how .cv__n { grid-row: 1 / 3; align-self: start; }
  html.phone-app #how .cv__t { grid-column: 2; margin: 0; font-size: 15px; }
  html.phone-app #how .cv__m { grid-column: 3; margin: 0; font-size: 12px; }
  html.phone-app #how .cv__d { grid-column: 2 / 4; margin-top: .2rem; font-size: 13.5px; }

  /* ───────── عن ياسر: البادج + القصة ───────── */
  html.phone-app #about .pass__col { padding-top: 52px; }
  html.phone-app #about .pass { --h: 292px; width: calc(var(--h) * .74); }   /* أعرض شوية: سطر «مؤسس · …» مايتكسرش 3 سطور في الإنجليزي */
  html.phone-app #about .pass__print { font-size: 12px; letter-spacing: .18em; }
  html.phone-app #about .pass__top { font-size: 11px; }
  html.phone-app #about .pass__who span { font-size: 12px; }
  html.phone-app #about .pass__tag { font-size: 12px; }
  html.phone-app #about .pass__col .crs { margin-top: 1.4rem; width: 100%; min-height: 64px; }
  html.phone-app #about .crs__tag { font-size: 11px; }
  html.phone-app #about .crs__txt small { font-size: 12px; }
  html.phone-app #about .pass__wrap { gap: 1.4rem; }
  /* الأرقام الأربعة: كارت واحد 2×2 بخطوط رفيعة */
  html.phone-app #about .pass__stats {
    grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--glass-brd); border-radius: 20px; background: var(--surface); overflow: hidden;
  }
  html.phone-app #about .pass__stats li,
  html.phone-app #about .pass__stats li:first-child,
  html.phone-app #about .pass__stats li:nth-child(odd) {
    padding: .85rem .95rem; border: 0;
  }
  html.phone-app #about .pass__stats li:nth-child(even) { border-inline-start: 1px solid var(--glass-brd); }
  html.phone-app #about .pass__stats li:nth-child(n+3) { border-top: 1px solid var(--glass-brd); }
  html.phone-app #about .pass__stats b { font-size: 30px; }
  html.phone-app #about .pass__stats li > span { margin-top: .35rem; font-size: 12.5px; }
  html.phone-app #about .pass__cos { margin-top: 1rem; padding-top: 1rem; gap: .8rem; }
  html.phone-app #about .bio__brand i { font-size: 12.5px; }
  html.phone-app #about .quote { margin-top: 1rem; padding-top: .9rem; }
  html.phone-app #about .quote p { font-size: 16.5px; line-height: 1.6; }
  html.phone-app #about .quote cite { font-size: 12px; }
  html.phone-app #about .pass__field { margin-top: 1rem; gap: .6rem; }
  html.phone-app #about .shot { border-radius: 14px; }
  html.phone-app #about .pass__note b { font-size: 13.5px; }
  html.phone-app #about .pass__note span { font-size: 12px; }

  /* ───────── الفيديوهات ───────── */
  html.phone-app #watch .vid__play {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(10,10,11,.66);
  }
  html.phone-app #watch .ep__main .vid__play { width: 58px; height: 58px; }
  /* زرار التشغيل والمدة بعيد عن العنوان المطبوع على الصورة (العنوان يمين الصورة في اللغتين —
     الصورة مابتتقلبش، فالمكان فيزيائي): التشغيل تحت شمال، والمدة تحت يمين على الفاضي */
  html.phone-app #watch .ep__main .vid__play,
  html.phone-app #watch .ep__main:hover .vid__play { top: auto; left: 14px; bottom: 14px; transform: none; }
  html.phone-app #watch .ep__main .vid__time { inset-inline: auto; right: 10px; bottom: 10px; }
  html.phone-app #watch .ep__main .ep__new { inset-inline: auto; left: 12px; top: 12px; }
  html.phone-app #watch .ep__main .vid__play svg { width: 24px; height: 24px; }
  html.phone-app #watch .ep__phone .vid__play { width: 44px; height: 44px; }
  html.phone-app #watch .vid__time { font-size: 11px; }
  html.phone-app #watch .ep__new { font-size: 12px; }
  html.phone-app #watch .ep { column-gap: .9rem; row-gap: 1rem; align-items: start; }
  html.phone-app #watch .ep__main .vid__thumb { border-radius: 20px; }
  html.phone-app #watch .ep__title { margin-top: .25rem; font-size: 16px; line-height: 1.45; }
  html.phone-app #watch .ep__lbl { margin-top: .55rem; font-size: 12px; }
  html.phone-app #watch .ep__list { gap: .35rem; }
  html.phone-app #watch .ep__list li { font-size: 13px; line-height: 1.5; text-wrap: balance; }   /* مفيش «← إثبات» لوحدها أول السطر */
  html.phone-app #watch .ep__phone { padding: 5px; border-radius: 24px; }
  html.phone-app #watch .ep__phone .vid__thumb { border-radius: 19px; }
  html.phone-app #watch .ep__phone::before { top: 11px; height: 10px; }
  /* الحلقات التانية: كارت واحد بسطور، كل سطر حلقة (الصف كله هو الزرار) */
  html.phone-app #watch .eps { margin-top: 1.2rem; padding-top: 0; border-top: 0; gap: .55rem; }
  html.phone-app #watch .eps__t { font-size: 12px; }
  html.phone-app #watch .eps__row {
    gap: 0; border: 1px solid var(--glass-brd); border-radius: 20px; background: var(--surface); overflow: hidden;
  }
  html.phone-app #watch .ep__mini {
    grid-template-columns: 104px 1fr; gap: .8rem; min-height: 76px;
    padding: .6rem .7rem; border-bottom: 1px solid var(--glass-brd);
  }
  html.phone-app #watch .ep__mini .vid__play { width: 30px; height: 30px; }
  html.phone-app #watch .ep__mini .vid__time { font-size: 11px; padding: 0 .3rem; }
  html.phone-app #watch .ep__mini b { font-size: 13.5px; color: var(--text); }
  html.phone-app #watch .eps__chan {
    min-height: 60px; padding: .55rem .95rem; border: 0; border-radius: 0; background: none;
  }
  html.phone-app #watch .eps__n span { font-size: 12px; }

  /* ───────── المكالمة + الأسئلة ───────── */
  /* الهالة: من غير blur (الدرجة الدائرية ناعمة لوحدها) */
  html.phone-app #talk .final__glow { filter: none; height: 50vh; opacity: .7; }
  html.phone-app #talk .ring { --ch: 460px; gap: 1.6rem; }
  html.phone-app #talk .call { width: min(100%, 304px); padding: 1.05rem 1rem 1.15rem; }
  html.phone-app #talk .call__type { font-size: 12px; }
  html.phone-app #talk .call__sub { font-size: 13px; }
  html.phone-app #talk .call__marks li {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(20,20,22,.72); font-size: 12px;
  }
  html.phone-app #talk .call__btn--q .call__ico {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(40,40,44,.86);
  }
  html.phone-app #talk .call__acts { padding-inline: 0; }
  html.phone-app #talk .call__btn { width: 49%; font-size: 12.5px; min-height: 44px; }
  html.phone-app #talk .call__ico { width: 58px; height: 58px; }
  /* الأسئلة: صفوف ≥52px، والكلام نفسه */
  html.phone-app #talk .ask__lbl { font-size: 12px; }
  html.phone-app #talk .qa summary { min-height: 54px; padding: .55rem .15rem; gap: .75rem; }
  html.phone-app #talk .qa__n { font-size: 11px; }
  html.phone-app #talk .qa__q { font-size: 15.5px; }
  html.phone-app #talk .qa__a { padding-inline-start: calc(.15rem + 1.4rem + .75rem); padding-bottom: .9rem; }
  html.phone-app #talk .qa__a p { font-size: 14px; line-height: 1.7; }
  html.phone-app #talk .ask__more { min-height: 48px; margin-top: .4rem; font-size: 14px; }

  /* ───────── الفوتر: قصير ───────── */
  html.phone-app footer.footer { padding-top: 1.3rem; }
  html.phone-app footer.footer .ft__top { flex-direction: column; justify-content: center; gap: .5rem; }
  html.phone-app footer.footer .ft__live { font-size: 13px; padding: .45rem .9rem; flex-wrap: wrap; justify-content: center; }
  html.phone-app footer.footer .ft__course { min-height: 44px; font-size: 14px; }
  html.phone-app footer.footer .ft__tag { font-size: 11px; }
  html.phone-app footer.footer .ft__soc { display: flex; justify-content: center; gap: .55rem; }
  html.phone-app footer.footer .ft__soc a {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--glass-brd); background: var(--surface);
    color: var(--text-2);
  }
  html.phone-app footer.footer .ft__soc a:active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  html.phone-app footer.footer .ft__soc svg { width: 19px; height: 19px; }
  html.phone-app footer.footer .sky { height: 150px; margin-top: .6rem; border-radius: 20px 20px 0 0; }
  html.phone-app footer.footer .sky__city { height: 80%; }
  html.phone-app footer.footer .ft__bottom { justify-content: center; text-align: center; gap: .35rem .9rem; padding-top: .75rem; font-size: 12px; }
}