/* Hero dos posts (single.html) -- replica o padrão real do site original:
   imagem contida com cantos arredondados, badge de categoria em pill,
   e linha de meta (avatar + autor + data) abaixo do título. Valores
   (radius, cor, padding) medidos via getComputedStyle contra o site
   original (canalsantosanjos.ipco.org.br), 2026-08-20.

   O bloco core/post-featured-image fica fora do <main> (que é o único
   container com layout "constrained" no template) -- a regra nativa do
   WordPress pra alinhamento "wide" (`.is-layout-constrained > .alignwide`)
   só se aplica a filhos diretos de um container com layout, então não
   pegava aqui. Controlando a largura via classe/CSS próprio em vez de
   depender do align:wide nativo. */

.csa-post-hero-image {
	/* 1232px: largura medida do hero no post original. Antes usava o
	   `wide-size` do tema pai (1340px), o que deixava a imagem 108px mais
	   larga e 49px mais alta que a do original. */
	max-width: 1232px;
	margin-left: auto;
	margin-right: auto;
}

.csa-post-hero-image img {
	aspect-ratio: 1232 / 560;
	object-fit: cover;
	width: 100%;
}

.csa-post-hero-badge {
	margin-bottom: 12px;
}

.csa-post-hero-badge a {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 50px;
	background-color: #E5F0FF;
	color: #063E95;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.csa-post-hero-title {
	margin-top: 0;
	margin-bottom: 12px;
}

.csa-post-hero-meta {
	gap: 10px;
	margin-bottom: 8px;
	color: var(--wp--preset--color--base-3);
	font-family: var(--wp--preset--font-family--body);
}

.csa-post-hero-meta .wp-block-post-date,
.csa-post-hero-meta .wp-block-post-author-name {
	font-size: 1rem;
}

.csa-post-hero-meta img.avatar {
	border-radius: 50px;
}

/* ------------------------------------------------- módulos do post original */

/* "Compartilhar este post" e "Continuar lendo": módulos do template do blog na
   HubSpot, recriados como shortcodes no functions.php. Medidas do original
   (getComputedStyle, 2026-08-21): título 18px na mesma coluna de leitura,
   ícones de 54px em círculo laranja com 12px de intervalo, seção de
   relacionados com fundo #F7F9FC, 80px de respiro e dois cartões de 598px. */

.csa-share {
	max-width: 768px;
	margin: 64px auto 0;
	text-align: center;
}

.csa-share__title {
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 27.9px;
	font-weight: 700;
	color: var(--wp--preset--color--base-3, #09152B);
}

.csa-share__links {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.csa-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #D9843B);
	color: #fff;
	text-decoration: none;
}

.csa-share__link:hover {
	background: var(--wp--preset--color--accent-dark, #B45F06);
	color: #fff;
}

.csa-share__link svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.csa-relacionados {
	margin: 80px 0 0;
	padding: 80px 20px;
	background: var(--wp--preset--color--base-2, #F7F9FC);
}

/* No original este título sai BRANCO sobre o fundo claro da seção, ou seja,
   ilegível -- é um defeito da própria página. Aqui fica no azul-marinho da
   marca; o resto (tamanho, centralização, respiro) é o valor medido. */
.csa-relacionados__title {
	margin: 0 0 48px;
	font-size: 43px;
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--base-3, #09152B);
}

.csa-relacionados__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 34px;
	max-width: 1232px;
	margin: 0 auto;
}

.csa-relacionado {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* O wrapper é um <span>: sem `display:block` ele fica inline e a imagem não
   ocupa a largura do cartão. */
.csa-relacionado__img {
	display: block;
}

/* Proporção fixa: sem ela, capas de proporções diferentes deixam os dois
   cartões com alturas diferentes e os títulos desalinhados -- no original os
   dois cartões têm exatamente a mesma altura. */
.csa-relacionado__img img {
	display: block;
	width: 100%;
	/* `height: auto` é obrigatório junto com `aspect-ratio`: o WordPress emite
	   os atributos `width`/`height` na <img>, e o navegador os mapeia para uma
	   altura CSS que ganha do aspect-ratio -- sem isso as duas capas voltam a
	   ter alturas diferentes. */
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 16px;
}

.csa-relacionado__cat {
	display: inline-block;
	margin: 24px 0 12px;
	padding: 4px 16px;
	border-radius: 9999px;
	background: #E3EDEC;
	font-size: 14px;
	color: var(--wp--preset--color--base-3, #09152B);
}

.csa-relacionado__titulo {
	display: block;
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wp--preset--color--base-3, #09152B);
}

.csa-relacionado:hover .csa-relacionado__titulo {
	color: var(--wp--preset--color--accent-dark, #B45F06);
}