/* Composição responsiva do cabeçalho personalizado por comunidade. */

/* A topbar interna nunca reutiliza a arte panorâmica do portal. */
.app-page .halloween-topbar{
  background:
    radial-gradient(circle at 16% 10%,color-mix(in srgb,var(--hn-community-accent) 15%,transparent),transparent 28%),
    linear-gradient(180deg,color-mix(in srgb,var(--hn-community-bg) 94%,#000) 0%,color-mix(in srgb,var(--hn-community-surface) 94%,#000) 100%)!important;
  background-image:
    radial-gradient(circle at 16% 10%,color-mix(in srgb,var(--hn-community-accent) 15%,transparent),transparent 28%),
    linear-gradient(180deg,color-mix(in srgb,var(--hn-community-bg) 94%,#000) 0%,color-mix(in srgb,var(--hn-community-surface) 94%,#000) 100%)!important;
}

/* Só muda o hero comunitário quando realmente existe imagem personalizada. */
.community-brand-hero.has-header-image{
  min-height:clamp(240px,42vw,315px);
  padding:24px 26px;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(3,8,14,.82) 0%,rgba(3,8,14,.58) 36%,rgba(3,8,14,.16) 68%,rgba(3,8,14,.25) 100%),
    linear-gradient(0deg,rgba(3,8,14,.50) 0%,rgba(3,8,14,.06) 58%,rgba(3,8,14,.16) 100%),
    var(--hn-community-header-image) center 44%/cover no-repeat,
    var(--hn-community-bg)!important;
}
.community-brand-hero.has-header-image:after,
.community-brand-hero.has-header-image .hero-moon,
.community-brand-hero.has-header-image .hero-bats{display:none!important}

.community-brand-hero.has-header-image .brand-lockup{
  position:relative;
  z-index:2;
  width:min(52%,430px);
  max-width:430px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "mark eyebrow"
    "title title"
    "tagline tagline";
  column-gap:10px;
  row-gap:4px;
  align-items:center;
  padding:13px 15px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(3,9,16,.64),rgba(3,9,16,.28));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(2px);
}
.community-brand-hero.has-header-image .portal-community-mark{
  grid-area:mark;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
  border-radius:10px;
  font-size:1.35rem;
  background:rgba(8,18,28,.80);
  border:1px solid rgba(255,255,255,.16);
}
.community-brand-hero.has-header-image .portal-community-mark.has-image{
  padding:3px;
  background:rgba(255,255,255,.94);
}
.community-brand-hero.has-header-image .portal-community-mark img{
  width:100%;height:100%;display:block;object-fit:contain;border-radius:7px;
}
.community-brand-hero.has-header-image .eyebrow{
  grid-area:eyebrow;
  margin:0;
  font-size:.62rem;
  line-height:1.15;
  letter-spacing:.14em;
  color:#f4dfc6;
  text-shadow:0 1px 5px rgba(0,0,0,.72);
}
.community-brand-hero.has-header-image h1{
  grid-area:title;
  max-width:19ch;
  margin:5px 0 2px;
  font-size:clamp(1.55rem,3.6vw,2.35rem)!important;
  line-height:1.02!important;
  letter-spacing:-.035em!important;
  color:color-mix(in srgb,var(--hn-community-accent) 74%,#fff)!important;
  text-shadow:0 2px 10px rgba(0,0,0,.85)!important;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.community-brand-hero.has-header-image p{
  grid-area:tagline;
  max-width:34ch;
  margin:3px 0 0;
  font-size:.86rem;
  line-height:1.38;
  color:#f0f3f6;
  text-shadow:0 2px 8px rgba(0,0,0,.86);
}

@media (max-width:900px){
  .community-brand-hero.has-header-image{
    min-height:270px;
    padding:20px;
    background-position:center 42%;
  }
  .community-brand-hero.has-header-image .brand-lockup{width:min(62%,400px)}
}

@media (max-width:620px){
  .community-brand-hero.has-header-image{
    min-height:255px;
    padding:12px;
    align-items:flex-end;
    /* No celular prioriza mostrar a largura completa da arte e usa a área escura inferior para o texto. */
    background:
      linear-gradient(180deg,rgba(3,8,14,.04) 0%,rgba(3,8,14,.08) 48%,rgba(3,8,14,.88) 82%,rgba(3,8,14,.96) 100%),
      var(--hn-community-header-image) center top/100% auto no-repeat,
      var(--hn-community-bg)!important;
  }
  .community-brand-hero.has-header-image .brand-lockup{
    width:100%;
    max-width:100%;
    padding:10px 11px 11px;
    border-radius:13px;
    background:linear-gradient(135deg,rgba(3,9,16,.54),rgba(3,9,16,.18));
  }
  .community-brand-hero.has-header-image .portal-community-mark{width:34px;height:34px;border-radius:8px;font-size:1.1rem}
  .community-brand-hero.has-header-image .eyebrow{font-size:.55rem;letter-spacing:.12em}
  .community-brand-hero.has-header-image h1{
    max-width:24ch;
    margin-top:3px;
    font-size:clamp(1.25rem,6.2vw,1.65rem)!important;
    line-height:1.04!important;
  }
  .community-brand-hero.has-header-image p{max-width:38ch;font-size:.72rem;line-height:1.34}
}

@media (max-width:390px){
  .community-brand-hero.has-header-image{min-height:238px;padding:10px}
  .community-brand-hero.has-header-image .brand-lockup{padding:9px 10px}
  .community-brand-hero.has-header-image h1{font-size:1.22rem!important}
  .community-brand-hero.has-header-image p{font-size:.68rem}
}