/* ==========================================================================
   LIVIGO
   GLOBAL LAYOUT SYSTEM

   Path:
   /assets/css/global-layout.css

   Purpose:
   - One shared structural layout system for the entire Livigo platform.
   - Public website.
   - Minha Livigo web.
   - Customer App / PWA.
   - Livigo Pro.
   - Livigo Mudanças Pro.
   - Livigo Imóveis Pro.
   - Livigo Serviços Pro.
   - Account and authenticated workspaces.

   Architecture:
   - Primitive dimensions come from /assets/css/variables.css.
   - Colors belong to /assets/css/colors.css.
   - Typography belongs to /assets/css/global-typography.css.
   - This file controls structure, geometry and reusable layout primitives.
   - responsive.css remains responsible for device-specific adaptations.
   - Individual modules should extend this system rather than create
     independent page geometry.

   Important:
   - Screen width does not determine application context.
   - PHP/application context determines Website vs Customer App vs Pro.
   - This file only controls how an already-selected interface is laid out.
   ========================================================================== */


/* ==========================================================================
   GLOBAL LAYOUT TOKENS
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Safe Areas
       ---------------------------------------------------------------------- */

    --livigo-safe-top:
        env(
            safe-area-inset-top,
            0px
        );

    --livigo-safe-right:
        env(
            safe-area-inset-right,
            0px
        );

    --livigo-safe-bottom:
        env(
            safe-area-inset-bottom,
            0px
        );

    --livigo-safe-left:
        env(
            safe-area-inset-left,
            0px
        );


    /* ----------------------------------------------------------------------
       Interaction Geometry
       ---------------------------------------------------------------------- */

    --livigo-touch-target-min:
        2.75rem;


    /* ----------------------------------------------------------------------
       Structural Gaps
       ---------------------------------------------------------------------- */

    --livigo-layout-gap-xs:
        var(--livigo-space-2);

    --livigo-layout-gap-sm:
        var(--livigo-space-3);

    --livigo-layout-gap-md:
        var(--livigo-space-4);

    --livigo-layout-gap-lg:
        var(--livigo-space-6);

    --livigo-layout-gap-xl:
        var(--livigo-space-8);

    --livigo-layout-gap-2xl:
        var(--livigo-space-12);


    /* ----------------------------------------------------------------------
       Section Spacing
       ---------------------------------------------------------------------- */

    --livigo-section-space-compact:
        var(--livigo-space-8);

    --livigo-section-space:
        var(--livigo-space-12);

    --livigo-section-space-large:
        var(--livigo-space-16);


    /* ----------------------------------------------------------------------
       Reading Width
       ---------------------------------------------------------------------- */

    --livigo-reading-width:
        var(--livigo-container-md);


    /* ----------------------------------------------------------------------
       Page Minimum Height
       ---------------------------------------------------------------------- */

    --livigo-page-min-height:
        100vh;
}


/* ==========================================================================
   MODERN VIEWPORT HEIGHT
   ========================================================================== */

@supports (
    min-height: 100dvh
) {

    :root {
        --livigo-page-min-height:
            100dvh;
    }

}


/* ==========================================================================
   DOCUMENT GEOMETRY
   ========================================================================== */

html {
    width:
        100%;

    min-width:
        0;
}


body {
    width:
        100%;

    min-width:
        0;

    min-height:
        var(--livigo-page-min-height);

    margin:
        0;
}


/* ==========================================================================
   GLOBAL BOX MODEL SAFETY
   ========================================================================== */

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


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

img,
picture,
video,
canvas,
svg {
    max-width:
        100%;
}


img,
video {
    height:
        auto;
}


img {
    vertical-align:
        middle;
}


iframe {
    max-width:
        100%;
}


/* ==========================================================================
   FORM GEOMETRY
   ========================================================================== */

input,
select,
textarea,
button {
    max-width:
        100%;
}


textarea {
    resize:
        vertical;
}


/* ==========================================================================
   GLOBAL PAGE
   ========================================================================== */

