/* ==========================================================================
   OPORTUNIDADES > IMÓVEIS - lista de ofertas agrupada por tipo

   Carregado DEPOIS do css.css global E do Especialidades.css (que esta
   pagina tambem usa, para o .cv-esp-intro, .cv-esp-passos e .cv-esp-outras).
   Aqui mora SO a lista de imoveis -- prefixo .cv-oi-*.

   Por que arquivo proprio e nao dentro do Especialidades.css: as outras 4
   paginas de oportunidade nao tem lista de itens. Colocar estas ~30 regras
   no arquivo compartilhado faria as 4 baixarem CSS que nunca usam.

   As fotos entram em 800x600 (4:3), ja recortadas nesse formato pelo
   ferramentas/ (ver o comentario no Oportunidades_Imoveis.php). O card conta
   com essa proporcao: mudar a foto sem recortar quebra o alinhamento da grade.
   ========================================================================== */

.cv-oi {
    --oi-azul: #062345;
    --oi-azul-claro: #0b294d;
    --oi-ouro: #d2aa4c;
    --oi-ouro-forte: #b8922f;
    --oi-creme: #efe9d3;
    --oi-linha: #e3ddc8;
    --oi-texto: #37475c;
    --oi-suave: #7d8899;
    --oi-raio: 16px;
    --oi-sombra: 0 24px 60px rgba(6, 35, 69, .09);

    /* Os blocos que davam o respiro do topo (intro/chamada/atalhos) foram
       removidos em 09/09/2026; sem este padding a primeira categoria fica
       colada no fim do .cv-pg-topo. */
    padding: 64px 0 84px;
    background: #fff;
}

.cv-oi-chamada {
    max-width: 720px;
    margin: 0 auto 34px;
    font: 400 17px/29px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-texto);
    text-align: center;
}

/* --------------------------------------------------------------------------
   FILTROS POR TIPO
   Substituiram, em 10/09/2026, os antigos ATALHOS (ancoras para os grupos) e
   o proprio agrupamento: agora e uma grade unica e estes botoes escondem os
   cards que nao sao da categoria (OportunidadesImoveis.js).

   Nascem ESCONDIDOS e so aparecem com a classe .tem-filtro, que o JS poe no
   .cv-oi -- sem script, botao de filtro seria um controle que nao faz nada.
   -------------------------------------------------------------------------- */

.cv-oi-filtros {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
}

.cv-oi.tem-filtro .cv-oi-filtros {
    display: flex;
}

.cv-oi-filtro {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid var(--oi-linha);
    border-radius: 999px;
    font: 400 15px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-azul);
    background: #fff;
    cursor: pointer;
    transition: transform .25s var(--cv-ease), border-color .25s var(--cv-ease),
                background-color .25s var(--cv-ease), color .25s var(--cv-ease);
}

.cv-oi-filtro:hover,
.cv-oi-filtro:focus-visible {
    transform: translateY(-2px);
    border-color: var(--oi-ouro);
    background: rgba(210, 170, 76, .08);
}

/* O ativo e o azul cheio: a borda dourada sozinha se confundia com o hover. */
.cv-oi-filtro.esta-ativo {
    border-color: var(--oi-azul);
    background: var(--oi-azul);
    color: #fff;
}

/* ARMADILHA do Lucide: a base `svg.lucide { fill:none; stroke:currentColor }`
   tem especificidade tipo+classe; por isso os seletores abaixo sao
   descendentes (que vencem) e nao uma classe solta. */
.cv-oi-filtro svg {
    width: 17px;
    height: 17px;
    stroke: var(--oi-ouro);
}

/* Contador de imoveis da categoria. */
.cv-oi-filtro-n {
    min-width: 21px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--oi-creme);
    font-size: 12px;
    font-weight: 700;
    color: var(--oi-azul);
    text-align: center;
}

/* Card escondido pelo filtro. O `display:none` do proprio navegador daria
   conta, mas o card e item de GRID: qualquer regra futura que lhe de um
   `display` venceria o do UA e o card voltaria a ocupar a celula. */
.cv-oi-card[hidden] {
    display: none;
}

/* Aviso de categoria vazia (o JS tira o hidden). */
.cv-oi-vazio {
    padding: 40px 0;
    font: 400 17px/28px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-suave);
    text-align: center;
}

/* --------------------------------------------------------------------------
   CARD DO IMOVEL
   -------------------------------------------------------------------------- */

.cv-oi-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.cv-oi-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--oi-linha);
    border-radius: var(--oi-raio);
    background: #fff;
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease),
                border-color .25s var(--cv-ease);
}

