/*
 * Seção "Blog" — V1, PARA REVISÃO. Ver specs/site.md ("Blog"), specs/
 * design.md ("Cards") e memoria.md ("Home — Seção Blog").
 *
 * Sétimo momento do ritmo da Home — respiro editorial depois de Associados,
 * ponte para o encerramento. Consome publicações reais do WordPress (ver
 * WP_Query em front-page.php) — não é conteúdo hardcoded. Hierarquia
 * editorial deliberada: uma publicação principal (mais peso visual) + duas
 * secundárias mais compactas, não três caixas equivalentes. Sem sombra, sem
 * fundo de card, sem bordas grossas — separação por espaço, linha fina e
 * hierarquia tipográfica.
 *
 * Nomenclatura ".blog-section" (não ".blog"): o WordPress adiciona
 * automaticamente a classe "blog" ao <body> nesta instalação (não há uma
 * "página de posts" estática definida, então is_home() coincide com a
 * página inicial) — usar ".blog" aqui colidiria diretamente com essa classe
 * do body e vazaria estes estilos (padding-block, background etc.) para a
 * página inteira. ".blog-section" evita a colisão.
 */

.blog-section {
	background: var(--color-bg);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.blog-section {
		padding-block: var(--section-space-desktop);
	}
}

.blog-section__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

@media (min-width: 1024px) {
	.blog-section__header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: var(--space-6);
		margin-bottom: var(--space-9);
	}

	.blog-section__header-text {
		max-width: 640px;
	}
}

.blog-section__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--space-3);
}

.blog-section__mark {
	width: 28px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-accent);
	flex: none;
}

.blog-section__label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

.blog-section__headline {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(2.25rem, 1.7rem + 2.3vw, 3.75rem);
	max-width: 12ch;
}

.blog-section__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.65;
	color: var(--color-text);
	max-width: 46ch;
}

.blog-section__header-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
	transition:
		border-color var(--motion-micro) var(--motion-ease),
		gap var(--motion-micro) var(--motion-ease);
}

@media (min-width: 1024px) {
	.blog-section__header-cta {
		align-self: flex-end;
		margin-bottom: 6px;
	}
}

.blog-section__header-cta:hover,
.blog-section__header-cta:focus-visible {
	border-bottom-color: var(--color-brand-deep);
	gap: 12px;
}

.blog-section__header-cta-arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.blog-section__header-cta:hover .blog-section__header-cta-arrow,
.blog-section__header-cta:focus-visible .blog-section__header-cta-arrow {
	transform: translateX(3px);
}

/* Empty state editorial — nenhum post publicado ainda. Discreto, sem caixa,
   sem ícone genérico. */

.blog-section__empty {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text-muted);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-5);
}

/* Grid assimétrico: publicação principal + lista de secundárias. Dois
   elementos-irmãos diretos (não grid-template-areas com row-span) — mais
   simples e robusto. */

.blog-section__posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 1024px) {
	.blog-section__posts {
		grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
		column-gap: clamp(40px, 5vw, 64px);
		align-items: start;
	}
}

/* Link — cada publicação inteira é clicável; foco visível no próprio link. */

.blog-section__primary-link,
.blog-section__secondary-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 4px;
}

.blog-section__primary-link:focus-visible,
.blog-section__secondary-link:focus-visible {
	outline: 2px solid var(--color-brand-deep);
	outline-offset: 4px;
}

/* Publicação principal — maior peso visual: imagem maior, título em escala
   H3, meta (categoria + data) acima. */

.blog-section__primary-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-brand-deep), var(--color-brand));
}

.blog-section__primary-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--motion-ease);
}

.blog-section__primary-link:hover .blog-section__primary-media img,
.blog-section__primary-link:focus-visible .blog-section__primary-media img {
	transform: scale(1.025);
}

.blog-section__primary-body {
	padding-top: var(--space-5);
}

.blog-section__post-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.blog-section__post-category {
	color: var(--color-brand-deep);
}

.blog-section__post-meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--color-border);
	flex: none;
}

.blog-section__primary-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	line-height: 1.28;
	letter-spacing: -0.005em;
	color: var(--color-text);
	max-width: 30ch;
}

.blog-section__post-arrow {
	display: inline-block;
	margin-left: 6px;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.blog-section__primary-link:hover .blog-section__post-arrow,
.blog-section__primary-link:focus-visible .blog-section__post-arrow {
	transform: translateX(4px);
}

.blog-section__primary-link:hover .blog-section__primary-title,
.blog-section__primary-link:focus-visible .blog-section__primary-title {
	color: var(--color-brand-deep);
}

/* Publicações secundárias — lista compacta, separadas por linha fina, sem
   imagem dominante nem card fechado. */

.blog-section__secondary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.blog-section__secondary-item {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-5);
}

.blog-section__secondary-item:first-child {
	padding-top: 0;
	border-top: none;
}

.blog-section__secondary-item:last-child {
	padding-bottom: 0;
}

.blog-section__secondary-link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.blog-section__secondary-media {
	position: relative;
	flex: none;
	width: 96px;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-brand-deep), var(--color-brand));
}

.blog-section__secondary-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--motion-ease);
}

.blog-section__secondary-link:hover .blog-section__secondary-media img,
.blog-section__secondary-link:focus-visible .blog-section__secondary-media img {
	transform: scale(1.03);
}

.blog-section__secondary-body {
	padding-top: 2px;
	min-width: 0;
}

.blog-section__secondary-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--color-text);
}

.blog-section__secondary-link:hover .blog-section__secondary-title,
.blog-section__secondary-link:focus-visible .blog-section__secondary-title {
	color: var(--color-brand-deep);
}

/* Enquadramentos distintos da mesma fotografia de desenvolvimento — evita
   que os 3 posts temporários pareçam a mesma imagem repetida (ver
   memoria.md, "Home — Seção Blog", conteúdo temporário). Aplica-se apenas
   quando o post reutiliza a fotografia de placeholder; posts com imagem
   destacada própria não são afetados por esta regra (a foto real de cada
   post já define seu próprio enquadramento natural via object-fit:cover). */

.blog-section__primary-media img.blog-section__photo--dev {
	object-position: 70% 55%;
}

.blog-section__secondary-item:nth-of-type(1) .blog-section__photo--dev {
	object-position: 30% 70%;
}

.blog-section__secondary-item:nth-of-type(2) .blog-section__photo--dev {
	object-position: 50% 20%;
}

/* Mobile — publicação principal com imagem; secundárias sem imagem grande,
   apenas thumbnail pequena + texto, para manter a seção curta e evitar três
   imagens verticais grandes empilhadas. */

@media (max-width: 1023.98px) {
	.blog-section__primary-title {
		max-width: none;
	}
}

/* Revelação discreta ao entrar na viewport — mesmo padrão das demais seções
   (IntersectionObserver nativo, ver main.js). */

.blog-section__header,
.blog-section__posts {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

.blog-section.is-visible .blog-section__posts {
	transition-delay: 120ms;
}

.blog-section.is-visible .blog-section__header,
.blog-section.is-visible .blog-section__posts {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.blog-section__header,
	.blog-section__posts {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.blog-section__primary-media img,
	.blog-section__secondary-media img,
	.blog-section__post-arrow {
		transition: none;
	}
}