/* =========================================
   MORZO SocietyOS
   Responsive Design System
========================================= */


/* =========================================
   LARGE DESKTOP
   1440px+
========================================= */


@media (min-width:1440px){


    .container {


        max-width:

        1400px;


    }



    .hero-title {


        font-size:

        4.5rem;


    }


}





/* =========================================
   LAPTOP
   1200px
========================================= */


@media(max-width:1200px){



    .container {


        width:

        calc(
            100% - 48px
        );


    }



    .widget-grid {


        grid-template-columns:

        repeat(3,1fr);


    }



    .grid-4 {


        grid-template-columns:

        repeat(3,1fr);


    }



}





/* =========================================
   TABLET LANDSCAPE
   1024px
========================================= */


@media(max-width:1024px){



    :root {


        --sidebar-width:

        220px;


    }



    .dashboard-layout {


        grid-template-columns:

        220px 1fr;


    }




    .hero {


        min-height:

        70vh;


    }




    .widget-grid {


        grid-template-columns:

        repeat(2,1fr);


    }



    .grid-3 {


        grid-template-columns:

        repeat(2,1fr);


    }




}





/* =========================================
   TABLET PORTRAIT
   768px
========================================= */


@media(max-width:768px){


    body {

        font-size:15px;

    }


	.public-nav {

        display:none;

    }


    .header-actions {

        display:none;

    }


    .mobile-menu-btn {

        display:block;

    }
	
	
	.mobile-menu {

    display:none;

	}


    .container {

        width:calc(100% - 24px);

    }




    .section {

        padding-block:var(--space-10);

    }




    /* Header */

    .app-header {

        height:auto;

    }





    /* Dashboard */

    .dashboard-layout {

        display:block;

    }



    .sidebar {

        position:relative;

        width:100%;

        height:auto;

    }





    .main-content {

        margin-left:0;

        width:100%;

    }





    /* Grids */

    .grid-2,
    .grid-3,
    .grid-4,
    .widget-grid {

        grid-template-columns:1fr;

    }


    /* Hero */

    .hero {

        text-align:center;

        min-height:65vh;
		
		padding-top:40px;
		
		position:relative;

		z-index:1;


    }



    .hero-layout {

        grid-template-columns:1fr;

        gap:30px;

    }



    .hero-image {

        order:2;

    }



    .hero-image img {

        width:100%;

        max-height:380px;

        object-fit:cover;

    }



    .hero-content {

        margin:auto;

    }





    /* Cards */

    .card {

        padding:var(--space-5);

    }





    /* Buttons */

    .btn {

        width:100%;

    }
	
	
	
	.public-header {

    top:80px;

	}


	.hero {

    padding-top:40px;

	}




/* =====================================
   PUBLIC WEBSITE MOBILE
===================================== */


/* Top Bar */

.society-topbar {

    min-height:40px;

	}


.topbar-container {

    padding:8px 12px;

	}


.topbar-center,
.topbar-right {

    display:none;

	}


.topbar-left {

    font-size:12px;

	}


/* Society Updates */

.society-updates {

    height:40px;

	}


.updates-label {

    padding:0 12px;

    font-size:13px;

	}


.update-item {

    font-size:13px;

	}



/* Public Header */

.header-container {

    display:flex;

    justify-content:space-between;

    padding:0 16px;

	}



.logo a,
.logo strong {

    font-size:18px;

	}



/* Hero */

.hero {

    padding:40px 20px;

	}


.hero-layout {

    display:flex;

    flex-direction:column;

	}


.hero-image {

    order:2;

	}


.hero-content {

    order:1;

	}


.hero h1 {

    font-size:40px;

    text-align:center;

	}


.hero p {

    text-align:center;

    font-size:16px;

	}

}





/* =========================================
   MOBILE
   480px
========================================= */


@media(max-width:480px){



    :root {


        --space-16:

        48px;


        --space-20:

        60px;


    }





    h1 {


        font-size:

        2rem;


    }



    h2 {


        font-size:

        1.6rem;


    }





    .hero-title {


        font-size:

        2.25rem;


    }




    .hero-subtitle {


        font-size:

        var(--font-size-sm);


    }





    .content-wrapper {


        padding:

        var(--space-3);


    }





    .widget {


        padding:

        var(--space-4);


    }





    /* Tables */


    .table {


        overflow-x:

        auto;


    }



    .table table {


        min-width:

        600px;


    }





}





/* =========================================
   TOUCH DEVICES
========================================= */


@media(pointer:coarse){



    .btn {


        min-height:

        44px;


    }



    .input {


        min-height:

        44px;


    }



}





/* =========================================
   DARK MODE PREPARATION
========================================= */


@media(prefers-color-scheme:dark){


    /* Reserved for future MORZO dark mode */

}