/* Página do anúncio: galeria, preço e custo mensal, ficha, descrição, histórico, bairro,
   imobiliária, barra fixa de contato, parecidos e "Informar problema". */

/* Espaço da barra fixa de contato: no rodapé, para o fundo dele ir até o fim da tela. */
body.com-acoes .rodape {
  padding-bottom: calc(var(--esp-5) + 5.75rem + env(safe-area-inset-bottom));
}

.topo-anuncio {
  display: none;
}

/* ---------- Galeria ---------- */

/* No celular as fotos vão de borda a borda. */
.galeria {
  position: relative;
  margin-inline: calc(-1 * var(--esp-4));
  background: var(--cor-fundo-alt);
}

.aviso + .galeria {
  margin-top: var(--esp-3);
}

/* Espaço reservado em 4:3: a página não pula quando a foto chega. */
.galeria .desliza > a {
  aspect-ratio: 4 / 3;
}

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria.sem-fotos p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 11rem;
  padding: var(--toque) var(--esp-5) var(--esp-4);
  color: var(--cor-texto-suave);
  text-align: center;
}

.galeria-acoes {
  display: flex;
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  right: var(--esp-2);
  gap: var(--esp-2);
  pointer-events: none;
}

.galeria-acoes > * {
  pointer-events: auto;
}

/* Compartilhar fica no canto oposto ao de voltar. */
.galeria-acoes [data-compartilhar] {
  margin-left: auto;
}

.ver-fotos {
  display: none;
}

/* Galeria em tela cheia. */
.tela-cheia {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cor-palco);
  color: var(--cor-sobre-veu);
}

.tela-cheia[open] {
  display: flex;
}

.tela-cheia .desliza {
  flex: 1;
  align-items: center;
}

.tela-cheia .desliza > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tela-cheia img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.tela-cheia .contador {
  top: var(--esp-4);
  right: auto;
  bottom: auto;
  left: var(--esp-4);
  font-size: var(--letra-p);
}

.tela-cheia .botao-icone {
  position: absolute;
  top: var(--esp-2);
  right: var(--esp-2);
}

/* Setas de anterior e próxima: só onde há mouse; no toque, desliza-se a foto. */
.tela-cheia .passo {
  display: none;
  top: calc(50% - var(--toque) / 2);
}

.tela-cheia .anterior {
  right: auto;
  left: var(--esp-2);
}

@media (hover: hover) {
  .tela-cheia .passo {
    display: inline-flex;
  }
}

/* ---------- Conteúdo ---------- */

.anuncio section,
.anuncio .bairro-link {
  margin-top: var(--esp-5);
}

.anuncio h2,
.parecidos h2 {
  margin-bottom: var(--esp-3);
  font-size: var(--letra-m);
}

.cabeca {
  padding-top: var(--esp-4);
}

.cabeca .selo {
  position: static;
  display: inline-block;
}

.cabeca h1 {
  margin-top: var(--esp-2);
  font-size: var(--letra-g);
  letter-spacing: -0.01em;
}

.cabeca p {
  margin-top: var(--esp-1);
  color: var(--cor-texto-suave);
}

/* Preço e custo mensal. */
.custo {
  padding: var(--esp-4);
  border-radius: var(--raio-g);
  background: var(--cor-primaria-suave);
}

.anuncio section.custo {
  margin-top: var(--esp-4);
}

.preco-grande {
  font-size: var(--letra-gg);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.preco-grande small {
  color: var(--cor-texto-suave);
  font-size: var(--letra-p);
  font-weight: 400;
  letter-spacing: 0;
}

.conta {
  margin-top: var(--esp-3);
}

.conta div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-block: var(--esp-1);
}

.conta .total {
  margin-top: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: var(--borda) solid var(--cor-primaria);
  font-size: var(--letra-m);
  font-weight: 800;
}

.nota {
  margin-top: var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
}

/* Ficha com ícones. */
.ficha-icones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
}

.ficha-icones li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 3.5rem;
  padding: var(--esp-2) var(--esp-3);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-m);
  line-height: 1.2;
}

.ficha-icones svg {
  color: var(--cor-primaria);
}

.ficha-icones small {
  display: block;
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
}

/* Descrição com "ver mais": caixa de seleção escondida, sem JavaScript. */
.descricao p {
  overflow-wrap: anywhere;
}

