/* ===========================================================================
   FICHA DO IMÓVEL: GALERIA NA LARGURA TODA, CORPO À ESQUERDA E LATERAL À
   DIREITA (ABAIXO DE 992px A LATERAL DESCE). AMPLIAÇÃO DAS FOTOS: LIGHTGALLERY (public/vendor).
   =========================================================================== */

/* ---- GALERIA -------------------------------------------------------------------
   FOTOS DE 450x300 LADO A LADO, CORTADAS AO CENTRO. SETAS BRANCAS REDONDAS QUE
   ENTRAM PELOS LADOS COM O PONTEIRO EM CIMA; PONTOS EMBAIXO. SETAS E PONTOS SÓ
   COM 5 FOTOS OU MAIS (.galeria--navega, detalhe.js). */

/* `overflow-x: clip`: AS SETAS ESCONDIDAS A 50px DO LADO DE FORA NÃO CRIAM ROLAGEM
   NA HORIZONTAL; OS PONTOS, QUE FICAM ABAIXO, CONTINUAM À MOSTRA. */
.galeria {
    position: relative;
    overflow-x: clip;
    margin: 0 0 60px;
    border: 4px solid #fff;
    border-radius: 4px;
    background-color: #fff;
}

.galeria__trilho {
    display: flex;
    gap: .2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.galeria__trilho::-webkit-scrollbar {
    display: none;
}

.galeria__item {
    flex: 0 0 auto;
    width: min(450px, 100%);
    height: 300px;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    scroll-snap-align: start;
}

.galeria__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* FOTO QUE NÃO ABRIU (OU IMÓVEL SEM FOTO): O AVISO OCUPA O QUADRO TODO E NÃO AMPLIA. */
.galeria__item .foto-indisponivel {
    height: 100%;
}

.galeria__item:disabled,
.galeria__item--vazio {
    cursor: default;
}

/* UMA FOTO SÓ: CENTRADA, COM 464px. */
.galeria--uma .galeria__trilho {
    justify-content: center;
}

.galeria--uma .galeria__item {
    width: min(464px, 100%);
}

.galeria__seta,
.galeria__pontos {
    display: none;
}

.galeria--navega .galeria__seta {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: block;
    width: 3rem;
    height: 3rem;
    margin-top: -20px;
    padding: 4px;
    border-radius: 10rem;
    background: #fff no-repeat center / 20px 20px;
    transition: all .3s ease-in-out;
}

/* A IMAGEM VAI AQUI, COM DUAS CLASSES: NUMA SÓ, O `background` ACIMA (DUAS) A APAGAVA. */
.galeria--navega .galeria__seta--anterior {
    left: -50px;
    background-image: url('../img/detalhes/seta-para-esquerda.webp?v=2');
}

.galeria--navega .galeria__seta--proxima {
    right: -50px;
    background-image: url('../img/detalhes/seta-para-direita.webp');
}

.galeria:hover .galeria__seta--anterior {
    left: 10px;
}

.galeria:hover .galeria__seta--proxima {
    right: 10px;
}

/* ATÉ 860px (TELA DE TOQUE, SEM "PONTEIRO EM CIMA") AS SETAS FICAM SEMPRE À MOSTRA. */
@media (max-width: 860px) {
    .galeria--navega .galeria__seta--anterior { left: 10px; }
    .galeria--navega .galeria__seta--proxima { right: 10px; }
}

.galeria--navega .galeria__seta--anterior:not(:disabled):hover {
    background-color: var(--verde);
    background-image: url('../img/detalhes/seta-para-esquerda-branco.webp?v=2');
}

.galeria--navega .galeria__seta--proxima:not(:disabled):hover {
    background-color: var(--verde);
    background-image: url('../img/detalhes/seta-para-direita-branco.webp');
}

/* NO COMEÇO (OU NO FIM) DA GALERIA, A SETA DAQUELE LADO FICA DESATIVADA (detalhe.js). */
.galeria__seta:disabled {
    opacity: .4;
    cursor: default;
}

.galeria--navega .galeria__pontos {
    position: absolute;
    bottom: -40px;
    display: block;
    width: 100%;
    line-height: 1;
    text-align: center;
}

.galeria__pontos li {
    display: inline-block;
    margin: 0 6px;
}

.galeria__pontos button {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
}

.galeria__pontos .ativo {
    background-color: rgba(0, 0, 0, .9);
}

.galeria__dica {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -30px;
}

.galeria__dica img {
    max-height: 20px;
}

.galeria__dica p {
    margin-left: 10px;
    padding-top: 25px;
}

@media (max-width: 768px) {
    .galeria__dica { display: none; }
}

/* ---- AMPLIAÇÃO (LIGHTGALLERY) -------------------------------------------------
   O PADRÃO DELE (1040/1050) FICA ABAIXO DO CABEÇALHO (9999), DA BARRA GRUDADA E
   DO WHATSAPP FLUTUANTE (999999): ABERTO, ELE COBRE TODOS. */

.lg-backdrop {
    z-index: 1000040;
}

.lg-outer {
    z-index: 1000050;
}

/* ---- CORPO -------------------------------------------------------------------- */

.detalhe {
    padding-bottom: 10px;
}

/* CELULAR (ATÉ 991px): UMA COLUNA. CORPO E LATERAL SOMEM COMO CAIXA (display: contents)
   E OS FILHOS SE ORDENAM: SELOS, TÍTULO E ENDEREÇO; A CAIXA DE VALORES; DESCRIÇÃO E
   "DETALHES DO IMÓVEL"; O FORMULÁRIO; CARACTERÍSTICAS E VÍDEO; AS OUTRAS CAIXAS.
   A PARTIR DE 992px: CORPO NOS 2/3 DA ESQUERDA E A LATERAL INTEIRA À DIREITA, COM AS
   MESMAS MEDIDAS DA .linha (MARGEM -15px, COLUNAS COM 15px DE CADA LADO). */
.detalhe__grade {
    display: flex;
    flex-direction: column;
}

.detalhe__principal,
.detalhe__lado {
    display: contents;
}

.detalhe__lado > .detalhe__caixa {
    order: 3;
}

.detalhe__corpo--topo {
    order: -2;
}

.detalhe__lado > .detalhe__caixa--valores {
    order: -1;
}

.detalhe__lado > .detalhe__formulario {
    order: 1;
}

.detalhe__corpo--fim {
    order: 2;
    margin-bottom: 60px;
}

@media (min-width: 992px) {
    .detalhe__grade {
        flex-direction: row;
        margin: 0 -15px;
    }
    .detalhe__principal,
    .detalhe__lado {
        display: block;
        flex: 0 0 auto;
        min-width: 0;
        padding: 0 15px;
    }
    .detalhe__principal { width: 66.66666667%; margin-bottom: 60px; }
    .detalhe__lado { width: 33.33333333%; }
    .detalhe__corpo--fim { margin-bottom: 0; }

    /* NA LATERAL ESTREITA, UM CAMPO POR LINHA. */
    .detalhe__formulario .form-lead__metade { width: 100%; }
}

/* SELOS: CÓDIGO EM VERDE E A SEÇÃO EM LARANJA, EM CAIXA ALTA. */
.detalhe__selos {
    margin-bottom: 20px;
}

.detalhe__selos li {
    display: inline-block;
    margin: 0 25px 5px 0;
    padding: 5px 15px 2px;
    background-color: var(--verde);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.detalhe__selos li:last-child {
    margin-right: 0;
}

.detalhe__selos .detalhe__selo--secao {
    background-color: #ffa500;
}

.detalhe__titulo {
    margin-top: 30px;
    font-size: 36px;
    line-height: 1.2;
}

.detalhe__endereco {
    font-size: 14px;
}

.detalhe__endereco span {
    color: var(--verde);
}

.detalhe__subtitulo {
    margin: 30px 0;
    padding-left: 10px;
    border-left: 2px solid var(--verde);
    font-size: 22px;
    font-weight: 600;
}

.detalhe__subtitulo--junto {
    margin-bottom: 10px;
}

.detalhe__descricao {
    margin-top: 1.5em;
}

/* ITENS COM ÍCONE (DETALHES E VALORES): BLOCOS DE NO MÍNIMO 170px, LADO A LADO. */
.detalhe__itens {
    margin-bottom: 45px;
}

.detalhe__itens li {
    display: inline-flex;
    align-items: center;
    min-width: 170px;
    margin: 1rem 19px 15px 0;
    line-height: 1;
}

.detalhe__icone {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin-right: 12px;
}

.detalhe__item-rotulo {
    margin: 0 0 6px;
    color: var(--titulo);
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 500;
}

.detalhe__itens small {
    font-size: .875em;
}

/* CARACTERÍSTICAS: TRÊS POR LINHA, COM O ÍCONE DE "✓". */
.detalhe__caracteristicas {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.detalhe__caracteristicas li {
    width: 33.33%;
    margin-top: 15px;
    padding: 5px;
    font-size: 14px;
    font-weight: 700;
}

.detalhe__video a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: var(--verde);
    color: #fff;
    font-size: 20px;
}

@media (max-width: 1199px) { .detalhe__titulo { font-size: 30px; } }
@media (max-width: 991px)  { .detalhe__titulo { font-size: 26px; } }

@media (max-width: 767px) {
    .detalhe__titulo { font-size: 24px; }
    .detalhe__selos li { margin-right: 10px; font-size: 12px; }
}

/* CELULAR: DOIS ITENS POR LINHA (170px + MARGEM NÃO CABIAM DOIS EM 370px) E
   CARACTERÍSTICAS EM DUAS COLUNAS, QUEBRANDO NOME LONGO ("BARES/RESTAURANTES")
   EM VEZ DE INVADIR A COLUNA DO LADO. */
@media (max-width: 575px) {
    .detalhe__itens { display: flex; flex-wrap: wrap; }
    .detalhe__itens li { width: calc(50% - 10px); min-width: 0; margin-right: 10px; }
    .detalhe__caracteristicas li { width: 50%; overflow-wrap: anywhere; }
}

/* ---- LATERAL: CAIXAS DE BORDA CINZA ------------------------------------------- */

.detalhe__caixa {
    margin-bottom: 40px;
    padding: 35px 30px 40px 35px;
    border: 2px solid #ededed;
}

.detalhe__caixa:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .detalhe__caixa { padding: 35px 20px 40px; }
}

.detalhe__caixa-titulo {
    margin-bottom: 25px;
    padding-left: 10px;
    border-left: 2px solid var(--verde);
    color: var(--titulo);
    font-family: var(--fonte-titulo);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: capitalize;
}

.detalhe__itens--valores {
    margin-bottom: 0;
}

.detalhe__total {
    margin: 1rem 0 0;
}

.detalhe__zap {
    text-transform: uppercase;
}

/* "PREENCHER FICHA LOCATÁRIO": BOTÃO VERDE NA LARGURA DA CAIXA DE VALORES. */
/* SEM O RECUO LATERAL DO .botao (40px): O TEXTO CABE NUMA LINHA SÓ NA LATERAL ESTREITA. */
.detalhe__botao-ficha {
    display: block;
    width: 100%;
    margin-top: 25px;
    padding-right: 0;
    padding-left: 0;
    text-transform: uppercase;
}

.detalhe__compartilhar li {
    display: inline-block;
    margin: 1rem 10px 0 0;
}

.detalhe__compartilhar li:last-child {
    margin-right: 0;
}

.detalhe__compartilhar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--fundo-claro);
    color: var(--texto);
}

.detalhe__compartilhar li:hover a {
    background-color: var(--verde);
    color: #fff;
}