/* ==========================================================================
 * Redesign do Blog - 3B Imoveis
 * --------------------------------------------------------------------------
 * Escopo: TODA regra aqui vive sob ".threeb-blog-scope" (classe adicionada
 * via body_class() em inc/blog-design.php, so' nas paginas de blog publico:
 * pagina de posts, categoria/tag, artigo unico). Nunca redefine um seletor
 * global do Houzez (body, .container, .post-wrap sozinho, etc.) - sempre
 * como descendente do escopo, pra nao vazar pra nenhuma outra pagina/CPT
 * que reaproveite os mesmos nomes de classe do tema pai.
 * Paleta oficial: verde-escuro #1c3a27 / dourado-areia #b89855.
 * ========================================================================== */

.threeb-blog-scope {
	--tr-3b-verde: #1c3a27;
	--tr-3b-verde-2: #24492f;
	--tr-3b-dourado: #b89855;
	/* Dourado da marca escurecido o suficiente para servir de TEXTO sobre
	   branco: #b89855 da 2,74:1 (reprova em WCAG AA), este da 5,18:1. E o
	   mesmo tom ja usado em assets/css/ajustes-2026-08.css. */
	--tr-3b-dourado-texto: #8f6526;
	--tr-3b-areia: #f6f2ea;
	--tr-3b-texto-muted: #6b7570;
}

/* -----------------------------------------------------------------------
 * Titulo da pagina (Blog / Categoria / Tag)
 * --------------------------------------------------------------------- */
.threeb-blog-scope .page-title-wrap h1 {
	color: var(--tr-3b-verde);
	font-weight: 700;
	position: relative;
	padding-bottom: 14px;
}

.threeb-blog-scope .page-title-wrap h1::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--tr-3b-dourado);
	border-radius: 2px;
}

/* -----------------------------------------------------------------------
 * Barra de filtro por categoria - pilulas modernas
 * --------------------------------------------------------------------- */
.threeb-blog-scope .threeb-blog-filter-tabs-wrap .nav-tabs {
	border-bottom: none;
}

.threeb-blog-scope .threeb-blog-filter-tabs-wrap .nav-link {
	border: 1px solid #e3ddd0;
	border-radius: 999px;
	padding: 8px 18px;
	/* !important necessario: o markup reaproveita .listing-tabs/.nav-tabs do
	   Houzez (pensado pra abas de status sobre fundo escuro), que tem
	   ".listing-tabs .nav-tabs .nav-link{color:#FFF!important}" nativo -
	   sem isso o texto das pilulas inativas fica branco sobre fundo branco
	   (bug real encontrado via navegador real, invisivel via curl). */
	color: var(--tr-3b-verde) !important;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.threeb-blog-scope .threeb-blog-filter-tabs-wrap .nav-link:hover {
	border-color: var(--tr-3b-dourado);
	background: var(--tr-3b-areia);
}

.threeb-blog-scope .threeb-blog-filter-tabs-wrap .nav-link.active {
	background: var(--tr-3b-verde);
	border-color: var(--tr-3b-verde);
	/* !important pelo mesmo motivo da regra base acima (.nav-link) - sem
	   isso o !important da regra base (mais necessario que este pra vencer
	   o Houzez) passaria a vencer este .active tambem, por ordem de
	   especificidade entre 2 declaracoes !important. */
	color: #fff !important;
}

/* -----------------------------------------------------------------------
 * Thumbnail (imagem real ou fallback de marca) - threeb_blog_post_thumb()
 * em inc/blog-design.php. Aspect-ratio fixo evita cards com alturas
 * imprevisiveis (grid "pulando" entre posts com/sem imagem).
 * --------------------------------------------------------------------- */
.threeb-blog-scope .threeb-blog-thumb {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--tr-3b-verde) 0%, var(--tr-3b-verde-2) 100%);
}

