/**
 * Topo da campanha (helpers/ur_campanha_midia.php e ur_campanha_topo.php).
 *
 * Estrutura da TELA 03 — docs/referencia/tela03-estrutura.html:
 *
 *   [1] banner: carrossel/vídeo, contador 1/N no canto
 *       └── .bstrip, absoluto na base da foto: chip, título, subtítulo
 *   [2] .mine: "Meus Números", encostando no banner
 *
 * Banner e faixa formam um bloco só: nada tem raio inferior, e o
 * arredondamento do conjunto fica no card, que tem overflow:hidden.
 *
 * O legado punha o título numa tarja preta ABAIXO da foto e o selo de
 * status solto no canto superior; os dois sobem para dentro da imagem.
 */

.ur-hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

/* ── [1] Banner ───────────────────────────────────────────────────── */

.ur-hero__banner {
  position: relative;
  width: 100%;
}

.ur-hero__banner .carousel,
.ur-hero__banner .carousel-inner,
.ur-hero__banner .carousel-item {
  width: 100%;
}

/* A referência usa aspect-ratio em vez de altura por media query, que
   era o que as quatro telas faziam com .custom-image.

   A proporção não é mais fixa (issue 859): a campanha aceita 1:1, 16:11 e
   4:5, e --ur-hero-ar chega no .ur-hero__banner com a proporção da CAPA —
   uma só para o carrossel inteiro, senão a altura pularia a cada slide.
   O PHP só emite a variável para os formatos NOVOS (1:1 e 4:5); 16:11, foto
   do legado e imagem sem medida não emitem nada e caem neste 16/11, que é
   o que a tela já fazia — campanha que já existe não muda um pixel.

   --ur-hero-max é o teto de altura: a foto pode ser alta, mas não a ponto
   de empurrar o preço e o botão de compra para fora da tela do celular.
   A conta desconta o cabeçalho (66px), a tarja do título com o "Meus
   Números" (~127px) e a barra de progresso (24px), deixando ~96px da
   caixa de compra visível. 100svh, não vh: no iPhone o vh conta com a
   barra do Safari recolhida, e a conta sairia 60px otimista. */
.ur-hero__banner {
  --ur-hero-max: calc(100svh - 66px - 127px - 24px - 96px);
}

/* height:auto não é enfeite: o <img> leva os atributos width/height do
   arquivo (para o navegador reservar o espaço antes de baixar a foto), e
   sem isto o atributo vence o aspect-ratio — a foto saía com a altura do
   arquivo, cortada no max-height, igual nos três formatos. */
.ur-hero__banner .SorteioTpl_imagem__2GXxI,
.ur-hero__banner img,
.ur-hero__banner video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ur-hero-ar, 16 / 11);
  max-height: var(--ur-hero-max);
  object-fit: cover;
  background: #000;
}

/* No desktop a coluna é mais larga que alta, e o `cover` de uma arte em pé
   cortaria justamente o que ela tem de diferente. Aqui a foto fica inteira,
   centrada, com o resto da faixa em fundo neutro — o que a issue pede. No
   celular segue `cover`: lá a largura é o lado curto e não sobra faixa.

   `contain` vale SÓ para os formatos novos: --ur-hero-fit chega junto com
   --ur-hero-ar, nas mesmas campanhas. Sem ele a foto segue em `cover`, que
   é o que as campanhas antigas já faziam — uma arte do legado (1,81:1) num
   quadro 16:11 com `contain` ganharia tarja preta em cima e embaixo onde
   antes preenchia. */
@media (min-width: 600px) {
  .ur-hero__banner .SorteioTpl_imagem__2GXxI,
  .ur-hero__banner img,
  .ur-hero__banner video {
    object-fit: var(--ur-hero-fit, cover);
  }
}

/* Contador no canto, como o .counter da referência. */
.ur-hero__counter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── [1.1] bstrip: dentro da foto, na base ────────────────────────── */

.ur-hero .ur-hero__bstrip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 20px 16px 10px !important;
  /* Gradiente da esquerda para a direita, como a referência: o texto
     fica legível sem tapar a foto inteira. */
  background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, 0) 100%);
  border: 0;
  border-radius: 0 !important;
  color: #fff;
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* O selo entra no fluxo do bstrip, acima do título. */
.ur-hero .ur-hero__badges {
  position: static !important;
  inset: auto !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px !important;
}

.ur-hero .ur-hero__badges .badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--ur-accent, #e3b243) !important;
  color: var(--ur-accent-ink, #111111) !important;
  font-size: 12px;
  font-weight: 700;
}

/* O 🔥 entra pelo CSS: a string de cada selo é o que
   tests/helpers/TemaAdquiraTest.php trava, e o emoji é decoração. */
.ur-hero .ur-hero__badges .badge-adquira::after,
.ur-hero .ur-hero__badges .badge-status-1::after {
  content: " 🔥";
}

.ur-hero .ur-hero__bt {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #fff !important;
}

.ur-hero .ur-hero__bs {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, .7);
}

/* ── [2] Faixa "Meus Números" ─────────────────────────────────────── */

.ur-topo {
  display: flex;
  width: 100%;
}

.ur-topo__mine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  /* Sem raio: encosta no banner e fecha o bloco. */
  border-radius: 0;
  /* Preta chapada, sem degradê. A cor do admin, quando existe,
     continua mandando — é o que o cliente configurou. */
  background: var(--tema-campaign-tab-bg, #000000);
  color: var(--tema-campaign-tab-text, #ffffff);
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}

.ur-topo__mine:hover {
  filter: brightness(1.08);
}

.ur-topo__mine svg {
  flex: none;
}

/* ── Ajuste #769: textos ABAIXO da foto, bloco superior contínuo ─────
   Pedido do cliente (conceito antigo): chip, título e subtítulo saem de
   cima da imagem e ficam logo abaixo dela, num fundo preto que emenda
   com a faixa "Meus Números". A barra de progresso encosta no bloco
   (margin-top 0). O resto da página mantém as margens normais. */

.ur-hero {
  border-radius: 10px 10px 0 0;
}

.ur-hero .ur-hero__bstrip {
  position: static;
  padding: 12px 16px 10px !important;
  background: var(--tema-campaign-tab-bg, #000000);
  border-radius: 0 !important;
}

.ur-topo-bloco {
  margin-bottom: 0 !important;
}

.ur-topo-progresso {
  margin-top: 0 !important;
}

.ur-topo-progresso .ur-cp-progress {
  margin-top: 0 !important;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}