/**
 * blog.css — Single, arquivo, busca e 404.
 *
 * O blog vai receber 48 artigos, e é a parte do site que o cliente edita sozinho desde
 * o dia 1 (Gutenberg puro, sem pattern necessário). Por isso o single é generoso com a
 * prosa e traz sumário dos H2 com scroll-spy.
 */

.ck-blog { max-width: var(--largura-conteudo); margin: 0 auto; padding: 48px 28px 72px; }

/* ── Cabeçalho de arquivo ──────────────────────────────────────────────────── */

.ck-arquivo__cabeca { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.ck-arquivo__cabeca h1 { font-size: clamp(1.875rem, 3.6vw, 2.5rem); margin: 0 0 10px; }
.ck-arquivo__cabeca p { color: var(--cor-texto-suave); margin: 0; }

/* ── Grade de posts ────────────────────────────────────────────────────────── */

.ck-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }

.ck-post-card {
	background: var(--cor-fundo);
	border: 1px solid var(--cor-borda);
	border-radius: var(--raio-m);
	overflow: hidden;
	box-shadow: var(--sombra-card);
	display: flex; flex-direction: column;
	transition: transform var(--dur-media) var(--curva);
}
.ck-post-card:hover { transform: translateY(-3px); }
.ck-post-card__foto { aspect-ratio: 16/10; overflow: hidden; }
.ck-post-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.ck-post-card__corpo { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.ck-post-card__meta { font-size: .78125rem; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ck-post-card h2 { font-size: 1.1875rem; margin: 0 0 10px; }
.ck-post-card h2 a { color: var(--cor-texto); text-decoration: none; }
.ck-post-card h2 a:hover { color: var(--cor-marca); }
.ck-post-card p { font-size: .9375rem; color: var(--cor-texto-suave); margin: 0 0 16px; }
.ck-post-card__leia { margin-top: auto; font-family: var(--fonte-titulo); font-weight: 600; font-size: .90625rem; color: var(--cor-marca); text-decoration: none; }

/* ── Single ────────────────────────────────────────────────────────────────── */

.ck-single { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.ck-single__cabeca { max-width: var(--largura-prosa); margin: 0 auto 34px; text-align: center; }
.ck-single__cabeca h1 { font-size: clamp(1.875rem, 4vw, 2.625rem); margin: 0 0 12px; }
.ck-single__meta { font-size: .875rem; color: var(--cor-texto-suave); }
.ck-single__capa { border-radius: var(--raio-g); overflow: hidden; margin: 0 auto 40px; max-width: var(--largura-conteudo); }

/* Sumário dos H2, grudado na lateral */
.ck-toc { position: sticky; top: 150px; font-size: .875rem; }
.ck-toc__titulo {
	font-family: var(--fonte-titulo); font-weight: 600; font-size: .75rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--cor-texto-suave); margin: 0 0 12px;
}
.ck-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--cor-borda); }
.ck-toc li a {
	display: block; padding: 7px 0 7px 14px; margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--cor-texto-suave); text-decoration: none; line-height: 1.4;
}
.ck-toc li a:hover { color: var(--cor-marca); }
.ck-toc li a.is-atual { color: var(--cor-marca); border-left-color: var(--cor-magenta); font-weight: 700; }

@media (max-width: 1000px) {
	.ck-single { grid-template-columns: 1fr; gap: 0; }
	.ck-toc { display: none; }
}

/* ── Paginação ─────────────────────────────────────────────────────────────── */

.ck-paginacao { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.ck-paginacao .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--cor-borda); border-radius: var(--raio-p);
	font-family: var(--fonte-titulo); font-weight: 600;
	color: var(--cor-texto); text-decoration: none;
}
.ck-paginacao .page-numbers:hover { border-color: var(--cor-marca); color: var(--cor-marca); }
.ck-paginacao .page-numbers.current { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-fundo); }

/* ── Busca e 404 ───────────────────────────────────────────────────────────── */

.ck-vazio { text-align: center; max-width: 620px; margin: 0 auto; padding: 72px 28px; }
.ck-vazio h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); margin: 0 0 12px; }
.ck-vazio p { color: var(--cor-texto-suave); font-size: 1.0625rem; margin: 0 0 28px; }
.ck-vazio__busca { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 32px; }
.ck-vazio__busca input {
	flex: 1; border: 1px solid var(--cor-borda); border-radius: var(--raio-max);
	padding: 12px 20px; font-family: var(--fonte-corpo); font-size: 1rem;
}
.ck-vazio__busca input:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }