/**
 * associe-se.css
 *
 * Estilos exclusivos da página Associe-se (template page-como-se-associar.php).
 * Carregado condicionalmente via inc/assets.php apenas nesta página.
 *
 * Layout de 2 colunas independente do Contato — mesma ideia visual,
 * porém com arquivo e classes próprias, para que as duas páginas possam
 * evoluir sem se afetar mutuamente.
 *
 * Prefixo de área: .aso-
 *
 * Tokens do projeto (tokens.css):
 *   Cores:        --color-neutral-50, --color-text-primary
 *   Tipografia:   --font-family-base, --font-size-body
 *   Espaçamento:  --spacing-l, --spacing-xl, --spacing-xxl, --spacing-xxxl,
 *                 --spacing-huge
 *
 * @package femipa-tema
 */

/* ─────────────────────────────────────────────
   Seção principal — duas colunas
───────────────────────────────────────────── */

.aso-section {
    padding-block: var(--spacing-huge);
    background-color: var(--color-neutral-50);
}

.aso-section__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--spacing-xl);
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--spacing-huge);
    align-items: start;
}

/* ─────────────────────────────────────────────
   Coluna esquerda — Texto de introdução
───────────────────────────────────────────── */

.aso-intro {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.aso-intro p {
    margin: 0 0 var(--spacing-l);
}

.aso-intro p:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   Coluna direita — Formulário
   (estilo do formulário em si vem de forms-cf7.css, global)
───────────────────────────────────────────── */

.aso-form-wrap {
    width: 100%;
}

/* ─────────────────────────────────────────────
   Responsivo
───────────────────────────────────────────── */

@media ( max-width: 1024px ) {
    .aso-section__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xxxl);
    }
}

@media ( max-width: 768px ) {
    .aso-section__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-xxl);
    }
}