/*
 * Standard structural root for Livigo pages.
 *
 * This class does not establish a website/app/pro identity.
 * It only establishes safe page geometry.
 */

.livigo-page {
    width:
        100%;

    min-width:
        0;

    min-height:
        var(--livigo-page-min-height);

    position:
        relative;
}


/* ==========================================================================
   PAGE CONTENT
   ========================================================================== */

.livigo-page__content {
    width:
        100%;

    min-width:
        0;
}


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

.livigo-container {
    width:
        100%;

    max-width:
        var(--livigo-container-xl);

    margin-inline:
        auto;

    padding-inline:
        max(
            var(--livigo-page-padding-mobile),
            var(--livigo-safe-left)
        );

    min-width:
        0;
}


/* ==========================================================================
   CONTAINER WIDTH VARIANTS
   ========================================================================== */

.livigo-container--sm {
    max-width:
        var(--livigo-container-sm);
}


.livigo-container--md {
    max-width:
        var(--livigo-container-md);
}


.livigo-container--lg {
    max-width:
        var(--livigo-container-lg);
}


.livigo-container--xl {
    max-width:
        var(--livigo-container-xl);
}


.livigo-container--2xl {
    max-width:
        var(--livigo-container-2xl);
}


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

.livigo-container--fluid {
    max-width:
        none;
}


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

/*
 * Useful for:
 * - Help content
 * - Guides
 * - Legal text
 * - Long explanations
 * - Article-style content
 */

.livigo-reading {
    width:
        100%;

    max-width:
        var(--livigo-reading-width);

    margin-inline:
        auto;

    min-width:
        0;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

.livigo-section {
    width:
        100%;

    padding-block:
        var(--livigo-section-space);
}


.livigo-section--compact {
    padding-block:
        var(--livigo-section-space-compact);
}


.livigo-section--large {
    padding-block:
        var(--livigo-section-space-large);
}


.livigo-section--flush {
    padding-block:
        0;
}


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

.livigo-section__header {
    width:
        100%;

    max-width:
        var(--livigo-reading-width);

    margin-bottom:
        var(--livigo-space-6);
}


.livigo-section__header > :first-child {
    margin-top:
        0;
}


.livigo-section__header > :last-child {
    margin-bottom:
        0;
}


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

/*
 * Vertical content rhythm.
 */

.livigo-stack {
    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--livigo-layout-gap-md);

    min-width:
        0;
}


.livigo-stack--xs {
    gap:
        var(--livigo-layout-gap-xs);
}


.livigo-stack--sm {
    gap:
        var(--livigo-layout-gap-sm);
}


.livigo-stack--lg {
    gap:
        var(--livigo-layout-gap-lg);
}


.livigo-stack--xl {
    gap:
        var(--livigo-layout-gap-xl);
}


.livigo-stack--2xl {
    gap:
        var(--livigo-layout-gap-2xl);
}


/* ==========================================================================
   CLUSTER
   ========================================================================== */

/*
 * Horizontal groups that wrap naturally.
 *
 * Useful for:
 * - Buttons
 * - Chips
 * - Filters
 * - Tags
 * - Compact actions
 */

.livigo-cluster {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--livigo-layout-gap-sm);

    min-width:
        0;
}


.livigo-cluster--center {
    justify-content:
        center;
}


.livigo-cluster--between {
    justify-content:
        space-between;
}


.livigo-cluster--end {
    justify-content:
        flex-end;
}


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

.livigo-grid {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        );

    gap:
        var(--livigo-layout-gap-md);

    min-width:
        0;
}


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

/*
 * Automatically creates as many columns as comfortably fit.
 */

.livigo-grid--auto {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    100%,
                    16rem
                ),
                1fr
            )
        );
}


/* ==========================================================================
   FIXED GRID VARIANTS
   ========================================================================== */

.livigo-grid--2,
.livigo-grid--3,
.livigo-grid--4 {
    grid-template-columns:
        minmax(
            0,
            1fr
        );
}


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

.livigo-grid--gap-sm {
    gap:
        var(--livigo-layout-gap-sm);
}


