/* =========================================================
   Método Tuller · estilos só do blog (blog/, gerado por tools/blog.py)
   Usa os tokens --mt-* de style.css; não cria cores novas.
   ========================================================= */

/* ---------- Topo do artigo ---------- */
.blog-hero h1 { max-width: 24ch; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.25rem); }
.blog-hero .hero__texto { padding: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem) 0; }
.blog-trilha ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .8125rem; color: var(--mt-gelo-texto); }
.blog-trilha li + li::before { content: "›"; margin-right: .5rem; color: var(--mt-gelo); }
.blog-trilha a { color: var(--mt-gelo-texto); text-decoration: none; }
.blog-trilha a:hover { color: var(--mt-branco); text-decoration: underline; }
.blog-hero__meta { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: var(--mt-pequeno); color: var(--mt-gelo-texto); }
.blog-hero__meta a { color: var(--mt-branco); font-weight: 600; }

/* ---------- Faixa de rascunho ---------- */
.blog-rascunho {
  position: sticky; top: 0; z-index: 55;
  padding: .65rem var(--mt-gutter); text-align: center; font-size: .875rem;
  color: var(--mt-petroleo);
  background: repeating-linear-gradient(-45deg, var(--mt-gelo) 0 14px, var(--mt-branco) 14px 28px);
  border-bottom: 2px solid var(--mt-petroleo);
}
.blog-rascunho strong { letter-spacing: .2em; }

/* ---------- Corpo: sumário + texto ---------- */
.blog-secao { padding-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
.blog-layout > .blog-artigo:only-child { grid-column: 1 / -1; }
.blog-artigo { min-width: 0; max-width: 46rem; }

.blog-sumario { position: sticky; top: 92px; font-size: .875rem; }
.blog-sumario summary { list-style: none; cursor: default; font-size: var(--mt-rotulo); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mt-texto-suave); margin-bottom: .75rem; }
.blog-sumario summary::-webkit-details-marker { display: none; }
.blog-sumario ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--mt-linha); counter-reset: sumario; }
.blog-sumario li { counter-increment: sumario; }
.blog-sumario a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--mt-texto-suave); line-height: 1.35; }
.blog-sumario a:hover { color: var(--mt-petroleo); border-left-color: var(--mt-gelo); }

@media (max-width: 960px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sumario { position: static; max-width: 46rem; background: var(--mt-nevoa); border-radius: var(--mt-raio); padding: 1rem 1.25rem; }
  .blog-sumario summary { cursor: pointer; margin: 0; position: relative; padding-right: 1.5rem; }
  .blog-sumario summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.25rem; letter-spacing: 0; }
  .blog-sumario details[open] summary { margin-bottom: .75rem; }
  .blog-sumario details[open] summary::after { content: "–"; }
}

/* ---------- Em poucas palavras ---------- */
.blog-resumo { background: var(--mt-nevoa); border-left: 3px solid var(--mt-petroleo); border-radius: var(--mt-raio-pequeno); padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; }
.blog-resumo h2.rotulo { font-size: var(--mt-rotulo); margin: 0 0 .75rem; color: var(--mt-petroleo); }
.blog-resumo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.blog-resumo li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.blog-resumo li::before { content: ""; position: absolute; left: 0; top: .7em; width: .75rem; height: 2px; background: var(--mt-petroleo); }

