/*
 * A foto do material.
 *
 * O tamanho vem do JavaScript (a lista usa 36, a conferência 40, a ficha 52),
 * porque quem decide quanto a imagem pesa na linha é a tela que a chama. Aqui
 * fica só o que é igual em todas: a moldura, o recorte e o alinhamento com o
 * texto ao lado.
 *
 * `object-fit: cover` é a decisão que faz isso funcionar sem ninguém editar
 * foto: a construtora vai fotografar a prateleira com o celular, em retrato e
 * em paisagem, e o quadrado recorta o centro. Uma imagem que muda de proporção
 * de linha para linha desalinha a coluna inteira — e é o alinhamento que deixa
 * o olho varrer trinta materiais.
 */

.foto-insumo {
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--cinza-suave);
  border: 1px solid var(--linha);
}

/* Sem foto ainda: o mesmo quadro, apagado. Não é buraco — espaço vazio faria
   as linhas com e sem foto desalinharem justamente na coluna do nome. */
.foto-insumo-vazia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-3);
  background: var(--cartao-2);
  border-style: dashed;
}

.insumo-com-foto {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
  width: 100%;
}
/* O texto encolhe, a foto não: é o nome que ganha reticências. */
.insumo-texto { min-width: 0; flex: 1; }
.insumo-texto h3 { margin: 0; }

/* Dentro de um botão de célula, o padding do link não pode empurrar a foto. */
button.insumo-com-foto { background: none; border: 0; padding: 0; cursor: pointer; }

.foto-insumo-bloco {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  background: var(--cartao-2);
}
.foto-insumo-ficha {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--cinza-suave);
  border: 1px solid var(--linha);
}
.foto-insumo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.foto-insumo-acoes .ajuda { flex-basis: 100%; margin: 0; }

/*
 * A foto ampliada — o gesto da conferência.
 *
 * Limitada pela altura da tela, e não pela largura: a foto de prateleira sai
 * em retrato no celular, e uma imagem que estoura a janela obriga a rolar
 * justamente quando a pessoa está comparando com a caixa na mão.
 */
.foto-insumo-grande {
  display: flex;
  justify-content: center;
}
.foto-insumo-grande img {
  max-width: 100%;
  max-height: min(60vh, 520px);
  border-radius: var(--r-md);
  object-fit: contain;
}