.threeb-blog-scope .threeb-blog-thumb-link {
	display: block;
	width: 100%;
	height: 100%;
}

.threeb-blog-scope .threeb-blog-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.threeb-blog-scope .threeb-blog-thumb:hover .threeb-blog-thumb-img {
	transform: scale(1.05);
}

.threeb-blog-scope .threeb-blog-thumb-cat {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: var(--tr-3b-dourado);
	color: var(--tr-3b-verde);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 4px 10px;
	border-radius: 999px;
}

/* -----------------------------------------------------------------------
 * Card - listagem (index.php/archive.php via template-parts/blog/blog-post.php)
 * --------------------------------------------------------------------- */
.threeb-blog-scope .article-wrap {
	margin-bottom: 28px;
}

.threeb-blog-scope .post-wrap {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ece7da;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(28, 58, 39, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}

.threeb-blog-scope .post-wrap:hover {
	box-shadow: 0 10px 24px rgba(28, 58, 39, .12);
	transform: translateY(-2px);
}

.threeb-blog-scope .post-wrap .threeb-blog-thumb {
	border-radius: 0;
	margin: 0;
}

.threeb-blog-scope .post-inner-wrap {
	padding: 20px 22px 8px;
}

.threeb-blog-scope .post-title-wrap h2 {
	font-size: 22px;
	margin-bottom: 10px;
	/* Altura fixa (2 linhas) independente do tamanho real do titulo - e' o
	   que garante que "Leia mais" caia sempre na mesma posicao vertical em
	   qualquer card, nao a margin-top:auto do footer sozinha (essa so
	   funciona quando a altura do cartao e' comparada a irmaos, o que nao
	   acontece numa lista de 1 coluna como esta). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: calc(1.25em * 2);
}

.threeb-blog-scope .post-title-wrap h2 a {
	color: var(--tr-3b-verde);
	font-weight: 700;
	text-decoration: none;
}

.threeb-blog-scope .post-title-wrap h2 a:hover {
	color: var(--tr-3b-dourado);
}

.threeb-blog-scope .post-excerpt-wrap p {
	color: var(--tr-3b-texto-muted);
	font-size: 15px;
	line-height: 1.65;
	/* Mesmo raciocinio do titulo acima: altura fixa (2 linhas) qualquer que
	   seja o tamanho real do resumo, pra manter todos os cards com a mesma
	   altura de bloco titulo+resumo e o botao sempre na mesma posicao. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: calc(1.65em * 2);
}

.threeb-blog-scope .post-footer-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px 20px;
	border-top-color: #ece7da !important;
	margin-top: auto;
}

.threeb-blog-scope .author-meta {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	color: var(--tr-3b-texto-muted);
	font-size: 13px;
	min-width: 0; /* permite o filho abaixo encolher em vez de forcar overflow */
}

.threeb-blog-scope .author-meta li {
	/* Categoria pode ter nome mais longo que "Vender um Imovel" - trunca com
	   reticencias em vez de quebrar linha, senao a altura do rodape do card
	   varia por card (o mesmo problema de alinhamento do titulo/resumo
	   acima, só que na linha de categoria/tempo de leitura). */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.threeb-blog-scope .author-meta .houzez-icon {
	color: var(--tr-3b-dourado);
}

.threeb-blog-scope .post-footer-wrap .btn-primary {
	background: var(--tr-3b-verde);
	border-color: var(--tr-3b-verde);
	border-radius: 999px;
	padding: 8px 20px;
	font-weight: 600;
	white-space: nowrap;
}

.threeb-blog-scope .post-footer-wrap .btn-primary:hover {
	background: var(--tr-3b-dourado);
	border-color: var(--tr-3b-dourado);
	color: var(--tr-3b-verde);
}

/* -----------------------------------------------------------------------
 * Card - grid/masonry (template/blog-masonry.php, related-posts) - grid
 * moderno via Flexbox, altura igual entre cards, CTA sempre alinhado no
 * rodape mesmo com excertos de tamanhos diferentes.
 * --------------------------------------------------------------------- */
.threeb-blog-scope .blog-post-item {
	background: #fff;
	border: 1px solid #ece7da;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(28, 58, 39, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}

.threeb-blog-scope .blog-post-item:hover {
	box-shadow: 0 10px 24px rgba(28, 58, 39, .12);
	transform: translateY(-2px);
}

.threeb-blog-scope .blog-post-item .threeb-blog-thumb {
	border-radius: 0;
}

.threeb-blog-scope .blog-post-content-wrap {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 18px 20px 20px;
}

.threeb-blog-scope .blog-post-meta {
	color: var(--tr-3b-texto-muted);
	font-size: 12.5px;
}

.threeb-blog-scope .blog-post-meta .houzez-icon {
	color: var(--tr-3b-dourado);
}

.threeb-blog-scope .blog-post-title h3 {
	font-size: 18px;
	margin: 4px 0 8px;
}

.threeb-blog-scope .blog-post-title h3 a {
	color: var(--tr-3b-verde);
	font-weight: 700;
	text-decoration: none;
}

.threeb-blog-scope .blog-post-title h3 a:hover {
	color: var(--tr-3b-dourado);
}

.threeb-blog-scope .blog-post-body {
	color: var(--tr-3b-texto-muted);
	font-size: 14px;
	line-height: 1.6;
	flex-grow: 1;
}

.threeb-blog-scope .blog-post-link {
	margin-top: 14px;
}

.threeb-blog-scope .blog-post-link a {
	color: var(--tr-3b-verde);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--tr-3b-dourado);
	padding-bottom: 2px;
}

.threeb-blog-scope .blog-post-link a:hover {
	color: var(--tr-3b-dourado);
}

/* -----------------------------------------------------------------------
 * Artigo unico (single.php do tema pai, sem override - so' CSS aqui)
 * --------------------------------------------------------------------- */
.threeb-blog-scope.single-post .page-title-wrap h1,
.threeb-blog-scope.single-post .entry-title {
	color: var(--tr-3b-verde);
	font-weight: 700;
}

.threeb-blog-scope.single-post .single-post-thumb img,
.threeb-blog-scope.single-post .post-thumbnail img {
	border-radius: 12px;
}

.threeb-blog-scope.single-post .entry-content,
.threeb-blog-scope.single-post .post-content-wrap {
	font-size: 16.5px;
	line-height: 1.8;
	color: #33372f;
}

.threeb-blog-scope.single-post .entry-content h2,
.threeb-blog-scope.single-post .post-content-wrap h2 {
	color: var(--tr-3b-verde);
	font-weight: 700;
	margin-top: 34px;
}

.threeb-blog-scope.single-post .entry-content h3,
.threeb-blog-scope.single-post .post-content-wrap h3 {
	color: var(--tr-3b-verde);
	font-weight: 700;
}

/*
 * Link dentro do corpo do artigo. Duas coisas, ambas de legibilidade,
 * reportadas pelo cliente em 25/08/2026:
 *
 * 1. O dourado da paleta (#b89855) da 2,74:1 contra o branco - reprova em
 *    WCAG AA (minimo 4,5:1 para texto). Passa a usar o tom escuro.
 *
 * 2. A regra pegava TODO <a> do artigo, botao incluido: um botao de FUNDO
 *    dourado ficava com a LETRA dourada por cima (1,03:1 - literalmente
 *    ilegivel, era esse o print do cliente). O :not(:where(...)) tira os
 *    botoes da regra SEM somar peso nenhum ao seletor (:where() zera a
 *    especificidade do que esta dentro), entao a cor propria de cada botao
 *    volta a valer sem precisar de !important em lugar nenhum.
 */
.threeb-blog-scope.single-post .entry-content a:not(:where(.wp-block-button__link, .wp-element-button, .btn, .threeb-blog-cta-btn, .qlwapp__button)),
.threeb-blog-scope.single-post .post-content-wrap a:not(:where(.wp-block-button__link, .wp-element-button, .btn, .threeb-blog-cta-btn, .qlwapp__button)) {
	color: var(--tr-3b-dourado-texto);
	text-decoration: underline;
}

.threeb-blog-scope.single-post .entry-content blockquote,
.threeb-blog-scope.single-post .post-content-wrap blockquote {
	border-left: 4px solid var(--tr-3b-dourado);
	background: var(--tr-3b-areia);
	padding: 16px 20px;
	margin: 24px 0;
	border-radius: 0 8px 8px 0;
	color: var(--tr-3b-verde);
}

.threeb-blog-scope .related-posts-wrap h2 {
	color: var(--tr-3b-verde);
	font-weight: 700;
	margin-bottom: 18px;
	position: relative;
	padding-bottom: 12px;
}

.threeb-blog-scope .related-posts-wrap h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--tr-3b-dourado);
	border-radius: 2px;
}