/* ---------- Tipografia de leitura (~68 caracteres por linha) ---------- */
.blog-texto { max-width: 68ch; font-size: 1.125rem; line-height: 1.75; color: var(--mt-texto); }
.blog-texto > * + * { margin-top: 0; }
.blog-texto p { margin: 0 0 1.35em; }
.blog-texto h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 2.4em 0 .7em; scroll-margin-top: 96px; line-height: 1.25; }
.blog-texto h2:first-child { margin-top: 0; }
.blog-texto h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; }
.blog-texto ul, .blog-texto ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.blog-texto li { margin-bottom: .5em; }
.blog-texto li::marker { color: var(--mt-petroleo); font-weight: 600; }
.blog-texto a { color: var(--mt-petroleo); font-weight: 600; text-decoration-color: var(--mt-gelo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-texto a:hover { text-decoration-color: var(--mt-petroleo); }
.blog-texto strong { font-weight: 700; }
.blog-texto hr { border: 0; border-top: 1px solid var(--mt-linha); margin: 2.5em 0; }
.blog-citacao { margin: 2em 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--mt-gelo); }
.blog-citacao blockquote { margin: 0; font-size: 1.1875rem; font-weight: 500; line-height: 1.55; }
.blog-citacao blockquote p { margin: 0 0 .5em; }
.blog-citacao figcaption { font-size: var(--mt-pequeno); font-weight: 600; color: var(--mt-texto-suave); }
.blog-imagem { margin: 0 0 2rem; }
.blog-imagem img { width: 100%; border-radius: var(--mt-raio); }

/* ---------- Perguntas frequentes (reaproveita .faq de style.css) ---------- */
.blog-faq { max-width: 68ch; margin-top: 3rem; }
.blog-faq h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); scroll-margin-top: 96px; }
.blog-faq .faq details > div { font-size: 1.0625rem; line-height: 1.65; }

/* ---------- Assuntos e compartilhar ---------- */
.blog-tags { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-tags li { font-size: .8125rem; padding: .35rem .8rem; border-radius: var(--mt-raio-botao); background: var(--mt-nevoa); color: var(--mt-texto-suave); }
.blog-compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 2rem 0 0; padding: 1.5rem 0; border-top: 1px solid var(--mt-linha); border-bottom: 1px solid var(--mt-linha); }
.blog-compartilhar .rotulo { margin: 0 .5rem 0 0; }
.blog-compartilhar .btn { gap: .5rem; }
.blog-compartilhar .btn svg { width: 18px; height: 18px; flex: none; }
.blog-compartilhar [hidden] { display: none; }

/* ---------- Curso relacionado ---------- */
.blog-curso { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; align-items: start; margin: 2.5rem 0 0; padding: 1.75rem; border-radius: var(--mt-raio); background: var(--mt-petroleo); color: var(--mt-branco); }
.blog-curso .rotulo { color: var(--mt-gelo); }
.blog-curso p { color: var(--mt-gelo-texto); }
.blog-curso__titulo { font-size: var(--mt-h3); color: var(--mt-branco); margin: .25rem 0 .5rem; }
.blog-curso__ilu { width: 7rem; height: 7rem; border-radius: var(--mt-raio); background: rgba(170, 205, 219, .12); color: var(--mt-gelo); display: grid; place-items: center; }
.blog-curso__ilu .ilu { width: 80%; height: 80%; }
.blog-curso .btn--primario { background: var(--mt-gelo); color: var(--mt-petroleo); }
.blog-curso .btn--primario:hover { background: var(--mt-branco); }
.blog-curso--gelo { background: var(--mt-gelo); color: var(--mt-petroleo); }
.blog-curso--gelo .rotulo, .blog-curso--gelo p, .blog-curso--gelo .blog-curso__titulo { color: var(--mt-petroleo); }
.blog-curso--gelo .blog-curso__ilu { background: rgba(255, 255, 255, .45); color: var(--mt-petroleo); }
.blog-curso--gelo .btn--primario { background: var(--mt-petroleo); color: var(--mt-branco); }
.blog-curso--gelo .btn--primario:hover { background: var(--mt-petroleo-90); }
.blog-curso__nota { font-size: .75rem; line-height: 1.4; margin: 1rem 0 0; color: var(--mt-texto-suave); }
.blog-curso .blog-curso__nota { color: var(--mt-gelo-texto); }
.blog-curso--gelo .blog-curso__nota { color: var(--mt-petroleo); }
@media (max-width: 560px) {
  .blog-curso { grid-template-columns: 1fr; }
  .blog-curso__ilu { width: 5rem; height: 5rem; }
}

