/* =========================================================================
   موبایل — بازطراحی mobile-first

   قانون اصلی: این فایل آخرین CSSای است که لود می‌شود، پس مقادیر داخل
   مدیاکوئری‌های زیر روی همه‌ی فایل‌های دیگر (hero.css، timeline.css و...)
   برنده می‌شوند. هیچ‌کدام از فایل‌های دیگر برای این کار دست‌کاری نشده‌اند —
   یعنی نسخه‌ی دسکتاپ (بالای ۷۶۸px) دقیقاً همان چیزی است که بود.

   دو بازه:
     - تا ۷۶۷px   : بازطراحی اصلی موبایل (چیدمان، تایپوگرافی، فاصله‌ها)
     - تا ۴۷۹px   : ریزتنظیم برای گوشی‌های خیلی کوچک (۳۶۰ تا ۴۱۴px)

   ترتیب بخش‌ها داخل هر بازه: navbar، hero، «چرا بباز»، تایم‌لاین،
   سرفصل کارگاه‌ها، اساتید، فوتر، سپس صفحه‌های دیگر سایت (قوانین/
   جامعه/دوره/ورود‌و‌ثبت‌نام/پنل کاربری) که تغییر نکرده‌اند.
   ========================================================================= */


/* =========================================================================
   ۱) تا ۷۶۷ پیکسل
   ========================================================================= */
