/* ==========================================================================
   Hub Eleições 2026 - estilos base da página
   Tipografia do layout: Merriweather nos títulos de display, WorkSans no resto.
   Ambas já são declaradas via @font-face em assets/css/base.css.
   O header (.eleicoes-topo) vem de assets/css/pages/eleicoes.css
   ========================================================================== */

#mw-eleicoes {
  --ele-azul: #00507d;
  --ele-azul-claro: #6cc9f4;
  --ele-azul-forte: #0b5ba1;
  --ele-azul-escuro: #003a63;
  --ele-texto: #1a1a1a;
  --ele-texto-suave: #4a4a4a;
  --ele-borda: #dfe5ea;
  --ele-fundo-suave: #f2f6f8;
  --ele-serif: "Merriweather", Georgia, serif;
  --ele-sans: "WorkSans", Arial, Helvetica, sans-serif;

  width: 100%;
  overflow: hidden;
  color: var(--ele-texto);
  font-family: var(--ele-sans);
}

#mw-eleicoes,
#mw-eleicoes * {
  box-sizing: border-box;
}

/* A hashtag do header é Merriweather itálico no layout, não Georgia */
#mw-eleicoes .eleicoes-chamada {
  font-family: var(--ele-serif);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   Nav do header. O logo entra no fluxo do grid (coluna do meio) em vez de
   position:absolute, por isso as colunas viram 1fr auto 1fr: os dois grupos
   de links ocupam o mesmo espaço dos dois lados e o logo fica exatamente no
   centro do container, independente da largura dos links.
   -------------------------------------------------------------------------- */
#mw-eleicoes .eleicoes-menu {
  display: grid;
  align-items: center;
  gap: 27px;
  grid-template-columns: 1fr auto 1fr;
}

/* o wrapper não vira caixa no desktop: os dois grupos participam direto do
   grid do nav, e o order coloca o logo no meio deles */
#mw-eleicoes .eleicoes-menu-links {
  display: contents;
}

#mw-eleicoes .eleicoes-menu-grupo {
  display: flex;
  align-items: center;
  order: 1;
  gap: 27px;
}

#mw-eleicoes .eleicoes-menu-grupo-fim {
  justify-content: flex-end;
  order: 3;
}

#mw-eleicoes .eleicoes-logo {
  position: static;
  display: block;
  order: 2;
  width: 180px;
  /* a faixa do nav tem altura fixa (119px), então limito o logo para o SVG
     não esticar a linha caso venha com proporção diferente */
  max-height: 74px;
  height: auto;
  transform: none;
}

#mw-eleicoes .eleicoes-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: inherit;
  object-fit: contain;
}

/* Links do nav: Work Sans Regular 12px, caixa alta, centralizado */
#mw-eleicoes .eleicoes-menu a {
  font-family: var(--ele-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12px;
  line-height: 2;
  text-align: center;
  text-transform: uppercase;
}

/* só o "Voltar" é destacado */
#mw-eleicoes .eleicoes-menu .eleicoes-menu-voltar {
  font-weight: 700;
}

/* Grid de 12 colunas - mesma definição usada em assets/css/home/home.css */
#mw-eleicoes .mw-area:first-of-type {
  margin-top: 0;
}
#mw-eleicoes .mw-area {
  display: grid;
  max-width: 1240px;
  margin: 48px auto;
  padding: 0 20px;
  gap: 24px;
  grid-auto-rows: minmax(1px, auto);
  grid-template-columns: repeat(12, 1fr);
}

#mw-eleicoes .mw-area:empty {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Cabeçalho de seção (título serifado + ação à direita)
   -------------------------------------------------------------------------- */
#mw-eleicoes .ele-secao-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 31px;
  gap: 16px;
}

#mw-eleicoes .ele-secao-titulo h2 {
  margin: 0;
  color: var(--ele-texto);
  font-family: var(--ele-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

#mw-eleicoes .ele-secao-titulo .ele-secao-acao {
  padding: 10px 18px;
  border: 1px solid var(--ele-azul-forte);
  border-radius: 2px;
  color: var(--ele-azul-forte);
  font-family: var(--ele-sans);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

#mw-eleicoes .ele-secao-titulo .ele-secao-acao:hover {
  background-color: var(--ele-azul-forte);
  color: #fff;
}

/* Botão "Ver mais" dos blocos que levam para a página da tag do widget */
#mw-eleicoes .ele-ver-mais {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 15px;
  background-color: #d7ebfa;
  color: var(--ele-azul-forte);
  font-family: var(--ele-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

#mw-eleicoes .ele-ver-mais svg {
  width: 16px;
  height: 16px;
}

