/* ============================================================
   Padrão de exibição das imagens do catálogo

   Este arquivo é carregado DEPOIS de styles.css e nav-responsive.css.
   Ele existe para manter as fotos de produto grandes o bastante em todos
   os breakpoints, independentemente de ajustes futuros na grade geral.

   Guardrails visuais correspondentes: tests/ui-smoke.spec.mjs
   Documentação: docs/QUALIDADE-DE-IMAGENS.md
   ============================================================ */

/* Desktop: no máximo 3 cards por linha. Quatro colunas deixavam as fotos
   pequenas demais, especialmente em telas de notebook. Isto limita somente
   cards lado a lado — nunca a quantidade de fotos dentro de um produto. */
@media (min-width: 981px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 24px;
  }
}

/* Tablet: duas colunas preservam leitura da embalagem e textura. */
@media (min-width: 561px) and (max-width: 980px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }
}

/* Celular: uma foto por linha. A prioridade aqui é conseguir enxergar o
   produto sem precisar abrir a ficha só para identificar a embalagem. */
@media (max-width: 560px) {
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}

/* Artes de produtos cadastrados pelo fluxo novo costumam conter texto e não
   podem ser recortadas como uma foto comum. Mostra a arte inteira no card. */
.catalog-card-photo[src*="brand_assets/product_images/catalog/"] {
  object-fit: contain;
  background: #ffffff;
}

/* A ficha de produto também precisa priorizar a imagem. O painel antigo tinha
   max-width de 980px e dividia quase 50/50, o que deixava a foto pequena mesmo
   em desktop largo. */
@media (min-width: 860px) {
  .product-detail-panel {
    max-width: 1180px;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  }

  .product-detail-media {
    min-width: 0;
  }
}

/* Desktop: rails não ampliam a imagem no hover. O feedback fica restrito a um
   deslocamento mínimo do card, evitando o zoom agressivo herdado de styles.css
   e do owner desktop posterior. */
@media (min-width: 1100px) {
  .rail-card-open:hover,
  .serv-catalog-card:hover {
    transform: translateY(-1px) !important;
  }

  .rail-card-open:hover .rail-card-photo,
  .serv-catalog-card:hover .serv-catalog-photo {
    transform: none !important;
  }
}

/* Um produto pode ter qualquer quantidade de fotos. Quando houver muitos
   indicadores, eles continuam todos disponíveis numa faixa horizontal em vez
   de serem cortados, comprimidos ou removidos. */
.img-carousel-dots {
  left: 50%;
  right: auto;
  width: max-content;
  max-width: min(72%, 560px);
  justify-content: flex-start;
  transform: translateX(-50%);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.img-carousel-dots::-webkit-scrollbar {
  display: none;
}