/* -----------------------------------------------------------------------
 * Descricao da categoria
 * --------------------------------------------------------------------- */
.threeb-blog-scope .threeb-blog-term-description {
	color: var(--tr-3b-texto-muted);
}

/* -----------------------------------------------------------------------
 * Mobile
 * --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.threeb-blog-scope .post-inner-wrap {
		padding: 16px 16px 4px;
	}

	.threeb-blog-scope .post-title-wrap h2 {
		font-size: 19px;
	}

	.threeb-blog-scope .post-footer-wrap {
		padding: 12px 16px 16px;
		flex-direction: column;
		align-items: flex-start;
	}

	.threeb-blog-scope .post-footer-wrap .btn-primary {
		width: 100%;
		text-align: center;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * RODAPE DO CARD - "Leia mais" desalinhado (25/08/2026)
 * --------------------------------------------------------------------------
 * O botao aparecia colado na linha de categoria/tempo de leitura, no meio do
 * card e esticado na vertical. O "space-between" do .post-footer-wrap nao
 * tinha efeito nenhum porque o Houzez poe UM UNICO filho ali dentro:
 *
 *   .post-footer-wrap  >  div.d-flex.flex-column.flex-md-row  >  ul + a.btn
 *
 * Com um filho so, o space-between nao tem o que separar, e esse invólucro
 * nasce com "flex: 0 1 auto" - ou seja, encolhe ate a largura do conteudo
 * (399px de 891px medidos) e para por ali, levando o botao junto. Alem disso
 * o "align-items" herdado esticava o <a> na vertical (58px de altura), o que
 * fazia a pilula passar por cima da linha de cima.
 *
 * A correcao e no invólucro, nao no botao: ele passa a ocupar a largura toda
 * do rodape, e ai o flex-grow que o proprio Houzez ja poe no <ul> empurra o
 * botao para a direita sozinho.
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.threeb-blog-scope .post-footer-wrap > .d-flex {
	flex: 1 1 100%;
	min-width: 0;
	gap: 12px;
}

.threeb-blog-scope .post-footer-wrap > .d-flex > .btn-primary {
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.threeb-blog-scope .post-footer-wrap > .d-flex {
		align-items: center;
		justify-content: space-between;
	}

	/* Sem isto o <a> estica na vertical e a pilula invade a linha de cima. */
	.threeb-blog-scope .post-footer-wrap > .d-flex > .btn-primary {
		align-self: center;
	}
}

/* O .btn do Houzez traz line-height: 40px - com o padding de 8px do desenho
   deste cartao, a pilula ficava com 58px de altura contra 24px da linha de
   categoria ao lado: era isso que dava o ar de "botao por cima do texto".
   1.4 devolve a pilula compacta que o desenho pedia (~39px). */
.threeb-blog-scope .post-footer-wrap .btn-primary {
	line-height: 1.4;
}