
/* Mandrake V14 - correção definitiva do bloco superior da home */
:root{
  --mg14-blue:#0057ff;
  --mg14-ink:#071225;
  --mg14-border:#d8e6ff;
  --mg14-shadow:0 12px 30px rgba(15,23,42,.075);
}

/* O bloco de Stories NÃO pode virar banner gigante quando está vazio */
main.mg-main section.mg-story-shell{
  padding-top:.8rem!important;
  margin-top:0!important;
}

main.mg-main section.mg-story-shell .mg-story-card{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  border-radius:1.15rem!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(0,87,255,.14)!important;
  box-shadow:var(--mg14-shadow)!important;
}

/* Se não tiver story ativo, vira uma barra profissional e compacta */
main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact{
  min-height:0!important;
  height:auto!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-empty-inner,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-empty-inner{
  min-height:0!important;
  height:auto!important;
  padding:.72rem .85rem!important;
  display:block!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-empty-inner > div,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-empty-inner > div{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.75rem!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-empty-inner > div > .flex,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-empty-inner > div > .flex{
  min-width:0!important;
  align-items:center!important;
  gap:.65rem!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-logo,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-logo{
  width:2.25rem!important;
  height:2.25rem!important;
  min-width:2.25rem!important;
  border-radius:.78rem!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .brand-pill,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .brand-pill{
  font-size:.58rem!important;
  line-height:1!important;
  padding:.26rem .52rem!important;
  letter-spacing:.075em!important;
  white-space:nowrap!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-title,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-title{
  margin:.18rem 0 0!important;
  font-size:.98rem!important;
  line-height:1.05!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-desc,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-desc,
main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-content-box,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-content-box{
  display:none!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .brand-button,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .brand-button{
  width:auto!important;
  min-width:9.8rem!important;
  min-height:2.45rem!important;
  padding:.68rem 1rem!important;
  border-radius:.9rem!important;
  font-size:.82rem!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  background:var(--mg14-blue)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(0,87,255,.18)!important;
}

/* Remove a marca d'água gigante especificamente no bloco vazio */
main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty::before,
main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty::after,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact::before,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact::after,
main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .absolute,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .absolute{
  display:none!important;
}

main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty.mg-logo-watermark::before,
main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty.mg-logo-watermark::after,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact.mg-logo-watermark::before,
main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact.mg-logo-watermark::after{
  display:none!important;
  content:none!important;
}

/* Quando tiver stories reais, continua bonito, mas com limite de altura */
main.mg-main section.mg-story-shell .mg-story-card:not(.mg-story-card-empty):not(.mg14-story-compact){
  min-height:0!important;
}
main.mg-main section.mg-story-shell .mg-story-card:not(.mg-story-card-empty):not(.mg14-story-compact) .mg-story-empty-inner{
  padding:1rem!important;
}

/* Categorias sobem para perto do topo e ficam alinhadas */
.mg-home-categories{
  margin-top:.65rem!important;
  margin-bottom:1.15rem!important;
}

/* Desktop grande: nada de banner vazio no meio da página */
@media (min-width:1280px){
  main.mg-main{
    padding-top:5.2rem!important;
  }
  main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-empty-inner,
  main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-empty-inner{
    padding:.78rem 1rem!important;
  }
}

/* Mobile: card vira bloco vertical curto, sem ocupar a tela inteira */
@media (max-width:640px){
  main.mg-main{
    padding-top:4.25rem!important;
  }

  main.mg-main section.mg-story-shell .mg-story-card{
    border-radius:1rem!important;
  }

  main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-empty-inner,
  main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-empty-inner{
    padding:.78rem!important;
  }

  main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .mg-story-empty-inner > div,
  main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .mg-story-empty-inner > div{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:.7rem!important;
  }

  main.mg-main section.mg-story-shell .mg-story-card.mg-story-card-empty .brand-button,
  main.mg-main section.mg-story-shell .mg-story-card.mg14-story-compact .brand-button{
    width:100%!important;
    min-width:0!important;
    min-height:2.6rem!important;
  }

  .mg-home-categories{
    margin-top:.55rem!important;
  }
}
