/* =========================================================
   UniSST V236 — HOME PÚBLICA ANTES DO LOGIN
   Composição visual contínua: copy + mosaico dinâmico + arte administrativa.
   Escopo estrito: body.public-home-v198.public-guest.

   Regras funcionais V236:
   - mosaico = cursos públicos mais recentes (dinâmico no PHP);
   - imagem lateral = configuração do Administrador;
   - sem rota PHP de imagem e sem Base64;
   - a <img> real é a mídia principal; background-image é apenas fallback;
   - não altera geometria/hover dos cards acadêmicos dos trilhos.
   ========================================================= */

html body.public-home-v198.public-guest .uv198-hero{
  grid-template-columns:minmax(470px,47.5%) minmax(0,52.5%)!important;
  background-color:#000!important;
}
html body.public-home-v198.public-guest .uv198-hero-copy{
  z-index:10!important;
  background-color:#000!important;
  padding-left:clamp(38px,4.25vw,68px)!important;
  padding-right:clamp(26px,2.8vw,46px)!important;
}
html body.public-home-v198.public-guest .uv198-hero-copy:after{
  display:block!important;
  inset:0 clamp(-240px,-14vw,-150px) 0 auto!important;
  width:clamp(220px,18vw,320px)!important;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 25%,rgba(0,0,0,.66) 52%,rgba(0,0,0,.20) 80%,transparent 100%)!important;
}
html body.public-home-v198.public-guest .uv198-hero-copy h1{
  max-width:13.5ch!important;
  font-size:clamp(44px,4.05vw,64px)!important;
  line-height:1.02!important;
  letter-spacing:-.036em!important;
}
html body.public-home-v198.public-guest .uv198-hero-lead,
html body.public-home-v198.public-guest .uv198-hero-note{max-width:620px!important}
html body.public-home-v198.public-guest .uv198-hero-cta{width:min(310px,100%)!important}
html body.public-home-v198.public-guest .uv198-hero-button{border-radius:8px!important;font-weight:800!important}

/* Um único campo visual: o mosaico fica sobre a borda esquerda da arte e a
   arte continua até a borda direita. A sobreposição curta elimina a faixa
   preta que aparecia entre as duas partes. */
html body.public-home-v198.public-guest .uv198-hero-visual{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background-color:#030303!important;
}
html body.public-home-v198.public-guest .uv198-mosaic{
  position:absolute!important;
  z-index:3!important;
  inset:0 auto 0 0!important;
  width:40.5%!important;
  height:100%!important;
  padding:14px 9px 14px 0!important;
  gap:8px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(4,minmax(0,1fr))!important;
  opacity:.92!important;
}
html body.public-home-v198.public-guest .uv198-mosaic-card{
  filter:saturate(.94) brightness(.80) contrast(1.03)!important;
  border-radius:5px!important;
}
html body.public-home-v198.public-guest .uv198-mosaic-card:hover{
  filter:saturate(1) brightness(.94) contrast(1.03)!important;
}

html body.public-home-v198.public-guest .uv198-feature{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  z-index:1!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:38.5%!important;
  width:auto!important;
  height:auto!important;
  transform:none!important;
  background-color:#030303!important;
  background-image:var(--uv236-feature-fallback),var(--uv236-feature-emergency)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center 38%!important;
}
html body.public-home-v198.public-guest .uv198-feature > .uv202-feature-image{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 38%!important;
  transform:none!important;
  filter:saturate(1.03) brightness(.98) contrast(1.03)!important;
}
html body.public-home-v198.public-guest .uv198-feature > .uv202-feature-image[hidden]{display:none!important}
html body.public-home-v198.public-guest .uv198-feature::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.28) 10%,rgba(0,0,0,.08) 23%,transparent 39%),
    linear-gradient(0deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.07) 30%,transparent 55%)!important;
}
html body.public-home-v198.public-guest .uv198-feature-shade{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  pointer-events:none!important;
  box-shadow:inset 0 0 64px rgba(0,0,0,.08)!important;
}
html body.public-home-v198.public-guest .uv198-feature-link{z-index:4!important}
html body.public-home-v198.public-guest .uv198-hero-fade{
  z-index:8!important;
  width:22%!important;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 24%,rgba(0,0,0,.40) 63%,transparent 100%)!important;
}

@media (max-width:1260px){
  html body.public-home-v198.public-guest .uv198-hero{grid-template-columns:48% 52%!important}
  html body.public-home-v198.public-guest .uv198-mosaic{width:41.5%!important;gap:7px!important}
  html body.public-home-v198.public-guest .uv198-feature{left:39.5%!important}
  html body.public-home-v198.public-guest .uv198-feature > .uv202-feature-image{object-position:center 36%!important}
}
@media (max-width:1050px){
  html body.public-home-v198.public-guest .uv198-hero{grid-template-columns:47% 53%!important}
  html body.public-home-v198.public-guest .uv198-mosaic{width:42.5%!important}
  html body.public-home-v198.public-guest .uv198-feature{left:40.5%!important}
  html body.public-home-v198.public-guest .uv198-hero-fade{width:18%!important}
}

/* Mobile: mantém a identidade pública separada da Home autenticada. O mosaico
   é ocultado apenas nesta primeira dobra para não esmagar miniaturas; a imagem
   configurada pelo Administrador assume o campo visual inteiro. */
@media (max-width:899px){
  html body.public-home-v198.public-guest .uv198-hero{display:flex!important;flex-direction:column!important}
  html body.public-home-v198.public-guest .uv198-hero-visual{
    order:1!important;
    height:clamp(360px,63vw,520px)!important;
    min-height:360px!important;
    background-color:#030303!important;
  }
  html body.public-home-v198.public-guest .uv198-mosaic{display:none!important}
  html body.public-home-v198.public-guest .uv198-feature{left:0!important}
  html body.public-home-v198.public-guest .uv198-feature > .uv202-feature-image{object-position:center 31%!important}
  html body.public-home-v198.public-guest .uv198-hero-fade{
    inset:auto 0 0 0!important;
    width:100%!important;
    height:42%!important;
    background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.62) 42%,transparent 100%)!important;
  }
  html body.public-home-v198.public-guest .uv198-hero-copy{order:2!important;padding-top:34px!important}
  html body.public-home-v198.public-guest .uv198-hero-copy:after{display:none!important}
}
@media (max-width:520px){
  html body.public-home-v198.public-guest .uv198-hero-visual{height:390px!important;min-height:390px!important}
  html body.public-home-v198.public-guest .uv198-feature > .uv202-feature-image{object-position:center 29%!important}
  html body.public-home-v198.public-guest .uv198-hero-copy h1{max-width:12ch!important;font-size:clamp(36px,10.8vw,48px)!important}
}