/* =====================================================
   ObfuscatorJS Framework v2.3
   responsive.css
   Global Responsive Utilities
   Production Version

   Safe Update:
   - Existing classes preserved
   - Existing breakpoints preserved
   - Duplicate rules cleaned
   - Mobile gutter centralized
   - Reduced motion rules consolidated
   - No HTML / JS dependency changes
===================================================== */


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

}


/* =====================================================
   DESKTOP
===================================================== */

@media (max-width: 1200px) {

    .hide-desktop-lg {
        display: none !important;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   HIDE / SHOW
===================================================== */


/*
 * Default visibility states.
 *
 * Existing behavior preserved intentionally.
 */

.hide-mobile {
    display: initial;
}

.show-mobile {
    display: none;
}


.hide-tablet {
    display: initial;
}

.show-tablet {
    display: none;
}


.hide-desktop {
    display: none;
}

.show-desktop {
    display: initial;
}


/* =====================================================
   MOBILE VISIBILITY
===================================================== */

@media (max-width: 768px) {

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

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

}


/* =====================================================
   TABLET VISIBILITY
===================================================== */

@media (min-width: 769px) and (max-width: 992px) {

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

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

}


/* =====================================================
   DESKTOP VISIBILITY
===================================================== */

@media (min-width: 993px) {

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

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

}


/* =====================================================
   FLEX DISPLAY HELPERS
===================================================== */

.show-flex {
    display: flex !important;
}

.show-inline {
    display: inline !important;
}

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


/* =====================================================
   MOBILE FLEX
===================================================== */

@media (max-width: 768px) {

    .mobile-flex-column {
        flex-direction: column !important;
    }

    .mobile-flex-wrap {
        flex-wrap: wrap !important;
    }

}


/* =====================================================
   MOBILE GUTTER OPTIMIZATION
===================================================== */

/*
 * Uses the framework mobile gutter variable
 * when available.
 *
 * Fallback keeps the layout safe if the variable
 * is not defined.
 */

@media (max-width: 768px) {

    .container,
    .container-sm,
    .container-lg,
    .content,
    .container-fluid {

        padding-left:
            var(--container-gutter-mobile, 16px);

        padding-right:
            var(--container-gutter-mobile, 16px);

    }

}


/* =====================================================
   ORIENTATION
===================================================== */

.landscape-only,
.portrait-only {
    display: none;
}


/* =====================================================
   LANDSCAPE
===================================================== */

@media (orientation: landscape) {

    .landscape-only {
        display: block !important;
    }

    .portrait-only {
        display: none !important;
    }

}


/* =====================================================
   PORTRAIT
===================================================== */

@media (orientation: portrait) {

    .portrait-only {
        display: block !important;
    }

    .landscape-only {
        display: none !important;
    }

}


/* =====================================================
   SMALL SCREEN SAFETY
===================================================== */

@media (max-width: 480px) {

    .desktop-only {
        display: none !important;
    }

}


/* =====================================================
   TOUCH DEVICE
===================================================== */

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

    .touch-only {
        display: block !important;
    }

}


/* =====================================================
   POINTER DEVICE
===================================================== */

@media (hover: hover) and (pointer: fine) {

    .touch-only {
        display: none !important;
    }

}


/* =====================================================
   PRINT
===================================================== */

@media print {

    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

}


/* =====================================================
   PRINT DEFAULT
===================================================== */

.print-only {
    display: none;
}


/* =====================================================
   REDUCED MOTION / ACCESSIBILITY
===================================================== */

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

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        animation-delay: 0s !important;

        transition-duration: 0.01ms !important;

        transition-delay: 0s !important;

        scroll-behavior: auto !important;

    }

}


/* =====================================================
   END OF RESPONSIVE.CSS
===================================================== */