/* ==========================================================================
   Blog da Marcha — índice
   Estrutura inspirada em yampi.com.br/blog (destaque com imagem que troca +
   grade de recentes). Paleta, tipografia e componentes são os da Marcha,
   seguindo o mesmo padrão de faq.css e da página de premiação.

   Ordem de carregamento (igual à da central de ajuda):
     1. marcha-transitions.css
     2. marcha-shell.css
     3. marcha-shell-claro.css   skin clara de header e rodapé
     4. blog.css                 ESTE arquivo — dono do layout, carrega por último
   ========================================================================== */

.blog-index {
  --rosa:       #FF2D8A;
  --rosa-forte: #E01F76;
  --creme:      #FAF5EB;
  /* Era #FFFDF8: quase-branco que nao batia com o branco puro do topo e do
     rodape, criando uma faixa a mais entre eles. 2026-08-13. */
  --superficie: #FFFFFF;
  --preto:      #1A1816;
  --texto:      #3A3630;
  --suave:      #6B655C;
  --linha:      #E6E0D2;

  --largura:    1240px;
  --raio:       12px;
  --gap:        26px;

  background: var(--creme);
  color: var(--preto);
}
.blog-frame { width: min(var(--largura), calc(100% - 48px)); margin-inline: auto; }

/* ==========================================================================
   1. Topo
   ========================================================================== */
/* Faixa de abertura no modelo do blog da Yampi: fundo proprio separando o topo
   do resto, titulo grande a esquerda e um desenho a mao a direita. A "graca"
   ali vem do desenho — sem ele a faixa vira so um cabecalho. O assunto do
   nosso e o da Marcha (pagamento), nao uma pessoa com notebook. */
/* O fundo branco e a borda de baixo sairam em 2026-08-13: juntos criavam um
   corte no meio da rolagem. A separacao agora e so o espaco — o respiro de
   baixo cresceu para compensar a linha que sumiu. */
.blog-topo {
  padding: clamp(40px, 5vw, 66px) 0 clamp(40px, 4.5vw, 64px);
}
/* A coluna da arte era .85fr (495px em 1217px), mas o desenho tem no maximo
   320px e ficava encostado a direita — sobravam ~175px de vao fantasma entre
   o texto e a maquininha, alem do gap declarado. Com `auto` a coluna vale
   exatamente a largura do desenho e sobra um unico espaco, o do gap. */
.blog-topo-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.blog-topo h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 6vw, 74px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1;
}
.blog-topo p { margin: 0; max-width: 46ch; color: var(--suave); font-size: 18px; line-height: 1.55; }

/* o desenho acompanha a coluna e para de crescer antes de virar o assunto */
.blog-topo-arte { justify-self: end; width: 100%; max-width: 320px; }
.blog-doodle { display: block; width: 100%; height: auto; overflow: visible; }

/* ==========================================================================
   2. Destaques — imagem grande + lista que troca a imagem
   ========================================================================== */
.blog-secao { padding: clamp(30px, 4vw, 52px) 0; }
.blog-secao > h2 {
  margin: 0 0 24px; font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700; letter-spacing: -.025em;
}

/* A foto NAO pode ser esticada para a altura da lista. As capas sao 1600x900
   com o titulo desenhado dentro da imagem, do lado esquerdo — se o quadro fica
   mais alto que 16:9, o object-fit:cover corta pelas laterais e come o texto.
   So da para cortar na vertical. Entao a foto mantem 16:9 e quem se ajusta e a
   lista: 3 itens em vez de 4, espalhados com space-between ate a base da foto. */
.blog-destaque { display: grid; grid-template-columns: 1.62fr 1fr; gap: 40px; align-items: start; }
.blog-destaque-img {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio);
  overflow: hidden; background: var(--linha);
}
.blog-destaque-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .3s ease;
}
.blog-destaque-img img.ativa { opacity: 1; }

.blog-destaque-lista { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.blog-item {
  display: block; padding: 15px 0; border-top: 1px solid var(--linha);
  color: inherit; text-decoration: none;
}
.blog-item:first-child { border-top: 0; padding-top: 0; }
.blog-item-cat {
  display: inline-block; margin-bottom: 8px;
  color: var(--rosa); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.blog-item h2 {
  margin: 0 0 8px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600;
  line-height: 1.28; letter-spacing: -.015em;
  transition: color .14s ease;
}
.blog-item:hover h3, .blog-item.ativo h3 { color: var(--rosa); }
.blog-item-meta { color: var(--suave); font-size: 13.5px; }
.blog-item-meta span + span::before { content: '·'; margin: 0 7px; }
.blog-item:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; border-radius: 6px; }

/* ==========================================================================
   3. Grade de recentes
   ========================================================================== */
.blog-grade { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.blog-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); color: inherit; text-decoration: none;
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.blog-card:hover { border-color: var(--rosa); transform: translateY(-3px); }
.blog-card:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
/* height: auto e obrigatorio, nao e enfeite. O <img> carrega width="1600"
   height="900" (bom para o navegador reservar o espaco e nao pular o layout).
   Esse height vira uma declaracao height:900px no origin de presentational
   hints, e aspect-ratio so dimensiona quando a outra medida e auto — com
   altura definida ele e ignorado e o card fica 386x900, cortado no cover.
   Com height:auto a altura volta a sair da razao: ~217px, a faixa do Yampi. */
.blog-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--linha);
}
.blog-card-corpo { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.blog-card-cat {
  color: var(--rosa); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.blog-card h2 { margin: 0; font-size: 18.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.blog-card p { margin: 0; color: var(--suave); font-size: 15px; line-height: 1.55; flex: 1; }
.blog-card-meta { color: var(--suave); font-size: 13px; }
.blog-card-meta span + span::before { content: '·'; margin: 0 7px; }


/* ==========================================================================
   4. Fecho
   ========================================================================== */
.blog-fecho {
  margin: clamp(34px,4vw,56px) 0 clamp(58px,7vw,92px);
  padding: 40px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); text-align: center;
}
.blog-fecho h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.02em; }
.blog-fecho p { margin: 0 0 22px; color: var(--suave); }
.blog-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.blog-botao {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: 10px; font-size: 16px; font-weight: 500; text-decoration: none;
}
.blog-botao-1 { background: var(--rosa); color: #fff; }
.blog-botao-1:hover { background: var(--rosa-forte); }
.blog-botao-2 { border: 1px solid var(--linha); color: var(--preto); }
.blog-botao-2:hover { border-color: var(--rosa); color: var(--rosa); }

/* ==========================================================================
   5. Responsivo
   ========================================================================== */
@media (max-width: 1000px) {
  .blog-topo-arte { max-width: 240px; }
  .blog-destaque { grid-template-columns: 1fr; gap: 26px; }
  .blog-grade { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .blog-frame { width: calc(100% - 32px); }
  /* no celular o desenho empurraria o titulo e os filtros para baixo da dobra */
  .blog-topo-grid { grid-template-columns: 1fr; }
  .blog-topo-arte { display: none; }
  .blog-grade { grid-template-columns: 1fr; }
  .blog-fecho { padding: 28px 20px; }
  .blog-botoes { flex-direction: column; }
  .blog-botao { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-destaque-img img, .blog-item h2 { transition: none; }
  .blog-card:hover { transform: none; }
}