/*
 * Card de anúncio (prancha Card-Estados)
 * - normal: sem sombra sobre o papel
 * - hover: sombra-card + título sublinhado
 * - favoritado: coração preenchido terracota-500
 * - destaque: faixa areia sobre a foto + contorno areia-400
 * No mobile vira o "card compacto": ficha com 2 atributos e tempo no rodapé.
 */

/* Seção: título, chips e "Ver todos" na mesma linha quando couber, para os cards subirem */
.secao--anuncios {
  padding-top: var(--space-8);
}

.secao__cabecalho--anuncios {
  align-items: flex-end;
  gap: var(--space-4) var(--space-8);
}

.secao__cabecalho--anuncios .link-seta {
  margin-left: auto;
}

/*
 * Grade: ~6 colunas em 1920, 5 em 1440, 4 em 1280 e 2 no mobile.
 * O mínimo é 232px (e não 220px) porque, com gap de 24px e a barra de rolagem do Windows,
 * 220px já cabem 5 colunas em 1280. Cards de cada linha têm a mesma altura (stretch).
 */
.grade-anuncios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.grade-anuncios > li {
  min-width: 0;
}

.card {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--superficie);
  transition: box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: var(--sombra-card);
}

.card:has(.card__link:focus-visible),
.card--destaque:has(.card__link:focus-visible) {
  outline: 2px solid var(--oliva-700);
  outline-offset: 2px;
}

.card--destaque {
  /* contorno por dentro, desenhado por cima da ilustração, como na prancha */
  outline: 2px solid var(--areia-400);
  outline-offset: -2px;
}

/* Mídia */
.card__midia {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--superficie-sutil);
}

.ilustracao {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card__etiqueta {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.card__medida {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: 3px var(--space-2);
  border-radius: 6px;
  background: var(--superficie);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--grafite-900);
}

.card--destaque .card__medida {
  bottom: var(--alvo-toque);
}

.card__faixa-destaque {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-3);
  background: var(--areia-100);
  color: var(--areia-800);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

.card__faixa-destaque .fraco {
  font-weight: 500;
}

/* Etiquetas Venda / Doação / Troca */
.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.etiqueta--venda { background: var(--oliva-100); color: var(--oliva-800); }
.etiqueta--doacao { background: var(--terracota-100); color: var(--terracota-700); }
.etiqueta--troca { background: var(--areia-100); color: var(--areia-800); }

/* Favoritar */
.favoritar {
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--superficie);
  color: var(--grafite-700);
  transition: background-color 0.15s ease;
}

.favoritar:hover {
  background: var(--superficie-sutil);
}

.favoritar[aria-pressed="true"] {
  color: var(--terracota-500);
}

.favoritar[aria-pressed="true"] .icone {
  fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .favoritar[aria-pressed="true"] .icone {
    animation: pulsar 0.25s ease-out;
  }
}

@keyframes pulsar {
  50% { transform: scale(1.2); }
}

/* Corpo */
.card__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.card__linha-preco {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.card__preco {
  font-family: var(--fonte-display);
  font-size: var(--preco-tamanho);
  line-height: var(--preco-linha);
  font-weight: var(--preco-peso);
  white-space: nowrap;
}

.card__preco--venda { color: var(--terracota-500); }
.card__preco--doacao { color: var(--oliva-700); }
.card__preco--troca { color: var(--grafite-900); }

.card__tempo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--legenda-tamanho);
  line-height: var(--legenda-linha);
  font-weight: var(--legenda-peso);
  color: var(--grafite-500);
  white-space: nowrap;
}

.card__titulo {
  height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--fonte-display);
  font-size: var(--titulo-card-tamanho);
  line-height: var(--titulo-card-linha);
  font-weight: var(--titulo-card-peso);
  color: var(--grafite-900);
}

.card__link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

/* O card inteiro é clicável pelo link do título */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__link:hover,
.card:hover .card__link {
  color: inherit;
  text-decoration: underline;
}

.card__link:focus-visible {
  outline: none;
}

.card__local {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--legenda-tamanho);
  line-height: var(--legenda-linha);
  font-weight: var(--legenda-peso);
  color: var(--grafite-500);
}

.card__bairro {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__tempo-rodape {
  display: none;
}

/* Ficha técnica (também usada no outlet) */
.ficha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

/* No card a largura de cada atributo acompanha o conteúdo, para não cortar "Cerâmica" em cards estreitos */
.ficha--card {
  grid-template-columns: repeat(3, minmax(0, auto));
}

.ficha__item {
  min-width: 0;
  padding: var(--space-2) 0 var(--space-2) 10px;
  border-left: 1px solid var(--linha);
}

.ficha__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.ficha dt {
  font-family: var(--fonte-mono);
  font-size: var(--medida-rotulo-tamanho);
  line-height: var(--medida-rotulo-linha);
  font-weight: var(--medida-rotulo-peso);
  letter-spacing: var(--medida-rotulo-espacamento);
  text-transform: uppercase;
  color: var(--grafite-500);
}

.ficha dd {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fonte-mono);
  font-size: var(--medida-tamanho);
  line-height: var(--medida-linha);
  font-weight: 600;
  color: var(--grafite-900);
}

/* Card compacto (mobile) */
@media (max-width: 767.98px) {
  .secao--anuncios {
    padding-top: var(--space-4);
  }

  .secao__cabecalho--anuncios {
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-3);
  }

  .secao__cabecalho--anuncios .chips {
    order: 3;
    flex: 1 0 100%;
  }

  .grade-anuncios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  /* a prancha mobile mostra 6 anúncios antes do "Ver mais" */
  .grade-anuncios > li:nth-child(n + 7) {
    display: none;
  }

  .card__etiqueta {
    top: var(--space-2);
    left: var(--space-2);
  }

  .etiqueta {
    padding: var(--space-1) 10px;
    font-size: 12px;
  }

  .favoritar {
    top: 2px;
    right: 2px;
  }

  .card .card__medida {
    display: none;
  }

  .card__faixa-destaque {
    padding: 6px 10px;
    font-size: 12px;
  }

  .card__faixa-destaque .icone {
    display: none;
  }

  .card__corpo {
    gap: 6px;
    padding: var(--space-3) var(--space-3) 14px;
  }

  .card__linha-preco {
    height: 24px;
  }

  .card__preco {
    font-size: 20px;
    line-height: 24px;
  }

  .card__linha-preco .card__tempo {
    display: none;
  }

  .card__titulo {
    height: 40px;
    font-size: 15px;
    line-height: 20px;
  }

  .ficha--card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 6px;
  }

  .ficha--card .ficha__item {
    padding-block: 0;
    padding-left: var(--space-2);
  }

  .ficha--card .ficha__item:first-child {
    padding-left: 0;
  }

  /* Qtd + Estado: esconde o atributo do meio */
  .ficha--card .ficha__item:nth-child(2) {
    display: none;
  }

  .ficha--card .ficha__item:nth-child(3) {
    border-left: 1px solid var(--linha);
  }

  .card__local {
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
  }

  .card__local .icone,
  .card__distancia {
    display: none;
  }

  .card__bairro {
    flex: 1;
  }

  .card__tempo-rodape {
    display: inline;
    flex: none;
  }
}