/*
 * adplay-custom.css
 * Sobrescritas do design Webflow para comportamento mobile correto.
 * Nunca edite o neuralflow.shared.css diretamente — use este arquivo.
 */

/* ==========================================================================
   IMAGENS DE PRODUTOS — Proporção Mobile Quadrada
   Problema: .image-wrapper.br-small.height-686px tem altura fixa em px,
   cortando as imagens horizontais no mobile (hero landscape).
   Solução: No mobile (<= 479px), trocar height fixo por aspect-ratio
   quadrado (1/1) para mostrar a imagem completa e centralizada.
   ========================================================================== */

@media screen and (max-width: 479px) {
  /* Slider de produtos na Home (Nossos Totens) */
  .image-wrapper.br-small.height-686px {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Grid das linhas de produto (seção Soluções / hero-v5 e similares) */
  .image-wrapper.br-small:where(.w-variant-6077e2ee-590d-f058-4b91-dd90cacfa999),
  .image-wrapper.br-small:where(.w-variant-c66a9a56-b309-a6fc-3884-b14d9d9e08a4) {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Garante que a imagem sempre cubra o container e centralize no produto */
  .image-wrapper img.fit-cover,
  .image-wrapper .image.fit-cover {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    position: absolute !important;
    inset: 0;
  }

  /* Wrapper precisa de position relative para o img absolute funcionar */
  .image-wrapper.br-small.height-686px,
  .image-wrapper.br-small:where(.w-variant-6077e2ee-590d-f058-4b91-dd90cacfa999),
  .image-wrapper.br-small:where(.w-variant-c66a9a56-b309-a6fc-3884-b14d9d9e08a4) {
    position: relative !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   IMAGENS DE PRODUTOS — Tablet (479px - 767px)
   Em tablet também melhora: reduz altura para aspecto 4/3 mais generoso
   ========================================================================== */

@media screen and (min-width: 480px) and (max-width: 767px) {
  .image-wrapper.br-small.height-686px {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .image-wrapper img.fit-cover,
  .image-wrapper .image.fit-cover {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    position: absolute !important;
    inset: 0;
  }
}