/* CASA CASINHA — LISTA
   Catálogo editorial: número grande, recorte, nome, ficha técnica
   datilografada. Nenhuma grade de e-commerce. */

.abertura{ padding-top:var(--cc-s4); }
.abertura .titulo{ margin-top:var(--cc-s1); }

/* ------------------------------------------------------------ filtros */

.filtros{ margin-top:var(--cc-s5); border-top:2px solid var(--cc-ink); }

.filtros__topo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--cc-s2);
  padding-top:var(--cc-s1);
}
.filtros__abrir{
  display:flex; align-items:center; gap:9px;
  min-height:44px;
  font-family:var(--cc-font-display); font-weight:700;
  font-size:19px;
}
.filtros__abrir .gesto--seta{ transform:rotate(90deg); transition:transform .22s var(--cc-ease); }
.filtros[data-aberta] .filtros__abrir .gesto--seta{ transform:rotate(-90deg); }
.filtros__conta{ margin:0; color:var(--cc-ink-60); white-space:nowrap; }

.filtros__corpo{
  max-height:0; overflow:hidden;
  transition:max-height .3s var(--cc-ease);
}
.filtros[data-aberta] .filtros__corpo{ max-height:640px; }

.filtros__grupo{ padding-top:var(--cc-s2); }
.filtros__grupo .rotulo{ margin:0 0 6px; }
.filtros__fila{
  display:flex; gap:6px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}
.filtros__fila::-webkit-scrollbar{ display:none; }
.filtros__fila .arquivo{ flex:none; }
.filtros__limpar{ margin:var(--cc-s3) 0 var(--cc-s2); border-color:var(--cc-red); color:var(--cc-red); }

/* -------------------------------------------------------------- lista */
/* Fileiras de quatro. É grade, sim — mas grade de índice ilustrado, não
   de vitrine: sem cartão, sem sombra, sem borda em volta da peça. O que
   organiza é a régua horizontal e o número, como numa prancha numerada. */

.lista{
  list-style:none;
  margin:var(--cc-s5) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--cc-s4) var(--cc-s3);
  border-top:2px solid var(--cc-ink);
  padding-top:var(--cc-s4);
}

.linha{
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
}

.item{
  display:flex; flex-direction:column;
  align-items:stretch;
  gap:var(--cc-s2);
  width:100%; min-width:0;
  padding:0 0 var(--cc-s1);
  text-align:left;
  flex:1;
}

/* A CAIXA DA PEÇA
   Aqui morava o defeito: a foto recortada é `width:100%; height:auto`,
   então uma tábua alta e estreita virava uma imagem de trezentos pixels
   de altura que atravessava a linha de baixo. A caixa agora tem altura
   fixa e a imagem se ajusta DENTRO dela — nunca o contrário. */
.item__peca{
  display:grid; place-items:end center;
  height:150px;
  overflow:hidden;
}
.item__peca .desenho,
.item__peca .peca-foto{
  max-height:150px; max-width:100%;
  width:auto; height:auto;
  object-fit:contain; object-position:center bottom;
}
/* o lugar-vazio é uma área, não uma imagem: preenche a caixa */
.item__peca .peca-foto--pendente{
  width:100%; height:100%;
  max-height:150px;
  align-self:stretch;
}

.item__texto{ display:block; min-width:0; }
.item__num{
  display:block;
  font-family:var(--cc-font-display); font-weight:700;
  font-size:24px; line-height:1;
  color:var(--cc-green);
}
.item__nome{
  display:block;
  font-family:var(--cc-font-display); font-weight:600;
  font-size:17px; line-height:1.18;
  margin-top:4px;
  overflow-wrap:anywhere;
}
.item__ficha{
  display:block;
  font-family:var(--cc-font-mono); font-size:11px;
  line-height:1.7;
  color:var(--cc-ink-60);
  margin-top:5px;
  overflow-wrap:anywhere;
}
.item__preco{ color:var(--cc-red); }
/* preço que não existe não merece o vermelho do preço que existe */
.item__preco--vago{ color:var(--cc-ink-40); }

.item:hover .item__nome{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

.lista__vazia{ padding:var(--cc-s5) 0; color:var(--cc-ink-60); }

.lista__mais{
  display:block;
  margin:var(--cc-s4) auto 0;
  border-top:2px solid var(--cc-ink);
  padding-top:var(--cc-s3);
  width:100%;
  text-align:center;
}

@media (min-width:560px){
  .lista{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width:860px){
  main.faixa{ max-width:1080px; margin:0 auto; }
  .abertura .texto{ max-width:620px; }
  .lista{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--cc-s5) var(--cc-s3);
  }
  .item__peca{ height:190px; }
  .item__peca .desenho,
  .item__peca .peca-foto{ max-height:190px; }
  .item__peca .peca-foto--pendente{ max-height:190px; }
  .item__num{ font-size:30px; }
  .item__nome{ font-size:19px; }
}