/**
 * Ajustes exclusivos da landing estática.
 *
 * Complementa o style.css do tema — reaproveita as classes de campo
 * (.contact-form__field, .btn-cemek-outline, .btn-cemek-close) e acrescenta
 * só o que o tema não tinha: o modal de lead e o lightbox da galeria.
 */

/* --- Modal de contato ----------------------------------------------------- */

.lead-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 100vw - 32px);
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.lead-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.85);
}

.lead-modal__inner {
    position: relative;
    max-height: calc(100vh - 32px);
    padding: 28px 32px;
    border-radius: 20px;
    background-color: #f6f3ee;
    overflow-y: auto;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 167, 122, 0.7) transparent;
}

/* Barra de rolagem discreta, para quando a tela for baixa demais e o conteúdo
   não couber. Chrome/Edge/Safari — o Firefox usa as duas linhas acima. */
.lead-modal__inner::-webkit-scrollbar {
    width: 6px;
}

.lead-modal__inner::-webkit-scrollbar-track {
    margin: 20px 0;
    background: transparent;
}

.lead-modal__inner::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(214, 167, 122, 0.7);
}

.lead-modal__inner::-webkit-scrollbar-thumb:hover {
    background-color: #d6a77a;
}

.lead-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.lead-modal__title {
    margin: 0 0 4px;
}

.lead-modal__text {
    margin: 0 0 16px;
    max-width: 42ch;
}

/* O tema espaça os campos para a página de contato inteira. Aqui o formulário
   precisa caber num modal sem rolagem em tela de notebook (768px de altura),
   então tudo abaixo é uma versão compacta das mesmas regras. */
.lead-modal .contact-form__form {
    gap: 14px;
}

/* Espaço para a mensagem de erro, que o tema posiciona em absolute.
   Os 10px não cobrem os 14px da linha de erro, mas o que sobra cai dentro do
   gap de 14px do formulário — sem encostar no campo seguinte. */
.lead-modal .contact-form__field {
    padding-bottom: 10px;
}

.lead-modal .contact-form__field input {
    height: 40px;
}

.lead-modal .contact-form__field textarea {
    min-height: 76px;
    padding: 12px 24px;
}

.lead-modal .contact-form__submit-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lead-modal__consent {
    margin: 0;
    opacity: 0.75;
}

/* Campo isca contra robôs: fora da tela, mas não display:none — alguns
   preenchedores automáticos ignoram campos escondidos dessa forma. */
.lead-modal__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-modal__feedback {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 15px;
    font-size: 16px;
    line-height: 1.4;
}

.lead-modal__feedback.is-success {
    border: 1px solid rgba(214, 167, 122, 0.55);
    background-color: #fefbf5;
    color: #1c1c1c;
}

.lead-modal__feedback.is-error {
    border: 1px solid rgba(244, 58, 58, 0.55);
    background-color: #fdf1f1;
    color: #8c1c1c;
}

@media (max-width: 575px) {
    .lead-modal__inner {
        padding: 24px 20px;
    }

    /* Devolve a altura de campo que o tema usa no mobile. */
    .lead-modal .contact-form__field input {
        height: 44px;
    }
}

/* --- Lightbox da galeria do banner ---------------------------------------- */

.cemek-empreendimento-banner__card-carousel-image {
    cursor: zoom-in;
}

.galeria-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, 100vw - 32px);
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.galeria-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.9);
}

.galeria-modal__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}

.galeria-modal__figure {
    width: 100%;
    margin: 0;
    border-radius: 15px;
    background-color: #1c1c1c;
    overflow: hidden;
}

/* contain, e não cover: aqui a foto inteira precisa aparecer. */
.galeria-modal__image {
    display: block;
    width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
}

/* --- Contato no header e no rodapé ---------------------------------------- */

.site-header__contato {
    margin-left: auto;
}

.site-footer__contato {
    display: inline-flex;
    align-items: center;
}