/* ---------- Autora ---------- */
.blog-autor { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; align-items: center; margin: 2.5rem 0 0; padding: 1.5rem; border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); }
.blog-autor img { width: 7.5rem; height: 7.5rem; object-fit: cover; object-position: 50% 18%; border-radius: 50%; }
.blog-autor .rotulo { margin-bottom: .25rem; }
.blog-autor__nome { font-size: var(--mt-h3); margin: 0 0 .4rem; }
.blog-autor p { font-size: var(--mt-pequeno); color: var(--mt-texto-suave); margin-bottom: .5rem; }
@media (max-width: 560px) { .blog-autor { grid-template-columns: 1fr; } .blog-autor img { width: 5.5rem; height: 5.5rem; } }

.blog-aviso { margin-top: 2rem; }

/* ---------- Cartões de artigo ---------- */
.blog-card { display: flex; flex-direction: column; background: var(--mt-branco); border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); overflow: hidden; transition: box-shadow .2s, transform .2s; position: relative; }
.blog-card:hover { box-shadow: var(--mt-sombra); transform: translateY(-2px); }
.blog-card[hidden] { display: none; }
.blog-faixa { background: var(--mt-petroleo); color: var(--mt-gelo); padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 5.5rem; }
.blog-faixa--gelo { background: var(--mt-gelo); color: var(--mt-petroleo); }
.blog-faixa__tema { font-size: var(--mt-rotulo); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.blog-faixa .ilu { width: 3.75rem; height: 3.75rem; flex: none; transition: transform .3s; }
.blog-card:hover .blog-faixa .ilu { transform: rotate(-4deg) scale(1.06); }
.blog-card__corpo { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__titulo { font-size: 1.125rem; line-height: 1.35; margin: 0 0 .6rem; }
.blog-card__titulo a { text-decoration: none; }
.blog-card__titulo a::after { content: ""; position: absolute; inset: 0; } /* cartão inteiro clicável */
.blog-card__titulo a:hover { text-decoration: underline; text-decoration-color: var(--mt-gelo); text-underline-offset: 3px; }
.blog-card__resumo { font-size: var(--mt-pequeno); color: var(--mt-texto-suave); flex: 1; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .8125rem; color: var(--mt-texto-suave); margin: 0; }
.blog-card a:focus-visible { outline: none; }
.blog-card:has(a:focus-visible) { outline: 3px solid var(--mt-gelo); outline-offset: 3px; }

/* ---------- Índice: destaque e filtros ---------- */
.blog-secao-destaque { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.blog-destaque { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: var(--mt-raio); overflow: hidden; border: 1px solid var(--mt-linha); background: var(--mt-branco); }
.blog-destaque__ilu { background: var(--mt-petroleo); color: var(--mt-gelo); display: grid; place-items: center; padding: 2rem; min-height: 16rem; }
.blog-destaque--gelo .blog-destaque__ilu { background: var(--mt-gelo); color: var(--mt-petroleo); }
.blog-destaque__ilu .ilu { width: min(12rem, 70%); height: auto; }
.blog-destaque__texto { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.blog-destaque__texto h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.blog-destaque__texto h2 a { text-decoration: none; }
.blog-destaque__texto h2 a:hover { text-decoration: underline; text-decoration-color: var(--mt-gelo); }
.blog-destaque__texto > p:not(.blog-meta) { color: var(--mt-texto-suave); }
.blog-destaque .blog-meta { margin-bottom: 1.5rem; }
@media (max-width: 760px) {
  .blog-destaque { grid-template-columns: 1fr; }
  .blog-destaque__ilu { min-height: 10rem; }
  .blog-destaque__ilu .ilu { width: 7rem; }
}
.blog-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.blog-filtros[hidden] { display: none; }
.blog-filtro { border: 1.5px solid rgba(17,53,64,.45) !important;
  font: 500 .875rem/1 var(--mt-fonte);
  padding: .7rem 1rem; min-height: 44px;
  border: 1px solid var(--mt-linha); border-radius: var(--mt-raio-botao);
  background: var(--mt-branco); color: var(--mt-petroleo); cursor: pointer;
}
.blog-filtro:hover { border-color: var(--mt-petroleo); }
.blog-filtro[aria-pressed="true"] { background: var(--mt-petroleo); color: var(--mt-branco); border-color: var(--mt-petroleo); }
.blog-vazio { margin: 1.5rem 0 0; color: var(--mt-texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-faixa .ilu { transition: none; }
  .blog-card:hover { transform: none; }
}
@media print {
  .blog-sumario, .blog-compartilhar, .blog-curso, .faixa, .topo, .rodape, .whats, .popup { display: none !important; }
  .blog-layout { display: block; }
}

/* Ícones dos blocos de curso e do destaque: fundo com profundidade, sombra e entrada animada */
.blog-curso__ilu { position: relative; background: linear-gradient(145deg, rgba(217,176,122,.34), rgba(217,176,122,.12)); color: var(--mt-kraft); box-shadow: 0 0 0 1px rgba(217,176,122,.45) inset, 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 34px -14px rgba(0,0,0,.65); }
.blog-curso__ilu .ilu { stroke-width: 3.6; }
.blog-curso--gelo .blog-curso__ilu { background: linear-gradient(145deg, #FFFFFF 0%, #DCEBF1 100%); color: var(--mt-petroleo); box-shadow: 0 0 0 1px rgba(17,53,64,.12) inset, 0 1px 0 #fff inset, 0 18px 32px -14px rgba(12,40,48,.55); }
.blog-destaque__ilu .ilu { padding: 1.25rem; border-radius: 50%; background: linear-gradient(145deg, rgba(170,205,219,.16), rgba(170,205,219,.04)); box-shadow: 0 0 0 1px rgba(170,205,219,.3) inset, 0 24px 44px -20px rgba(0,0,0,.7); }
.blog-destaque--gelo .blog-destaque__ilu .ilu { background: linear-gradient(145deg, #FFFFFF, #DCEBF1); box-shadow: 0 0 0 1px rgba(17,53,64,.12) inset, 0 24px 44px -20px rgba(12,40,48,.55); }
@keyframes ilu-pula { 0% { transform: translateY(14px) scale(.86) rotate(-6deg); opacity: 0; } 60% { transform: translateY(-4px) scale(1.04) rotate(2deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.js .desenho .blog-curso__ilu, .js .blog-destaque .blog-destaque__ilu .ilu { opacity: 0; }
.js .desenho.visivel .blog-curso__ilu, .js .blog-destaque.visivel .blog-destaque__ilu .ilu, .js .desenho.visivel.blog-destaque .blog-destaque__ilu .ilu { opacity: 1; animation: ilu-pula .8s .15s cubic-bezier(.2,.7,.2,1) backwards; }
.blog-curso__ilu, .blog-destaque__ilu .ilu { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.blog-curso:hover .blog-curso__ilu { transform: translateY(-4px) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .js .desenho .blog-curso__ilu, .js .blog-destaque .blog-destaque__ilu .ilu { opacity: 1; animation: none !important; } }

/* 3ª auditoria: última linha da grade sem cartão órfão encostado à esquerda; sumário com alvo de toque */
@media (min-width: 641px) {
  .blog-grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
  .blog-grade > * { flex: 0 1 calc((100% - 2 * 1.5rem) / 3); }
}
@media (min-width: 641px) and (max-width: 960px) { .blog-grade > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 960px) { .blog-sumario summary { display: flex; align-items: center; min-height: 44px; } }
/* Filtros do blog com larguras iguais (mesma regra da vitrine de cursos) */
.blog-filtros { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; max-width: 60rem; }
.blog-filtros[hidden] { display: none; }
@media (max-width: 960px) { .blog-filtros { grid-auto-columns: 172px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--mt-gutter)); padding-inline: var(--mt-gutter); max-width: none; } }
.blog-curso__nota { font-size: .875rem; }