/* =============== BLOG ARTICLE — DESIGN SYSTEM (NOVO TEMPLATE) =============== */
/*
 * Aditivo, carregado DEPOIS de blog.css. Não redefine nem sobrescreve nenhuma
 * classe já em uso pelos 26 artigos existentes — usa um namespace novo
 * (.lei-article__*) para tudo que é estrutura do template novo, e só toca nas
 * classes antigas (.lei-blog-card, .lei-blog-grid__grid) através de
 * modificadores aditivos (--featured) ou seletores de atributo
 * ([data-category]) que não existem em nenhuma folha de estilo anterior.
 *
 * Ver plano: "Design system e template único de artigo" — 8 princípios
 * (coluna de leitura, títulos com tracking negativo, par tipográfico,
 * grid de revista, sumário lateral com scrollspy, capitular, cor por
 * categoria, tabular-nums).
 *
 * Migração dos 26 artigos existentes para essas classes é fase posterior —
 * ver docs do plano. Este arquivo só precisa existir e funcionar.
 */

:root {
  /* --- Coluna de leitura (princípio 1) --- */
  --article-measure: 68ch; /* 65-70 caracteres por linha */
  --article-body-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem); /* ~17-21px */
  --article-body-line-height: 1.625;
  --article-text: #2e2e2e; /* nunca #000 — legibilidade sem dureza */
  --article-text-soft: #55534f;

  /* --- Par tipográfico (princípio 3) — o mesmo já usado no blog --- */
  --article-font-serif: "Merriweather", Georgia, serif;
  --article-font-sans: "Lexend", "Lexend Fallback Segoe UI", "Lexend Fallback Roboto",
    "Lexend Fallback Arial", system-ui, sans-serif;

  /* --- Títulos: tracking negativo escalonado (princípio 2). H1 em 700 por
     pedido direto do Rael (peso mais forte que a pesquisa de referência
     sugeria) — H2-H4 seguem mais leves, mantendo hierarquia de peso. */
  --article-h1-size: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
  --article-h1-weight: 700;
  --article-h1-tracking: -0.03em;

  --article-h2-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --article-h2-weight: 600;
  --article-h2-tracking: -0.02em;

  --article-h3-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --article-h3-weight: 500;
  --article-h3-tracking: -0.015em;

  --article-h4-size: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);
  --article-h4-weight: 500;
  --article-h4-tracking: -0.01em;

  /* --- Cor de destaque padrão (sem [data-category] reconhecida) --- */
  --article-accent: #2563eb;
  --article-accent-tint: #dbeafe;

  /* --- Cor de destaque por categoria (princípio 7) --- */
  /* Tons "600" com contraste ~4.5:1+ sobre fundo branco (bom senso de */
  /* luminosidade, não medido por ferramenta) + tint claro pra fundo/badge. */
  --article-accent-scrum: #b45309;
  --article-accent-tint-scrum: #fef3c7;

  --article-accent-certificacao-psm-i: #2563eb;
  --article-accent-tint-certificacao-psm-i: #dbeafe;

  --article-accent-curso-de-scrum: #7c3aed;
  --article-accent-tint-curso-de-scrum: #ede9fe;

  --article-accent-gestao-agil: #059669;
  --article-accent-tint-gestao-agil: #d1fae5;

  --article-accent-lideranca: #dc2626;
  --article-accent-tint-lideranca: #fee2e2;

  --article-accent-inteligencia-artificial: #0891b2;
  --article-accent-tint-inteligencia-artificial: #cffafe;

  --article-accent-planejamento: #db2777;
  --article-accent-tint-planejamento: #fce7f3;
}

/* Aplica a cor por categoria — cascata via custom property, então qualquer
   descendente (badge, capitular, links do TOC) herda sem seletor extra. */
[data-category="scrum"] {
  --article-accent: var(--article-accent-scrum);
  --article-accent-tint: var(--article-accent-tint-scrum);
}
[data-category="certificacao-psm-i"] {
  --article-accent: var(--article-accent-certificacao-psm-i);
  --article-accent-tint: var(--article-accent-tint-certificacao-psm-i);
}
[data-category="curso-de-scrum"] {
  --article-accent: var(--article-accent-curso-de-scrum);
  --article-accent-tint: var(--article-accent-tint-curso-de-scrum);
}
[data-category="gestao-agil"] {
  --article-accent: var(--article-accent-gestao-agil);
  --article-accent-tint: var(--article-accent-tint-gestao-agil);
}
[data-category="lideranca"] {
  --article-accent: var(--article-accent-lideranca);
  --article-accent-tint: var(--article-accent-tint-lideranca);
}
[data-category="inteligencia-artificial"] {
  --article-accent: var(--article-accent-inteligencia-artificial);
  --article-accent-tint: var(--article-accent-tint-inteligencia-artificial);
}
[data-category="planejamento"] {
  --article-accent: var(--article-accent-planejamento);
  --article-accent-tint: var(--article-accent-tint-planejamento);
}

/* =============== LAYOUT: CONTEÚDO + SUMÁRIO LATERAL (princípio 5) === */

