/* Blog (PCGBUR-4): listagem (home.php, categorias) e post (single.php). Enfileirado por inc/blog.php.
   Base: .pcg-secao, .pcg-cartao, .pcg-grade, .pcg-conteudo e o hero de pagina do theme.css. */

/* ── Meta (data / categoria / leitura) ─────────────────────────────── */
.pcg-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--texto-mudo); font-size: .9375rem; }
.pcg-blog-meta span { color: var(--ouro); opacity: .7; }
.pcg-blog-meta a { color: var(--texto-2); text-decoration: underline; text-decoration-color: var(--ouro); text-underline-offset: 4px; }
@media (hover: hover) { .pcg-blog-meta a:hover { color: var(--ouro-vivo); } }

/* ── Filtro de categorias ──────────────────────────────────────────── */
.pcg-blog { padding-top: clamp(24px, 4vw, 56px); }
.pcg-blog__filtro { margin-bottom: clamp(32px, 4vw, 48px); }
.pcg-blog__filtro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pcg-blog__filtro a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linha); border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .9375rem; color: var(--texto-2);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
@media (hover: hover) { .pcg-blog__filtro a:hover { border-color: var(--ouro); color: var(--ouro-vivo); } }
.pcg-blog__filtro a:focus-visible { outline-offset: -3px; } /* a faixa de filtros rola e recortava o anel (PCGBUR-6) */
.pcg-blog__filtro a[aria-current="page"] { background: var(--ouro); border-color: var(--ouro); color: var(--fundo); }

/* ── Link esticado: o cartao clica inteiro, o Tab para so no titulo ── */
.pcg-blog-destaque, .pcg-blog-cartao { position: relative; }
.pcg-blog-destaque__titulo a, .pcg-blog-cartao .pcg-cartao__titulo a { text-decoration: none; }
.pcg-blog-destaque__titulo, .pcg-blog-cartao .pcg-cartao__titulo, .pcg-post-hero .pcg-pagina-hero__titulo { overflow-wrap: anywhere; } /* titulo longo sem espaco nao estoura no celular */
.pcg-blog-destaque__titulo a::after, .pcg-blog-cartao .pcg-cartao__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcg-blog-destaque__titulo a:focus-visible, .pcg-blog-cartao .pcg-cartao__titulo a:focus-visible { outline: none; }
.pcg-blog-destaque:has(a:focus-visible), .pcg-blog-cartao:has(a:focus-visible) { outline: 2px solid var(--ouro-vivo); outline-offset: 4px; }
.pcg-blog-destaque img, .pcg-blog-cartao img { transition: transform .6s var(--ease), filter .6s var(--ease); }

/* ── Destaque (post mais novo) ─────────────────────────────────────── */
.pcg-blog-destaque {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  gap: clamp(28px, 4vw, 64px); margin-bottom: clamp(48px, 6vw, 88px);
}
.pcg-blog-destaque:not(:has(.pcg-blog-destaque__midia)) { grid-template-columns: minmax(0, 1fr); }
.pcg-blog-destaque__midia { margin: 0; overflow: hidden; border-radius: var(--raio); background: var(--superficie); }
.pcg-blog-destaque__midia img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pcg-blog-destaque__corpo { display: grid; gap: 18px; justify-items: start; }
.pcg-blog-destaque__titulo {
  font: 400 clamp(2.25rem, 4.4vw, 4rem)/.98 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
}
.pcg-blog-destaque__resumo { color: var(--texto-2); font-size: 1.1875rem; max-width: 42ch; }
.pcg-blog-destaque__ler {
  margin-top: 6px; color: var(--ouro); font-weight: 900; font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid var(--ouro); padding-bottom: 4px; transition: color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) {
  .pcg-blog-destaque:hover img { transform: scale(1.03); }
  .pcg-blog-destaque:hover .pcg-blog-destaque__titulo { color: var(--ouro-vivo); }
  .pcg-blog-destaque:hover .pcg-blog-destaque__ler { color: var(--ouro-vivo); border-color: var(--ouro-vivo); }
}

