@layer layout;

@layer layout {

    html,
    body {
        overflow-x: hidden;
        position: relative;
    }

    .nav-bar .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding-inline: var(--space-4) !important;
    }

    .container {
        width: min(100% - var(--space-8), 1200px);
        margin-inline: auto;
    }

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

    /* Fixed header compensation on mobile */
    @media (max-width: 1023px) {
        .hero__content {
            margin-block-start: 80px !important;
        }

        section:first-of-type {
            padding-block-start: calc(var(--space-16) + 60px) !important;
        }
    }

    @media (min-width: 768px) {
        .section {
            padding-block: var(--space-24);
        }
    }

    .grid {
        display: grid;
        gap: var(--space-6);
    }

    /* Responsive Grid Stacking */
    @media (max-width: 767px) {
        .grid {
            grid-template-columns: 1fr !important;
        }
    }

    .flex {
        display: flex;
        gap: var(--space-4);
    }

    /* Responsive Flex Stacking */
    @media (max-width: 767px) {
        .flex:not(.flex-row-mobile) {
            flex-direction: column;
        }
    }

    .flex-row-mobile {
        flex-direction: row !important;
    }

    .content-visibility-auto {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }
}