/* ==========================================================
   LAYOUT DOS MASCOTES V6
   Ajuste solicitado:
   - Nos painéis individuais dos times, o hero deve ter APENAS UMA caixa:
     a própria caixa principal com imagem de fundo.
   - O texto fica por cima da imagem, sem um segundo card interno.
   - Imagem centralizada e ajustada.
   - Mantém os cards de destaque dos times sem imagem,
     como já estava na V5.
   ========================================================== */

/* ----------------------------------------------------------
   HERO DOS TIMES: uma única caixa com imagem de fundo
   ---------------------------------------------------------- */

body[data-scope="team01"] .hero-panel,
body[data-scope="team02"] .hero-panel,
body[data-scope="team09"] .hero-panel {
  position: relative !important;
  isolation: isolate;
  display: block !important;
  min-height: clamp(520px, 42vw, 620px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #070b14 !important;
}

body[data-scope="team01"] .hero-image-stage,
body[data-scope="team02"] .hero-image-stage,
body[data-scope="team09"] .hero-image-stage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #070b14 !important;
}

/* imagem centralizada e ajustada */
body[data-scope="team01"] .hero-backdrop-image,
body[data-scope="team02"] .hero-backdrop-image,
body[data-scope="team09"] .hero-backdrop-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: brightness(.62) saturate(.96) !important;
  transform: none !important;
}

/* blur discreto para preencher e enriquecer o fundo */
body[data-scope="team01"] .hero-backdrop-blur,
body[data-scope="team02"] .hero-backdrop-blur,
body[data-scope="team09"] .hero-backdrop-blur {
  position: absolute !important;
  inset: -5% !important;
  width: 110% !important;
  height: 110% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: blur(24px) brightness(.20) saturate(1.02) !important;
  opacity: .75 !important;
}

/* overlay para legibilidade do texto, sem criar uma segunda caixa */
body[data-scope="team01"] .hero-image-stage::after,
body[data-scope="team02"] .hero-image-stage::after,
body[data-scope="team09"] .hero-image-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 16, .78) 0%,
      rgba(5, 8, 16, .60) 26%,
      rgba(5, 8, 16, .28) 52%,
      rgba(5, 8, 16, .38) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 8, 16, .14) 0%,
      rgba(5, 8, 16, .20) 38%,
      rgba(5, 8, 16, .44) 100%
    ) !important;
}

/* remove qualquer grade/pseudo elemento antigo */
body[data-scope="team01"] .hero-panel::before,
body[data-scope="team01"] .hero-panel::after,
body[data-scope="team02"] .hero-panel::before,
body[data-scope="team02"] .hero-panel::after,
body[data-scope="team09"] .hero-panel::before,
body[data-scope="team09"] .hero-panel::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* texto por cima da imagem, sem card interno */
body[data-scope="team01"] .hero-copy,
body[data-scope="team02"] .hero-copy,
body[data-scope="team09"] .hero-copy {
  position: absolute !important;
  z-index: 3 !important;
  left: clamp(28px, 3.3vw, 46px) !important;
  right: auto !important;
  bottom: clamp(28px, 3.2vw, 40px) !important;
  top: auto !important;
  width: min(46%, 560px) !important;
  max-width: 560px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-scope="team01"] .hero-copy .hero-kicker,
body[data-scope="team02"] .hero-copy .hero-kicker,
body[data-scope="team09"] .hero-copy .hero-kicker {
  text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
}

body[data-scope="team01"] .hero-copy h1,
body[data-scope="team02"] .hero-copy h1,
body[data-scope="team09"] .hero-copy h1 {
  max-width: 100% !important;
  margin: 10px 0 10px !important;
  font-size: clamp(2.5rem, 4.25vw, 4.6rem) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.38) !important;
}

body[data-scope="team01"] .hero-accent,
body[data-scope="team02"] .hero-accent,
body[data-scope="team09"] .hero-accent {
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}