/* Card sobe 4px no hover (padrao do site). */
.cv-oi-card:hover {
    transform: translateY(-4px);
    border-color: var(--oi-ouro);
    box-shadow: var(--oi-sombra);
}

/* O link da foto e um bloco: cobre a moldura inteira. Ele e decorativo
   (aria-hidden + tabindex=-1 no HTML) -- quem anuncia o destino e o link
   do titulo, para o mesmo card nao repetir 3 vezes o mesmo link. */
.cv-oi-foto-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Moldura da foto: o overflow segura o zoom da imagem dentro do card. */
.cv-oi-foto {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--oi-creme);
}

.cv-oi-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--cv-ease);
}

.cv-oi-card:hover .cv-oi-foto img {
    transform: scale(1.05);
}

/* Etiqueta sobre a foto ("Destaque", "Com escritura"...). */
.cv-oi-selo {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(6, 35, 69, .88);
    font: 700 12px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-creme);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cv-oi-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 24px 24px;
}

.cv-oi-local {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font: 400 13px/1.3 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-suave);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cv-oi-local svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke: var(--oi-ouro);
}

.cv-oi-nome {
    margin-bottom: 10px;
    font: 400 22px/1.28 'Afterglow', Georgia, serif;
    color: var(--oi-azul);
}

.cv-oi-nome a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--cv-ease);
}

.cv-oi-card:hover .cv-oi-nome a,
.cv-oi-nome a:focus-visible {
    color: var(--oi-ouro);
}

.cv-oi-txt {
    margin-bottom: 16px;
    font: 400 14px/23px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-texto);
}

/* Caracteristicas curtas (m2, comodos, documentacao). */
.cv-oi-specs {
    /* list-style:none -- o marcador e o ponto dourado do ::before abaixo;
       sem isso o navegador desenha o bullet dele TAMBEM (ficam dois). */
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--oi-linha);
}

/* Sem icone por item (o cadastro do painel nao guarda icone): o marcador
   e um ponto dourado desenhado aqui, sem gastar icone do subset. */
.cv-oi-specs li {
    position: relative;
    padding-left: 18px;
    font: 400 13px/19px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-texto);
}

.cv-oi-specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--oi-ouro);
}

/* O rodape e empurrado para baixo (margin-top:auto) para que todos os cards
   da linha tenham preco e botao na MESMA altura, mesmo com textos de
   tamanhos diferentes. */
.cv-oi-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--oi-linha);
}

.cv-oi-preco {
    font: 400 24px/1 'Afterglow', Georgia, serif;
    color: var(--oi-azul);
}

/* Sem preco fechado: menor e em tom de apoio, para nao competir com os
   valores reais dos outros cards. */
.cv-oi-preco--consulta {
    font-size: 16px;
    color: var(--oi-suave);
}

.cv-oi-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e7ad14 0%, #c9930c 100%);
    font: 700 13px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-azul);
    transition: transform .25s var(--cv-ease), box-shadow .25s var(--cv-ease);
}

.cv-oi-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(210, 170, 76, .3);
}

.cv-oi-btn svg {
    width: 15px;
    height: 15px;
    stroke: var(--oi-azul);
}

/* Aviso de que preco e disponibilidade mudam. */
.cv-oi-aviso {
    max-width: 720px;
    margin: 50px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--oi-linha);
    font: 400 13px/21px 'Aeonik', Arial, Helvetica, sans-serif;
    color: var(--oi-suave);
    text-align: center;
}

/* ==========================================================================
   RESPONSIVO - os mesmos cortes do resto do site
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-oi {
        padding-left: 24px;
        padding-right: 24px;
    }

}

@media (max-width: 991px) {

    .cv-oi-grade {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}

@media (max-width: 767px) {

    .cv-oi {
        padding-top: 44px;
        padding-bottom: 60px;
    }

    /* Uma coluna: com duas, o card fica estreito demais para o preco e o
       botao caberem lado a lado no rodape. */
    .cv-oi-grade {
        grid-template-columns: 1fr;
    }

    /* Pilhas menores: com 5 filtros em tela estreita, o tamanho do desktop
       ocupava quase quatro linhas. */
    .cv-oi-filtros {
        gap: 8px;
        margin-bottom: 36px;
    }

    .cv-oi-filtro {
        padding: 10px 15px;
        font-size: 14px;
    }

}

@media (max-width: 479px) {

    .cv-oi {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cv-oi-corpo {
        padding: 18px 18px 20px;
    }

    /* Em tela estreita o rodape empilha: lado a lado, o botao espremia o
       preco e as duas coisas ficavam ilegiveis. */
    .cv-oi-rodape {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cv-oi-btn {
        justify-content: center;
    }

}