@media (max-width: 767px){

    /* ---------- ناوبری ----------
       فقط اندازه‌ها را جمع‌وجور و لمس‌پذیر می‌کنیم؛ رفتار باز/بسته‌شدن منو
       (کلاس nav-open که با همان navbar.js فعلی toggle می‌شود) دست‌نخورده می‌ماند. */
    header{
        top: 14px;
    }
    .navbar{
        padding: 12px 16px;
        border-radius: 24px;
    }
    .logo{
        font-size: 24px;
    }
    .nav-toggle{
        width: 44px;   /* حداقل اندازه‌ی استاندارد لمس */
        height: 44px;
    }
    .nav-links{
        gap: 2px;
    }
    .nav-links a{
        display: block;
        padding: 13px 10px;   /* ناحیه‌ی لمس بزرگ‌تر برای هر لینک */
        font-size: 15.5px;
    }
    .nav-actions{
        gap: 10px;
    }
    .login{
        display: block;
        padding: 10px;
        font-size: 15px;
    }
    .register-btn{
        display: block;
        text-align: center;
        padding: 14px 20px;
        font-size: 15px;
    }
    .user-name{
        display: block;
        text-align: center;
        padding: 8px;
    }
    .logout-form{
        display: block;
    }
    .logout-btn{
        display: block;
        width: 100%;
        text-align: center;
        padding: 11px;
        font-size: 15px;
    }


    /* ---------- هیرو ----------
       سلسله‌مراتب: تیتر اصلی (h1) کانون توجه است، «بباز» زیرش به‌عنوان
       نام برند می‌آید، بعد توضیح با line-height خواناتر، بعد دکمه‌های
       تمام‌عرض لمسی. ارتفاع دیگر یک صفحه‌ی کامل نمی‌گیرد. */
    .hero{
        min-height: auto;
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 100px;
        padding-bottom: 40px;
        gap: 28px;
    }
    .badge{
        font-size: 12.5px;
        padding: 7px 14px;
        margin-bottom: 14px;
    }
    .hero h1{
        font-size: 30px;
        line-height: 1.45;
    }
    .hero h2{
        font-size: 42px;
        margin-top: 6px;
        line-height: 1;
    }
    .hero p{
        margin: 14px auto 0;
        font-size: 15px;
        line-height: 1.85;
        max-width: 480px;
    }
    .hero-buttons{
        margin-top: 24px;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
    }
    .hero-buttons a{
        width: 100%;
        text-align: center;
        padding: 15px 20px;   /* ارتفاع لمسی راحت، حدود ۵۰px */
        font-size: 15.5px;
    }

    /* نسخه‌ی کوچک و ساده‌ی المان بصری هیرو — به‌جای مخفی‌کردن کامل،
       یک نسخه‌ی جمع‌وجور از همان کاراکتر که فضای زیادی نمی‌گیرد. */
    .hero-art{
        display: flex;
        margin-top: 4px;
    }
    .game-window{
        width: 150px;
        height: 150px;
        border-radius: 30px;
    }
    .head{
        width: 46px;
        height: 46px;
    }
    .body{
        width: 60px;
        height: 46px;
        border-radius: 18px;
    }
    .controller{
        font-size: 38px;
        bottom: 16px;
        right: 16px;
    }


    /* ---------- تیترهای بخش (مشترک بین همه‌ی بخش‌های صفحه‌ی اصلی) ---------- */
    .section-header{
        padding: 0 4px;
    }
    .section-tag{
        font-size: 13.5px;
    }
    .section-header h2{
        margin-top: 10px;
        font-size: 26px;
        line-height: 1.4;
    }
    .section-header p{
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.8;
    }


    /* ---------- «چرا بباز؟» ----------
       تک‌ستونی، پدینگ راحت، آیکن و تایپوگرافی متناسب — نه فشرده. */
    .why-bebaz{
        padding: 64px 0;
    }
    .feature-cards{
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .feature-card{
        min-height: auto;
        padding: 26px 22px;
        border-radius: 22px;
    }
    .feature-icon{
        width: 54px;
        height: 54px;
        font-size: 26px;
        border-radius: 15px;
        margin-bottom: 16px;
    }
    .feature-card h3{
        font-size: 19px;
        margin-bottom: 8px;
    }
    .feature-card p{
        font-size: 15px;
        line-height: 1.8;
    }


    /* ---------- تایم‌لاین ----------
       به‌جای چپ/راستِ متناوبِ دسکتاپ (که با absolute-position و top دستی
       کار می‌کند و در باریک‌شدن صفحه راحت به‌هم می‌ریزد)، در موبایل از
       flexbox استفاده می‌کنیم: هر مرحله یک ردیف است با شماره‌ی ثابت در
       یک طرف و محتوا در طرف دیگر. چون شماره و محتوا خواهر‌و‌برادرِ هم در
       فلکس‌اند (نه absolute)، هیچ‌وقت روی هم نمی‌افتند — صرف‌نظر از اینکه
       متن هر مرحله چند خط باشد. خط اتصال هم دقیقاً از وسط شماره‌ها می‌گذرد. */
    .timeline-section{
        padding: 64px 0;
    }
    .timeline{
        margin-top: 40px;
        max-width: none;
    }
    .timeline::before{
        right: 20px;         /* مرکز خط = 20 + (عرض خط ۴px)/۲ = ۲۲px، هم‌مرکز با شماره‌ی ۴۴px */
        left: auto;
        transform: none;
    }
    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even){
        position: static;
        width: 100%;
        left: auto;
        right: auto;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 0 0 32px;
        text-align: right;
    }
    .timeline-item:last-child,
    .timeline-item:nth-child(odd):last-child,
    .timeline-item:nth-child(even):last-child{
        padding-bottom: 0;
    }
    .timeline-item .timeline-number,
    .timeline-item:nth-child(odd) .timeline-number,
    .timeline-item:nth-child(even) .timeline-number{
        position: static;
        left: auto;
        right: auto;
        top: auto;
        flex-shrink: 0;         /* شماره هیچ‌وقت له نمی‌شود، حتی اگر متن کنارش زیاد باشد */
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    .timeline-content{
        flex: 1;
        min-width: 0;           /* اجازه می‌دهد متن داخل کارت به‌درستی بشکند، نه اینکه کارت را باز کند */
        padding: 20px;
        border-radius: 18px;
    }
    .timeline-date{
        font-size: 12.5px;
        margin-bottom: 8px;
    }
    .timeline-content h3{
        font-size: 18px;
        margin-bottom: 8px;
        line-height: 1.45;
    }
    .timeline-content p{
        font-size: 14.5px;
        line-height: 1.75;
    }


    /* ---------- سرفصل کارگاه‌ها ---------- */
    .curriculum-section{
        padding: 64px 0;
    }
    .curriculum-grid{
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .track-card{
        padding: 26px 22px;
        border-radius: 22px;
    }
    .track-icon{
        width: 54px;
        height: 54px;
        font-size: 26px;
        margin-bottom: 16px;
        border-radius: 15px;
    }
    .track-card h3{
        font-size: 19px;
        line-height: 1.5;
    }
    .track-card p{
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.8;
    }


    /* ---------- اساتید ----------
       تک‌ستونی: هر کارت باید یک کارت کامل و خوانا باشد، نه دسکتاپِ کوچک‌شده. */
    .teachers-section{
        padding: 64px 0;
    }
    .teachers-grid{
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .teacher-card{
        padding: 28px 24px;
        border-radius: 24px;
    }
    .avatar-circle{
        width: 96px;
        height: 96px;
        border-width: 4px;
    }
    .teacher-info{
        margin-top: 18px;
    }
    .teacher-info h3{
        font-size: 19px;
    }
    .teacher-info span{
        margin-top: 8px;
        font-size: 14px;
    }
    .teacher-info p{
        margin-top: 12px;
        font-size: 14.5px;
        line-height: 1.8;
    }
    .teacher-level{
        margin-top: 16px;
        font-size: 12.5px;
        padding: 7px 16px;
    }


    /* ---------- نگارخانه‌ی تم (اگر تم فعالی با عکس باشد) ---------- */
    .theme-showcase{
        padding: 64px 0;
    }
    .theme-gallery-small{
        margin-top: 28px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


    /* ---------- فوتر ----------
       ستون‌های باریک خوانا نبودند (مخصوصاً ردیف شماره‌تماس‌ها)؛
       حالا برند بالا و «دبیرخانه»/«پیوندها» هرکدام تمام‌عرض و زیر هم‌اند. */
    .site-footer{
        margin-top: 48px;
    }
    .footer-inner{
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 20px 28px;
    }
    .footer-logo{
        font-size: 26px;
    }
    .footer-brand p{
        margin-top: 14px;
        font-size: 14.5px;
        line-height: 1.9;
    }
    .footer-col h4{
        font-size: 16.5px;
        margin-bottom: 14px;
    }
    .footer-col p{
        font-size: 14.5px;
        line-height: 1.9;
    }
    .footer-phones{
        margin-top: 10px;
        font-size: 13.5px;
        overflow-wrap: anywhere;   /* اگر جایی هنوز فضا کم بود، عدد بشکند نه اینکه بزند بیرون */
    }
    .footer-col ul{
        gap: 10px;
    }
    .footer-bottom{
        padding: 18px 0;
        font-size: 12.5px;
    }


    /* ---------- صفحه‌ی قوانین ----------
       کارت‌های قانون چند بولت متن واقعی دارند؛ دوستونی آن‌ها را تا
       ۱۱۰۰px می‌کشید و پر از فضای خالی می‌شد — تک‌ستونی درست‌تر است. */
    .page-hero,
    .event-hero{
        min-height: auto;
        padding-top: 108px;
        padding-bottom: 16px;
    }
    .page-hero h1,
    .event-hero h1{
        font-size: 30px;
    }
    .page-hero p,
    .event-hero p{
        font-size: 15px;
        margin-top: 14px;
    }
    .rules-grid{
        margin-top: 32px;
        gap: 16px;
        grid-template-columns: 1fr;
    }
    .rule-card{
        padding: 26px 22px;
    }
    .rule-card h3{
        font-size: 19px;
    }
    .rule-card li{
        overflow-wrap: anywhere;   /* شماره‌شبا و شماره کارت اگر طولانی بود بشکند */
    }
    .rule-icon{
        width: 48px;
        height: 48px;
        font-size: 22px;
    }


    /* ---------- تیم‌ها، بازی‌ها، بخش‌های اساتید در صفحه‌ی دوره ----------
       این‌ها متن کوتاه دارند (۱ تا ۳ خط)، دوستونی برایشان مشکلی ایجاد نمی‌کند. */
    .teams-grid,
    .games-grid,
    .teachers-role-grid{
        margin-top: 28px;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .teams-grid > *:nth-last-child(1):nth-child(odd),
    .games-grid > *:nth-last-child(1):nth-child(odd),
    .teachers-role-grid > *:nth-last-child(1):nth-child(odd){
        grid-column: 1 / -1;
    }
    .team-card{
        padding: 20px 18px;
    }
    .team-card h3{
        font-size: 17px;
    }
    .team-icon{
        width: 50px;
        height: 50px;
        font-size: 22px;
        border-radius: 14px;
    }
    .game-card{
        flex-direction: column;
        padding: 18px;
    }
    .game-card img{
        width: 100%;
        height: 130px;
    }
    .role-section{
        padding: 22px 18px;
    }


    /* ---------- ورود / ثبت‌نام ---------- */
    .auth-section{
        padding-top: 108px;
        padding-bottom: 50px;
    }


    /* ---------- پنل کاربری (داشبورد، ویدیوها، آزمون، بارگذاری پروژه) ---------- */
    .panel{
        padding-top: 104px;
        padding-bottom: 56px;
    }
    .panel-hero{
        margin-bottom: 36px;
    }
    .panel-hero h1{
        font-size: 27px;
    }
    .panel-grid{
        gap: 16px;
    }
    .panel-card{
        padding: 24px 20px;
    }
    .panel-section{
        margin-top: 40px;
    }
    .lesson-card{
        padding: 22px;
    }

}


/* =========================================================================
   ۲) تا ۴۷۹ پیکسل — ریزتنظیم برای گوشی‌های خیلی کوچک (۳۶۰ تا ۴۱۴px)
   فقط جاهایی که واقعاً لازم بود عدد عوض شود؛ ساختارِ بازه‌ی قبل همین‌جا هم برقرار است.
   ========================================================================= */
@media (max-width: 479px){

    header{
        top: 10px;
    }
    .logo{
        font-size: 21px;
    }
    .navbar{
        padding: 10px 14px;
    }

    .hero{
        padding-top: 92px;
        padding-bottom: 32px;
    }
    .hero h1{
        font-size: 26px;
    }
    .hero h2{
        font-size: 36px;
    }
    .hero p{
        font-size: 14.5px;
    }
    .game-window{
        width: 124px;
        height: 124px;
        border-radius: 26px;
    }
    .head{
        width: 38px;
        height: 38px;
    }
    .body{
        width: 50px;
        height: 38px;
    }
    .controller{
        font-size: 30px;
        bottom: 12px;
        right: 12px;
    }

    .section-header h2{
        font-size: 22px;
    }

    .why-bebaz,
    .timeline-section,
    .curriculum-section,
    .teachers-section,
    .theme-showcase{
        padding: 52px 0;
    }

    .feature-card,
    .track-card{
        padding: 22px 18px;
    }
    .feature-card h3,
    .track-card h3{
        font-size: 17.5px;
    }

    .timeline::before{
        right: 16px;      /* مرکز خط ۱۸px، هم‌مرکز با شماره‌ی ۴۰px */
    }
    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even){
        gap: 12px;
        padding-bottom: 26px;
    }
    .timeline-item .timeline-number,
    .timeline-item:nth-child(odd) .timeline-number,
    .timeline-item:nth-child(even) .timeline-number{
        width: 40px;
        height: 40px;
        font-size: 13.5px;
    }
    .timeline-content{
        padding: 16px;
    }
    .timeline-content h3{
        font-size: 16.5px;
    }

    .teacher-card{
        padding: 24px 18px;
    }
    .avatar-circle{
        width: 84px;
        height: 84px;
    }

    .footer-inner{
        padding: 40px 16px 24px;
    }

    .page-hero h1,
    .event-hero h1{
        font-size: 25px;
    }
    .rule-card,
    .track-card{
        padding: 22px 18px;
    }

}


/* =========================================================================
   ۳) دستگاه‌های لمسی: افکت hover که برای موس طراحی شده روی گوشی به‌کار نرود
   (وگرنه بعد از هر تپ، کارت/دکمه تا لمس بعدی در حالت hover «گیر» می‌کند).
   این مستقل از عرض صفحه است تا واقعاً فقط دستگاه بی‌ماوس را هدف بگیرد.
   ========================================================================= */
@media (hover: none){

    .feature-card:hover,
    .track-card:hover,
    .teacher-card:hover,
    .teacher-card:hover::before,
    .timeline-content:hover,
    .rule-card:hover,
    .team-card:hover,
    .primary-btn:hover,
    .secondary-btn:hover,
    .register-btn:hover{
        transform: none;
        box-shadow: none;
    }

}