.lei-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: calc(var(--article-measure) + 320px);
  margin-inline: auto;
  /* Mesmo cartão branco que .lei-blog-article__content-wrapper já usa nos
     artigos antigos (blog.css:477-485) — .lei-article__layout SUBSTITUI esse
     wrapper no template novo (não fica aninhado dentro dele), então precisa
     do próprio fundo: sem isso o conteúdo cai direto sobre o fundo escuro da
     página e o texto fica ilegível. */
  background: #fff;
  /* Cor explícita: o <body> do site é escuro e define color:#f9fafb (branco),
     que é herdado aqui dentro. Tudo que tem cor própria escapa (parágrafo, h2,
     links do sumário), mas conteúdo publicado pelo CMS sem cor própria — um
     <li> solto, uma tabela, um <strong> fora de parágrafo — nascia branco
     sobre branco, invisível. Este reset é o que impede isso. */
  color: var(--article-text);
  border-radius: 16px;
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  .lei-article__layout {
    padding: clamp(1.5rem, 4vw, 2rem);
    margin-top: 0; /* content-section já cuida da distância no mobile */
    border-radius: 12px;
  }
}

@media (min-width: 1024px) {
  .lei-article__layout:has(.lei-article__toc) {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
  }
}

/* =============== COLUNA DE LEITURA (princípio 1) =============== */

.lei-article__prose {
  max-width: var(--article-measure);
  width: 100%;
  margin-inline: auto;
  font-family: var(--article-font-serif);
  font-size: var(--article-body-size);
  line-height: var(--article-body-line-height);
  color: var(--article-text);
}

.lei-article__prose > p,
.lei-article__prose > ul,
.lei-article__prose > ol,
.lei-article__prose > blockquote,
.lei-article__prose > figure {
  margin-top: 0;
  margin-bottom: 1.5em;
}

.lei-article__prose > :is(h2, h3, h4) {
  font-family: var(--article-font-sans);
  color: #17171a;
  margin-top: 2.75em;
  margin-bottom: 0.85em;
}

.lei-article__prose > :is(h2, h3, h4):first-child {
  margin-top: 0;
}

.lei-article__prose > h2 {
  font-size: var(--article-h2-size);
  font-weight: var(--article-h2-weight);
  letter-spacing: var(--article-h2-tracking);
  line-height: 1.2;
}

.lei-article__prose > h3 {
  font-size: var(--article-h3-size);
  font-weight: var(--article-h3-weight);
  letter-spacing: var(--article-h3-tracking);
  line-height: 1.25;
}

.lei-article__prose > h4 {
  font-size: var(--article-h4-size);
  font-weight: var(--article-h4-weight);
  letter-spacing: var(--article-h4-tracking);
  line-height: 1.3;
}

.lei-article__prose a {
  color: var(--article-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.lei-article__prose strong {
  font-weight: 700;
  color: #17171a;
}

.lei-article__prose ul,
.lei-article__prose ol {
  padding-left: 1.4em;
}

.lei-article__prose li {
  margin-bottom: 0.5em;
}

.lei-article__prose li::marker {
  color: var(--article-accent);
}

.lei-article__prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--article-accent);
  font-style: italic;
  color: var(--article-text-soft);
}

.lei-article__prose figure {
  text-align: center;
}

.lei-article__prose figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* Vídeo (iframe do YouTube) responsivo — mantém a proporção 16:9 do embed
   original independente da largura do atributo width/height no HTML. */
.lei-article__prose figure iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  border: 0;
}

.lei-article__prose figcaption {
  font-family: var(--article-font-sans);
  font-size: 0.85em;
  color: var(--article-text-soft);
  margin-top: 0.6em;
}

/* --- Título de topo (h1) do template novo, mesma escala do princípio 2 --- */
/* SEM cor aqui de propósito. O #17171a do princípio "corpo escuro, nunca #000"
   vale para a coluna de leitura no cartão branco — sobre a foto de capa do
   hero ele fica ilegível (contraste ~1.1:1). Este h1 carrega as duas classes
   (.lei-blog-article__title + .lei-article__title) e, como blog-article.css é
   o último <link>, uma cor solta aqui vencia o branco do hero por ordem de
   cascata e apagava o título. Cada contexto pinta a sua, escopado, abaixo. */
.lei-article__title {
  font-family: var(--article-font-sans);
  font-size: var(--article-h1-size);
  font-weight: var(--article-h1-weight);
  letter-spacing: var(--article-h1-tracking);
  line-height: 1.1;
  margin: 0 0 0.5em;
}

/* Título sobre a foto de capa: claro, com a sombra que o hero já aplica. */
.lei-blog-article-hero .lei-article__title {
  color: #fff;
}

/* Título dentro do cartão branco de leitura (se algum layout futuro colocar o
   h1 ali): o tom escuro do princípio 1. */
.lei-article__layout .lei-article__title {
  color: #17171a;
}

