/* ==========================================================
   AYW DESIGN SYSTEM
   LAYOUT / SECTIONS

   Responsabilidades:
   - espaçamento vertical de blocos estruturais;
   - variações de fundo;
   - divisores;
   - cabeçalho de seção;
   - título, descrição e eyebrow;
   - alinhamento;
   - ações da seção.

   Não inclui:
   - containers horizontais;
   - grids internos;
   - cards;
   - estilos específicos de páginas;
   - tipografia geral do documento.

   Dependências:
   - tokens.css;
   - components/buttons.css, quando houver ações.
   ========================================================== */


/* ==========================================================
   SEÇÃO BASE

   O espaçamento é controlado por variáveis internas para que
   modificadores continuem funcionando em todos os breakpoints.
   ========================================================== */

   .ayw-section {
    --ayw-section-padding-top: var(--ayw-space-12);
    --ayw-section-padding-bottom: var(--ayw-space-12);

    --ayw-section-bg: transparent;

    --ayw-section-border-top-width: 0px;
    --ayw-section-border-bottom-width: 0px;
    --ayw-section-border-color: var(--ayw-border);

    position: relative;

    width: 100%;
    min-width: 0;

    padding-top: var(--ayw-section-padding-top);
    padding-bottom: var(--ayw-section-padding-bottom);

    border-top:
        var(--ayw-section-border-top-width)
        solid
        var(--ayw-section-border-color);

    border-bottom:
        var(--ayw-section-border-bottom-width)
        solid
        var(--ayw-section-border-color);

    background: var(--ayw-section-bg);
}


/* ==========================================================
   TAMANHOS
   ========================================================== */

.ayw-section-compact {
    --ayw-section-padding-top: var(--ayw-space-6);
    --ayw-section-padding-bottom: var(--ayw-space-6);
}

.ayw-section-sm {
    --ayw-section-padding-top: var(--ayw-space-8);
    --ayw-section-padding-bottom: var(--ayw-space-8);
}

.ayw-section-lg {
    --ayw-section-padding-top: var(--ayw-space-16);
    --ayw-section-padding-bottom: var(--ayw-space-16);
}

.ayw-section-xl {
    --ayw-section-padding-top: var(--ayw-space-20);
    --ayw-section-padding-bottom: var(--ayw-space-20);
}


/* ==========================================================
   CONTROLE DE ESPAÇAMENTO
   ========================================================== */

.ayw-section-no-top {
    --ayw-section-padding-top: 0px;
}

.ayw-section-no-bottom {
    --ayw-section-padding-bottom: 0px;
}

.ayw-section-no-padding {
    --ayw-section-padding-top: 0px;
    --ayw-section-padding-bottom: 0px;
}


/* ==========================================================
   FUNDOS
   ========================================================== */

.ayw-section-soft {
    --ayw-section-bg: var(--ayw-bg-soft);
}

.ayw-section-muted {
    --ayw-section-bg: var(--ayw-bg-muted);
}

.ayw-section-surface {
    --ayw-section-bg: var(--ayw-surface);
}

.ayw-section-primary-soft {
    --ayw-section-bg: var(--ayw-primary-soft);
}


/* ==========================================================
   DIVISORES
   ========================================================== */

.ayw-section-divider-top {
    --ayw-section-border-top-width: 1px;
}

.ayw-section-divider-bottom {
    --ayw-section-border-bottom-width: 1px;
}

.ayw-section-divider {
    --ayw-section-border-top-width: 1px;
    --ayw-section-border-bottom-width: 1px;
}


/* ==========================================================
   CABEÇALHO DA SEÇÃO
   ========================================================== */

.ayw-section-header {
    --ayw-section-header-gap: var(--ayw-space-3);
    --ayw-section-header-margin-bottom: var(--ayw-space-8);

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-section-header-gap);

    margin-bottom: var(--ayw-section-header-margin-bottom);
}

.ayw-section-header-main {
    flex: 1 1 auto;

    min-width: 0;
}


/* ==========================================================
   CABEÇALHO COMPACTO
   ========================================================== */

.ayw-section-header-sm {
    --ayw-section-header-gap: var(--ayw-space-2);
    --ayw-section-header-margin-bottom: var(--ayw-space-5);
}

.ayw-section-header-xs {
    --ayw-section-header-gap: var(--ayw-space-1);
    --ayw-section-header-margin-bottom: var(--ayw-space-3);
}


/* ==========================================================
   CABEÇALHO SEM MARGEM INFERIOR
   ========================================================== */

.ayw-section-header-flush {
    --ayw-section-header-margin-bottom: 0px;
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.ayw-section-eyebrow {
    display: block;

    margin:
        0
        0
        var(--ayw-space-2);

    color: var(--ayw-primary);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-normal);
    letter-spacing: 0.08em;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.ayw-section-title {
    margin: 0;

    color: var(--ayw-text);

    font-size:
        clamp(
            1.5rem,
            3vw,
            2rem
        );

    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-tight);
    letter-spacing: -0.025em;

    overflow-wrap: anywhere;
}