.descricao .corta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.descricao input:checked ~ p {
  display: block;
}

.descricao label {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: var(--cor-primaria);
  font-weight: 700;
  cursor: pointer;
}

.descricao input:focus-visible ~ label {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.descricao .menos,
.descricao input:checked ~ label .mais-texto {
  display: none;
}

.descricao input:checked ~ label .menos {
  display: inline;
}

/* Histórico de preço. */
.historico li {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  padding-block: var(--esp-2);
  border-bottom: var(--borda) solid var(--cor-borda);
}

.historico span,
.historico small {
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
}

.historico small {
  margin-left: auto;
}

.historico .baixou {
  color: var(--cor-primaria);
  font-weight: 700;
}

/* Link para o bairro. */
.bairro-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-m);
  line-height: 1.3;
}

.bairro-link svg {
  color: var(--cor-primaria);
}

.bairro-link strong {
  display: block;
}

.bairro-link small {
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
}

/* Imobiliária. */
.imobiliaria {
  padding: var(--esp-4);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-g);
}

.imobiliaria-nome {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  line-height: 1.25;
}

.imobiliaria-nome span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  font-size: var(--letra-g);
  font-weight: 800;
}

.imobiliaria-nome strong {
  display: block;
  font-size: var(--letra-m);
}

.imobiliaria-nome small,
.imobiliaria p {
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
}

.imobiliaria p {
  margin-top: var(--esp-3);
  overflow-wrap: anywhere;
}

.problema {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--toque);
  margin-top: var(--esp-4);
  color: var(--cor-texto-suave);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Barra fixa de contato ---------- */

.acoes {
  display: flex;
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom));
  background: var(--cor-superficie);
  box-shadow: var(--sombra-cima);
}

.acoes a {
  flex: 1;
  min-height: 3.25rem;
  padding-inline: var(--esp-3);
}

.acoes .whatsapp {
  background: var(--cor-whatsapp);
  color: var(--cor-sobre-whatsapp);
}

/* ---------- Parecidos ---------- */

.parecidos {
  padding-top: var(--esp-6);
}

/* ---------- Informar problema: na folha e na página /problema (sem JavaScript) ---------- */

.motivos span {
  white-space: normal;
}

.folha-corpo textarea {
  display: block;
  width: 100%;
  padding: var(--esp-3);
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-m);
  background: var(--cor-superficie);
  resize: vertical;
}

.folha-corpo .rotulo small {
  color: var(--cor-texto-suave);
  font-size: var(--letra-pp);
  font-weight: 400;
}

/* ---------- Computador ---------- */

@media (min-width: 56rem) {
  body.com-acoes .rodape {
    padding-bottom: var(--esp-5);
  }

  .topo-anuncio {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    min-height: 4rem;
  }

  .topo-anuncio .voltar-busca {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: var(--toque);
    margin-left: auto;
    font-weight: 700;
  }

  /* Fotos lado a lado, com a mesma altura, rolando de lado. */
  .galeria {
    margin-inline: 0;
    background: none;
  }

  .galeria.sem-fotos {
    border-radius: var(--raio-g);
    background: var(--cor-fundo-alt);
  }

  .galeria .desliza {
    gap: var(--esp-2);
    border-radius: var(--raio-g);
    scroll-snap-type: none;
  }

  .galeria .desliza > a {
    flex: 0 0 auto;
    height: 26rem;
  }

  .galeria .contador,
  .galeria-acoes {
    display: none;
  }

  .ver-fotos {
    display: inline-flex;
    position: absolute;
    right: var(--esp-3);
    bottom: var(--esp-3);
    box-shadow: var(--sombra);
  }

  .anuncio {
    display: grid;
    grid-template-columns: 1fr 22rem;
    column-gap: var(--esp-7);
    align-items: start;
  }

  .cabeca {
    padding-top: var(--esp-5);
  }

  .cabeca h1 {
    font-size: var(--letra-gg);
  }

  .ficha-icones {
    grid-template-columns: repeat(4, 1fr);
  }

  .lateral {
    position: sticky;
    top: var(--esp-4);
  }

  .acoes {
    position: static;
    flex-direction: column;
    margin-top: var(--esp-3);
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .acoes a {
    flex: none;
  }

  .parecidos {
    padding-top: var(--esp-7);
  }
}