/**
 * contato.css
 *
 * Estilos exclusivos da página Contato (ID 94).
 * Carregado condicionalmente via inc/assets.php apenas nesta página.
 *
 * O formulário em si (coluna direita) é Contact Form 7 — estilo global
 * em assets/css/forms-cf7.css. Este arquivo cuida só do grid de 2
 * colunas e da coluna de informações institucionais (esquerda).
 *
 * Prefixo de área: .ctt-
 *
 * Tokens do projeto (tokens.css):
 *   Cores:        --color-primary, --color-text-primary, --color-text-secondary
 *   Tipografia:   --font-family-base, --font-size-body, --font-size-body-small
 *                 --font-weight-bold
 *   Espaçamento:  --spacing-xs (4px), --spacing-s (8px), --spacing-m (12px)
 *                 --spacing-xl (24px), --spacing-xxxl (40px), --spacing-huge (60px)
 *
 * @package femipa-tema
 */

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

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

.ctt-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 — Informações institucionais
───────────────────────────────────────────── */

.ctt-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

.ctt-info__org {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0;
}

.ctt-info__address {
    font-style: normal;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-small);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.ctt-info__phone,
.ctt-info__email {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-small);
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ctt-info__phone:hover,
.ctt-info__email:hover {
    opacity: 0.75;
}

/* Redes sociais */

.ctt-info__social {
    display: flex;
    gap: var(--spacing-m);
    list-style: none;
    margin: var(--spacing-xs) 0 0;
    padding: 0;
}

.ctt-info__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
    /* Mesmo padrão do header: ícone ciano, sem fundo nem borda */
    color: var(--color-icon-secondary);
    transition: color 0.2s ease;
}

.ctt-info__social-link:hover,
.ctt-info__social-link:focus {
    color: var(--color-primary-active);
}

.ctt-info__social-link svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ctt-info__social-link svg * {
    fill: currentColor;
}

/* ─────────────────────────────────────────────
   Coluna direita — Formulário
   (o formulário em si é Contact Form 7; estilo global em forms-cf7.css)
───────────────────────────────────────────── */

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

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

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

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