/* =========================================================
   LAYOUT SYSTEM (ENTERPRISE v3)
========================================================= */


/* =========================================================
   CONTAINERS
========================================================= */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-inline);
}

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

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

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

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

.container-fluid {
    max-width: 100%;
}


/* =========================================================
   MAIN WORKSPACE
========================================================= */

.workspace-main {
    padding-top: var(--layout-header-height);
    padding-bottom: var(--space-8);
}


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

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

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

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


/* INTRO SECTION */

.section-intro {
    max-width: var(--content-max-width);
    margin-inline: auto;
    margin-bottom: var(--space-7);
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: var(--space-3);
}


/* =========================================================
   STACK SYSTEM (VERTICAL RHYTHM)
========================================================= */

.stack > * + * {
    margin-top: var(--space-5);
}

.stack-sm > * + * {
    margin-top: var(--space-3);
}

.stack-md > * + * {
    margin-top: var(--space-6);
}

.stack-lg > * + * {
    margin-top: var(--space-7);
}


/* =========================================================
   CONTENT WIDTH CONTROL
========================================================= */

.content-max {
    max-width: var(--content-max-width);
    margin-inline: auto;
}

.content-narrow {
    max-width: 640px;
    margin-inline: auto;
}

.content-wide {
    max-width: var(--container-xl);
    margin-inline: auto;
}


/* =========================================================
   LAYOUT BEHAVIOR
========================================================= */

.layout-main {
    padding-top: var(--navbar-height-expanded);
    transition: padding-top var(--motion-base);
}

.navbar.scrolled ~ .layout-main {
    padding-top: calc(var(--layout-header-height) - var(--space-2));
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
    text-align: center;
    padding: var(--space-8);
}

    .empty-state h3 {
        margin-bottom: var(--space-3);
    }

    .empty-state p {
        color: var(--text-secondary);
    }


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

.safe-padding {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}


/* =========================================================
   DENSITY MODE
========================================================= */

[data-density="compact"] {
    --space-5: var(--space-4);
    --space-6: var(--space-5);
}


/* =========================================================
   REGULATED MODE
========================================================= */

[data-regulated="true"] {
    --shadow-1: none;
    --shadow-2: none;
    --radius-md: var(--radius-sm);
}