body[data-scope="team01"] .hero-manifesto,
body[data-scope="team02"] .hero-manifesto,
body[data-scope="team09"] .hero-manifesto {
  max-width: 100% !important;
}

body[data-scope="team01"] .hero-manifesto p,
body[data-scope="team02"] .hero-manifesto p,
body[data-scope="team09"] .hero-manifesto p {
  text-shadow: 0 2px 10px rgba(0,0,0,.38) !important;
}

body[data-scope="team01"] .hero-actions,
body[data-scope="team02"] .hero-actions,
body[data-scope="team09"] .hero-actions {
  margin-top: 18px !important;
}

/* ----------------------------------------------------------
   Mantém os DESTAQUES DOS TIMES no modo sem imagem
   ---------------------------------------------------------- */

body[data-scope="team01"] .result-card,
body[data-scope="team02"] .result-card,
body[data-scope="team09"] .result-card {
  background:
    linear-gradient(160deg, rgba(10,14,26,.96), rgba(8,11,21,.98)) !important;
  min-height: 316px !important;
}

body[data-scope="team01"] .result-card-media,
body[data-scope="team02"] .result-card-media,
body[data-scope="team09"] .result-card-media {
  display: none !important;
}

body[data-scope="team01"] .result-card-content,
body[data-scope="team02"] .result-card-content,
body[data-scope="team09"] .result-card-content {
  position: relative !important;
  z-index: 2 !important;
  min-height: 316px !important;
  padding: 22px 20px 20px !important;
  background: transparent !important;
}

/* ----------------------------------------------------------
   Card vazio do GERAL continua sem imagem
   ---------------------------------------------------------- */

body[data-scope="general"] .result-card.is-empty .result-card-media {
  display: none !important;
}

body[data-scope="general"] .result-card.is-empty {
  background:
    linear-gradient(160deg, rgba(10,14,26,.96), rgba(8,11,21,.98)) !important;
}

body[data-scope="general"] .result-card.is-empty .result-card-content {
  background: transparent !important;
}

/* ----------------------------------------------------------
   Responsivo
   ---------------------------------------------------------- */

@media (max-width: 1080px) {
  body[data-scope="team01"] .hero-copy,
  body[data-scope="team02"] .hero-copy,
  body[data-scope="team09"] .hero-copy {
    width: min(56%, 560px) !important;
  }
}

@media (max-width: 820px) {
  body[data-scope="team01"] .hero-panel,
  body[data-scope="team02"] .hero-panel,
  body[data-scope="team09"] .hero-panel {
    min-height: 560px !important;
  }

  body[data-scope="team01"] .hero-copy,
  body[data-scope="team02"] .hero-copy,
  body[data-scope="team09"] .hero-copy {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;
  }

  body[data-scope="team01"] .hero-copy h1,
  body[data-scope="team02"] .hero-copy h1,
  body[data-scope="team09"] .hero-copy h1 {
    font-size: clamp(2.1rem, 9vw, 3.25rem) !important;
  }
}

/* ==========================================================
   DESTAQUES DO GERAL — imagem preenchida e centralizada
   ========================================================== */

body[data-scope="general"]
.result-card:not(.is-empty)
.result-card-media {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-scope="general"]
.result-card:not(.is-empty)
.result-card-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;
  filter: brightness(.72) saturate(.96) !important;
}

/* Remove a segunda imagem desfocada, evitando duplicação */
body[data-scope="general"]
.result-card:not(.is-empty)
.result-card-image-blur {
  display: none !important;
}

/* Mantém o conteúdo acima da imagem */
body[data-scope="general"]
.result-card:not(.is-empty)
.result-card-content {
  position: relative !important;
  z-index: 3 !important;
}

/* Mantém cards sem resultado totalmente sem imagem */
body[data-scope="general"]
.result-card.is-empty
.result-card-media {
  display: none !important;
}