/* ==========================================================
   AYW DESIGN SYSTEM
   LAYOUT / GRIDS

   Responsabilidades:
   - criar grades responsivas;
   - controlar quantidade de colunas;
   - controlar espaçamentos;
   - controlar alinhamento dos itens;
   - oferecer grades automáticas;
   - oferecer layouts assimétricos;
   - controlar spans responsivos.

   Não inclui:
   - grids específicos de páginas;
   - containers;
   - espaçamento vertical de seções;
   - estilos visuais de cards;
   - estrutura da sidebar ou do shell.

   Dependências:
   - tokens.css.
   ========================================================== */


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

   A grade é mobile-first e começa com uma única coluna.

   As variáveis internas permitem que modificadores alterem
   colunas e espaçamentos sem repetir a estrutura completa.
   ========================================================== */

   .ayw-grid {
    --ayw-grid-columns:
        minmax(0, 1fr);

    --ayw-grid-column-gap:
        var(--ayw-space-4);

    --ayw-grid-row-gap:
        var(--ayw-space-4);

    display: grid;

    grid-template-columns:
        var(--ayw-grid-columns);

    column-gap:
        var(--ayw-grid-column-gap);

    row-gap:
        var(--ayw-grid-row-gap);

    width: 100%;
    min-width: 0;
}


/* ==========================================================
   PROTEÇÃO DOS FILHOS DIRETOS

   Evita que textos, tabelas, inputs ou componentes largos
   façam a coluna ultrapassar os limites da grade.
   ========================================================== */

.ayw-grid > * {
    min-width: 0;
}


/* ==========================================================
   ESPAÇAMENTO GERAL
   ========================================================== */

.ayw-grid-gap-none {
    --ayw-grid-column-gap: 0px;
    --ayw-grid-row-gap: 0px;
}

.ayw-grid-sm {
    --ayw-grid-column-gap: var(--ayw-space-3);
    --ayw-grid-row-gap: var(--ayw-space-3);
}

.ayw-grid-md {
    --ayw-grid-column-gap: var(--ayw-space-6);
    --ayw-grid-row-gap: var(--ayw-space-6);
}

.ayw-grid-lg {
    --ayw-grid-column-gap: var(--ayw-space-8);
    --ayw-grid-row-gap: var(--ayw-space-8);
}

.ayw-grid-xl {
    --ayw-grid-column-gap: var(--ayw-space-10);
    --ayw-grid-row-gap: var(--ayw-space-10);
}


/* ==========================================================
   ESPAÇAMENTO HORIZONTAL
   ========================================================== */

.ayw-grid-column-gap-none {
    --ayw-grid-column-gap: 0px;
}

.ayw-grid-column-gap-sm {
    --ayw-grid-column-gap: var(--ayw-space-3);
}

.ayw-grid-column-gap-md {
    --ayw-grid-column-gap: var(--ayw-space-6);
}

.ayw-grid-column-gap-lg {
    --ayw-grid-column-gap: var(--ayw-space-8);
}


/* ==========================================================
   ESPAÇAMENTO VERTICAL
   ========================================================== */

.ayw-grid-row-gap-none {
    --ayw-grid-row-gap: 0px;
}

.ayw-grid-row-gap-sm {
    --ayw-grid-row-gap: var(--ayw-space-3);
}

.ayw-grid-row-gap-md {
    --ayw-grid-row-gap: var(--ayw-space-6);
}

.ayw-grid-row-gap-lg {
    --ayw-grid-row-gap: var(--ayw-space-8);
}


/* ==========================================================
   GRADES FIXAS

   No mobile, todas permanecem com uma coluna.
   A quantidade indicada entra nos breakpoints apropriados.
   ========================================================== */

