/* Site VilaVerona — CSS unificado (2025-09-19)
   Foco: reduzir "troca de layout" (CLS) por imagens sem dimensões e melhorar performance.
   Mantém o visual, só adiciona boas práticas.
*/

/* 1) Normalização leve */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* 2) Evitar CLS de imagens: quando width/height forem definidos no HTML, essa regra mantém a proporção */
img[width][height] { height: auto; }

/* 3) Classe utilitária para imagens fluidas */
.img-fluid { max-width: 100%; height: auto; }

/* 4) Pré-carregamento suave de fontes evita FOIT/FOUT excessivo (não embutido aqui) */

/* 5) Lazy loading & comportamento */
.lazy { content-visibility: auto; }

/* 6) Containers com aspecto fixo opcional (para casos específicos) */
/* Exemplo de uso: <div class="ratio" style="--ratio:16/9"><img ...></div> */
.ratio { position: relative; width: 100%; }
.ratio::before { content: ""; display: block; padding-top: calc(100% / (var(--ratio))); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 7) Correções sutis de links e botões (sem alterar o layout visual existente) */
a { text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px dashed #555; outline-offset: 2px; }

/* 8) Imagens decorativas opcionais podem receber role="presentation" no HTML */