/* Achado 14 (Menor) da auditoria de SEO (Specs/2026-07-19-seo-correcoes-auditoria):
   imagens responsivas (w-100/img-fluid) sem altura reservada causam CLS — o navegador
   só sabe a altura real depois que a imagem carrega, empurrando o conteúdo abaixo.
   aspect-ratio reserva o espaço antes do carregamento, mesmo com dimensões de arquivo
   variáveis (banners/capas de post são upload livre, sem crop obrigatório no admin). */
/* Achado do usuario (2026-07-26): no mobile, o banner nao encolhia mais pra caber na tela --
   ficava ~600px de altura (o valor literal do atributo HTML height="600" do <img>, ver
   home.blade.php) em vez de respeitar a proporcao 21:9 pela largura real da tela. Causa: o
   <img> do banner tem os atributos HTML width/height (adicionados pro CLS, commit 4a5255c)
   mas NAO tem a classe "img-fluid" do Bootstrap (que da "height:auto") -- so tem "w-100"
   (so largura). Por spec de CSS Sizing, aspect-ratio so entra em acao quando pelo menos uma
   dimensao fica "auto"; com width:100% (CSS) E height:600px (do atributo HTML, que vira
   estilo do user-agent) as duas ficam definidas, entao aspect-ratio nunca tinha efeito nenhum.
   As outras classes deste arquivo (.card-produto-img, .blog-capa-img) nao tem esse problema
   porque os templates delas usam "img-fluid" (que ja tem height:auto do proprio Bootstrap). */
.banner-carrossel-img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
    height: auto;
}

.produto-carrossel-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Pedido do usuário (2026-07-22): imagem principal do produto (desktop, dentro de
   .produto-zoom-container) era a única imagem de produto sem tamanho padrão — img-fluid
   w-100 sozinho deixa a altura variar conforme a proporção do arquivo enviado (retrato,
   paisagem etc.), inconsistente com o carrossel mobile e as miniaturas ao lado, que já são
   quadrados fixos. Correção seguinte (mesmo dia): "cover" recorta a imagem ANTES do zoom
   (zoom-produto.js só aplica transform:scale em cima do que já ficou visível na caixa) —
   o usuário nunca via as partes cortadas, nem passando o mouse. "contain" mostra a foto
   inteira dentro da mesma caixa 1:1 (com faixas quando a proporção não bate), garantindo
   que o zoom revele a imagem completa. Fundo claro (ver .produto-zoom-container abaixo)
   preenche as faixas sem parecer quebrado. */
#produto-imagem-principal {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.blog-capa-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Achado da revisao de SEO seguinte: card de produto (_card-produto.blade.php) e a imagem
   mais repetida do site (home Destaques + Lancamentos + catalogo inteiro) e era a unica sem
   guard de CLS, mesmo o fallback sem foto ja usando aspect-ratio 1/1 inline (linha 20 do
   card) -- essa classe cobre a foto real tambem, com a mesma proporcao. */
.card-produto-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}