/* ============================================================================
   FR HERO TYPOGRAPHY & LAYOUT NORMALIZATION
   Data: 2025-09-28
   Escopo: Heros (UAGB Section + Info Box) marcados com .fr-hero OU já com .fr-ios-hero-fix
   Objetivos:
     1. Evitar quebra letra‑a‑letra / colunas estreitas em iOS Safari
     2. Tipografia fluida (clamp) com limites seguros por faixa (mobile / tablet / desktop)
     3. Limitar largura de linha (legibilidade 16–22ch)
     4. Remover efeitos herdados que induzem quebras (display inline-block, word-break agressivo)
     5. Neutralizar <strong> dentro de H1/H3 para não alterar métricas (peso apenas)
     6. Suporte a text-wrap: balance com polyfill JS opcional (.fr-hero-balance-done)
     7. Evitar sobreposição com FAB (padding-bottom + safe-area)
     8. Eliminar imagem fantasma width="0" do UAGB ou escondê-la para prevenir layout shift
   ============================================================================ */

/* Escopo base do hero: classes utilitárias aplicadas diretamente no <section> hero */

/* Normalização estrutural mínima */
.fr-hero { 
  position: relative; 
  overflow: hidden; /* garante que overscroll não mostre artefatos */
  padding-top: min(18vh, 140px); /* espaço respirável sob header transparente */
  padding-bottom: clamp(2.5rem, 6vh, 5rem); /* base */
  padding-bottom: calc(clamp(2.5rem, 6vh, 5rem) + env(safe-area-inset-bottom)); /* respeita notch/bottom bar iOS */
}

/* Container interno UAGB costuma ser .uagb-section__inner-wrap; garantir centralização do conteúdo textual */
.fr-hero .uagb-section__inner-wrap, 
.fr-hero .uagb-ifb-content { 
  max-width: 72rem; 
  margin-left: auto; 
  margin-right: auto; 
  text-align: center; 
}

/* Variáveis base para tipografia fluida ---------------------------------------------- */
.fr-hero { 
  --hero-fs-min: 28px; 
  --hero-fs-preferred: 6vw; 
  --hero-fs-max: 48px; 
  --hero-measure: 22ch; 
  --hero-line-height: 1.12; 
  --fs-scale: 1; /* multiplicador dinâmico aplicado via JS para auto-fit */
  /* Aliases genéricos solicitados */
  --fs-min: var(--hero-fs-min);
  --fs-preferred: var(--hero-fs-preferred);
  --fs-max: var(--hero-fs-max);
  --measure: var(--hero-measure);
}
@media (min-width: 600px) { 
  .fr-hero { 
    --hero-fs-min: 36px; 
    --hero-fs-preferred: 5vw; 
    --hero-fs-max: 64px; 
    --hero-line-height: 1.1; 
  --fs-scale: 1;
  --fs-min: var(--hero-fs-min);
  --fs-preferred: var(--hero-fs-preferred);
  --fs-max: var(--hero-fs-max);
  }
}
@media (min-width: 1024px) { 
  .fr-hero { 
    --hero-fs-min: 42px; 
    --hero-fs-preferred: 4vw; 
    --hero-fs-max: 72px; 
    --hero-line-height: 1.08; 
  --fs-scale: 1;
  --fs-min: var(--hero-fs-min);
  --fs-preferred: var(--hero-fs-preferred);
  --fs-max: var(--hero-fs-max);
  }
}
@media (min-width: 1920px) { 
  .fr-hero { 
    --hero-fs-min: 48px; 
    --hero-fs-preferred: 3.2vw; 
    --hero-fs-max: 78px; 
  --fs-scale: 1;
  --fs-min: var(--hero-fs-min);
  --fs-preferred: var(--hero-fs-preferred);
  --fs-max: var(--hero-fs-max);
  }
}

/* TÍTULOS (H1/H3 dentro do Info Box) usam clamp parametrizado ------------------------ */
.fr-hero .uagb-ifb-title { 
  /* clamp com multiplicador escalável em tempo real (JS ajusta --fs-scale) — agora também reduz o mínimo
    !important para sobrepor inline style do UAGB que fixa font-size grande */
  font-size: clamp(calc(var(--fs-min) * var(--fs-scale)), calc(var(--fs-preferred) * var(--fs-scale)), calc(var(--fs-max) * var(--fs-scale))) !important;
  line-height: var(--hero-line-height); 
  letter-spacing: 0; 
  font-weight: 600; 
  white-space: normal !important; 
  word-break: keep-all !important; 
  overflow-wrap: normal !important; 
  hyphens: none !important; 
  text-wrap: balance; 
  -webkit-hyphens: none !important; 
  -ms-hyphens: none !important; 
  max-width: var(--hero-measure); 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 0; 
  margin-bottom: clamp(0.75rem, 1.2vh, 1.4rem); 
  display: block; 
}

/* Modo apertado para títulos longos --------------------------------------------------- */
.fr-hero.fr-hero--tight { 
  --hero-fs-preferred: calc(var(--hero-fs-preferred) * 0.88); 
  --hero-fs-max: calc(var(--hero-fs-max) * 0.88); 
  --hero-measure: 20ch; 
  /* manter aliases sincronizados */
  --fs-preferred: var(--hero-fs-preferred);
  --fs-max: var(--hero-fs-max);
  --measure: var(--hero-measure);
  /* escala adicional pode ser aplicada via JS além desta redução estrutural */
}
/* Ajuste opcional do line-height se título ocupar muitas linhas */
.fr-hero.fr-hero--tight .uagb-ifb-title { line-height: calc(var(--hero-line-height) + 0.01); }

