/**
 * ============================================================
 * AKBAR KHAN TRUST
 * GLOBAL RESPONSIVE SYSTEM
 * ============================================================
 *
 * File    : /public_html/assets/css/responsive/responsive.css
 * Version : 1.0.0
 * PHP     : 8.2+
 *
 * Responsibility:
 * Global responsive layout adjustments.
 *
 * Does NOT contain:
 * - Page-specific styles
 * - Component-specific styles
 * - Mobile navigation behavior
 * - Print styles
 * ============================================================
 */


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

@media (max-width: 1199.98px) {

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

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


/* ============================================================
   TABLET / SMALL DESKTOP
   ============================================================ */

@media (max-width: 991.98px) {

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

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

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

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

    .grid-tablet-1 {
        grid-template-columns: 1fr !important;
    }

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


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

@media (max-width: 767.98px) {

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

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

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

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

    .grid-mobile-1 {
        grid-template-columns: 1fr !important;
    }

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

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

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

    .text-mobile-center {
        text-align: center !important;
    }

    .text-mobile-start {
        text-align: start !important;
    }

    .text-mobile-end {
        text-align: end !important;
    }

    .width-mobile-full {
        width: 100% !important;
    }
}


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

@media (max-width: 575.98px) {

    .container {
        width: calc(100% - 1.25rem);
    }

    .grid-mobile-2 {
        grid-template-columns: 1fr !important;
    }

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

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


/* ============================================================
   EXTRA SMALL DEVICES
   ============================================================ */

@media (max-width: 374.98px) {

    .container {
        width: calc(100% - 1rem);
    }

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

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