/**
 * Layouts estruturais da Nexo Base Version 3.
 *
 * Este é o bundle compartilhado por Site Shell, Container, Stack,
 * Grid, Layer, Collection e futuros layouts.
 */

/* Site Shell. */
.nexobase-v3-site {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
}

.nexobase-v3-site-region {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.nexobase-v3-site-main {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
}

/* Container. */
.nexo-layout-container {
    width: 100%;
    min-width: 0;

    padding-left: var(
        --nexo-local-padding-left-desktop,
        var(
            --nexo-layout-container-gutter-desktop,
            32px
        )
    );

    padding-right: var(
        --nexo-local-padding-right-desktop,
        var(
            --nexo-layout-container-gutter-desktop,
            32px
        )
    );
}

.nexo-layout-container--contained {
    max-width: var(
        --nexo-local-container-max-width,
        var(
            --nexo-layout-container-max-width,
            1360px
        )
    );
}

.nexo-layout-container--full {
    max-width: none;
}

.nexo-layout-container--align-start {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

.nexo-layout-container--align-center {
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.nexo-layout-container--align-end {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Stack. */
.nexo-layout-stack {
    display: flex;
    min-width: 0;

    flex-direction: var(
        --nexo-stack-direction-desktop,
        column
    );

    align-items: var(
        --nexo-stack-align-desktop,
        stretch
    );

    justify-content: var(
        --nexo-stack-justify-desktop,
        flex-start
    );

    flex-wrap: var(
        --nexo-stack-wrap-desktop,
        nowrap
    );
}

/* Grid. */
.nexo-layout-grid {
    display: grid;
    min-width: 0;

    grid-template-columns: repeat(
        var(--nexo-grid-columns-desktop, 1),
        minmax(0, 1fr)
    );

    align-items: var(
        --nexo-grid-align-desktop,
        stretch
    );

    justify-items: var(
        --nexo-grid-justify-desktop,
        stretch
    );

    grid-auto-flow: var(
        --nexo-grid-auto-flow-desktop,
        row
    );
}

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

/* Layer. */
.nexo-layout-layer {
    display: grid;
    min-width: 0;

    align-items: var(
        --nexo-layer-align-desktop,
        stretch
    );

    justify-items: var(
        --nexo-layer-justify-desktop,
        stretch
    );
}

.nexo-layout-layer > * {
    grid-area: 1 / 1 / 2 / 2;
    min-width: 0;
    min-height: 0;
}

/* Collection. */
.nexo-layout-collection {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

.nexo-layout-collection > * {
    min-width: 0;
    min-height: 0;
}

/* Universal Section. */
.nexo-layout-section {
    width: 100%;
    min-width: 0;

    min-height: var(
        --nexo-section-min-height-desktop,
        auto
    );

    background: var(
        --nexo-section-background,
        transparent
    );

    color: var(
        --nexo-local-color,
        inherit
    );

    overflow: var(
        --nexo-section-overflow,
        visible
    );
}

.nexo-section-overflow-visible {
    --nexo-section-overflow: visible;
}

.nexo-section-overflow-hidden {
    --nexo-section-overflow: hidden;
}

.nexo-section-overflow-clip {
    --nexo-section-overflow: clip;
}

.nexo-layout-section > * {
    min-width: 0;
}

/* Tablet. */
@media (max-width: 1024px) {
    .nexo-layout-section {
        min-height: var(
            --nexo-section-min-height-tablet,
            var(
                --nexo-section-min-height-desktop,
                auto
            )
        );
    }

    .nexo-layout-container {
        padding-left: var(
            --nexo-local-padding-left-tablet,
            var(
                --nexo-local-padding-left-desktop,
                var(
                    --nexo-layout-container-gutter-tablet,
                    24px
                )
            )
        );

        padding-right: var(
            --nexo-local-padding-right-tablet,
            var(
                --nexo-local-padding-right-desktop,
                var(
                    --nexo-layout-container-gutter-tablet,
                    24px
                )
            )
        );
    }

    .nexo-layout-stack {
        flex-direction: var(
            --nexo-stack-direction-tablet,
            var(
                --nexo-stack-direction-desktop,
                column
            )
        );

        align-items: var(
            --nexo-stack-align-tablet,
            var(
                --nexo-stack-align-desktop,
                stretch
            )
        );

        justify-content: var(
            --nexo-stack-justify-tablet,
            var(
                --nexo-stack-justify-desktop,
                flex-start
            )
        );

        flex-wrap: var(
            --nexo-stack-wrap-tablet,
            var(
                --nexo-stack-wrap-desktop,
                nowrap
            )
        );
    }

    .nexo-layout-grid {
        grid-template-columns: repeat(
            var(
                --nexo-grid-columns-tablet,
                var(--nexo-grid-columns-desktop, 1)
            ),
            minmax(0, 1fr)
        );

        align-items: var(
            --nexo-grid-align-tablet,
            var(
                --nexo-grid-align-desktop,
                stretch
            )
        );

        justify-items: var(
            --nexo-grid-justify-tablet,
            var(
                --nexo-grid-justify-desktop,
                stretch
            )
        );

        grid-auto-flow: var(
            --nexo-grid-auto-flow-tablet,
            var(
                --nexo-grid-auto-flow-desktop,
                row
            )
        );
    }

    .nexo-layout-layer {
        align-items: var(
            --nexo-layer-align-tablet,
            var(
                --nexo-layer-align-desktop,
                stretch
            )
        );

        justify-items: var(
            --nexo-layer-justify-tablet,
            var(
                --nexo-layer-justify-desktop,
                stretch
            )
        );
    }
}

/* Mobile. */
@media (max-width: 767px) {
    .nexo-layout-section {
        min-height: var(
            --nexo-section-min-height-mobile,
            var(
                --nexo-section-min-height-tablet,
                var(
                    --nexo-section-min-height-desktop,
                    auto
                )
            )
        );
    }

    .nexo-layout-container {
        padding-left: var(
            --nexo-local-padding-left-mobile,
            var(
                --nexo-local-padding-left-tablet,
                var(
                    --nexo-local-padding-left-desktop,
                    var(
                        --nexo-layout-container-gutter-mobile,
                        16px
                    )
                )
            )
        );

        padding-right: var(
            --nexo-local-padding-right-mobile,
            var(
                --nexo-local-padding-right-tablet,
                var(
                    --nexo-local-padding-right-desktop,
                    var(
                        --nexo-layout-container-gutter-mobile,
                        16px
                    )
                )
            )
        );
    }

    .nexo-layout-stack {
        flex-direction: var(
            --nexo-stack-direction-mobile,
            var(
                --nexo-stack-direction-tablet,
                var(
                    --nexo-stack-direction-desktop,
                    column
                )
            )
        );

        align-items: var(
            --nexo-stack-align-mobile,
            var(
                --nexo-stack-align-tablet,
                var(
                    --nexo-stack-align-desktop,
                    stretch
                )
            )
        );

        justify-content: var(
            --nexo-stack-justify-mobile,
            var(
                --nexo-stack-justify-tablet,
                var(
                    --nexo-stack-justify-desktop,
                    flex-start
                )
            )
        );

        flex-wrap: var(
            --nexo-stack-wrap-mobile,
            var(
                --nexo-stack-wrap-tablet,
                var(
                    --nexo-stack-wrap-desktop,
                    nowrap
                )
            )
        );
    }

    .nexo-layout-grid {
        grid-template-columns: repeat(
            var(
                --nexo-grid-columns-mobile,
                var(
                    --nexo-grid-columns-tablet,
                    var(--nexo-grid-columns-desktop, 1)
                )
            ),
            minmax(0, 1fr)
        );

        align-items: var(
            --nexo-grid-align-mobile,
            var(
                --nexo-grid-align-tablet,
                var(
                    --nexo-grid-align-desktop,
                    stretch
                )
            )
        );

        justify-items: var(
            --nexo-grid-justify-mobile,
            var(
                --nexo-grid-justify-tablet,
                var(
                    --nexo-grid-justify-desktop,
                    stretch
                )
            )
        );

        grid-auto-flow: var(
            --nexo-grid-auto-flow-mobile,
            var(
                --nexo-grid-auto-flow-tablet,
                var(
                    --nexo-grid-auto-flow-desktop,
                    row
                )
            )
        );
    }

    .nexo-layout-layer {
        align-items: var(
            --nexo-layer-align-mobile,
            var(
                --nexo-layer-align-tablet,
                var(
                    --nexo-layer-align-desktop,
                    stretch
                )
            )
        );

        justify-items: var(
            --nexo-layer-justify-mobile,
            var(
                --nexo-layer-justify-tablet,
                var(
                    --nexo-layer-justify-desktop,
                    stretch
                )
            )
        );
    }
}