/* =========================================
   MORZO SocietyOS
   Page Layout Styles
========================================= */


/* =========================================
   HERO SECTION
========================================= */


.hero {


    min-height:

    80vh;


    display:

    flex;


    align-items:

    center;


    background:

    linear-gradient(

        135deg,

        var(--morzo-primary),

        var(--morzo-primary-dark)

    );


    color:

    var(--morzo-white);


    position:

    relative;


    overflow:

    hidden;


}



.hero::after {


    content:

    "";


    position:

    absolute;


    width:

    500px;


    height:

    500px;


    right:

    -150px;


    top:

    -150px;


    border-radius:

    50%;


    background:

    rgba(255,237,168,0.12);


}




.hero-content {

    position:relative;

    z-index:2;

    max-width:800px;

    margin-left:60px;

}


.hero-title {

    font-size:72px;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:24px;

}

.hero-subtitle {

    font-size:22px;

    line-height:1.7;

    max-width:680px;

}




.hero .hero-title {

    color:var(--morzo-white);

    font-size:72px;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:24px;

}



.hero .hero-subtitle {

    color:
    rgba(252,250,245,0.85);

    font-size:22px;

    line-height:1.7;

    max-width:680px;

    margin-bottom:40px;

}

.hero-actions {

    display:flex;

    gap:16px;

    margin-top:32px;

}




/* =========================================
   PAGE HEADER
========================================= */

.page-header{

    background:var(--morzo-primary);

    color:var(--morzo-white);

    padding:80px 0 70px;
	
	margin-bottom:20px;

}

.page-header .container{

    max-width:1200px;

    margin:0 auto;

}

.page-header h1{

    color:var(--morzo-white);

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin:0 0 18px;
	
	max-width:1000px;

}

.page-header p{

    max-width:1000px;

    font-size:22px;

    line-height:1.7;

    color:rgba(252,250,245,.85);

    margin:0;

}




/* =========================================
   ABOUT SECTION
========================================= */


.about-grid {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    var(--space-10);


    align-items:

    center;


}





.about-image {


    border-radius:

    var(--radius-xl);


    overflow:

    hidden;


    box-shadow:

    var(--shadow-md);


}





.about-content {


    display:

    flex;


    flex-direction:

    column;


    gap:

    var(--space-5);


}





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


.facility-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            250px,
            1fr
        )
    );


    gap:

    var(--space-6);


}





.facility-card {


    text-align:

    center;


}




.facility-icon {


    width:

    64px;


    height:

    64px;


    margin:

    0 auto var(--space-4);


    border-radius:

    var(--radius-lg);


    background:

    var(--morzo-primary);


    color:

    var(--morzo-accent);


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    font-size:

    24px;


}





/* =========================================
   GALLERY PAGE
========================================= */


.gallery-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            280px,
            1fr
        )
    );


    gap:

    var(--space-5);


}




.gallery-item {


    border-radius:

    var(--radius-lg);


    overflow:

    hidden;


    aspect-ratio:

    4 / 3;


}



.gallery-item img {


    width:

    100%;


    height:

    100%;


    object-fit:

    cover;


    transition:

    var(--transition-normal);


}



.gallery-item:hover img {


    transform:

    scale(1.05);


}





/* =========================================
   NOTICE BOARD
========================================= */


.notice-list {


    display:

    flex;


    flex-direction:

    column;


    gap:

    var(--space-4);


}




.notice-item {


    padding:

    var(--space-5);


    background:

    var(--bg-card);


    border-left:

    4px solid var(--morzo-primary);


    border-radius:

    var(--radius-md);


    box-shadow:

    var(--shadow-sm);


}





.notice-date {


    color:

    var(--text-muted);


    font-size:

    var(--font-size-sm);


}





/* =========================================
   EVENT PAGE
========================================= */


.event-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            300px,
            1fr
        )
    );


    gap:

    var(--space-6);


}




.event-card {


    overflow:

    hidden;


}





.event-card-header {


    background:

    var(--morzo-primary);


    color:

    white;


    padding:

    var(--space-5);


}





.event-date {


    color:

    var(--morzo-accent);


    font-weight:

    var(--font-weight-semibold);


}





/* =========================================
   CONTACT PAGE
========================================= */


.contact-grid {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    var(--space-8);


}





.contact-info {


    display:

    flex;


    flex-direction:

    column;


    gap:

    var(--space-4);


}





/* =========================================
   DASHBOARD PAGE
========================================= */


.dashboard-page {


    background:

    var(--bg-secondary);


    min-height:

    100vh;


}




.dashboard-header {


    display:

    flex;


    justify-content:

    space-between;


    align-items:

    center;


    margin-bottom:

    var(--space-8);


}





.dashboard-section {


    margin-bottom:

    var(--space-10);


}





/* =========================================
   ADMIN PAGE
========================================= */


.admin-panel {


    background:

    white;


    border-radius:

    var(--radius-lg);


    padding:

    var(--space-8);


}





.admin-stat {


    display:

    flex;


    justify-content:

    space-between;


    align-items:

    center;


}





/* =========================================
   MARKETPLACE PAGE
========================================= */


.marketplace-grid {


    display:

    grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(
            280px,
            1fr
        )
    );


    gap:

    var(--space-6);


}





.marketplace-item {


    overflow:

    hidden;


}




/* =========================================
   RESPONSIVE
========================================= */


@media(max-width:768px){


    .hero {


        min-height:

        70vh;


    }




    .about-grid,
    .contact-grid {


        grid-template-columns:

        1fr;


    }



}