/* ==========================================================
   Condobox — Blog (/blog e /blog/<slug>), sobre style.css + home.css
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* O blog abre em fundo claro: a nav já nasce escura (nas outras páginas só após rolar) */
.nav { background: rgba(21, 61, 77, .92); backdrop-filter: blur(12px); }

/* ---------- Listagem ---------- */
.blog-list, .blog-error, .manuais { padding-top: calc(var(--section-y) + 32px); }
.blog-list__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-lg); margin-bottom: var(--s-xl); flex-wrap: wrap; }
.blog-list__head > div { max-width: 760px; }
.blog-list .section-title { font-size: clamp(32px, 4.4vw, 52px); }
.blog-search { display: flex; gap: var(--s-sm); width: min(100%, 420px); }
.blog-search input {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--s-md);
  font: inherit; color: var(--ink); background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--radius);
}
.blog-search input:focus { outline: 2px solid var(--canvas-dark); outline-offset: 1px; }
.blog-search .btn { height: 48px; }
.blog-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-lg); padding: var(--s-xl); background: var(--canvas); border-radius: var(--radius); }
.blog-empty p { font-size: 20px; font-weight: 496; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-sm); margin-top: var(--s-xl); }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; padding: 0 var(--s-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  border-radius: var(--radius); background: var(--canvas); font-weight: 500;
}
.pagination a:hover { background: var(--surface-sand); }
.pagination .is-current { background: var(--canvas-dark); color: #fff; }

/* ---------- Artigo ---------- */
/* Cabeçalho na faixa escura; a imagem principal fica metade na faixa, metade no fundo claro */
.post { padding-bottom: var(--section-y); }
.post__column { max-width: calc(800px + 2 * var(--s-lg)); }
.post__top {
  --overlap: clamp(120px, 18vw, 220px);
  padding-top: calc(68px + clamp(32px, 5vw, 56px));
  background: linear-gradient(to bottom, var(--canvas-dark) calc(100% - var(--overlap)), var(--canvas) calc(100% - var(--overlap)));
  color: #fff;
}
.post__header .eyebrow { display: flex; }
.post__title { font-size: clamp(32px, 4.6vw, 52px); font-weight: 496; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.post__lead { margin-top: var(--s-lg); font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.8); text-wrap: pretty; }
.post__meta { display: flex; align-items: center; gap: var(--s-base); margin-top: var(--s-lg); }
img.post__avatar, .post__avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.post__byline { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-sm); font-size: 14px; color: rgba(255,255,255,.7); }
.post__byline > * + *::before { content: "•"; margin-right: var(--s-sm); color: rgba(255,255,255,.45); }
.post__author { font-weight: 500; color: #fff; }
/* o <Picture> do astro:assets aplica a classe no <img> */
img.post__image {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: var(--s-xl);
  border-radius: var(--radius); box-shadow: 0 24px 48px rgba(21, 61, 77, .18);
}

.post__body { margin-top: var(--s-xl); font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.post__body > * + * { margin-top: var(--s-lg); }
.post__body h2 { margin-top: var(--s-xl); font-size: 30px; font-weight: 496; line-height: 1.2; color: var(--ink); }
.post__body h3 { margin-top: var(--s-xl); font-size: 22px; font-weight: 496; line-height: 1.3; color: var(--ink); }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: var(--s-sm); }
.post__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.post__body blockquote { margin-inline: 0; padding-left: var(--s-lg); border-left: 3px solid var(--primary); font-size: 20px; color: var(--ink); }
.post__body strong { color: var(--ink); }
.post__figure { margin-inline: 0; }
.post__figure img { width: 100%; height: auto; border-radius: var(--radius); }

@media (max-width: 640px) {
  .blog-search { width: 100%; }
  .post__body { font-size: 17px; }
  .post__lead { font-size: 17px; }
  .post__role { display: none; }
}

/* ---------- Draft mode (fora do Presentation Tool) ---------- */
.draft-mode-exit { position: fixed; left: var(--s-md); bottom: var(--s-md); z-index: 60; }

/* ---------- Página institucional (sem imagem de capa) ---------- */
.post__top--plain { --overlap: 0px; padding-bottom: clamp(40px, 6vw, 72px); }
.post__updated { margin-top: var(--s-lg); font-size: 14px; color: rgba(255,255,255,.7); }