/* Estilos só da página contact (app/Views/contact.php). Carregado depois do base.css. */

.contact-paths {
    display: grid;
    gap: 24px;

    @media (min-width: 1000px) { grid-template-columns: 1fr 1fr; }

    article { padding: clamp(32px, 4vw, 64px); border-radius: var(--radius-lg); background: #f2f4f8; }
    h2 { font-family: var(--font-display); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.25rem); font-weight: 700; color: var(--navy); }
    .body-md { margin-top: 16px; }
    .btn { margin-top: 36px; }
    .note { margin-top: 28px; font-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem); line-height: 1.5; color: var(--muted); }
}

.contact-general {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: clamp(40px, 4vw, 56px);
    border-top: 1px solid var(--line);

    h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--navy); }
    .small { margin-top: 8px; }

    ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 0;
        font-family: var(--font-display);
        font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.5rem);
        font-weight: 600;
        color: var(--navy);
    }
    li:not(:last-child)::after { content: '•'; margin-inline: 18px; color: rgba(26, 49, 87, 0.35); }
    a:hover { color: var(--blue); }
}

/* Formulário único: os botões do site chegam por /contact#sample|#project|#partnership */
.contact-form {
    margin-top: clamp(48px, 5vw, 72px);
    padding: clamp(32px, 4vw, 64px);
    border-radius: var(--radius-lg);
    background: var(--cool);

    .anchor { display: block; scroll-margin-top: 24px; }
    .head { max-width: 640px; }
    h2 { font-family: var(--font-display); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.25rem); font-weight: 700; color: var(--navy); }
    .small { margin-top: 10px; }

    .notice {
        margin-top: 24px;
        padding: 14px 18px;
        border-radius: var(--radius);
        font-weight: 500;

        &.success { color: var(--health-pharma); background: #e2f1ee; }
        &.failure { color: var(--nutrition); background: #f8e6ea; }
        a { text-decoration: underline; }
    }

    > form {
        display: grid;
        gap: 20px 24px;
        margin-top: 32px;

        @media (min-width: 768px) { grid-template-columns: 1fr 1fr; }
    }

    label { display: grid; gap: 8px; align-content: start; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
    .wide { @media (min-width: 768px) { grid-column: 1 / -1; } }
    .optional { font-weight: 400; color: var(--muted); }

    :is(input, select, textarea) {
        width: 100%;
        padding: 13px 14px;
        border: 1px solid rgba(26, 49, 87, 0.22);
        border-radius: 8px;
        font: 400 1rem / 1.4 var(--font-body);
        color: var(--ink);
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52, 108, 172, 0.2); }
        &[aria-invalid='true'] { border-color: var(--nutrition); }
    }

    textarea { resize: vertical; min-height: 140px; }
    .error { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--nutrition); }
    .btn { justify-self: start; }

    /* honeypot fora da tela (não usar display:none: alguns robôs ignoram campos ocultos) */
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}

/* Pop-up com a resposta do envio (Ajax) */
.contact-dialog {
    width: min(460px, calc(100% - 2 * var(--gutter)));
    margin: auto;
    padding: clamp(28px, 4vw, 40px);
    border: 0;
    border-top: 4px solid var(--health-pharma);
    border-radius: var(--radius-lg);
    color: var(--ink);
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;

    &.is-error { border-top-color: var(--nutrition); }
    &::backdrop { background: rgba(18, 32, 50, 0.55); }
    &[open] { animation: dialog-in 0.35s var(--ease); }

    h2 { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; color: var(--navy); }
    p { margin-top: 12px; line-height: 1.55; color: var(--muted); }
    form { margin-top: 26px; }
}

@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }