/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/layout.css
 Module      : EcoLayout System
 Version     : 1.0.0
 Status      : Draft
 Author      : EcoDrop Platform
 References  : EMS / EHIG / EDS
======================================================================
*/

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;

    height:100%;

    overflow:hidden;

}

body{

    background:

        var(--eco-app-background);

    color:

        var(--eco-text-primary);

    font-family:

        var(--eco-font-text);

}

/* ==========================================================
   APPLICATION
========================================================== */

.eco-app{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   SCREEN
========================================================== */

.eco-screen{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity var(--eco-motion-normal),

        visibility var(--eco-motion-normal);

}

.eco-screen.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/* ==========================================================
   CONTAINER
========================================================== */

.eco-container{

    width:100%;

    max-width:var(--eco-content-max-width);

    margin:0 auto;

    padding:var(--eco-container-padding);

}

.eco-container-fluid{

    width:100%;

    padding:var(--eco-container-padding);

}

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

.eco-header{

    height:var(--eco-header-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

}

/* ==========================================================
   MAIN
========================================================== */

.eco-main{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   FOOTER
========================================================== */

.eco-footer{

    height:var(--eco-footer-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* ==========================================================
   GRID
========================================================== */

.eco-grid{

    display:grid;

    grid-template-columns:repeat(12,1fr);

    gap:var(--eco-grid-gap);

}

.eco-grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.eco-grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.eco-grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

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

.eco-row{

    display:flex;

    flex-direction:row;

}

.eco-column{

    display:flex;

    flex-direction:column;

}

.eco-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.eco-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.eco-around{

    display:flex;

    align-items:center;

    justify-content:space-around;

}

.eco-evenly{

    display:flex;

    align-items:center;

    justify-content:space-evenly;

}

.eco-start{

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

}

.eco-end{

    display:flex;

    align-items:flex-end;

    justify-content:flex-end;

}

/* ==========================================================
   ALIGNMENT
========================================================== */

.eco-align-start{

    align-items:flex-start;

}

.eco-align-center{

    align-items:center;

}

.eco-align-end{

    align-items:flex-end;

}

.eco-justify-start{

    justify-content:flex-start;

}

.eco-justify-center{

    justify-content:center;

}

.eco-justify-end{

    justify-content:flex-end;

}

.eco-justify-between{

    justify-content:space-between;

}

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

.eco-flex{

    flex:1;

}

.eco-flex-auto{

    flex:auto;

}

.eco-flex-none{

    flex:none;

}

/* ==========================================================
   GAP
========================================================== */

.eco-gap-xs{

    gap:8px;

}

.eco-gap-sm{

    gap:16px;

}

.eco-gap-md{

    gap:24px;

}

.eco-gap-lg{

    gap:32px;

}

.eco-gap-xl{

    gap:48px;

}

.eco-gap-2xl{

    gap:64px;

}

/* ==========================================================
   WIDTH
========================================================== */

.eco-w-25{

    width:25%;

}

.eco-w-33{

    width:33.333%;

}

.eco-w-50{

    width:50%;

}

.eco-w-66{

    width:66.666%;

}

.eco-w-75{

    width:75%;

}

.eco-w-100{

    width:100%;

}

.eco-h-100{

    height:100%;

}

/* ==========================================================
   PADDING
========================================================== */

.eco-p-xs{

    padding:8px;

}

.eco-p-sm{

    padding:16px;

}

.eco-p-md{

    padding:24px;

}

.eco-p-lg{

    padding:32px;

}

.eco-p-xl{

    padding:48px;

}

/* ==========================================================
   MARGIN
========================================================== */

.eco-m-xs{

    margin:8px;

}

.eco-m-sm{

    margin:16px;

}

.eco-m-md{

    margin:24px;

}

.eco-m-lg{

    margin:32px;

}

.eco-m-xl{

    margin:48px;

}

/* ==========================================================
   AUTO
========================================================== */

.eco-mx-auto{

    margin-left:auto;

    margin-right:auto;

}

.eco-my-auto{

    margin-top:auto;

    margin-bottom:auto;

}

/* ==========================================================
   POSITION
========================================================== */

.eco-relative{

    position:relative;

}

.eco-absolute{

    position:absolute;

}

.eco-fixed{

    position:fixed;

}

.eco-sticky{

    position:sticky;

}

/* ==========================================================
   INSET
========================================================== */

.eco-fill{

    inset:0;

}

.eco-top{

    top:0;

}

.eco-bottom{

    bottom:0;

}

.eco-left{

    left:0;

}

.eco-right{

    right:0;

}

/* ==========================================================
   OVERFLOW
========================================================== */

.eco-hidden{

    overflow:hidden;

}

.eco-auto{

    overflow:auto;

}

.eco-scroll{

    overflow-y:auto;

}

/* ==========================================================
   COLUMN SYSTEM
========================================================== */

.eco-col-1{grid-column:span 1;}
.eco-col-2{grid-column:span 2;}
.eco-col-3{grid-column:span 3;}
.eco-col-4{grid-column:span 4;}
.eco-col-5{grid-column:span 5;}
.eco-col-6{grid-column:span 6;}
.eco-col-7{grid-column:span 7;}
.eco-col-8{grid-column:span 8;}
.eco-col-9{grid-column:span 9;}
.eco-col-10{grid-column:span 10;}
.eco-col-11{grid-column:span 11;}
.eco-col-12{grid-column:span 12;}

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

.eco-section{

    width:100%;

    position:relative;

}

.eco-section-center{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

}

.eco-section-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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

.eco-hero{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:var(--eco-hero-gap);

    width:100%;

    min-height:520px;

}

.eco-hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:28px;

}

.eco-hero-visual{

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   IMPACT GRID
========================================================== */

.eco-impact-grid{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:24px;

    width:100%;

}

/* ==========================================================
   STACK
========================================================== */

.eco-stack-xs>*+*{

    margin-top:8px;

}

.eco-stack-sm>*+*{

    margin-top:16px;

}

.eco-stack-md>*+*{

    margin-top:24px;

}

.eco-stack-lg>*+*{

    margin-top:32px;

}

.eco-stack-xl>*+*{

    margin-top:48px;

}

/* ==========================================================
   DIVIDER
========================================================== */

.eco-divider{

    width:100%;

    height:1px;

    background:

        rgba(255,255,255,.08);

}

/* ==========================================================
   LAYERS
========================================================== */

.eco-layer-background{

    position:absolute;

    inset:0;

    z-index:var(--eco-z-background);

}

.eco-layer-content{

    position:relative;

    z-index:var(--eco-z-content);

}

.eco-layer-overlay{

    position:absolute;

    inset:0;

    z-index:var(--eco-z-overlay);

}

.eco-layer-dialog{

    position:fixed;

    inset:0;

    z-index:var(--eco-z-dialog);

    display:flex;

    align-items:center;

    justify-content:center;

}

.eco-layer-toast{

    position:fixed;

    right:32px;

    bottom:32px;

    z-index:var(--eco-z-toast);

}

/* ==========================================================
   SAFE AREA
========================================================== */

.eco-safe{

    padding-top:var(--eco-safe-top);

    padding-right:var(--eco-safe-right);

    padding-bottom:var(--eco-safe-bottom);

    padding-left:var(--eco-safe-left);

}

/* ==========================================================
   ASPECT RATIO
========================================================== */

.eco-square{

    aspect-ratio:1/1;

}

.eco-video{

    aspect-ratio:16/9;

}

.eco-tablet{

    aspect-ratio:16/10;

}

/* ==========================================================
   VISIBILITY
========================================================== */

.eco-visible{

    visibility:visible;

}

.eco-invisible{

    visibility:hidden;
 
}

.eco-none{

    display:none;

}

.eco-block{

    display:block;

}

.eco-inline{

    display:inline-block;

}

/* ==========================================================
   POINTER
========================================================== */

.eco-click{

    cursor:pointer;

}

.eco-disabled{

    pointer-events:none;

    user-select:none;

}

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

@media (max-width:1340px){

    .eco-hero{

        grid-template-columns:1fr;

        text-align:center;

    }

    .eco-impact-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   LAYOUT PHILOSOPHY

   Layout creates clarity.

   Space creates calm.

   Alignment creates trust.

========================================================== */

/* ==========================================================
   END OF FILE
========================================================== */