/**
 * ECOS DESIGN SYSTEM — Layout
 * Container, Grid, Stack, Section, Flex utilities.
 * DEVE ser importado após tokens.css
 *
 * AGENT_GUIDE: Primitivos de layout usados em qualquer página.
 * Seções de página usam .ecos-section como wrapper.
 * Grid de conteúdo usa .ecos-grid (auto-responsive).
 * Ref: AGENT_GUIDE.md#layout | sections/*.css
 */

/* — Container — */
.ecos-container {
    width: 100%;
    max-width: var(--ecos-max-width-content);
    margin-inline: auto;
    padding-inline: var(--ecos-space-6);
}

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

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

@media (max-width: 640px) {
    .ecos-container {
        padding-inline: var(--ecos-space-4);
    }
}

/* — Section Wrapper — */
.ecos-section {
    padding-block: var(--ecos-space-20);
}

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

.ecos-section--lg {
    padding-block: clamp(var(--ecos-space-16), 8vw, 8rem);
}

/* — Grid auto-responsive — */
.ecos-grid {
    display: grid;
    gap: var(--ecos-space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

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

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

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

@media (max-width: 768px) {

    .ecos-grid--2,
    .ecos-grid--3,
    .ecos-grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {

    .ecos-grid--3,
    .ecos-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* — Stack (Flex vertical) — */
.ecos-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ecos-space-4);
}

.ecos-stack--sm {
    gap: var(--ecos-space-2);
}

.ecos-stack--lg {
    gap: var(--ecos-space-8);
}

.ecos-stack--xl {
    gap: var(--ecos-space-12);
}

/* — Row (Flex horizontal) — */
.ecos-row {
    display: flex;
    flex-direction: row;
    gap: var(--ecos-space-4);
    align-items: center;
    flex-wrap: wrap;
}

.ecos-row--between {
    justify-content: space-between;
}

.ecos-row--center {
    justify-content: center;
}

.ecos-row--end {
    justify-content: flex-end;
}

/* — Center — */
.ecos-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* — Divider visual (linha horizontal) — */
.ecos-divider {
    height: 1px;
    background: var(--ecos-color-border);
    border: none;
    width: 100%;
}

.ecos-divider--accent {
    height: 3px;
    background: var(--ecos-color-accent);
    border-radius: var(--ecos-radius-full);
    max-width: 4rem;
}

/* — Navbar base — */
.ecos-navbar {
    height: var(--ecos-navbar-height);
    display: flex;
    align-items: center;
    padding-inline: var(--ecos-space-6);
    background: var(--ecos-color-surface);
    border-bottom: 1px solid var(--ecos-color-border-subtle);
    position: sticky;
    top: 0;
    z-index: var(--ecos-z-overlay);
    backdrop-filter: blur(12px);
}

/* — Sidebar layout — */
.ecos-layout-sidebar {
    display: grid;
    grid-template-columns: var(--ecos-sidebar-width) 1fr;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .ecos-layout-sidebar {
        grid-template-columns: 1fr;
    }
}

/* — Text alignment utilities — */
.ecos-text-center {
    text-align: center;
}

.ecos-text-left {
    text-align: left;
}

.ecos-text-right {
    text-align: right;
}

/* — Spacing utilities (gap / margin) — */
.ecos-gap-sm {
    gap: var(--ecos-space-2);
}

.ecos-gap-md {
    gap: var(--ecos-space-4);
}

.ecos-gap-lg {
    gap: var(--ecos-space-8);
}

/* — Visibility — */
.ecos-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* — Background helpers — */
.ecos-bg-surface {
    background: var(--ecos-color-surface);
}

.ecos-bg-surface-2 {
    background: var(--ecos-color-surface-2);
}

.ecos-bg-glass {
    background: var(--ecos-color-glass-bg);
    border: 1px solid var(--ecos-color-glass-border);
    backdrop-filter: blur(12px);
}