/* Blog - Elevate Solutions (Épico 6) */
/* Linha de meta-informação (autor, min de leitura, data) abaixo do H1 do
artigo, dentro do .page-header (fundo navy) - mesmo tratamento tonal de
.lead ali (ver .page-header .lead em components.css), só mais pequena por
ser meta-informação, não a mensagem principal da página. A data de
publicação tinha sido removida a pedido do utilizador; voltou a aparecer
a pedido explícito do próprio para reforçar E-E-A-T no SEO. */
.blog-meta {
font-size: var(--fs-200);
color: var(--text-muted);
}
.blog-meta.on-dark { color: var(--text-on-dark-muted); }
/* Hero do artigo (pedido do utilizador, com referência visual) - a imagem
de capa passa a fundo do próprio .page-header, com o eyebrow/título/meta
que já lá estavam sobrepostos por cima. Mesma mecânica de scrim já usada
em .case-card-cover::after (portfólio) e .hero-bg-scrim (homepage): um
gradiente escuro entre a imagem e o texto, mais forte a meio/baixo para
nunca comprometer o contraste, independentemente do brilho da foto. Sem
cover_image_url, cai no mesmo gradiente determinístico por slug do
portfólio/cartões do blog (gradientStyleForSlug), nunca uma imagem
genérica/inventada. */
.blog-hero {
position: relative;
background: linear-gradient(
var(--case-angle, 135deg),
hsl(var(--case-hue, 205) 55% 20%),
hsl(calc(var(--case-hue, 205) + 15) 68% 46%)
);
background-size: cover;
background-position: center;
}
.blog-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(22, 33, 58, 0.5), rgba(22, 33, 58, 0.85) 70%, var(--navy-900) 100%);
}
.blog-hero .container { position: relative; z-index: 1; }
/* Título do artigo - string do próprio artigo (SEO), muito mais longa do
que as taglines curtas que o h1 global (base.css) foi calibrado para; o
clamp genérico ainda deixava títulos como "Agentes de IA para Empresas:
O Que São e Como Podem Poupar Tempo e Dinheiro" enormes em mobile (6
linhas). Clamp próprio, mais contido, mesmo princípio já usado em
.hero h1 (home.css) para o mesmo tipo de problema (título forçado mais
longo do que o normal). */
.blog-article-title { font-size: clamp(1.4rem, 1.05rem + 2.8vw, var(--fs-700)); }
@media (min-width: 900px) {
.blog-article-title { font-size: clamp(var(--fs-600), 2.2vw + 1.5rem, var(--fs-700)); }
}
/* Título da listagem - mesmo problema/solução do artigo acima, mas com
texto fixo (mais curto) em vez de vir do Supabase. */
.blog-listing-title { font-size: clamp(1.55rem, 1.1rem + 3.6vw, var(--fs-700)); }
/* Cartão de artigo (listagem e "artigos relacionados") - pedido do
utilizador com referência visual: imagem separada no topo (não com o
título sobreposto, ao contrário de .case-card no portfólio), categoria
como eyebrow, título com seta a assinalar "abre o artigo", sem autor.
Reutiliza o gradiente determinístico de gradientStyleForSlug quando não
há cover_image_url (mesmo mecanismo do portfólio) - só que aqui a
imagem fica só decorativa, sem precisar do scrim escuro do .case-card
(não tem texto sobreposto a proteger). */
.blog-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--navy-700);
border: 1px solid transparent;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7);
transition: border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.blog-card:hover {
border-color: var(--sky-500);
box-shadow: 0 22px 40px -18px rgba(93, 195, 240, 0.4);
transform: translateY(-3px);
}
.blog-card-cover {
aspect-ratio: 16 / 10;
background: linear-gradient(
var(--case-angle, 135deg),
hsl(var(--case-hue, 205) 55% 20%),
hsl(calc(var(--case-hue, 205) + 15) 68% 46%)
);
}
.blog-card-cover--photo { background-size: cover; background-position: center; }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); }
/* sky-500 explícito (não o sky-700 por omissão de .eyebrow em
components.css) - sky-700 só tem contraste AA sobre fundo CLARO; este
cartão é sempre escuro (navy-700), precisa do tom "só sobre fundo
escuro" (ver comentário em tokens.css). */
.blog-card-body .eyebrow { margin-bottom: var(--space-2); color: var(--sky-500); }
.blog-card-title {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--fs-500);
margin-bottom: var(--space-3);
}
/* Título do artigo dentro do cartão é a frase inteira (SEO), não uma
palavra/nome curto como .case-card-name (portfólio) - ao mesmo tamanho
fixo de sempre (fs-500/24px) ficava desproporcionalmente alto em mobile,
mesmo critério já aplicado ao h1 do artigo/listagem acima. */
@media (max-width: 699px) {
.blog-card-title { font-size: var(--fs-400); }
/* Menos padding e sem seta decorativa em mobile (pedido do utilizador) -
ganha espaço para o texto do cartão, o cartão inteiro já é clicável
via .blog-card-title a::after, por isso a seta é só reforço visual,
dispensável no ecrã mais apertado. */
.blog-card-body { padding: var(--space-4); }
.blog-card-title svg { display: none; }
}
.blog-card-title a {
color: var(--white);
text-decoration: none;
}
/* "Stretched link" - o cartão inteiro fica clicável através deste único
link, sem duplicar nem partir a leitura por leitores de ecrã (mesmo
princípio do .card-link em components.css). */
.blog-card-title a::after { content: ""; position: absolute; inset: 0; }
.blog-card-title svg {
width: var(--icon-sm);
height: var(--icon-sm);
color: var(--text-on-dark-muted);
flex-shrink: 0;
margin-top: 0.3em;
transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.blog-card:hover .blog-card-title svg { color: var(--sky-500); transform: translate(2px, -2px); }
.blog-card-excerpt { color: var(--text-on-dark-muted); font-size: var(--fs-300); flex: 1; }
.blog-card-meta {
font-size: var(--fs-100);
color: var(--text-on-dark-muted);
margin-top: var(--space-4);
}
/* Corpo do artigo (Épico 6.2) - o body_html vem do Supabase já em HTML
semântico simples (h2/h3/p/ul/ol/strong/a), sem classes próprias; esta é
a única tipografia de formato longo do site, por isso vive aqui e não em
base.css (que assume blocos curtos com margin:0 e espaçamento controlado
por quem monta cada página, não por quem escreve o texto corrido). Largura
de leitura confortável (68ch) e centrada dentro do .container mais largo. */
.blog-post {
max-width: 68ch;
margin-inline: auto;
}
.blog-post > * + * { margin-top: var(--space-5); }
/* color: var(--white) explícito aqui - o h1-h4 global (base.css) é
navy-800, pensado para fundo claro. O site inteiro corre em tema escuro
(body é sempre navy-900, ver theme-dark.css) e só fica automaticamente
legível onde algo redefine a cor (.section-head h2, .card h3, etc. em
theme-dark.css) - .blog-post não está nessa lista, por isso precisa do
mesmo tratamento aqui. */
.blog-post h2 { font-size: var(--fs-600); margin-top: var(--space-8); color: var(--white); }
.blog-post h3 { font-size: var(--fs-500); margin-top: var(--space-6); color: var(--white); }
.blog-post h2 + *, .blog-post h3 + * { margin-top: var(--space-3); }
.blog-post p { max-width: none; color: var(--text); }
.blog-post ul, .blog-post ol { padding-left: 1.5em; display: flex; flex-direction: column; gap: var(--space-2); }
.blog-post li { color: var(--text); }
.blog-post strong { color: var(--white); }
.blog-post a { font-weight: 600; }
/* Tabelas (páginas legais - política de privacidade/cookies) - sem reset
global de no resto do site, por isso o estilo vive aqui, junto
do resto da tipografia de artigo que estas páginas reutilizam. */
.blog-post table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); display: block; overflow-x: auto; }
.blog-post th, .blog-post td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.12); vertical-align: top; }
.blog-post th { font-family: var(--font-display); color: var(--white); font-weight: 700; }
.blog-post td { color: var(--text); }
.blog-post table code { font-size: 0.9em; background: rgba(255, 255, 255, 0.08); padding: 0.15em 0.4em; border-radius: var(--radius-sm); }