/* Portal LumináriasMG — Design tokens
   Espelha docs/Design-System-v1.0.md. Cor e tipografia de marca (sun/serra/rio/pedra,
   Noto Sans) já existem como Cores/Tipografia Globais no Kit do Elementor — não duplicadas
   aqui para não ter duas fontes de verdade. Este arquivo cobre só o que o Elementor não
   expõe nativamente no editor visual: espaçamento, raio de borda e breakpoints nomeados. */

:root {
  /* Cor — espelho de leitura do Kit Elementor, para uso em CSS puro (templates PHP) */
  --lmg-color-sun: #F2505D;
  --lmg-color-serra: #A69677;
  --lmg-color-rio: #82A199;
  --lmg-color-pedra: #F4A800;
  --lmg-color-text: #1C2626;

  /* Neutros */
  --lmg-neutral-100: #F0F1F2;
  --lmg-neutral-300: #E8E8E8;
  --lmg-neutral-500: #A59A9A;
  --lmg-neutral-700: #3A3A3A;
  --lmg-neutral-900: #2D2D2D;

  /* Estado */
  --lmg-success: #5B8C5A;
  --lmg-warning: #F4A800;
  --lmg-danger: #C24444;

  /* Tipografia */
  --lmg-font-body: 'Noto Sans', sans-serif;
  --lmg-text-xs: 12px;
  --lmg-text-sm: 14px;
  --lmg-text-base: 16px;
  --lmg-text-md: 20px;
  --lmg-text-lg: 25px;
  --lmg-text-xl: 32px;
  --lmg-text-2xl: 40px;
  --lmg-text-3xl: 50px;

  /* Espaçamento */
  --lmg-space-1: 4px;
  --lmg-space-2: 8px;
  --lmg-space-3: 12px;
  --lmg-space-4: 16px;
  --lmg-space-6: 24px;
  --lmg-space-8: 32px;
  --lmg-space-12: 48px;
  --lmg-space-16: 64px;

  /* Raio */
  --lmg-radius-sm: 4px;
  --lmg-radius-md: 8px;

  /* Container */
  --lmg-container-max: 1140px;
}

/* Breakpoints nomeados (Elementor custom, mesmos valores já em produção) — documentados
   aqui como comentário porque CSS não tem variável de media query; usar os valores
   literais abaixo em @media dentro deste arquivo e de qualquer template novo.
   Mobile: até 767px · Tablet: 768–1024px · Laptop: 1025–1366px · Desktop: 1367px+ */

/* Corrige a inconsistência de proporção de imagem nas grades "Explore" (Ver e Fazer,
   Comer e Beber, Onde Ficar, Eventos) — achado da auditoria de 24/08/2026: a mesma
   grade usava 6 proporções de imagem diferentes (300x300, 300x225, 240x300, etc.).
   O widget "Post Grid" do Essential Addons já tem a classe eael-image-ratio pronta pra
   isso, só faltava o CSS. Resolve o problema real sem reescrever as páginas de arquivo
   inteiras (que têm texto editorial único, não reproduzível via ACF/query simples). */
.eael-entry-thumbnail.eael-image-ratio {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--lmg-radius-md);
}
.eael-entry-thumbnail.eael-image-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mesma correção pra grade de Eventos — widget diferente (Loop Eventos do Elementor,
   não Essential Addons), mesmo problema: banners de evento com proporção variável
   (768x320 e 768x432 medidos). 16:9 porque é banner promocional, não foto de paisagem. */
.elementor-element-4fb37f9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--lmg-radius-md);
}
.elementor-element-4fb37f9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}