/* BLOG ------------------------------------------------- */
/* Tamanhos fixos por dispositivo, como no resto do site */
:root { --post-h1: 54px; --post-h2: 30px; --post-fs: 19px; --post-gap: 64px; --blog-title: 31px; }
@media (max-width: 1279px) { :root { --post-h1: 40px; --post-h2: 26px; --post-fs: 18px; --post-gap: 48px; --blog-title: 25px; } }
@media (max-width: 767px)  { :root { --post-h1: 27px; --post-h2: 22px; --post-fs: 17px; --post-gap: 16px; --blog-title: 22px; } }

/* CAPA: cada artigo tem uma capa só de tipografia (a palavra do tema, na serifada da marca).
   --len = número de letras da palavra (no HTML): a letra cresce até a palavra ocupar a largura da capa */
.cover {
  display: flex; align-items: flex-end; overflow: hidden;
  container-type: inline-size; aspect-ratio: 16 / 10; padding: var(--pad);
}
.cover { position: relative; isolation: isolate; }
.cover em { position: relative; z-index: 1; display: block; font-size: calc(178cqw / var(--len)); line-height: .9; letter-spacing: -.02em; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
/* foto por trás, em preto e branco, com a cor da capa por cima (a foto se mistura com o fundo colorido) */
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover--red   { background: var(--red); color: #fff; }
.cover--red img   { mix-blend-mode: multiply; opacity: .9; }
.cover--cream { background: var(--cream); color: #b61515; }
.cover--cream img { mix-blend-mode: multiply; opacity: .34; }
.cover--ink   { background: #000; color: #fff; }
.cover--ink img   { opacity: .34; }
a:hover > .cover em { transform: translateX(.07em); }

/* PÁGINA /blog */
.blog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pad); padding: 56px var(--pad) 36px; }
.blog-head h1 { font-size: min(9.4vw, 190px); line-height: .9; font-weight: 500; letter-spacing: -.02em; }
.blog-head p { max-width: 19em; padding-bottom: .35em; font-size: var(--fs-lead); line-height: 1.3; font-weight: 500; text-transform: none; text-wrap: balance; }

/* artigo mais recente: capa de um lado, texto do outro (mesma divisão meio a meio da seção do time, na home) */
.blog-feature { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.blog-feature .cover { aspect-ratio: auto; min-height: var(--card-h); }
.blog-feature__txt { display: flex; flex-direction: column; gap: 24px; padding: var(--pad); }
.blog-feature__title { font-size: var(--post-h1); line-height: 1.02; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.blog-feature__desc { max-width: 26em; font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; text-transform: none; opacity: .6; }
.blog-feature .blog-card__cta { margin-top: auto; }

.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--row-gap) var(--pad); padding: var(--pad); }
.blog-card { display: flex; flex-direction: column; }
.blog-card__meta { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-ui); font-weight: 500; line-height: 1; }
.blog-card__meta span { opacity: .55; }
.blog-card .blog-card__meta { margin-top: 18px; }
.blog-card__title { margin-top: 16px; max-width: 24em; font-size: var(--blog-title); line-height: 1.08; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.blog-card__cta { align-self: flex-start; font-size: var(--fs-ui); font-weight: 500; line-height: 1; border: 1px solid var(--line); border-radius: 99px; padding: .75em .95em; transition: background .2s, color .2s, border-color .2s; }
.blog-card .blog-card__cta { margin-top: 22px; }
a:hover > .blog-card__cta, a:hover .blog-feature__txt .blog-card__cta { background: var(--red); border-color: var(--red); color: #fff; }

/* SEÇÃO DO BLOG NA HOME: 2 artigos grandes entre duas barras, como a seção de projetos */
.home-blog { position: relative; z-index: 2; background: var(--paper); }   /* acima da seção de projetos, que fica presa atrás */
.home-blog .bar { padding-top: 2.4em; }
.home-blog .bar--end { padding-top: 1.1em; }

/* ARTIGO */
/* barra de leitura: fina, vermelha, colada embaixo do menu */
.post-progress { position: sticky; top: var(--nav-h); z-index: 39; height: 3px; margin-bottom: -3px; pointer-events: none; }
.post-progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* título: o mesmo texto vermelho centralizado do manifesto (e o mesmo efeito de letras, via .svc-hero no main.js) */
.post-hero { min-height: calc(66vh - var(--nav-h)); padding-bottom: 56px; font-size: var(--post-h1); line-height: 1.04; letter-spacing: -.02em; }
.post-bar { display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--pad) 1.6em; font-size: var(--fs-ui); font-weight: 500; line-height: 1; border-bottom: 1px solid var(--ink); }

/* coluna lateral fixa (índice) + texto, no mesmo esquema da página de projeto */
.post { display: grid; grid-template-columns: var(--proj-w) minmax(0, 1fr); align-items: start; }
.post__side {
  position: sticky; top: var(--nav-h);
  padding: var(--pad); display: flex; flex-direction: column; gap: 28px;
  font-size: var(--fs-ui); font-weight: 500;
}
.post__side a { transition: opacity .2s, color .2s; }
.post__side a:hover { opacity: .55; }
.post__toc { border-top: 1px solid var(--line); }
.post__toc a { display: block; padding: 1em 0; border-bottom: 1px solid var(--line); line-height: 1.3; }
.post__toc a.is-on { color: var(--red); }
.post__cta { align-self: flex-start; border: 1px solid var(--line); border-radius: 99px; padding: .75em .95em; line-height: 1; }
.post__side a.post__cta { transition: background .2s, color .2s, border-color .2s; }
.post__side a.post__cta:hover { opacity: 1; background: var(--red); border-color: var(--red); color: #fff; }

.post__main { border-left: 1px solid var(--line); padding: 64px var(--post-gap) 110px; }
.post__main > * { max-width: 760px; }
.post__lead { font-size: calc(var(--fs-lead) * 1.12); line-height: 1.36; font-weight: 500; text-transform: none; text-wrap: pretty; }

/* texto do artigo: caixa normal (o resto do site é em maiúsculas) */
.post__body { margin-top: 20px; font-size: var(--post-fs); line-height: 1.65; font-weight: 400; text-transform: none; }
.post__body p + p, .post__body ul + p, .post__body ol + p { margin-top: 1.1em; }
.post__body h2 {
  margin: 2.4em 0 .8em; padding-top: 1.1em; border-top: 1px solid var(--ink);
  font-size: var(--post-h2); line-height: 1.1; font-weight: 500; letter-spacing: -.01em;
  text-transform: uppercase; text-wrap: balance;
  scroll-margin-top: var(--nav-h);
}
.post__body h3 { margin: 1.9em 0 .5em; font-size: 1.05em; font-weight: 600; line-height: 1.3; }
.post__body ul, .post__body ol { margin: 1.1em 0; display: grid; gap: .6em; list-style: none; }
.post__body li { display: flex; align-items: baseline; gap: .6em; }
.post__body li > span { flex: 1; min-width: 0; }
.post__body ul > li::before { content: "•"; color: var(--red); flex: none; }
/* lista numerada: itens separados por linha, com o número na serifada da marca */
.post__body ol { counter-reset: n; gap: 0; border-bottom: 1px solid var(--line); }
.post__body ol > li { gap: 1em; padding: .85em 0; border-top: 1px solid var(--line); }
.post__body ol > li::before { counter-increment: n; content: counter(n); flex: none; min-width: 1em; font-family: var(--serif); font-style: italic; font-size: 1.5em; line-height: 1; color: var(--red); }
.post__body strong { font-weight: 600; }
.post__body a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }
.post__body a:hover { opacity: .6; }
.post__note { margin: 1.6em 0; padding: 22px 24px; background: var(--cream); font-size: .92em; line-height: 1.55; }

/* case relacionado, dentro do texto */
.post__body a.post__case { display: block; margin: 1.8em 0; color: inherit; text-decoration: none; }
.post__case img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top; transition: filter .2s; }
.post__case:hover img { filter: brightness(.85); }
.post__case span { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: var(--fs-ui); font-weight: 500; text-transform: uppercase; }
.post__case span i { font-style: normal; opacity: .55; }

.post__more-title { padding: 2.4em var(--pad) 0; font-size: var(--fs-ui); font-weight: 500; line-height: 1; border-top: 1px solid var(--ink); }

@media (max-width: 767px) {
  .blog-head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px var(--pad) 28px; }
  .blog-head h1 { font-size: 24vw; }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature .cover { aspect-ratio: 16 / 10; min-height: 0; }
  .blog-feature__txt { gap: 16px; padding-bottom: 28px; }
  .blog-feature .blog-card__cta { margin-top: 6px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card__cta { font-size: 11px; padding: .65em .85em; }
  .post-hero { min-height: 0; padding-top: 44px; padding-bottom: 44px; }
  .post-bar { flex-wrap: wrap; row-gap: 10px; }
  .post { grid-template-columns: 1fr; }
  .post__side { display: none; }   /* no celular o texto vem direto, sem índice lateral */
  .post__main { border-left: 0; padding: 36px var(--pad) 64px; }
  .post__case img { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover em { transition: none; }
}