/* ==========================================================================
   Faradis Website - Mobile & Tablet Responsive Stylesheet
   استایل‌های اختصاصی نسخه موبایل و تبلت شرکت داده‌ورزی فرادیس البرز
   ==========================================================================
   این فایل منحصراً برای عرض صفحه‌های کمتر از 992 پیکسل (موبایل و تبلت)
   طراحی شده است تا هیچ‌گونه اختلالی در ظاهر و رفتار نسخه دسکتاپ وب‌سایت ایجاد نشود.
   
   هدف اصلی:
   - نمایش تصاویر بر اساس اندازه واقعی و طبیعی خود (بدون کشیده شدن یا دفرمه شدن)
   - حفظ نسبت ابعاد (Aspect Ratio) در تمام تصاویر
   - جلوگیری از اسکرول افقی در صورت بزرگ‌تر بودن تصویر از عرض صفحه
   - ترازبندی و نمایش متناسب قاب‌ها و گالری‌های تصاویر در موبایل
   ========================================================================== */

@media screen and (max-width: 991.98px) {

    /* ==========================================================================
       1. استایل عمومی تصاویر در محتوای صفحات (Pages, News, Products, Content)
       ========================================================================== */

    /* جلوگیری از هرگونه کشیدگی افقی یا عمودی و حفظ اندازه واقعی تصویر */
    .page-content img,
    .page-content-text img,
    .content img,
    .ql-editor img,
    .single_post img,
    .post img,
    .page-inline-gallery img,
    .page-media-gallery img,
    .page-media-gallery__media,
    .page-image-label-host img,
    .content-zoom-link img {
        /* اندازه واقعی: عرض به صورت خودکار مطابق اندازه طبیعی تصویر تعیین می‌شود */
        width: auto !important;
        /* در صورتی که عرض تصویر از عرض صفحه موبایل بیشتر باشد، حداکثر تا 100% کوچک می‌شود */
        max-width: 100% !important;
        /* ارتفاع به صورت متناسب با عرض محاسبه می‌شود تا عکس کشیده یا فشرده نشود */
        height: auto !important;
        max-height: 85vh !important;
        /* حفظ کامل تصویر بدون برش نامناسب */
        object-fit: contain !important;
        box-sizing: border-box !important;
    }

    /* جلوگیری از کشیده شدن تصاویر داخل کلاس‌های عمومی .image */
    .image img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ==========================================================================
       2. لینک زوم تصویر (.content-zoom-link)
       ========================================================================== */
    .page-content .content-zoom-link,
    .page-content-text .content-zoom-link,
    .content .content-zoom-link {
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* ==========================================================================
       3. ترازبندی تصاویر و اسپَن‌های تراز در موبایل
       ========================================================================== */

    /* تصاویر وسط‌چین */
    .page-content img.ql-media-align-center,
    .page-content img[data-align="center"],
    .page-content img.page-media-default-alignment,
    .page-content .content-zoom-link.ql-media-align-center,
    .page-content span.ql-media-align-center,
    .page-content-text span.ql-media-align-center,
    .ql-editor span.ql-media-align-center {
        display: block !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    /* تصاویر راست‌چین */
    .page-content img.ql-media-align-right,
    .page-content img[data-align="right"],
    .page-content .content-zoom-link.ql-media-align-right,
    .page-content span.ql-media-align-right,
    .page-content-text span.ql-media-align-right,
    .ql-editor span.ql-media-align-right {
        display: block !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    /* تصاویر چپ‌چین */
    .page-content img.ql-media-align-left,
    .page-content img[data-align="left"],
    .page-content .content-zoom-link.ql-media-align-left,
    .page-content span.ql-media-align-left,
    .page-content-text span.ql-media-align-left,
    .ql-editor span.ql-media-align-left {
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    /* ==========================================================================
       4. گالری درون‌متنی صفحات (.page-inline-gallery)
       ========================================================================== */
    .page-inline-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        justify-items: center !important;
        width: 100% !important;
        margin: 16px 0 !important;
    }

    .page-inline-gallery > p {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* قاب‌های دور تصویر در صورت فعال بودن */
    .page-inline-gallery.has-frame > p {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 8px !important;
        border: 2px solid #14579f !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(20, 87, 159, .12) !important;
    }

    .page-inline-gallery .content-zoom-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .page-inline-gallery img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* ==========================================================================
       5. گالری رسانه (.page-media-gallery)
       ========================================================================== */
    .page-media-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        justify-items: center !important;
    }

    .page-media-gallery.is-configured .page-media-gallery__tile {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        aspect-ratio: auto !important;
    }

    /* ==========================================================================
       6. برچسب‌های متنی روی تصاویر (.page-image-label-host)
       ========================================================================== */
    .page-image-label-host {
        display: inline-block !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .page-inline-gallery > p > .page-image-label-host {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .page-image-label {
        max-width: calc(100% - 8px) !important;
    }

    .page-image-label__text {
        font-size: 0.82rem !important;
        padding: 3px 8px !important;
        line-height: 1.4 !important;
    }

    /* ==========================================================================
       7. لایت‌باکس و نمایش تمام‌صفحه تصاویر
       ========================================================================== */
    .content-lightbox__stage {
        padding: 12px !important;
    }

    .content-lightbox__img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* ==========================================================================
   مخصوص گوشی‌های همراه (صفحه‌های با عرض کمتر از 576 پیکسل)
   ========================================================================== */
@media screen and (max-width: 575.98px) {

    /* گالری درون‌متنی: چیدمان تک‌ستونه با حفظ اندازه واقعی تصویر */
    .page-inline-gallery {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        justify-items: center !important;
    }

    .page-inline-gallery > p {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        justify-content: center !important;
    }

    .page-inline-gallery.has-frame > p {
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .page-inline-gallery img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 75vh !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* گالری رسانه در صفحه موبایل تک‌ستونه */
    .page-media-gallery {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .page-media-gallery.is-configured .page-media-gallery__tile {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 140px !important;
    }

    .page-media-gallery__media {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 75vh !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* بنر بالای صفحات در موبایل متناسب‌تر شود */
    .banner_page {
        height: 180px !important;
    }

    /* فاصله پدینگ محتوا در موبایل */
    .content {
        padding: 20px 0 15px 0 !important;
    }

    /* تصاویر داخل جداول در موبایل اسکرول یا به هم نریزند */
    .page-content table img,
    .page-content-text table img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
}