/*
 * Tarjas Imonov nos cards de imoveis - arquivo para o SITE DO CLIENTE.
 * Incluir no <head> das paginas com lista de imoveis.
 * O HTML das tarjas vem de imonovHtmlTarjas() (tarjas-imonov.php) e fica DENTRO da caixa da foto do card.
 * A caixa da foto precisa de position: relative (a regra abaixo cobre o modelo Webflow, caixa
 * .property-image-wrap; em outros modelos, troque pelo seletor da caixa da foto). Nada aqui esconde ou
 * corta outros elementos da caixa: tarjas que o site ja tenha continuam aparecendo.
 * Mesmo visual da previa do painel.
 */
.carrossel-galeria-imoveis { position: relative; }

/* Grupo de tarjas sobre a foto: .tarjas-grupo .tarja-{faixa|selo} .tarja-{esquerda|direita} .tarja-qtd-{1..4} */
.tarjas-grupo { position: absolute; inset: 0; pointer-events: none; }
.tarjas-grupo > span:not(.tarjas-imagens) { color: #fff; background: var(--tarja-cor, #e52b2b); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
/* Faixa diagonal: fitas paralelas atravessando o canto, a primeira mais perto dele (a foto corta as pontas) */
/* O proprio grupo corta as pontas das faixas na borda da foto (a caixa da foto nao precisa de overflow) */
.tarjas-grupo.tarja-faixa { overflow: hidden; }
.tarjas-grupo.tarja-faixa > span:not(.tarjas-imagens) { position: absolute; padding: 6px 0; text-align: center; border: 2px solid #fff; }
.tarjas-grupo.tarja-faixa > span:not(.tarjas-imagens):nth-child(1) { top: 26px; width: 180px; }
.tarjas-grupo.tarja-faixa > span:not(.tarjas-imagens):nth-child(2) { top: 64px; width: 260px; }
.tarjas-grupo.tarja-faixa > span:not(.tarjas-imagens):nth-child(3) { top: 102px; width: 340px; }
.tarjas-grupo.tarja-faixa.tarja-esquerda > span:not(.tarjas-imagens) { transform: rotate(-45deg); }
.tarjas-grupo.tarja-faixa.tarja-direita > span:not(.tarjas-imagens) { transform: rotate(45deg); }
.tarjas-grupo.tarja-faixa.tarja-esquerda > span:not(.tarjas-imagens):nth-child(1) { left: -48px; }
.tarjas-grupo.tarja-faixa.tarja-esquerda > span:not(.tarjas-imagens):nth-child(2) { left: -78px; }
.tarjas-grupo.tarja-faixa.tarja-esquerda > span:not(.tarjas-imagens):nth-child(3) { left: -108px; }
.tarjas-grupo.tarja-faixa.tarja-direita > span:not(.tarjas-imagens):nth-child(1) { right: -48px; }
.tarjas-grupo.tarja-faixa.tarja-direita > span:not(.tarjas-imagens):nth-child(2) { right: -78px; }
.tarjas-grupo.tarja-faixa.tarja-direita > span:not(.tarjas-imagens):nth-child(3) { right: -108px; }
/* Selo arredondado: 1 ou 2 selos um embaixo do outro; 3 = dois lado a lado e o terceiro embaixo; 4 = dois a dois */
.tarjas-grupo.tarja-selo { inset: 14px auto auto; display: grid; gap: 6px; align-content: start; align-items: start; max-width: calc(100% - 28px); }
.tarjas-grupo.tarja-selo.tarja-esquerda { left: 14px; justify-items: start; }
.tarjas-grupo.tarja-selo.tarja-direita { right: 14px; justify-items: end; }
.tarjas-grupo.tarja-selo.tarja-qtd-3, .tarjas-grupo.tarja-selo.tarja-qtd-4 { grid-template-columns: auto auto; }
.tarjas-grupo.tarja-selo.tarja-qtd-3 > span:nth-child(3) { grid-column: 1 / -1; }
.tarjas-grupo.tarja-selo > span:not(.tarjas-imagens) { padding: 7px 18px; border-radius: 999px; }
/* Selos (tarjas em imagem e selos que o site ja tinha) numa linha propria, lado a lado, sem sobreposicao */
.tarjas-grupo > .tarjas-imagens { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start; min-width: 0; }
.tarjas-grupo.tarja-direita > .tarjas-imagens { justify-content: flex-end; }
/* Estilo faixa com selos: os selos ficam na borda de cima, depois das faixas (quanto mais faixas, mais longe do canto) */
.tarjas-grupo.tarja-faixa > .tarjas-imagens { position: absolute; top: 14px; max-width: calc(100% - 28px); }
.tarjas-grupo.tarja-faixa.tarja-esquerda > .tarjas-imagens { left: 14px; }
.tarjas-grupo.tarja-faixa.tarja-direita > .tarjas-imagens { right: 14px; }
.tarjas-grupo.tarja-faixa.tarja-esquerda.tarja-qtd-1 > .tarjas-imagens { left: 116px; max-width: calc(100% - 130px); }
.tarjas-grupo.tarja-faixa.tarja-esquerda.tarja-qtd-2 > .tarjas-imagens { left: 164px; max-width: calc(100% - 178px); }
.tarjas-grupo.tarja-faixa.tarja-esquerda.tarja-qtd-3 > .tarjas-imagens { left: 212px; max-width: calc(100% - 226px); }
.tarjas-grupo.tarja-faixa.tarja-direita.tarja-qtd-1 > .tarjas-imagens { right: 116px; max-width: calc(100% - 130px); }
.tarjas-grupo.tarja-faixa.tarja-direita.tarja-qtd-2 > .tarjas-imagens { right: 164px; max-width: calc(100% - 178px); }
.tarjas-grupo.tarja-faixa.tarja-direita.tarja-qtd-3 > .tarjas-imagens { right: 212px; max-width: calc(100% - 226px); }
.tarjas-imagens > * { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; }
.tarjas-imagens > * { flex: 0 1 auto; min-width: 0; }
.tarjas-imagens img { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 64px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }