/* ==========================================================
   LAYOUT DOS MASCOTES V5
   Objetivo:
   1) Voltar o HERO dos times para uma única caixa com imagem
      de fundo + texto sobreposto em box escurecido.
   2) Voltar os DESTAQUES dos times para o modo original,
      sem imagem de fundo.
   3) No GERAL, se o card estiver vazio (ex.: revenue 2ª quinzena),
      não mostrar imagem nenhuma.
   ========================================================== */

/* ----------------------------------------------------------
   HERO DOS TIMES
   ---------------------------------------------------------- */

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;
  padding: 0 !important;
  overflow: hidden !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;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #070b14 !important;
}

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: -7% !important;
  width: 114% !important;
  height: 114% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: blur(28px) brightness(.24) saturate(1.02) !important;
  opacity: .95 !important;
}

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(.68) saturate(.97) !important;
  transform: none !important;
}

/* Camada escura suave por cima da imagem */
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;
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 14, .12) 0%,
      rgba(6, 8, 14, .22) 36%,
      rgba(6, 8, 14, .46) 68%,
      rgba(6, 8, 14, .72) 100%
    ),
    linear-gradient(
      90deg,
      rgba(6, 8, 14, .62) 0%,
      rgba(6, 8, 14, .18) 46%,
      rgba(6, 8, 14, .30) 100%
    ) !important;
  pointer-events: none;
}

/* Remove qualquer pseudo camada indesejada, inclusive malhas antigas */
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;
  opacity: 0 !important;
  box-shadow: none !important;
}

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(24px, 3vw, 36px) !important;
  bottom: clamp(24px, 3vw, 34px) !important;
  top: auto !important;
  width: min(46%, 520px) !important;
  max-width: 520px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(24px, 2.8vw, 30px) !important;
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--scope-accent) 30%, rgba(255,255,255,.10)) !important;
  background: rgba(6, 9, 17, .76) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(12px) !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 8px !important;
  font-size: clamp(2.35rem, 4.15vw, 4.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
}

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

/* ----------------------------------------------------------
   DESTAQUES DOS TIMES: modo original, 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;
}

body[data-scope="team01"] .result-card-label strong,
body[data-scope="team02"] .result-card-label strong,
body[data-scope="team09"] .result-card-label strong,
body[data-scope="team01"] .result-winner-copy span,
body[data-scope="team02"] .result-winner-copy span,
body[data-scope="team09"] .result-winner-copy span,
body[data-scope="team01"] .result-winner-copy strong,
body[data-scope="team02"] .result-winner-copy strong,
body[data-scope="team09"] .result-winner-copy strong,
body[data-scope="team01"] .result-value span,
body[data-scope="team02"] .result-value span,
body[data-scope="team09"] .result-value span,
body[data-scope="team01"] .result-value strong,
body[data-scope="team02"] .result-value strong,
body[data-scope="team09"] .result-value strong {
  text-shadow: none !important;
}

body[data-scope="team01"] .result-winner,
body[data-scope="team02"] .result-winner,
body[data-scope="team09"] .result-winner {
  margin-top: auto !important;
  padding-top: 58px !important;
}

body[data-scope="team01"] .result-value,
body[data-scope="team02"] .result-value,
body[data-scope="team09"] .result-value {
  margin-top: 16px !important;
}

/* ----------------------------------------------------------
   GERAL: card vazio 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;
}

body[data-scope="general"] .result-card.is-empty .result-label strong,
body[data-scope="general"] .result-card.is-empty .result-winner-copy span,
body[data-scope="general"] .result-card.is-empty .result-winner-copy strong,
body[data-scope="general"] .result-card.is-empty .result-value span,
body[data-scope="general"] .result-card.is-empty .result-value strong {
  text-shadow: none !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: 580px !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: 16px !important;
    padding: 20px !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.05rem, 9vw, 3.2rem) !important;
  }

  body[data-scope="team01"] .result-card,
  body[data-scope="team02"] .result-card,
  body[data-scope="team09"] .result-card {
    min-height: 300px !important;
  }

  body[data-scope="team01"] .result-card-content,
  body[data-scope="team02"] .result-card-content,
  body[data-scope="team09"] .result-card-content {
    min-height: 300px !important;
  }
}