.ayw-grid-2,
.ayw-grid-3,
.ayw-grid-4,
.ayw-grid-5,
.ayw-grid-6,
.ayw-grid-12,
.ayw-grid-2-md,
.ayw-grid-3-md,
.ayw-grid-4-md,
.ayw-grid-2-lg,
.ayw-grid-3-lg,
.ayw-grid-4-lg {
    --ayw-grid-columns:
        minmax(0, 1fr);
}


/* ==========================================================
   GRADES AUTOMÁTICAS

   Criam a maior quantidade possível de colunas respeitando
   a largura mínima de cada item.
   ========================================================== */

.ayw-grid-auto {
    --ayw-grid-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 240px),
                1fr
            )
        );
}

.ayw-grid-auto-sm {
    --ayw-grid-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 180px),
                1fr
            )
        );
}

.ayw-grid-auto-lg {
    --ayw-grid-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 320px),
                1fr
            )
        );
}


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

   Diferente de auto-fit, preserva trilhas vazias quando
   houver espaço disponível.
   ========================================================== */

.ayw-grid-fill {
    --ayw-grid-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 240px),
                1fr
            )
        );
}

.ayw-grid-fill-sm {
    --ayw-grid-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 180px),
                1fr
            )
        );
}

.ayw-grid-fill-lg {
    --ayw-grid-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, 320px),
                1fr
            )
        );
}


/* ==========================================================
   GRADES ASSIMÉTRICAS

   Permanecem em uma coluna no mobile.

   Uso recomendado:
   - conteúdo principal e sidebar;
   - formulários com painel auxiliar;
   - dashboards com área principal e resumo.
   ========================================================== */

.ayw-grid-main-aside,
.ayw-grid-aside-main {
    --ayw-grid-columns:
        minmax(0, 1fr);
}


/* ==========================================================
   ALINHAMENTO VERTICAL DOS ITENS
   ========================================================== */

.ayw-grid-align-start {
    align-items: start;
}

.ayw-grid-align-center {
    align-items: center;
}

.ayw-grid-align-end {
    align-items: end;
}

.ayw-grid-align-stretch,
.ayw-grid-stretch {
    align-items: stretch;
}


/* ==========================================================
   ALINHAMENTO HORIZONTAL DOS ITENS
   ========================================================== */

.ayw-grid-justify-start {
    justify-items: start;
}

.ayw-grid-justify-center {
    justify-items: center;
}

.ayw-grid-justify-end {
    justify-items: end;
}

.ayw-grid-justify-stretch {
    justify-items: stretch;
}


/* ==========================================================
   ALINHAMENTO DO CONJUNTO DA GRADE
   ========================================================== */

.ayw-grid-content-start {
    align-content: start;
}

.ayw-grid-content-center {
    align-content: center;
}

.ayw-grid-content-end {
    align-content: end;
}

.ayw-grid-content-between {
    align-content: space-between;
}


/* ==========================================================
   ITENS
   ========================================================== */

.ayw-grid-item-full {
    grid-column: 1 / -1;
}

.ayw-grid-item-start {
    align-self: start;
}

.ayw-grid-item-center {
    align-self: center;
}

.ayw-grid-item-end {
    align-self: end;
}

.ayw-grid-item-stretch {
    align-self: stretch;
}

.ayw-grid-item-justify-start {
    justify-self: start;
}

.ayw-grid-item-justify-center {
    justify-self: center;
}

.ayw-grid-item-justify-end {
    justify-self: end;
}

.ayw-grid-item-justify-stretch {
    justify-self: stretch;
}


/* ==========================================================
   ORDEM DOS ITENS
   ========================================================== */

.ayw-grid-item-first {
    order: -1;
}

