/* ==========================================================================
   HAUS OF LESS
   Layout
   Version: 3.0
   Last Updated: July 2026

   Changes
   - Added container-fluid
   - Improved responsive containers
   - Standardized colors
   - Added anchor scroll offset
   - Production ready
   ========================================================================== */


/* ==========================================================
   Body
========================================================== */

body{

    background:var(--background-body);
    overflow-x:hidden;

}


/* ==========================================================
   Main
========================================================== */

main{

    position:relative;
    width:100%;

    overflow:hidden;

}


/* ==========================================================
   Containers
========================================================== */

.container{

    width:min(calc(100% - 64px), var(--container));
    margin-inline:auto;

}

.container--narrow{

    width:min(calc(100% - 64px), var(--container-narrow));
    margin-inline:auto;

}

.container--content{

    width:min(100%, var(--content-width));
    margin-inline:auto;

}

.container-fluid{

    width:100%;

}


/* ==========================================================
   Sections
========================================================== */

.section{

    position:relative;

    padding:5.5rem 0;

    scroll-margin-top:calc(var(--header-height) + 1rem);

}

.section-sm{

    padding:4.5rem 0;

}

.section-lg{

    padding:7rem 0;

}


/* ==========================================================
   Background Variants
========================================================== */

.section-white{

    background:var(--color-white);

}

.section-linen{

    background:var(--color-linen);

}

.section-stone{

    background:var(--color-stone);

}

.section-forest{

    background:var(--color-forest);
    color:var(--color-white);

}


/* ==========================================================
   Content
========================================================== */

.content{

    width:min(100%, var(--content-width));

}

.content-center{

    margin-inline:auto;
    text-align:center;

}


/* ==========================================================
   Images
========================================================== */

img{

    display:block;

    max-width:100%;
    height:auto;

    border-radius:var(--radius-md);

    box-sizing:border-box;

}


/* ==========================================================
   Divider
========================================================== */

.divider{

    width:100%;
    height:1px;

    background:var(--border-light);

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1200px){

    .container{

        width:min(calc(100% - 56px), var(--container));

    }

}

@media (max-width:768px){

    .container,
    .container--narrow{

        width:min(calc(100% - 40px), var(--container));

    }

    .section{

        padding:4.5rem 0;

    }

    .section-sm{

        padding:3.5rem 0;

    }

    .section-lg{

        padding:5.5rem 0;

    }

}

@media (max-width:480px){

    .container,
    .container--narrow{

        width:min(calc(100% - 32px), var(--container));

    }

}








/* ==========================================================
   Tablet
========================================================== */






@media (max-width:992px){

    .section{

        padding:5rem 0;

    }

    .section-sm{

        padding:4rem 0;

    }

    .section-lg{

        padding:6rem 0;

    }

}