.livigo-grid--gap-lg {
    gap:
        var(--livigo-layout-gap-lg);
}


.livigo-grid--gap-xl {
    gap:
        var(--livigo-layout-gap-xl);
}


/* ==========================================================================
   SPLIT LAYOUT
   ========================================================================== */

/*
 * Standard two-region structure.
 *
 * Mobile:
 * - stacked
 *
 * Larger screens:
 * - columns
 */

.livigo-split {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        );

    gap:
        var(--livigo-layout-gap-xl);

    min-width:
        0;
}


/* ==========================================================================
   CENTERED CONTENT
   ========================================================================== */

.livigo-center {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;
}


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

.livigo-fullscreen {
    width:
        100%;

    min-height:
        var(--livigo-page-min-height);
}


/* ==========================================================================
   APP VIEWPORT
   ========================================================================== */

/*
 * Structural viewport for dedicated application interfaces.
 *
 * This class does not decide whether the current request is an app.
 * It is only used after application context has already been resolved.
 */

.livigo-app-viewport {
    width:
        100%;

    min-width:
        0;

    min-height:
        var(--livigo-page-min-height);

    position:
        relative;

    overflow-x:
        clip;
}


/* ==========================================================================
   APP CONTENT
   ========================================================================== */

.livigo-app-content {
    width:
        100%;

    min-width:
        0;

    padding-inline:
        max(
            var(--livigo-page-padding-mobile),
            var(--livigo-safe-left)
        );
}


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

.livigo-safe-top {
    padding-top:
        var(--livigo-safe-top);
}


.livigo-safe-bottom {
    padding-bottom:
        var(--livigo-safe-bottom);
}


.livigo-safe-inline {
    padding-left:
        max(
            var(--livigo-page-padding-mobile),
            var(--livigo-safe-left)
        );

    padding-right:
        max(
            var(--livigo-page-padding-mobile),
            var(--livigo-safe-right)
        );
}


.livigo-safe-area {
    padding-top:
        var(--livigo-safe-top);

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

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

    padding-left:
        var(--livigo-safe-left);
}


/* ==========================================================================
   SCROLL REGIONS
   ========================================================================== */

.livigo-scroll-region {
    min-width:
        0;

    overflow:
        auto;

    -webkit-overflow-scrolling:
        touch;
}


.livigo-scroll-region--x {
    overflow-x:
        auto;

    overflow-y:
        hidden;
}


.livigo-scroll-region--y {
    overflow-x:
        hidden;

    overflow-y:
        auto;
}


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

.livigo-min-width-0 {
    min-width:
        0;
}


.livigo-overflow-hidden {
    overflow:
        hidden;
}


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

.livigo-flex {
    display:
        flex;

    min-width:
        0;
}


.livigo-flex--column {
    flex-direction:
        column;
}


.livigo-flex--wrap {
    flex-wrap:
        wrap;
}


.livigo-flex--center {
    align-items:
        center;

    justify-content:
        center;
}


.livigo-flex--between {
    align-items:
        center;

    justify-content:
        space-between;
}


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

.livigo-align-start {
    align-items:
        flex-start;
}


.livigo-align-center {
    align-items:
        center;
}


.livigo-align-end {
    align-items:
        flex-end;
}


.livigo-justify-start {
    justify-content:
        flex-start;
}


.livigo-justify-center {
    justify-content:
        center;
}


.livigo-justify-between {
    justify-content:
        space-between;
}


.livigo-justify-end {
    justify-content:
        flex-end;
}


/* ==========================================================================
   STANDARD TOUCH TARGET
   ========================================================================== */

/*
 * Apply to compact custom controls that do not already provide
 * sufficient dimensions.
 */

.livigo-touch-target {
    min-width:
        var(--livigo-touch-target-min);

    min-height:
        var(--livigo-touch-target-min);
}


/* ==========================================================================
   ICON BUTTON GEOMETRY
   ========================================================================== */

