/* V5.2.1.j — Contact block. Tier 2 BEM. WhatsApp btn + form 2-col + info aside. */

.block-contact {
    padding: var(--contact-padding-block, 5rem) 0;
}

.block-contact__inner {
    max-width: var(--contact-content-width, 58rem);
    margin: 0 auto;
    padding: 0 var(--contact-padding-inline, 1.5rem);
}

.block-contact__heading {
    font-size: var(--fs-h2-fluid);
    line-height: 1.2;
    margin: 0 0 1rem;
    font-weight: var(--lp-fw-display-override, 600);
    text-align: center;
}

.block-contact__message {
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0 0 2rem;
    text-align: center;
    color: color-mix(in srgb, currentColor 78%, transparent);
}

.block-contact__whatsapp {
    text-align: center;
    margin: 0 0 2rem;
}

.block-contact__wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lp-whatsapp);
    color: var(--lp-on-scrim);
    padding: 0.9rem 1.5rem;
    border-radius: var(--lp-radius-btn, var(--radius-full));
    text-decoration: none;
    font-weight: 600;
    transition: opacity 180ms ease;
}

.block-contact__wa-btn:hover { opacity: 0.9; }

.block-contact__wa-icon {
    width: 20px; height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12a11.9 11.9 0 0 0 1.64 6L0 24l6.18-1.62A11.92 11.92 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.2-3.48-8.52zM12 22a10 10 0 0 1-5.1-1.4l-.37-.22-3.67.96.98-3.58-.24-.37A10 10 0 1 1 22 12a10 10 0 0 1-10 10z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12a11.9 11.9 0 0 0 1.64 6L0 24l6.18-1.62A11.92 11.92 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.2-1.25-6.2-3.48-8.52zM12 22a10 10 0 0 1-5.1-1.4l-.37-.22-3.67.96.98-3.58-.24-.37A10 10 0 1 1 22 12a10 10 0 0 1-10 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.block-contact__wa-note {
    font-size: 0.8125rem;
    color: color-mix(in srgb, currentColor 60%, transparent);
    margin: var(--sp-2-5) 0 0;
}

.block-contact__divider {
    text-align: center;
    position: relative;
    margin: 2rem 0;
    color: color-mix(in srgb, currentColor 50%, transparent);
    font-size: 0.875rem;
}

.block-contact__divider::before,
.block-contact__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 9rem);
    height: 1px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.block-contact__divider::before { left: 0; }
.block-contact__divider::after  { right: 0; }

/* Form em CARD premium: centraliza quando está sozinho (sem aside de info) e
   fica lado-a-lado com o info quando há. flex + max-width resolve os dois. */
.block-contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 1.75rem;
}

@media (max-width: 800px) {
    .block-contact__layout { grid-template-columns: 1fr; }
}

.block-contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    background: var(--lp-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--lp-on-surface, #1a1a1a) 9%, transparent);
    border-radius: var(--lp-radius-media, 18px);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--lp-on-surface, #1a1a1a) 8%, transparent);
}

.block-contact__field label {
    display: block;
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--lp-on-surface, #1a1a1a) 88%, transparent);
}

.block-contact__field input,
.block-contact__field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--lp-on-surface, #1a1a1a) 16%, transparent);
    border-radius: var(--radius-md, 10px);
    font: inherit;
    color: inherit;
    /* fundo levemente distinto do card pra o campo "afundar"; no foco vira limpo. */
    background: color-mix(in srgb, var(--lp-on-surface, #1a1a1a) 3%, var(--lp-surface, #fff));
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.block-contact__field input:focus,
.block-contact__field textarea:focus {
    outline: none;
    border-color: var(--lp-accent, #1f3a5f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent, #1f3a5f) 16%, transparent);
    background: var(--lp-surface, #fff);
}

.block-contact__submit {
    margin-top: 0.3rem;
    padding: 0.95rem 1.5rem;
    background: var(--contact-submit-bg, var(--lp-accent, #1f3a5f));
    color: var(--lp-accent-on, #fff);
    border: 0;
    border-radius: var(--lp-radius-btn, var(--radius-full));
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    align-self: stretch;
}

.block-contact__submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--lp-accent, #1f3a5f) 30%, transparent); }

/* Coluna direita — cartão "Outros canais": e-mail/telefone/instagram puxados
   da config do site (tela Contatos). Ícone SVG num círculo accent + label +
   valor. Lê como painel premium ao lado do form, não faixa órfã. */
.block-contact__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--lp-radius-media, 18px);
    background: var(--theme-surface-elevated, var(--lp-surface-2, #f4f6f9));
    border: 1px solid color-mix(in srgb, var(--lp-on-surface, #1a1a1a) 7%, transparent);
}

.block-contact__info-title {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: color-mix(in srgb, currentColor 55%, transparent);
    margin: 0 0 0.75rem;
}

.block-contact__channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.block-contact__channel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.6rem;
    border-radius: var(--radius-md, 10px);
    transition: background 180ms ease;
    cursor: pointer; /* card inteiro = botão (o <a> cobre tudo via ::after) */
}

/* Stretched-link: o card inteiro é o alvo de clique (o card já tem hover de
   botão; sem isto só o texto clicava). O <a>__channel-value cobre o <li> via
   ::after. Vale pra todos os canais (mapa, telefone, Instagram, e-mail). */
a.block-contact__channel-value::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Canal sem link (ex: Horário) — texto puro, não é botão. */
.block-contact__channel--static { cursor: default; }
.block-contact__channel--static:hover { background: transparent; }

.block-contact__channel:hover {
    background: color-mix(in srgb, var(--lp-accent, #1f3a5f) 7%, transparent);
}

.block-contact__channel-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--lp-accent, #1f3a5f);
    background: var(--lp-accent-weak, color-mix(in srgb, var(--lp-accent, #1f3a5f) 12%, transparent));
}

.block-contact__channel-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.block-contact__channel-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 55%, transparent);
}

.block-contact__channel-value {
    color: inherit;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    word-break: break-word;
}

.block-contact__channel-value:hover { color: var(--lp-accent, #1f3a5f); }

/* E-mail costuma ser longo: fonte um tico menor + quebra só no <wbr> (no @),
   nunca no meio da palavra. overflow-wrap como último recurso pra domínio gigante. */
.block-contact__channel-value--email {
    font-size: 0.875rem;
    overflow-wrap: break-word;
    line-height: 1.35;
}

/* Reveal de entrada escalonado (premium anima na entrada). */
.block-contact__info[data-reveal].reveal-on [data-reveal-item] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease);
    transition-delay: var(--d, 0s);
}
.block-contact__info[data-reveal].is-in [data-reveal-item] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .block-contact__info[data-reveal].reveal-on [data-reveal-item] { opacity: 1; transform: none; transition: none; }
}