/* Home (template classic).
 *
 * Medidas tiradas do protótipo com CDP; as cores saem só dos tokens do
 * modelo escolhido (TOKENS.md). No Escuro/Dourado o resultado é igual à
 * referência, porque o protótipo foi desenhado a partir desses mesmos
 * tokens.
 */

.ur-hm {
  font-family: var(--ur-font, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ── Herói ────────────────────────────────────────────────────────── */

.ur-hm .ur-hm__hero,
.ur-hm a.ur-hm__hero {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  text-decoration: none;
}

/* A proporção do herói vem da foto (issue 859): --ur-hero-ar chega no
   .ur-hm__hero-foto só nos formatos NOVOS (1/1 ou 4/5). Campanha 16:11 ou
   do legado não emite a var e fica neste 16/11, como sempre foi.
   O teto de altura impede que um 4:5 empurre o resto da home para fora. */
.ur-hm__hero-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ur-hero-ar, 16 / 11);
  max-height: calc(100svh - 66px - 160px);
  object-fit: cover;
}

.ur-hm__hero-info {
  padding: 10px 12px 12px;
}

.ur-hm__hero-selo {
  margin-bottom: 6px;
}

.ur-hm__hero-nome {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 800;
  color: var(--ur-tx, #111111);
}

.ur-hm__hero-sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ur-mu, #5e5e57);
}

/* O selo chega com as classes do Bootstrap, que esta tela não carrega.
   Mesma solução do herói da campanha (campanha/topo.css:92). */
.ur-hm .ur-hm__hero-selo .badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--ur-accent, #16a34a) !important;
  color: var(--ur-accent-ink, #ffffff) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.ur-hm .ur-hm__hero-selo .badge.bg-dark {
  background: var(--ur-off-soft, rgba(138, 138, 132, 0.16)) !important;
  color: var(--ur-mu, #5e5e57) !important;
}

/* ── CTA "Participar agora" ───────────────────────────────────────── */

.ur-hm .ur-hm__cta,
.ur-hm a.ur-hm__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--ur-accent, #16a34a);
  color: var(--ur-accent-ink, #ffffff);
  text-decoration: none;
  box-sizing: border-box;
}

.ur-hm__cta-ic {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ur-accent-ink, #111111);
  color: var(--ur-accent, #16a34a);
}

.ur-hm__cta-tx {
  flex: 1 1 auto;
  min-width: 0;
}

.ur-hm__cta-tx b {
  display: block;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.ur-hm__cta-tx small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  opacity: 0.75;
}

.ur-hm__cta-tot {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--ur-accent-ink, #111111);
  color: var(--ur-accent, #16a34a);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Atalhos ──────────────────────────────────────────────────────── */

/* auto-fit: a grade se ajusta sozinha a três ou quatro atalhos, para o dia
   em que "Quem somos" existir. */
.ur-hm__atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
}

.ur-hm .ur-hm__atalho,
.ur-hm a.ur-hm__atalho {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.ur-hm__atalho:hover,
.ur-hm__atalho:focus-visible {
  background: var(--ur-row, #f0f0eb);
}

.ur-hm__atalho-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ur-row, #f0f0eb);
  color: var(--ur-accent-link, var(--ur-accent, #16a34a));
}

/* ── Cabeçalho de seção ───────────────────────────────────────────── */

.ur-hm__sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 2px 0;
}

.ur-hm__sec-tit {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 800;
  color: var(--ur-tx, #111111);
}

.ur-hm__sec-tit span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ur-mu, #5e5e57);
}

.ur-hm__sec-link {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ur-accent-link, var(--ur-accent, #16a34a));
  text-decoration: none;
}

/* ── Dúvidas ──────────────────────────────────────────────────────── */

.ur-hm .ur-hm__duvidas,
.ur-hm a.ur-hm__duvidas {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  text-decoration: none;
  box-sizing: border-box;
}

.ur-hm__duvidas-ic {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ur-row, #f0f0eb);
  font-size: 19px;
}

.ur-hm__duvidas-tx b {
  display: block;
  font-size: 14px;
  line-height: 19px;
  font-weight: 700;
}

.ur-hm__duvidas-tx small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--ur-mu, #5e5e57);
}

/* ── Comunidade VIP ───────────────────────────────────────────────── */

.ur-hm .ur-hm__comm,
.ur-hm a.ur-hm__comm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  /* Par do botão secundário, não --ur-chip: no Claro/Dourado e no
     Claro/Verde o chip e a tinta do acento são ambos pretos, e o bloco saía
     preto sobre preto (ilegível em 2 dos 8 modelos). --ur-btn/--ur-btn-tx é
     o par feito para superfície escura com tinta por cima, e já acompanha o
     acento no escuro. */
  background: var(--ur-btn, #111111);
  color: var(--ur-btn-tx, #ffffff);
  text-decoration: none;
  box-sizing: border-box;
}

.ur-hm__comm-tx b {
  display: block;
  font-size: 14px;
  line-height: 19px;
  font-weight: 800;
}

.ur-hm__comm-tx small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  opacity: 0.8;
}

.ur-hm__comm-bt {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--ur-btn-tx, #ffffff);
  color: var(--ur-btn, #111111);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Últimos ganhadores (carrossel) ───────────────────────────────── */

/* .wrow do mock: fila rolável, sem biblioteca. O scroll-snap é o que faz o
   swipe parar com um card alinhado à borda, em vez de no meio.

   A margem negativa anula o padding lateral do .body (shell.css: 12px 10px)
   e o padding devolve a folga por dentro: assim a fila rola de borda a borda
   da coluna, sem card cortado nas pontas. */
.ur-hm__wrow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Sem isto o swipe que chega ao fim da fila vira o gesto de "voltar" do
     navegador no mobile — mesma proteção dos chips de /ganhadores. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0 -10px;
  padding: 2px 10px 4px;
}

.ur-hm__wrow::-webkit-scrollbar {
  display: none;
}

.ur-hm__wrow-item {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
}

/* Na coluna estreita o card da /ganhadores empilha: avatar em cima, como no
   mock (.wc é grid de uma coluna). O componente é o mesmo — muda só o
   arranjo, que é papel do CSS de quem o usa. */
.ur-hm__wrow-item .ur-win-card {
  grid-template-columns: 1fr;
  gap: 6px;
  height: 100%;
  border-radius: 8px;
}

/* Sem min-width:0 o conteúdo mais largo (o nome do prêmio) estica a coluna
   e o scroll-snap perde o alinhamento. */
.ur-hm__wrow-item .ur-win-card-main {
  min-width: 0;
}

.ur-hm__wrow-item .ur-win-card-main > b,
.ur-hm__wrow-item .ur-win-prize {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ur-hm__wrow-item .ur-win-av {
  width: 34px;
  height: 34px;
  font-size: 13px;
}