.livigo-icon-target {
    width:
        var(--livigo-touch-target-min);

    height:
        var(--livigo-touch-target-min);

    display:
        inline-grid;

    place-items:
        center;

    flex:
        0 0
        var(--livigo-touch-target-min);
}


/* ==========================================================================
   MEDIA FRAME
   ========================================================================== */

.livigo-media {
    width:
        100%;

    min-width:
        0;

    overflow:
        hidden;
}


.livigo-media img,
.livigo-media video {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


/* ==========================================================================
   ASPECT RATIOS
   ========================================================================== */

.livigo-aspect-square {
    aspect-ratio:
        1 / 1;
}


.livigo-aspect-landscape {
    aspect-ratio:
        16 / 9;
}


.livigo-aspect-card {
    aspect-ratio:
        4 / 3;
}


/* ==========================================================================
   VISUALLY HIDDEN
   ========================================================================== */

/*
 * Accessible content that remains available to screen readers.
 */

.livigo-visually-hidden {
    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;
}


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

@media (
    min-width: 40rem
) {

    .livigo-container {
        padding-inline:
            var(--livigo-page-padding-tablet);
    }


    .livigo-app-content {
        padding-inline:
            var(--livigo-page-padding-tablet);
    }


    .livigo-safe-inline {
        padding-left:
            max(
                var(--livigo-page-padding-tablet),
                var(--livigo-safe-left)
            );

        padding-right:
            max(
                var(--livigo-page-padding-tablet),
                var(--livigo-safe-right)
            );
    }


    .livigo-grid--2 {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


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


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

}


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

@media (
    min-width: 64rem
) {

    .livigo-container {
        padding-inline:
            var(--livigo-page-padding-desktop);
    }


    .livigo-app-content {
        padding-inline:
            var(--livigo-page-padding-desktop);
    }


    .livigo-safe-inline {
        padding-left:
            max(
                var(--livigo-page-padding-desktop),
                var(--livigo-safe-left)
            );

        padding-right:
            max(
                var(--livigo-page-padding-desktop),
                var(--livigo-safe-right)
            );
    }


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


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


    .livigo-split {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        align-items:
            center;
    }


    .livigo-split--wide-left {
        grid-template-columns:
            minmax(
                0,
                1.35fr
            )
            minmax(
                0,
                .65fr
            );
    }


    .livigo-split--wide-right {
        grid-template-columns:
            minmax(
                0,
                .65fr
            )
            minmax(
                0,
                1.35fr
            );
    }

}


/* ==========================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (
    hover: none
) and (
    pointer: coarse
) {

    .livigo-touch-target,
    .livigo-icon-target {
        min-width:
            var(--livigo-touch-target-min);

        min-height:
            var(--livigo-touch-target-min);
    }

}


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

/*
 * Only physical presentation adjustments belong here.
 *
 * Application identity must still be resolved by PHP/application
 * context rather than display-mode alone.
 */

@media (
    display-mode: standalone
) {

    .livigo-app-viewport,
    .livigo-fullscreen,
    .livigo-page {
        min-height:
            100dvh;
    }

}


/* ==========================================================================
   iOS STANDALONE COMPATIBILITY
   ========================================================================== */

@supports (
    -webkit-touch-callout: none
) {

    @media (
        display-mode: standalone
    ) {

        .livigo-app-viewport,
        .livigo-fullscreen,
        .livigo-page {
            min-height:
                -webkit-fill-available;
        }

    }

}


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

@media (
    min-width: 80rem
) {

    .livigo-section {
        padding-block:
            var(--livigo-space-16);
    }


    .livigo-section--large {
        padding-block:
            var(--livigo-space-20);
    }

}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

    .livigo-page,
    .livigo-fullscreen,
    .livigo-app-viewport {
        min-height:
            auto;
    }


    .livigo-container,
    .livigo-app-content {
        max-width:
            none;

        padding-inline:
            0;
    }


    .livigo-section {
        padding-block:
            1rem;
    }


    .livigo-scroll-region,
    .livigo-scroll-region--x,
    .livigo-scroll-region--y {
        overflow:
            visible;
    }

}