/* ==========================================================
   COSTA PLATFORM v1.0
   UTILITIES.CSS
   Utilitários Globais
   ========================================================== */

/* ===========================
   RESET BÁSICO
=========================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

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

svg{
    display:block;
}

a{
    text-decoration:none;
    transition:var(--cst-transition);
}

button{
    font:inherit;
    cursor:pointer;
}

/* ===========================
   CONTAINER PADRÃO
=========================== */

.cst-container{

    width:100%;
    max-width:var(--cst-container);

    margin-left:auto;
    margin-right:auto;

    padding-left:var(--cst-container-padding-desktop);
    padding-right:var(--cst-container-padding-desktop);

}

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

.cst-grid{
    display:grid;
}

.cst-flex{
    display:flex;
}

.cst-flex-column{
    display:flex;
    flex-direction:column;
}

.cst-flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

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

.cst-gap-xs{gap:var(--cst-space-8);}
.cst-gap-sm{gap:var(--cst-space-16);}
.cst-gap-md{gap:var(--cst-space-24);}
.cst-gap-lg{gap:var(--cst-space-32);}
.cst-gap-xl{gap:var(--cst-space-48);}

/* ===========================
   ESPAÇAMENTOS
=========================== */

.cst-mt-xs{margin-top:var(--cst-space-8);}
.cst-mt-sm{margin-top:var(--cst-space-16);}
.cst-mt-md{margin-top:var(--cst-space-24);}
.cst-mt-lg{margin-top:var(--cst-space-40);}
.cst-mt-xl{margin-top:var(--cst-space-64);}

.cst-mb-xs{margin-bottom:var(--cst-space-8);}
.cst-mb-sm{margin-bottom:var(--cst-space-16);}
.cst-mb-md{margin-bottom:var(--cst-space-24);}
.cst-mb-lg{margin-bottom:var(--cst-space-40);}
.cst-mb-xl{margin-bottom:var(--cst-space-64);}

/* ===========================
   TEXTOS
=========================== */

.cst-text-center{text-align:center;}
.cst-text-left{text-align:left;}
.cst-text-right{text-align:right;}

/* ===========================
   VISIBILIDADE
=========================== */

.cst-hidden{
    display:none!important;
}

/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:1024px){

    .cst-container{

        padding-left:var(--cst-container-padding-tablet);
        padding-right:var(--cst-container-padding-tablet);

    }

}

@media(max-width:767px){

    .cst-container{

        padding-left:var(--cst-container-padding-mobile);
        padding-right:var(--cst-container-padding-mobile);

    }

}

/* ==========================================================
   COSTA PLATFORM — ACCESSIBILITY UTILITIES
   ========================================================== */

.cst-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}