/* Estilos do tema que não vêm do protótipo. O resto está em assets/css,
   copiado do protótipo por ferramentas/gerar.py. */

/* capa do post */
.post-capa { margin: 0 0 clamp(32px, 4vw, 56px); }
.post-capa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }

/* card de post com imagem destacada */
.ins-card-img { display: block; aspect-ratio: 16 / 9; margin: -1px -1px 16px; border-radius: 12px 12px 0 0; overflow: hidden; background: #0b0c0f; }
.ins-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(.5s * var(--motion)) var(--ease-out); }
.ins-card:hover .ins-card-img img { transform: scale(1.04); }

/* conteúdo vindo do editor: imagens e listas dentro do corpo do post */
.post-corpo img { max-width: 100%; height: auto; border-radius: 12px; }
.post-corpo figure { margin: 32px 0; }
.post-corpo figcaption { margin-top: 8px; font-size: .85rem; color: var(--txt-3); }

/* case: capa e textos vindos dos campos */
.case-capa { max-width: min(100%, 880px); margin: clamp(32px, 4vw, 56px) auto 0; border-radius: 18px; overflow: hidden; background: #0b0c0f; }
.case-capa img, .case-capa video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.case-texto { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; }
.case-texto p + p { margin-top: 1em; }
.case-texto ul { padding-left: 1.2em; }

/* case: desafio e solução lado a lado (textos de comprimento parecido) */
.case-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.case-duo .h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 20px; }
/* fases: texto e mídia em duas colunas, alternando o lado */
.case-fase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.case-fase--inversa > :first-child { order: 2; }
.case-fase .h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 20px; }
.case-midia { margin: 0; border-radius: 16px; overflow: hidden; background: #0b0c0f; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }
.case-midia img, .case-midia video { display: block; width: 100%; height: auto; }
.case-midia--yt { aspect-ratio: 16 / 9; }
.case-midia--yt iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Prints em janela de navegador: tela de altura fixa, a página rola dentro */
.case-tela { position: relative; justify-self: center; width: 100%; max-width: 620px; margin: 0; border-radius: 14px; overflow: hidden; background: #15171c; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.case-tela-barra { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; background: #1c1f25; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.case-tela-pontos { display: flex; gap: 6px; flex: none; }
.case-tela-pontos i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.case-tela-end { flex: 1; min-width: 0; max-width: 320px; margin-right: 46px; margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 12px; line-height: 1.4; color: #aab1bd; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-tela-vista { height: clamp(300px, 28vw, 440px); background: #0b0c0f; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.case-tela-vista img { display: block; width: 100%; height: auto; }
.case-tela--curta .case-tela-vista { height: auto; }
.case-tela-vista:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .case-tela-vista { overscroll-behavior: contain; } }
.case-tela::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .38)); pointer-events: none; opacity: 0; transition: opacity .3s; }
.case-tela.tem-rolagem::after { opacity: 1; }
.case-tela.tem-rolagem.no-fim::after { opacity: 0; }
.case-tela-dica { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: none; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 12, 16, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; transition: opacity .3s; }
.case-tela-dica::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }
.case-tela.tem-rolagem .case-tela-dica { display: inline-flex; }
.case-tela.rolou .case-tela-dica { opacity: 0; }
.case-texto h3 { margin: 1.4em 0 .5em; font: 500 1.2rem/1.25 var(--f-shield); letter-spacing: -.02em; color: var(--txt-tit); }
.case-texto ul, .case-texto ol { margin: .6em 0 1em; padding-left: 1.2em; }
.case-texto li + li { margin-top: .35em; }
.case-texto strong { color: var(--txt-tit); }
/* aprendizados */
.case-licoes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.case-licoes li { padding: 24px 22px; border-radius: 16px; background: rgba(255, 255, 255, .34); border: 1px solid var(--linha-2); }
.case-licoes h3 { margin: 0 0 10px; font: 500 1.15rem/1.2 var(--f-shield); letter-spacing: -.02em; color: var(--txt-tit); }
.case-licoes p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--txt); }
.case-link { margin-top: 24px; }
.link-seta-a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--txt-tit); text-decoration: none; border-bottom: 1px solid var(--acao); padding-bottom: 3px; }
.link-seta-a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 1023px) {
  .case-duo, .case-fase { grid-template-columns: 1fr; }
  .case-fase--inversa > :first-child { order: 0; }
  .case-licoes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) { .case-licoes { grid-template-columns: 1fr; } }

/* Post: coluna de texto mais larga (720 -> 820 px) e a capa afastada do índice */
.pagina-post .post-col { max-width: calc(820px + 2 * var(--gut)); }
.post-capa { margin: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 56px); }

/* Post: autor e revisão num card só (nome, revisão e link à esquerda; a bio à direita) */
.pagina-post .autor-sec .post-col { max-width: calc(820px + 2 * var(--gut)); }
.autor-unico { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); padding: clamp(24px, 3vw, 36px); border-radius: 16px; border: 1px solid var(--linha-2); background: var(--ink-1); }
.autor-unico .iniciais { width: 52px; height: 52px; font-size: .95rem; }
.autor-lado { display: flex; flex-direction: column; align-items: flex-start; }
.autor-lado .rev-carimbo { margin-top: 20px; }
.autor-lado .rev-hist li { grid-template-columns: minmax(0, 1fr) auto; }
.autor-lado .ia-mini-link { margin-top: 22px; }
.autor-lado.carimbou .rev-carimbo { opacity: 1 !important; transform: rotate(-2deg) !important; box-shadow: 0 0 0 6px rgba(232, 80, 2, .08); }
.autor-unico .autor-txt { margin-top: 0; }
@media (max-width: 767px) { .autor-unico { grid-template-columns: minmax(0, 1fr); } }

/* Post: "Leia também" com os 3 relacionados ocupando a largura toda */
.pagina-post .rel-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 899px) { .pagina-post .rel-grade { grid-template-columns: minmax(0, 1fr); } }

/* /blog/ (INS-03): a lista do protótipo vira grade de cards com os posts reais,
   12 por vez. O card é o mesmo do "Leia também" (dp_card_post). */
.arq-grade { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.arq-grade .arq-item { display: flex; }
.arq-grade .arq-item[hidden] { display: none; }
.arq-grade .ins-card { width: 100%; }
.arq-grade .ins-card-tit mark { background: rgba(232, 80, 2, .25); color: #fff; border-radius: 3px; padding: 0 2px; }
.arquivo.com-foco .arq-grade .arq-item:not(.par) { opacity: .4; }
.arq-mais { display: flex; justify-content: center; margin-top: 40px; }
.arq-mais[hidden] { display: none; }
@media (max-width: 1099px) { .arq-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .arq-grade { grid-template-columns: minmax(0, 1fr); gap: 14px; } }