/* Compilado do evento na home -- pedido do usuário 2026-09-21: "quero
   que fique tudo na home". Achado na 2ª rodada do mesmo dia: um cartão
   escuro flutuando dentro de uma seção branca "não tava com a
   identidade do site" -- o site alterna seções INTEIRAS claras/escuras
   (Memórias das Etapas, Newsletter etc. já são .section--dark de ponta
   a ponta), nunca um cartão escuro dentro de uma clara. Corrigido virando
   esta seção inteira .section--dark (mesma classe/token --black de
   sempre, ver inc/home-ranking-widget.php) -- com isso o ranking-page.css
   (que já usa var(--white)/var(--black), o MESMO tema escuro do resto do
   site) encaixa nativamente, sem precisar sobrescrever cor nenhuma. Esta
   folha só cobre o que é genuinamente novo aqui (grid de vídeos). */

/* Seção no container largo do site (1240px, mesmo das outras seções) em
   vez da coluna de leitura de 760px -- pedido do usuário 2026-09-21: o
   mapa ficava "restrito a um pedaço" no desktop. Aba Ranking na mesma
   largura das outras (pedido do usuário no mesmo dia: padronizar). */
.home-ranking .wrap { max-width: var(--wide); }

/* Celular: busca de comparação + Replay ANTES do mapa -- achado do
   usuário 2026-09-21 observando sessões: quem chega pelo menu "Como Foi"
   só via o mapa (controles ficavam abaixo da dobra, ainda cobertos pelo
   aviso de cookies) e ficava arrastando o mapa sem entender como usar. */
@media (max-width: 767px) {
  .home-ranking .ranking-estimativa { display: flex; flex-direction: column; }
  .home-ranking .ranking-estimativa__info,
  .home-ranking .ranking-estimativa__vencedores { order: 1; }
  .home-ranking .ranking-estimativa__seletor    { order: 2; }
  .home-ranking .ranking-estimativa__replay     { order: 3; }
  .home-ranking .ranking-estimativa__mapa-wrap  { order: 4; margin-bottom: 0; }
}

/* Tablet: 1 coluna, largura toda, mapa um pouco mais alto que no celular. */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-ranking .ranking-estimativa__mapa { height: 440px; }
}

/* Desktop: 2 colunas na aba "Como Foi" -- seletor de modalidades em cima
   (largura toda), mapa grande à esquerda, vencedores/info + replay e
   busca de comparação à direita, sem precisar rolar entre mapa e
   controles. __info e __vencedores se revezam no mesmo lugar (ver JS),
   então dividem a mesma área. Escopo .home-ranking: /resultados/ não muda. */
@media (min-width: 1024px) {
  .home-ranking .ranking-estimativa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "seletor seletor"
      "mapa    lado-topo"
      "mapa    replay"
      "mapa    .";
    column-gap: 1.5rem;
    align-items: start;
  }
  .home-ranking .ranking-estimativa__seletor    { grid-area: seletor; }
  .home-ranking .ranking-estimativa__mapa-wrap  { grid-area: mapa; margin-bottom: 0; }
  .home-ranking .ranking-estimativa__info,
  .home-ranking .ranking-estimativa__vencedores { grid-area: lado-topo; }
  .home-ranking .ranking-estimativa__replay     { grid-area: replay; margin-bottom: 0; }

  /* Vencedores empilhados (a coluna é estreita pra 2 lado a lado). */
  .home-ranking .ranking-estimativa__vencedores { grid-template-columns: 1fr; }

  .home-ranking .ranking-estimativa__mapa { height: clamp(460px, 62vh, 620px); }

  /* 8 vídeos em 2 linhas de 4 (auto-fill dava 5+3 nessa largura). */
  .home-ranking .home-ranking__videos { grid-template-columns: repeat(4, 1fr); }
}

/* Placeholder da busca cortava ("pra se com...") na coluna de 340px.
   Só com mouse: o input tem 16px de propósito pro Safari/iOS não dar zoom
   ao focar (ver ranking-page.css), e iPad em paisagem também passa de
   1024px. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .home-ranking .ranking-estimativa__replay-busca-input { font-size: .82rem; }
}

/* Respiro entre "Como foi a etapa" e as abas -- o h2 global tem margin 0
   (main.css), então as abas ficavam coladas no título. */
.home-ranking .section__title { margin-bottom: 1.5rem; }

.home-ranking .ranking-tabpanel[hidden] { display: none; }

/* Vídeos -- Shorts reais do YouTube (pedido do usuário 2026-09-21, 2ª
   rodada: "quero os vídeos mesmo", não embed do Instagram) */
.home-ranking__videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding-top: .5rem;
}
.home-ranking__video {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.home-ranking__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Botões "Seguir no Instagram" / "Canal no YouTube" -- pedido do usuário
   2026-09-21 (3ª rodada): trocar o link solto em texto por um destaque
   de verdade, já que esse bloco fica logo abaixo do hero/patrocinadores
   (bem mais alto que a seção #instagram nova, lá embaixo). */
.home-ranking__social-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.home-ranking__social-cta {
  padding: .6rem 1.25rem;
  font-size: .75rem;
}

@media (max-width: 480px) {
  .home-ranking__videos { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .home-ranking__social-ctas { flex-direction: column; align-items: stretch; text-align: center; }
}