.ayw-grid-item-last {
    order: 999;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) {
    .ayw-grid-2,
    .ayw-grid-2-md {
        --ayw-grid-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-grid-3,
    .ayw-grid-3-md {
        --ayw-grid-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-grid-4,
    .ayw-grid-4-md {
        --ayw-grid-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-grid-5,
    .ayw-grid-6 {
        --ayw-grid-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-grid-12 {
        --ayw-grid-columns:
            repeat(12, minmax(0, 1fr));
    }

    .ayw-grid-main-aside {
        --ayw-grid-columns:
            minmax(0, 2fr)
            minmax(240px, 1fr);
    }

    .ayw-grid-aside-main {
        --ayw-grid-columns:
            minmax(240px, 1fr)
            minmax(0, 2fr);
    }


    /* ======================================================
       SPANS PARA TABLET

       Devem ser usados preferencialmente com .ayw-grid-12.
       ====================================================== */

    .ayw-col-md-1 {
        grid-column: span 1;
    }

    .ayw-col-md-2 {
        grid-column: span 2;
    }

    .ayw-col-md-3 {
        grid-column: span 3;
    }

    .ayw-col-md-4 {
        grid-column: span 4;
    }

    .ayw-col-md-5 {
        grid-column: span 5;
    }

    .ayw-col-md-6 {
        grid-column: span 6;
    }

    .ayw-col-md-7 {
        grid-column: span 7;
    }

    .ayw-col-md-8 {
        grid-column: span 8;
    }

    .ayw-col-md-9 {
        grid-column: span 9;
    }

    .ayw-col-md-10 {
        grid-column: span 10;
    }

    .ayw-col-md-11 {
        grid-column: span 11;
    }

    .ayw-col-md-12 {
        grid-column: 1 / -1;
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {
    .ayw-grid-2-lg {
        --ayw-grid-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-grid-3,
    .ayw-grid-3-lg {
        --ayw-grid-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ayw-grid-4,
    .ayw-grid-4-lg {
        --ayw-grid-columns:
            repeat(4, minmax(0, 1fr));
    }

    .ayw-grid-5 {
        --ayw-grid-columns:
            repeat(5, minmax(0, 1fr));
    }

    .ayw-grid-6 {
        --ayw-grid-columns:
            repeat(6, minmax(0, 1fr));
    }


    /* ======================================================
       SISTEMA DE SPAN

       Usar preferencialmente dentro de:

       <div class="ayw-grid ayw-grid-12">
       ====================================================== */

    .ayw-col-1 {
        grid-column: span 1;
    }

    .ayw-col-2 {
        grid-column: span 2;
    }

    .ayw-col-3 {
        grid-column: span 3;
    }

    .ayw-col-4 {
        grid-column: span 4;
    }

    .ayw-col-5 {
        grid-column: span 5;
    }

    .ayw-col-6 {
        grid-column: span 6;
    }

    .ayw-col-7 {
        grid-column: span 7;
    }

    .ayw-col-8 {
        grid-column: span 8;
    }

    .ayw-col-9 {
        grid-column: span 9;
    }

    .ayw-col-10 {
        grid-column: span 10;
    }

    .ayw-col-11 {
        grid-column: span 11;
    }

    .ayw-col-12 {
        grid-column: 1 / -1;
    }
}


/* ==========================================================
   MOBILE

   Garante que spans utilizados por engano não criem colunas
   implícitas em telas pequenas.
   ========================================================== */

@media (max-width: 767.98px) {
    .ayw-col-1,
    .ayw-col-2,
    .ayw-col-3,
    .ayw-col-4,
    .ayw-col-5,
    .ayw-col-6,
    .ayw-col-7,
    .ayw-col-8,
    .ayw-col-9,
    .ayw-col-10,
    .ayw-col-11,
    .ayw-col-12,
    .ayw-col-md-1,
    .ayw-col-md-2,
    .ayw-col-md-3,
    .ayw-col-md-4,
    .ayw-col-md-5,
    .ayw-col-md-6,
    .ayw-col-md-7,
    .ayw-col-md-8,
    .ayw-col-md-9,
    .ayw-col-md-10,
    .ayw-col-md-11,
    .ayw-col-md-12 {
        grid-column: 1 / -1;
    }
}