/* Modo ainda mais apertado (fallback extremo) ----------------------------------------- */
.fr-hero.fr-hero--tighter { 
  --hero-fs-preferred: calc(var(--hero-fs-preferred) * 0.80); 
  --hero-fs-max: calc(var(--hero-fs-max) * 0.80); 
  --hero-measure: 18ch; 
  --fs-preferred: var(--hero-fs-preferred);
  --fs-max: var(--hero-fs-max);
  --measure: var(--hero-measure);
  /* permite chegar a casos extremos sem quebrar palavras */
}
.fr-hero.fr-hero--tighter .uagb-ifb-title { line-height: calc(var(--hero-line-height) + 0.03); }

/* Neutralizar <strong> sem alterar métrica / line-box */
.fr-hero .uagb-ifb-title strong { 
  font-weight: inherit; 
  letter-spacing: inherit; 
}

/* Força consistência se editor aplicar transformações inline (uppercase) */
.fr-hero .uagb-ifb-title { text-transform: none; }
.fr-hero .uagb-ifb-title[data-text-transform="uppercase"],
.fr-hero .uagb-ifb-title[style*="uppercase"] { text-transform: uppercase; letter-spacing: 0.02em; }

/* SUBTÍTULOS / DESCRIÇÃO ---------------------------------------------------------------- */
.fr-hero .uagb-ifb-desc { 
  font-size: clamp(15px, 2.5vw, 20px); 
  line-height: 1.25; 
  max-width: 42ch; 
  margin: 0 auto clamp(1.1rem, 2vh, 1.75rem); 
  word-break: normal; 
  overflow-wrap: anywhere; /* permite quebra segura somente se necessário */
  text-wrap: balance; 
}

/* Separador – manter proporção discreta */
.fr-hero .uagb-ifb-separator, 
.fr-hero .uagb-ifb-separator-parent .uagb-ifb-separator { 
  width: clamp(48px, 12vw, 120px); 
  height: 3px; 
  margin-left: auto; 
  margin-right: auto; 
  margin-bottom: clamp(0.75rem, 1.2vh, 1.25rem); 
  border-radius: 999px; 
  background: currentColor; 
  opacity: .85; 
}

/* IMAGEM FANTASMA width="0" ------------------------------------------------------------ */
/* Se o bloco Info Box injeta um <img width="0"> (gif seta) e ele não compõe visual necessário: ocultar */
.fr-hero .uagb-ifb-image-content img[width="0"],
.fr-hero .uagb-ifb-image-content img[style*="width: 0"],
.fr-hero .uagb-ifb-image-content img[style*="width:0"] { 
  display: none !important; 
  visibility: hidden !important; 
}

/* Caso futuramente precise manter a imagem, substitua as regras acima por dimensionamento estável:
.fr-hero .uagb-ifb-image-content img[width="0"] { width:64px !important; height:auto; aspect-ratio:1/1; }
*/

/* EVITAR OVERLAP COM FAB (WhatsApp) ----------------------------------------------------- */
/* Ajuste adicional se existir um botão flutuante com classe comum (ex.: .whatsapp-fab) */
.fr-hero { 
  --fr-fab-safe: 96px; /* altura reservada quando FAB está presente */
}
body:has(.whatsapp-fab) .fr-hero { 
  padding-bottom: calc(var(--fr-fab-safe) + env(safe-area-inset-bottom)); 
}

/* iOS Safari fallback sem suporte a text-wrap: balance -> forçar max-width menor p/ simular equilíbrio */
@supports not (text-wrap: balance) { 
  .fr-hero .uagb-ifb-title { max-width: 20ch; }
  .fr-hero .uagb-ifb-desc { max-width: 38ch; }
}

/* Quando JS polyfill aplicar balance manual adiciona classe marcador */
.fr-hero .uagb-ifb-title.fr-hero-balanced { opacity: 1; }

/* Acessibilidade visual: garantir contraste do título sobre background com overlay */
.fr-hero .uagb-ifb-title, 
.fr-hero .uagb-ifb-desc { 
  text-shadow: 0 1px 2px rgba(0,0,0,.35); /* sombra sutil para backgrounds variados */
}

/* HARDENING: remover estilos erráticos que às vezes o editor injeta */
.fr-hero .uagb-ifb-title[style*="letter-spacing"],
.fr-hero .uagb-ifb-title[style*="word-break"],
.fr-hero .uagb-ifb-title[style*="overflow-wrap"],
.fr-hero .uagb-ifb-title[style*="hyphens"],
.fr-hero .uagb-ifb-title[style*="white-space"] { 
  letter-spacing: 0 !important; 
  word-break: keep-all !important; 
  overflow-wrap: normal !important; 
  hyphens: none !important; 
  white-space: normal !important; 
}

/* Fallback aplicado via JS quando ainda há overflow após escalas: lock pixel size seguro */
.fr-hero .uagb-ifb-title.fr-hero-fixed-size { 
  font-size: var(--fr-fixed-fs) !important; 
  line-height: var(--fr-fixed-lh, 1.15) !important; 
  max-width: var(--hero-measure); 
}

/* Perf: preferir GPU apenas onde já criamos layer (não replicar aqui) */

/* DEBUG (desativado por padrão) --------------------------------------------------------- */
/* Ative via console: document.documentElement.classList.add('fr-hero-debug') */
.fr-hero-debug .fr-hero .uagb-ifb-title { outline: 2px dashed rgba(255,255,255,.5); outline-offset: 4px; }

/* FIM */