/* Blog — reaproveita o sistema visual do site (styles.css) e acrescenta só o
   que é específico de leitura longa. Nada de tema paralelo. */

.post { padding-block: 68px 104px; }
.post h1 { font-size: clamp(32px, 5vw, 58px); max-width: 26ch; }
.post-meta { margin-top: 18px; font-family: var(--fonte-mono); font-size: 12.5px; color: var(--areia-3); }
.post-resumo { margin-top: 26px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--areia); max-width: 62ch; }
.post h2 { margin-top: 52px; font-size: clamp(22px, 2.4vw, 32px); max-width: 30ch; }
.post p { margin-top: 16px; color: var(--areia-2); font-size: 16.5px; line-height: 1.68; max-width: 68ch; }
.post .lista-faq { margin-top: 20px; }

.migalhas { margin-bottom: 26px; font-family: var(--fonte-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--areia-3); }
.migalhas a { color: var(--areia-2); text-decoration: none; padding: 6px 0; display: inline-block; }
.migalhas a:hover { color: var(--areia); }
.migalhas span { margin-inline: 8px; }

.post-cta { margin-top: 64px; border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--noite-2); padding: 32px 30px; max-width: 720px; }
.post-cta h2 { margin-top: 0; font-size: clamp(22px, 2.2vw, 30px); }
.post-cta p { color: var(--areia-2); }

.post-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.post-card { display: block; border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--noite-2); padding: 26px 24px; text-decoration: none; transition: border-color var(--d2) var(--ease), transform var(--d2) var(--ease), background-color var(--d2) var(--ease); }
.post-card:hover { border-color: var(--luz); transform: translateY(-2px); background: var(--noite-3); }
.post-card-meta { font-family: var(--fonte-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--areia-3); }
.post-card h2 { margin-top: 12px; font-size: clamp(19px, 1.8vw, 24px); max-width: 30ch; }
.post-card p { margin-top: 12px; color: var(--areia-2); font-size: 14.5px; line-height: 1.55; }
.post-card-seta { display: inline-block; margin-top: 16px; font-family: var(--fonte-mono); font-size: 12px; color: var(--luz); }

@media (max-width: 820px) { .post-grade { grid-template-columns: minmax(0, 1fr); } }