/* ── Grade de cartoes ──────────────────────────────────────────────── */
.pcg-blog__grade { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pcg-blog-cartao { transition: border-color .25s var(--ease); }
.pcg-blog-cartao .pcg-cartao__texto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcg-blog-cartao .pcg-blog-meta { margin-top: auto; padding-top: 4px; font-size: .875rem; }
.pcg-blog-cartao .pcg-cartao__corpo { grid-template-rows: auto auto 1fr; }
@media (hover: hover) {
  .pcg-blog-cartao:hover { border-color: rgba(202, 165, 95, .55); }
  .pcg-blog-cartao:hover img { transform: scale(1.04); }
  .pcg-blog-cartao:hover .pcg-cartao__titulo { color: var(--ouro-vivo); }
}
.pcg-blog-mais .pcg-blog-cartao { background: var(--fundo); }

/* ── Paginacao ─────────────────────────────────────────────────────── */
.pcg-blog__paginas { margin-top: clamp(40px, 5vw, 64px); }
.pcg-blog__paginas .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pcg-blog__paginas .page-numbers {
  display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none;
  font: 400 1.25rem/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--texto-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pcg-blog__paginas .prev, .pcg-blog__paginas .next { font: 900 .875rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; }
.pcg-blog__paginas .current { background: var(--ouro); border-color: var(--ouro); color: var(--fundo); }
.pcg-blog__paginas .dots { border-color: transparent; }
@media (hover: hover) { .pcg-blog__paginas a.page-numbers:hover { border-color: var(--ouro); color: var(--ouro-vivo); } }

.pcg-blog__vazio { display: grid; gap: 20px; justify-items: center; text-align: center; color: var(--texto-2); font-size: 1.1875rem; }

/* ── Post ──────────────────────────────────────────────────────────── */
.pcg-post-hero .pcg-pagina-hero__texto { max-width: 60rem; margin-inline: auto; }
.pcg-post-hero .pcg-pagina-hero__titulo { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.pcg-post-hero .pcg-blog-meta, .pcg-post-hero .pcg-blog-meta a { font-size: 1rem; color: var(--texto-2); } /* sobre a foto: o --texto-mudo nao chega a 4.5:1 */

.pcg-post { padding-top: clamp(40px, 5vw, 72px); display: grid; justify-items: center; }

/* tipografia de leitura: coluna de ~68 caracteres, entrelinha folgada, Anton so nos intertitulos */
.pcg-post__corpo { width: 100%; max-width: 42rem; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.75; color: var(--texto-2); }
.pcg-post__corpo > * + * { margin-top: 1.25em; }
.pcg-post__corpo > p:first-child { font-size: 1.25em; line-height: 1.55; color: var(--texto); }
.pcg-post__corpo h2, .pcg-post__corpo h3 { color: var(--texto); margin-top: 1.8em; text-wrap: balance; }
.pcg-post__corpo h2 + *, .pcg-post__corpo h3 + * { margin-top: .6em; }
.pcg-post__corpo strong { color: var(--texto); }
.pcg-post__corpo a { color: var(--ouro-vivo); text-decoration-thickness: 1px; }
@media (hover: hover) { .pcg-post__corpo a:hover { color: var(--texto); } }
.pcg-post__corpo li + li { margin-top: .4em; }
.pcg-post__corpo li::marker { color: var(--ouro); }
.pcg-post__corpo blockquote {
  margin: 1.8em 0; padding: 0; border: 0; color: var(--texto);
  font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--f-display); text-transform: uppercase; text-wrap: balance;
}
.pcg-post__corpo blockquote p { margin: 0; }
.pcg-post__corpo blockquote::before { content: ""; display: block; width: 56px; height: 3px; margin-bottom: .45em; background: var(--ouro); }
.pcg-post__corpo blockquote cite { display: block; margin-top: .8em; font: 700 1rem/1.4 var(--f-texto); font-style: normal; text-transform: none; color: var(--texto-mudo); }
.pcg-post__corpo figure { margin-inline: 0; }
.pcg-post__corpo img { height: auto; border-radius: var(--raio); }
.pcg-post__corpo figcaption { margin-top: .6em; font-size: .9375rem; color: var(--texto-mudo); }
.pcg-post__corpo hr { border: 0; height: 1px; background: var(--linha); margin-block: 2.5em; }

.pcg-post__fim {
  width: 100%; max-width: 42rem; margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px;
}
.pcg-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pcg-post__share-h { font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
.pcg-post__share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pcg-post__share a, .pcg-post__share button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: none; border: 1px solid var(--linha); border-radius: var(--raio); color: var(--texto-2);
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pcg-post__share a, .pcg-post__share button { justify-content: center; min-width: 44px; padding: 0 10px; } /* so o icone (PCGBUR-6) */
/* "Link copied": o status sai do escondido enquanto dura */
.pcg-post__share button.copiado { gap: 8px; }
.pcg-post__share button.copiado [data-pcg-copiar-status] { position: static !important; width: auto; height: auto; overflow: visible; clip-path: none; }
@media (hover: hover) { .pcg-post__share a:hover, .pcg-post__share button:hover { border-color: var(--ouro); color: var(--ouro-vivo); } }

/* ── CTA do fim do post ────────────────────────────────────────────── */
.pcg-blog-cta {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 5vw, 80px);
  overflow: hidden; isolation: isolate;
}
.pcg-blog-cta__objeto { position: relative; margin: 0; display: grid; place-items: center; }
.pcg-blog-cta__objeto::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 46% at 50% 52%, color-mix(in srgb, var(--ouro) 40%, transparent), color-mix(in srgb, var(--ouro) 10%, transparent) 62%, transparent);
}
.pcg-blog-cta__objeto img { width: min(100%, 520px); height: auto; filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .55)); }
.pcg-blog-cta__texto { display: grid; gap: 22px; justify-items: start; }
.pcg-blog-cta__texto p { color: var(--texto-2); font-size: 1.1875rem; max-width: 40ch; }

@media (prefers-reduced-motion: reduce) {
  .pcg-blog-destaque img, .pcg-blog-cartao img { transition: none; transform: none !important; }
}

/* hero do post e --sem-midia: centrado (theme.css); a linha de meta acompanha */
.pcg-post-hero .pcg-blog-meta { justify-content: center; }

/* ── Celular ───────────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
  .pcg-blog__filtro ul { justify-content: center; }
  .pcg-blog-destaque { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pcg-blog__paginas .nav-links { justify-content: center; }
  .pcg-post__fim { flex-direction: column; align-items: flex-start; }
  .pcg-blog-cta { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 28px; }
  .pcg-blog-cta__objeto img { width: min(84%, 400px); }
  .pcg-blog-cta__texto { justify-items: center; }
  .pcg-blog-cta__texto p { text-wrap: balance; }
  .pcg-blog-cta .pcg-acoes { justify-content: center; }
}
@media (max-width: 760px) {
  /* .pcg-abre ja aparece aqui (theme.css); a filtragem rola de lado se as categorias crescerem, sem empurrar a pagina */
  .pcg-blog__filtro ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .pcg-blog__filtro li { flex: none; }
}
