/* ============================================================================
   blog.css: as páginas do Blog na casa do site (FRO-410; o desenho é o do
   protótipo FRO-351, rodadas 2 e 3, cravado pelo Lucca em 11/09)
   ----------------------------------------------------------------------------
   Carrega DEPOIS de shared/tokens.css e só usa os tokens dele. Aqui mora o
   artigo, a página "indisponível" e a lista (/blog, FRO-411); a prévia da home
   chega com a FRO-412, neste mesmo arquivo.
   ========================================================================== */

/* ── entrada (sem o motor: as páginas do blog não têm atos) ── */
.entra { animation: entra 720ms var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .entra { animation-duration: 220ms; } @keyframes entra { from { opacity: 0; } } }

.blog-pagina { position: relative; z-index: 1; padding-top: clamp(8.5rem, 22svh, 12.25rem); }   /* 196 px a 1440 × 900, como a prancha 08 */
.blog-fim { position: relative; z-index: 1; padding: var(--sc-9) 0 var(--sc-7); }
.blog-fim .rodape { margin-top: 0; }

/* ── um item de lista: mês e ano, título; na lista /blog, também o subtítulo e a área como palavra solta ── */
.itens { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.item { padding: var(--sc-6) 0; border-top: 1px solid var(--hair); }
.item__t { font-size: var(--sc-t-xl); margin-top: var(--sc-3); overflow-wrap: break-word; }
.item__s { margin-top: var(--sc-3); color: var(--sc-ink-soft); line-height: 1.55; }
.item__area { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); display: flex; align-items: center; gap: 0.7rem; }
.item__area::before { content: ""; flex: none; width: 1.25rem; height: 1px; background: var(--ouro); opacity: var(--traco-ouro-op); }
.item__t a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.16em; text-decoration-thickness: 1px; transition: text-decoration-color var(--d) var(--ease); }
@media (hover: hover) and (pointer: fine) { .item__t a:hover { text-decoration-color: var(--ouro); } }
.item__t a:focus-visible { text-decoration-color: var(--ouro); }

/* ── o artigo ── */
.artigo { position: relative; }
/* a coluna: 64 ch contados NO TAMANHO DO TEXTO (o `ch` desta caixa é o do parágrafo) = 831,5 px a 1440 — FRO-350; a borda
   esquerda é a do .sc-wrap, a mesma de O Escritório */
.artigo__col { position: relative; z-index: 1; font-size: var(--sc-t-lg); max-width: 64ch; }
.artigo__cab { position: relative; }
.artigo__trilha a { text-decoration: none; }
.artigo__trilha a:hover { color: var(--sc-ink); }
.artigo__trilha i { font-style: normal; margin: 0 0.7em; color: var(--ouro); }
.artigo__t { margin-top: var(--sc-4); font-size: var(--sc-t-2xl); overflow-wrap: break-word; }
.artigo__s { margin-top: var(--sc-5); line-height: 1.5; color: var(--sc-ink-soft); max-width: 44ch; }
.artigo__ass { margin-top: var(--sc-6); }
.artigo__r { height: 1px; background: var(--hair); margin: 2.5rem 0 2.25rem; }
.artigo__corpo p, .artigo__corpo ul, .artigo__corpo ol, .artigo__corpo blockquote { margin: 0 0 1.5rem; line-height: 1.5; }
.artigo__corpo h2 { font-family: var(--sc-font-display); font-weight: var(--w-display); font-size: 1.483em; line-height: 1.2; letter-spacing: var(--sc-track-snug);
  margin: 2.75rem 0 1rem; font-variation-settings: "SOFT" 40, "opsz" 144; text-wrap: balance; }
.artigo__corpo > :first-child { margin-top: 0; }
.artigo__corpo ul, .artigo__corpo ol { padding-left: 1.2em; }
.artigo__corpo li { margin-bottom: 0.5rem; }
.artigo__corpo li::marker { color: var(--ouro); }
.artigo__corpo blockquote { padding-left: 1.1em; border-left: 1px solid var(--hair-ouro); color: var(--sc-ink-soft); font-family: var(--sc-font-display); font-style: italic; }
.artigo__corpo blockquote p:last-child { margin-bottom: 0; }
.artigo__corpo a { text-decoration-color: var(--ouro); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
/* URL longa colada no texto não pode empurrar a página de lado no celular */
.artigo__corpo { overflow-wrap: anywhere; }

/* ── a assinatura: sem caixa e sem rótulo. A foto à esquerda, fechando o artigo; à direita dela o nome, o cargo e a área,
      e a OAB (de quem tem; estagiário não leva). DFK&T e Autor histórico: só o nome. Logo ao lado do texto a ponte pousa. ── */
.quem { position: relative; display: grid; grid-template-columns: clamp(8.5rem, 12vw, 10.5rem) minmax(0, 1fr); gap: 0 var(--sc-6); align-items: end;
  margin-top: var(--sc-10); padding-top: var(--sc-6); border-top: 1px solid var(--hair-ouro); }
.quem--sem-foto { grid-template-columns: minmax(0, 1fr); }
.quem__retrato { margin: 0; }
.quem__texto { justify-self: start; }   /* a caixa do texto tem a largura do texto: é dela que a ponte mede onde pousar */
.quem__n { font-size: var(--sc-t-xl); line-height: 1.12; text-wrap: balance; }
.quem__cargo { margin-top: var(--sc-3); }
.quem__oab { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.quem__faixa { display: none; }

/* ── a ponte do artigo: uma camada fixa atrás de tudo, como o fio da home; posição, tamanho e opacidade vêm do script ── */
.ponte-artigo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--ouro); opacity: 0; }
/* max-width: none é OBRIGATÓRIO: o reset do scrollcraft.css põe `svg { max-width: 100% }`, e o plano de 1000 px encolhia —
   a homografia supõe 1 px = 1 m do viewBox e errava tudo, calada (medido 11/09; a costura de marcos confere) */
.ponte3d { position: absolute; left: 0; top: 0; width: 1000px; max-width: none; height: 125px; overflow: visible; transform-origin: 0 0; }
.ponte3d path, .ponte3d line, .ponte3d polyline { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

@media (max-width: 860px) {
  .quem { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 var(--sc-5); }
  .quem--sem-foto { grid-template-columns: minmax(0, 1fr); }
  .quem__n { font-size: var(--sc-t-lg); }
  /* sem margem na tela: a ponte pousa numa faixa sob a assinatura */
  .quem__faixa { display: block; grid-column: 1 / -1; height: clamp(7rem, 34vw, 11rem); margin-top: var(--sc-5); }
}

/* ── abaixo da assinatura: "Mais em ‹Área›", três artigos (título e mês/ano) e o chamado de volta ao Blog ── */
.mais { margin-top: var(--sc-9); }
.mais .itens { margin-top: var(--sc-4); font-size: var(--sc-t-base); }
.mais .item:first-child { border-top-color: var(--hair-ouro); }
.mais .codigo__link { margin-top: var(--sc-7); }

/* ── a lista (/blog, FRO-411): a variante B da FRO-351 com os quatro ajustes do Lucca (11/09) — sem a linha de abertura,
      contagem e período um sobre o outro, o índice estreito (200 px a 1440) e a lista ocupando o resto, com o subtítulo
      correndo na largura da caixa. O período vai em caixa baixa: em versalete ele mede 238 px e quebraria em três linhas. ── */
.lista { display: grid; grid-template-columns: clamp(11rem, 14vw, 12.5rem) minmax(0, 1fr); gap: 0 var(--sc-9); align-items: start; }
.lista [hidden] { display: none !important; }
/* grudado, o índice não pode passar da tela: com as áreas quebrando em duas linhas ele mede ~830 px, e o que ficasse abaixo
   da dobra (as últimas áreas do filtro) nunca apareceria enquanto a lista rola. Passou da altura, ele rola por dentro. */
.lado { position: sticky; top: 8.5rem; max-height: calc(100svh - 8.5rem - var(--sc-5)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lista__meta { margin-top: var(--sc-5); }
.lista__meta span { display: block; }
.lista__meta span + span { margin-top: 0.4rem; font-size: var(--sc-t-sm); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.lado__grupo { margin-top: var(--sc-7); padding-top: var(--sc-4); border-top: 1px solid var(--hair); }
.lado__grupo ol { list-style: none; margin: var(--sc-3) 0 0; padding: 0; }
.lado__grupo li a { display: flex; justify-content: space-between; gap: var(--sc-3); padding: 0.3rem 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none;
  border-left: 1px solid transparent; transition: color var(--d) var(--ease); }
@media (hover: hover) and (pointer: fine) { .lado__grupo li a:hover { color: var(--sc-ink); } }
.lado__grupo li a:focus-visible { color: var(--sc-ink); }
.lado__grupo small { font-size: 0.85em; font-variant-numeric: tabular-nums; }
.filtro a[aria-current="true"] { color: var(--sc-ink); border-left-color: var(--ouro); padding-left: 0.6rem; }
.lista__conta { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); min-height: 1.5em; }
.ano { scroll-margin-top: 7.5rem; }
.ano + .ano { margin-top: var(--sc-9); }
.ano__n { font-size: var(--sc-t-3xl); color: var(--ouro); font-variant-numeric: tabular-nums; }
.lista .itens { margin-top: var(--sc-4); }
.lista .item:first-child { border-top-color: var(--hair-ouro); }
@media (max-width: 860px) {
  .lista { grid-template-columns: minmax(0, 1fr); }
  .lado { position: static; margin-bottom: var(--sc-7); }
  .lado__grupo ol { display: flex; flex-wrap: wrap; gap: 0 var(--sc-5); }
  .lado__grupo li a { justify-content: flex-start; gap: 0.4em; border-left: 0; }
  .filtro a[aria-current="true"] { padding-left: 0; text-decoration: underline; text-decoration-color: var(--ouro); text-underline-offset: 0.3em; }
}

/* ── artigo indisponível ── */
.indisponivel .codigo__link { margin-top: var(--sc-7); }