/* --- Badge de categoria colorida (herda a cor via [data-category]) --- */
.lei-article__category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--article-accent-tint);
  color: var(--article-accent);
  font-family: var(--article-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* =============== CAPITULAR (princípio 6) =============== */
/* Só na abertura do artigo (primeiro parágrafo da prosa, repetida em nenhuma
   outra seção) — convenção de revista impressa (NYT/Atlantic), que também só
   usa uma vez por peça. Desligada em RTL — árabe não tem essa convenção. */
html:not([dir="rtl"]) .lei-article__prose > p:first-child::first-letter {
  float: left;
  font-family: var(--article-font-serif);
  font-weight: 700;
  font-size: 3.2em;
  line-height: 0.82;
  padding-right: 0.09em;
  padding-top: 0.05em;
  color: var(--article-text);
}

/* =============== SUMÁRIO LATERAL (princípio 5) =============== */

.lei-article__toc {
  font-family: var(--article-font-sans);
  background: #f7f7f5;
  border: 1px solid #e6e5e0;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  /* Um <details> FECHADO encolhe para a largura do <summary> quando é item de
     grid — e nem `justify-self: stretch` corrige (medido no Chrome: 123px em
     vez dos 265px da coluna). Só o width explícito resolve, e ele é inofensivo
     nos dois breakpoints, já que a caixa segue a largura da própria coluna. */
  width: 100%;
}

.lei-article__toc summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #17171a;
  list-style: revert;
}

.lei-article__toc summary::marker {
  color: var(--article-accent);
}

.lei-article__toc-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lei-article__toc-list li {
  margin: 0;
}

.lei-article__toc-list a {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--article-text-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.7rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lei-article__toc-list a:hover {
  color: var(--article-text);
}

.lei-article__toc-list a.is-active {
  color: var(--article-accent);
  border-left-color: var(--article-accent);
  font-weight: 600;
}

/* Sub-itens (h3 dentro de uma seção h2) recuados */
.lei-article__toc-list li[data-toc-level="3"] a {
  padding-left: 1.4rem;
  font-size: 0.8rem;
}

/* Abaixo de 1024px o layout é uma coluna só e o sumário é o SEGUNDO filho do
   grid — ou seja, caía depois do artigo inteiro (a ~14.500px de scroll num
   documento de 17.000px). Sumário depois do texto não serve para nada, então
   ele vem para antes da prosa; o blog-article.js o entrega fechado nesse
   tamanho, para não empurrar a leitura para baixo. */
@media (max-width: 1023px) {
  .lei-article__toc {
    order: -1;
  }
}

@media (min-width: 1024px) {
  .lei-article__toc {
    position: sticky;
    /* abaixo do header fixo do site (~80px) + respiro */
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* =============== GRID DE REVISTA — LISTAGEM/CATEGORIA (princípio 4) === */
/* Aditivo sobre .lei-blog-card / .lei-blog-grid__grid já existentes. */

.lei-blog-card--featured .lei-blog-card__image {
  aspect-ratio: 21 / 9;
}

.lei-blog-card--featured .lei-blog-card__title {
  font-family: var(--article-font-sans);
  letter-spacing: var(--article-h3-tracking);
}

@media (min-width: 768px) {
  .lei-blog-grid__grid .lei-blog-card--featured {
    grid-column: span 2;
  }
}

@media (min-width: 992px) {
  .lei-blog-grid__grid .lei-blog-card--featured {
    grid-column: span 2;
    grid-row: span 2;
  }

  .lei-blog-grid__grid .lei-blog-card--featured .lei-blog-card__title {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  }

  .lei-blog-grid__grid .lei-blog-card--featured .lei-blog-card__excerpt {
    -webkit-line-clamp: 4;
  }
}

/* Badge de categoria colorida nos cards, quando o card carrega
   [data-category] (blog/index.html já escreve; páginas de categoria
   passam a escrever também — ver gerar-categorias-blog.js). */
.lei-blog-card[data-category] .lei-blog-card__category {
  background: var(--article-accent-tint);
  border-color: var(--article-accent);
  color: var(--article-accent);
}

.lei-blog-card[data-category] .lei-blog-card__category:hover {
  background: var(--article-accent);
  color: #fff;
}

/* =============== RESPONSIVIDADE — MOBILE (princípio 5, cont.) === */

@media (max-width: 1023px) {
  .lei-article__layout {
    max-width: var(--article-measure);
  }

  .lei-article__toc {
    margin-inline: auto;
  }
}

/* =============== MODIFICADORES ADITIVOS PARA O TEMPLATE ANTIGO === */
/* Não usados pelos 26 artigos hoje — ficam prontos pra quando um artigo
   migrado individualmente quiser só o refinamento tipográfico, sem
   reestruturar o HTML inteiro pro layout novo. */

.lei-blog-article__title--v2 {
  font-weight: var(--article-h1-weight);
  letter-spacing: var(--article-h1-tracking);
}

.lei-blog-article__content--v2 {
  font-family: var(--article-font-serif);
  color: var(--article-text);
}

/* =============== UTILITÁRIO (princípio 8) =============== */

.article-num {
  font-variant-numeric: tabular-nums;
}