.ayw-section-title-sm {
    font-size:
        clamp(
            1.35rem,
            5vw,
            var(--ayw-font-size-2xl)
        );
}

.ayw-section-title-lg {
    font-size:
        clamp(
            1.85rem,
            4vw,
            2.5rem
        );
}

.ayw-section-title-editorial {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 4.5vw, 3.25rem);
    font-weight: var(--ayw-font-weight-bold);
    letter-spacing: -0.04em;
}

.ayw-section-title-editorial.ayw-section-title-sm {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    letter-spacing: -0.025em;
}


/* ==========================================================
   DESCRIÇÃO
   ========================================================== */

.ayw-section-description {
    max-width: 720px;

    margin:
        var(--ayw-space-3)
        0
        0;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-md);
    line-height: var(--ayw-line-height-relaxed);

    overflow-wrap: anywhere;
}

.ayw-section-description-sm {
    max-width: 640px;

    font-size: var(--ayw-font-size-sm);
}

.ayw-section-description-lg {
    max-width: 820px;

    font-size: var(--ayw-font-size-lg);
}


/* ==========================================================
   AÇÕES
   ========================================================== */

.ayw-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-3);

    margin-top: var(--ayw-space-2);
}

.ayw-section-actions.is-start {
    justify-content: flex-start;
}

.ayw-section-actions.is-center {
    justify-content: center;
}

.ayw-section-actions.is-end {
    justify-content: flex-end;
}

.ayw-section-actions.is-between {
    justify-content: space-between;
}


/* ==========================================================
   ALINHAMENTO CENTRAL
   ========================================================== */

.ayw-section-center {
    text-align: center;
}

.ayw-section-center .ayw-section-header {
    align-items: center;
}

.ayw-section-center .ayw-section-header-main {
    width: 100%;
}

.ayw-section-center .ayw-section-description {
    margin-right: auto;
    margin-left: auto;
}

.ayw-section-center .ayw-section-actions {
    justify-content: center;
}


/* ==========================================================
   ALINHAMENTO À DIREITA
   ========================================================== */

.ayw-section-end {
    text-align: right;
}

.ayw-section-end .ayw-section-header {
    align-items: flex-end;
}

.ayw-section-end .ayw-section-description {
    margin-left: auto;
}

.ayw-section-end .ayw-section-actions {
    justify-content: flex-end;
}


/* ==========================================================
   CONTEÚDO DA SEÇÃO

   Wrapper opcional para composição vertical interna.
   Não substitui grids ou stacks do layout.
   ========================================================== */

.ayw-section-content {
    width: 100%;
    min-width: 0;
}


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

@media (min-width: 768px) {
    .ayw-section {
        --ayw-section-padding-top: var(--ayw-space-16);
        --ayw-section-padding-bottom: var(--ayw-space-16);
    }

    .ayw-section-compact {
        --ayw-section-padding-top: var(--ayw-space-6);
        --ayw-section-padding-bottom: var(--ayw-space-6);
    }

    .ayw-section-sm {
        --ayw-section-padding-top: var(--ayw-space-10);
        --ayw-section-padding-bottom: var(--ayw-space-10);
    }

    .ayw-section-lg {
        --ayw-section-padding-top: var(--ayw-space-20);
        --ayw-section-padding-bottom: var(--ayw-space-20);
    }

    .ayw-section-xl {
        --ayw-section-padding-top: var(--ayw-space-24);
        --ayw-section-padding-bottom: var(--ayw-space-24);
    }

    .ayw-section-no-top,
    .ayw-section-no-padding {
        --ayw-section-padding-top: 0px;
    }

    .ayw-section-no-bottom,
    .ayw-section-no-padding {
        --ayw-section-padding-bottom: 0px;
    }

    .ayw-section-header {
        --ayw-section-header-gap: var(--ayw-space-4);
        --ayw-section-header-margin-bottom: var(--ayw-space-10);
    }

    .ayw-section-header-sm {
        --ayw-section-header-gap: var(--ayw-space-2);
        --ayw-section-header-margin-bottom: var(--ayw-space-6);
    }

    .ayw-section-header-xs {
        --ayw-section-header-gap: var(--ayw-space-1);
        --ayw-section-header-margin-bottom: var(--ayw-space-3);
    }

    .ayw-section-header-flush {
        --ayw-section-header-margin-bottom: 0px;
    }
}


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

@media (min-width: 992px) {
    .ayw-section-header.is-horizontal {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;

        gap: var(--ayw-space-8);
    }

    .ayw-section-header.is-horizontal.is-center {
        align-items: center;
    }

    .ayw-section-header.is-horizontal
    .ayw-section-actions {
        flex: 0 0 auto;

        margin-top: 0;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {
    .ayw-section-actions > .ayw-btn {
        flex: 1 1 auto;
    }

    .ayw-section-actions.is-inline-mobile > .ayw-btn {
        flex: 0 1 auto;
    }
}