#mw-eleicoes .ele-ver-mais:hover {
  background-color: var(--ele-azul-forte);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Chapéu e card de matéria compartilhados
   -------------------------------------------------------------------------- */
#mw-eleicoes .ele-chapeu {
  display: block;
  color: var(--ele-azul-forte);
  font-family: var(--ele-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
}

#mw-eleicoes .ele-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

#mw-eleicoes .ele-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

#mw-eleicoes .ele-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mw-eleicoes .ele-card .ele-chapeu {
  margin: 12px 0 6px;
}

#mw-eleicoes .ele-card h3 {
  margin: 0;
  color: var(--ele-texto);
  font-family: var(--ele-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

#mw-eleicoes .ele-card:hover h3 {
  text-decoration: underline;
}

/* Selo de vídeo sobre a thumb, como no layout */
#mw-eleicoes .ele-selo-video {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
}

#mw-eleicoes .ele-selo-video img {
  width: 9px;
  height: 9px;
  margin-left: 1px;
}

/* Linha divisória sob o título, usada pelos blocos de carrossel */
#mw-eleicoes .ele-secao-titulo-linha {
  margin-bottom: 22px;
  min-height: 41px;
  padding-right: 108px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ele-borda);
}

/* Setas do Splide alinhadas ao título, no canto superior direito.
   O .splide vira static para as setas se posicionarem em relação à seção
   inteira (que é .ele-carrossel, position:relative) e não ao carrossel. */
#mw-eleicoes .ele-carrossel .splide {
  position: static;
}

#mw-eleicoes .splide__arrows {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 10px;
}

/* o CSS do Splide esconde .splide sem is-initialized; como o carrossel do Guia
   se destrói no mobile de propósito, forço a visibilidade */
#mw-eleicoes .splide {
  visibility: visible;
}

/* a seta do layout (seta.svg) já é o botão inteiro: retângulo azul com o
   chevron branco, por isso entra como background e o svg do Splide sai */
#mw-eleicoes .splide__arrow {
  position: static;
  width: 43px;
  height: 40px;
  transform: none;
  border: 0;
  border-radius: 0;
  background: url("../../img/eleicoes/2026/svg/seta.svg") no-repeat center /
    100% 100%;
  opacity: 1;
}

#mw-eleicoes .splide__arrow svg {
  display: none;
}

#mw-eleicoes .splide__arrow--prev {
  transform: scaleX(-1);
}

#mw-eleicoes .splide__arrow:disabled {
  opacity: 0.35;
}

#mw-eleicoes .ele-carrossel {
  position: relative;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  #mw-eleicoes .mw-area {
    margin: 32px auto;
    gap: 32px;
    grid-template-columns: 1fr;
  }

  #mw-eleicoes .ele-secao-titulo h2 {
    font-size: 24px;
  }

  #mw-eleicoes .ele-ver-mais {
    padding: 5px 10px;
    font-size: 11px;
  }

  #mw-eleicoes .ele-ver-mais svg {
    width: 14px;
    height: 14px;
  }

  #mw-eleicoes .ele-carrossel .ele-secao-titulo-linha {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-right: 88px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  #mw-eleicoes .ele-carrossel .splide__arrows {
    top: 0;
  }

  #mw-eleicoes .ele-carrossel .splide__arrow {
    width: 33px;
    height: 32px;
  }

  #mw-eleicoes .splide__arrows {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile: logo centralizado acima e os links numa faixa única com rolagem
   horizontal, como no layout. Também é preciso desfazer o position:absolute
   que assets/css/pages/eleicoes.css aplica no nav e no logo no mobile —
   sem isso o logo rolaria junto com os links.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  #mw-eleicoes .eleicoes-topo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #mw-eleicoes .eleicoes-menu {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 16px 0 0;
    gap: 14px;
    overflow: visible;
  }

  #mw-eleicoes .eleicoes-chamada {
    position: static;
    margin: 14px auto 0;
    font-size: 39px;
    line-height: 1;
    letter-spacing: -2.5px;
    text-align: center;
  }

  #mw-eleicoes .eleicoes-logo {
    order: 1;
    width: 130px;
    margin: 0 auto;
  }

  /* o wrapper deixa de ser display:contents e vira a faixa rolável */
  #mw-eleicoes .eleicoes-menu-links {
    display: flex;
    order: 2;
    width: 100%;
    padding: 0 20px 10px;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #mw-eleicoes .eleicoes-menu-links::-webkit-scrollbar {
    display: none;
  }

  #mw-eleicoes .eleicoes-menu-grupo,
  #mw-eleicoes .eleicoes-menu-grupo-fim {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 26px;
  }

  #mw-eleicoes .eleicoes-menu a {
    white-space: nowrap;
  }
}