/**
 * ============================================================
 * AKBAR KHAN TRUST
 * MOBILE PRESENTATION SYSTEM
 * ============================================================
 *
 * File    : /public_html/assets/css/responsive/mobile.css
 * Version : 1.0.0
 * PHP     : 8.2+
 *
 * Responsibility:
 * Mobile-specific presentation rules.
 *
 * Navigation behavior belongs to:
 * /assets/css/components/navigation.css
 *
 * Page-specific mobile rules belong to:
 * /assets/css/pages/
 * ============================================================
 */


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

@media (max-width: 767.98px) {

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
    }


    /* ========================================================
       IMAGES
       ======================================================== */

    img {
        max-width: 100%;
        height: auto;
    }


    /* ========================================================
       TABLES
       ======================================================== */

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ========================================================
       CONTENT
       ======================================================== */

    .content {
        min-width: 0;
        max-width: 100%;
    }


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

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

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


    /* ========================================================
       BUTTONS
       ======================================================== */

    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: var(--space-3, 0.75rem);
    }

    .btn-group-mobile .btn {
        width: 100%;
    }


    /* ========================================================
       FORM
       ======================================================== */

    input,
    select,
    textarea {
        max-width: 100%;
    }


    /* ========================================================
       MODALS
       ======================================================== */

    .modal-dialog {
        width: calc(100% - 1.5rem);
        max-width: none;
        margin-inline: auto;
    }


    /* ========================================================
       DROPDOWNS
       ======================================================== */

    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }
}


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

@media (max-width: 575.98px) {

    .section {
        padding-block: var(--space-10, 2.5rem);
    }

    .section-header {
        text-align: center;
    }

    .section-actions {
        width: 100%;
    }

    .section-actions .btn {
        width: 100%;
    }


    /* ========================================================
       CARDS
       ======================================================== */

    .card {
        width: 100%;
    }


    /* ========================================================
       PAGINATION
       ======================================================== */

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}