/* =========================================================
   PERSONAL PORTFOLIO
   RESPONSIVE.CSS
   ---------------------------------------------------------
   تنظیمات نهایی Responsive برای تمام سایت
   ---------------------------------------------------------
   این فایل نقش لایه‌ی نهایی ریسپانسیو را دارد.
   تنظیمات اختصاصی Header، Hero و Sections قبلاً در فایل
   مربوط به خودشان نوشته شده‌اند.
   ========================================================= */


/* =========================================================
   1. GLOBAL RESPONSIVE HELPERS
   ---------------------------------------------------------
   کلاس‌هایی که در بخش‌های مختلف سایت قابل استفاده هستند.
   ========================================================= */

.hide-mobile {
    display: block;
}


.show-mobile {
    display: none;
}


/* =========================================================
   2. LARGE DESKTOP
   ---------------------------------------------------------
   نمایشگرهای بزرگ‌تر از عرض استاندارد سایت
   ========================================================= */

@media (min-width: 1400px) {

    :root {
        --container-width:
            1280px;
    }


    .container {
        max-width:
            var(--container-width);
    }


    section {
        padding-top:
            110px;

        padding-bottom:
            110px;
    }
}


/* =========================================================
   3. LAPTOP
   ---------------------------------------------------------
   لپ‌تاپ‌های معمولی
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --container-width:
            1100px;

        --container-padding:
            20px;
    }


    .container {
        width:
            min(
                calc(100% - 40px),
                var(--container-width)
            );
    }


    .section-title {
        font-size:
            clamp(
                30px,
                4vw,
                42px
            );
    }
}


/* =========================================================
   4. TABLET
   ---------------------------------------------------------
   تبلت و لپ‌تاپ‌های کوچک
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --container-padding:
            18px;
    }


    .container {
        width:
            calc(100% - 36px);
    }


    .hide-tablet {
        display:
            none !important;
    }


    .show-tablet {
        display:
            block !important;
    }


    section {
        padding-top:
            80px;

        padding-bottom:
            80px;
    }


    .section-header {
        margin-bottom:
            40px;
    }


    .section-description {
        max-width:
            650px;
    }
}


/* =========================================================
   5. MOBILE
   ---------------------------------------------------------
   موبایل‌های معمولی
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --container-padding:
            16px;
    }


    .container {
        width:
            calc(100% - 32px);
    }


    .hide-mobile {
        display:
            none !important;
    }


    .show-mobile {
        display:
            block !important;
    }


    section {
        padding-top:
            70px;

        padding-bottom:
            70px;
    }


    .section-header {
        margin-bottom:
            32px;
    }


    .section-eyebrow {
        font-size:
            12px;
    }


    .section-title {
        font-size:
            clamp(
                28px,
                8vw,
                36px
            );

        line-height:
            1.2;
    }


    .section-description {
        font-size:
            14px;

        line-height:
            1.9;
    }


    /* -----------------------------------------
       Buttons
       ----------------------------------------- */

    .hero-button {
        min-height:
            46px;

        padding:
            0 18px;
    }


    /* -----------------------------------------
       Cards
       ----------------------------------------- */

    .section-card,
    .skill-card,
    .project-card,
    .service-card {
        border-radius:
            var(--radius-lg);
    }


    /* -----------------------------------------
       Forms
       ----------------------------------------- */

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size:
            14px;
    }


    /* -----------------------------------------
       Footer
       ----------------------------------------- */

    .footer-inner {
        text-align:
            center;
    }
}


/* =========================================================
   6. SMALL MOBILE
   ---------------------------------------------------------
   موبایل‌های کوچک
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --container-padding:
            14px;
    }


    .container {
        width:
            calc(100% - 28px);
    }


    section {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    .section-title {
        font-size:
            27px;
    }


    .section-description {
        font-size:
            13px;

        line-height:
            1.85;
    }


    /* -----------------------------------------
       Hero
       ----------------------------------------- */

    .hero-actions {
        width:
            100%;
    }


    .hero-button {
        width:
            100%;
    }


    /* -----------------------------------------
       Contact
       ----------------------------------------- */

    .contact-item {
        padding:
            14px;
    }


    /* -----------------------------------------
       Cards
       ----------------------------------------- */

    .section-card,
    .skill-card,
    .project-card {
        padding:
            18px;
    }


    /* -----------------------------------------
       Footer
       ----------------------------------------- */

    .site-footer {
        padding:
            35px 0 25px;
    }
}


/* =========================================================
   7. VERY SMALL DEVICES
   ---------------------------------------------------------
   گوشی‌های بسیار کوچک
   ========================================================= */

@media (max-width: 360px) {

    .container {
        width:
            calc(100% - 24px);
    }


    .section-title {
        font-size:
            25px;
    }


    .hero-title {
        font-size:
            32px;
    }


    .hero-description {
        font-size:
            13px;
    }


    .hero-actions {
        gap:
            8px;
    }


    .hero-button {
        font-size:
            13px;

        padding:
            0 14px;
    }
}


/* =========================================================
   8. LANDSCAPE MOBILE
   ---------------------------------------------------------
   موبایل در حالت افقی
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .hero {
        min-height:
            auto;

        padding-top:
            110px;

        padding-bottom:
            70px;
    }


    section {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }
}


/* =========================================================
   9. TOUCH DEVICES
   ---------------------------------------------------------
   دستگاه‌های لمسی Hover را کمی کنترل می‌کنیم تا
   تجربه کاربری روی موبایل طبیعی‌تر باشد.
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .hover-lift:hover,
    .hover-scale:hover,
    .hover-tilt:hover {
        transform:
            none;
    }


    .project-card:hover {
        transform:
            none;
    }


    .section-card:hover {
        transform:
            none;
    }
}


/* =========================================================
   10. HIGH-DPI / RETINA
   ---------------------------------------------------------
   جلوگیری از مشکلات جزئی در عناصر بسیار نازک
   ========================================================= */

@media (min-resolution: 2dppx) {

    .animated-underline::after {
        height:
            1px;
    }
}


/* =========================================================
   11. REDUCED MOTION
   ---------------------------------------------------------
   اگر کاربر انیمیشن سیستم‌عامل را غیرفعال کرده باشد،
   انیمیشن‌های غیرضروری کاهش پیدا می‌کنند.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}