/*
 * Blocos SP — substitutos leves dos widgets do Jet-Blog. Estrutura de layout derivada do
 * jet-blog/assets/css/jet-blog.css (mesmos valores), cores/tipografia da configuração real
 * de cada widget em produção (lfwmedia.com, 18-19/08/2026). Valores abaixo são só o PONTO
 * DE PARTIDA (o que já está em produção hoje).
 *
 * CONTRATO DE ESTILO = classes .sp-* (BEM, planas, deste plugin). É nelas que este arquivo
 * mira. As classes .jet-* / .jet-blog continuam na marcação (ver includes/class-render.php)
 * SÓ como camada de compatibilidade, pra não quebrar ajustes de CSS que algum site já tenha
 * feito mirando os nomes do Jet-Blog — NENHUMA regra deste arquivo depende delas, e essa
 * camada pode ser removida no futuro sem tocar aqui.
 *
 * PERSONALIZAÇÃO POR SITE — sem editar este arquivo:
 * Toda cor/fonte/tamanho importante está numa variável CSS (--sp-...) redeclarada aqui só
 * como valor padrão. Pra mudar o visual de UM site, não edite nada aqui — em vez disso, em
 * Aparência > Personalizar > CSS Adicional (nativo do WordPress, por site, sobrevive a
 * qualquer atualização deste plugin), redeclare só as variáveis que quiser mudar. Exemplo:
 *
 *   :root {
 *     --sp-grid-accent: #ff6600;
 *     --sp-blog-font: "Poppins", sans-serif;
 *   }
 *
 * Não precisa copiar a regra inteira, só a variável — o resto do CSS já usa var(--nome).
 */

:root {
	/* Compartilhado entre todos os blocos */
	--sp-blog-font: "Montserrat", sans-serif;
	--sp-blog-text-color: #1f2024;
	--sp-blog-border-color: #e6e6e6;
	/* Tamanho da foto do autor quando a opção "Usar foto do autor" está ligada (redonda). */
	--sp-meta-avatar-size: 18px;

	/* Grade de Posts (sp-post-grid) — substitui jet-blog-smart-listing */
	--sp-grid-accent: #23c5c7;
	--sp-grid-featured-title-color: #222222;
	--sp-grid-title-color: #1f2024;
	--sp-grid-title-size: 18px;
	--sp-grid-featured-title-size: 35px;
	--sp-grid-featured-title-size-mobile: 24px;
	--sp-grid-featured-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
	/* Cor do título do destaque, ao passar o mouse, só no layout "Sobreposto" (o "Simples"
	   já usa --sp-grid-accent direto, via o link do título). Default = mesma cor de acento,
	   redeclare só esta variável pra um site querer outra cor de hover ali. */
	--sp-grid-featured-boxed-hover-color: var(--sp-grid-accent);
	/* Miniatura dos posts da grade (não do destaque) — default preserva o comportamento
	   antigo (largura proporcional, altura livre). Um site que precise de miniatura fixa
	   tipo quadrada (ex.: lista estreita ao lado de um destaque) redeclara os dois em pixel
	   (ex.: 85px) — object-fit:cover no CSS do plugin evita distorcer a imagem. */
	--sp-grid-thumb-width: 33%;
	--sp-grid-thumb-height: auto;

	/* Mosaico de Posts (sp-post-tiles) — substitui jet-blog-smart-tiles */
	--sp-tiles-height: 485px;
	--sp-tiles-gap: 2px;
	--sp-tiles-badge-bg: #0088ff;
	--sp-tiles-badge-color: #ffffff;
	--sp-tiles-title-color: #ffffff;
	--sp-tiles-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
	/* Escurecimento extra ao passar o mouse (padrão do JetBlog: imagem mais escura, cor do
	   texto NÃO muda) — ver .sp-post-tiles__box:hover::before logo abaixo. */
	--sp-tiles-hover-darken: rgba(0, 0, 0, 0.3);

	/* Ticker de Últimas (sp-text-ticker) — substitui jet-blog-text-ticker */
	--sp-ticker-badge-bg: #f9465b;
	--sp-ticker-badge-color: #ffffff;
	--sp-ticker-link-color: #1f2024;
	--sp-ticker-link-hover-color: #0088ff;
	--sp-ticker-arrow-color: #bdbdbd;
	--sp-ticker-arrow-hover-color: #0089ff;

	/* Paginação de Posts (sp-posts-pagination) — substitui jet-blog-posts-pagination */
	--sp-pagination-accent: #0088ff;
	--sp-pagination-text-color: #1f2024;
}

/* =====================================================================
 * Grade de Posts (SP) — substitui jet-blog-smart-listing
 * ===================================================================== */

.sp-post-grid {
	font-family: var(--sp-blog-font);
}

.sp-post-grid .sp-post-grid__heading {
	border-bottom: 1px solid var(--sp-blog-border-color);
	padding-bottom: 14px;
	margin-bottom: 20px;
}
.sp-post-grid .sp-post-grid__title {
	margin: 0;
	color: var(--sp-grid-accent);
	font-family: var(--sp-blog-font);
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.277em;
	letter-spacing: -0.4px;
}

.sp-post-grid .sp-post-grid__layout {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}

.sp-post-grid .sp-post-grid__featured {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	margin: 10px;
	position: relative;
	overflow: hidden;
}
.sp-post-grid .sp-post-grid__featured .sp-post-grid__thumb-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.sp-post-grid .sp-post-grid__featured-content {
	margin-top: 20px;
}

/* ---------- destaque à esquerda/direita: o BLOCO INTEIRO vira 2 colunas (destaque de um
   lado, grade do outro) — o destaque em si continua imagem-topo/texto-embaixo por dentro,
   só ganha menos largura. Diferente do "topo" (destaque em cima, grade embaixo, largura
   total pros dois). ---------- */
.sp-post-grid .sp-post-grid__layout.has-featured-position-left,
.sp-post-grid .sp-post-grid__layout.has-featured-position-right {
	flex-wrap: nowrap;
	align-items: flex-start;
}
.sp-post-grid .sp-post-grid__layout.has-featured-position-right {
	flex-direction: row-reverse;
}
.sp-post-grid .sp-post-grid__layout.has-featured-position-left .sp-post-grid__featured,
.sp-post-grid .sp-post-grid__layout.has-featured-position-right .sp-post-grid__featured {
	flex: 1 1 0;
	max-width: calc(50% - 20px);
}
.sp-post-grid .sp-post-grid__layout.has-featured-position-left .sp-post-grid__list,
.sp-post-grid .sp-post-grid__layout.has-featured-position-right .sp-post-grid__list {
	flex: 1 1 0;
	max-width: calc(50% - 20px);
}
.sp-post-grid .sp-post-grid__featured.featured-position-left .post-title-featured,
.sp-post-grid .sp-post-grid__featured.featured-position-right .post-title-featured {
	font-size: 24px;
}

/* ---------- destaque: layout sobreposto (texto por cima da imagem) ---------- */
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed {
	background-size: cover;
	background-position: center;
	min-height: 380px;
	justify-content: flex-end;
	padding: 24px 30px;
	border-radius: 4px;
}
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-grid-featured-overlay);
	z-index: 0;
}
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed .sp-post-grid__featured-content {
	position: relative;
	z-index: 1;
	margin-top: 0;
}
.sp-post-grid .sp-post-grid__featured-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed .post-title-featured,
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed .post-excerpt-featured,
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed .sp-post-grid__meta,
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed .sp-post-grid__meta a {
	color: #ffffff;
}
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed .sp-post-grid__meta a:hover {
	color: #ffffff;
	opacity: 0.8;
}
/* Hover do título no layout "Sobreposto": o título é um <div> sem <a> (o link do destaque
   inteiro é o .sp-post-grid__featured-link, um <a> irmão que cobre a caixa por cima) — por
   isso ":hover" tem que ser pedido no ANCESTRAL comum (.featured-layout-boxed), não em
   "a:hover" dentro do título (não existe elemento pra casar essa regra). O ancestral recebe
   :hover mesmo quando o mouse está sobre o link/overlay, porque hover sobe pela árvore
   independente de z-index. */
.sp-post-grid .sp-post-grid__featured.featured-layout-boxed:hover .post-title-featured {
	color: var(--sp-grid-featured-boxed-hover-color);
}

.sp-post-grid .post-title-featured {
	color: var(--sp-grid-featured-title-color);
	font-family: var(--sp-blog-font);
	font-size: var(--sp-grid-featured-title-size);
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: -0.3px;
	margin: 5px 0 19px;
}
.sp-post-grid .post-title-featured a {
	color: inherit;
	text-decoration: none;
}
.sp-post-grid .post-title-featured a:hover {
	color: var(--sp-grid-accent);
}
/* Cor escura por padrão (destaque "simples": texto embaixo da imagem, sobre fundo claro).
   No layout "sobreposto" (featured-layout-boxed) a regra acima troca pra branco, junto com
   título e meta, porque aí o texto fica por cima da imagem com overlay escuro. */
.sp-post-grid .post-excerpt-featured {
	font-family: var(--sp-blog-font);
	font-size: 14px;
	line-height: 1.6em;
	opacity: 0.85;
	color: var(--sp-blog-text-color);
}

.sp-post-grid .sp-post-grid__list {
	display: flex;
	flex-wrap: wrap;
	margin-left: 10px;
	margin-right: 10px;
	max-width: 100%;
	flex-basis: 100%;
	--sp-post-grid-columns: 2;
}
.sp-post-grid .sp-post-grid__item {
	box-sizing: border-box;
	width: calc(100% / var(--sp-post-grid-columns));
	padding: 0 10px;
}
/* O padding acima cria o "gutter" entre colunas, mas sobra 10px indevido nas bordas
   externas (1ª coluna à esquerda, última coluna à direita) — o destaque não tem esse
   padding, então a grade ficava desalinhada em relação a ele. Zera o padding só nas
   pontas de cada linha, por contagem de colunas (a mesma classe columns-N já existe
   no container, gerada pelo widget). */
.sp-post-grid .sp-post-grid__list.columns-1 .sp-post-grid__item {
	padding-left: 0;
	padding-right: 0;
}
.sp-post-grid .sp-post-grid__list.columns-2 .sp-post-grid__item:nth-child(odd) {
	padding-left: 0;
}
.sp-post-grid .sp-post-grid__list.columns-2 .sp-post-grid__item:nth-child(even) {
	padding-right: 0;
}
.sp-post-grid .sp-post-grid__list.columns-3 .sp-post-grid__item:nth-child(3n+1) {
	padding-left: 0;
}
.sp-post-grid .sp-post-grid__list.columns-3 .sp-post-grid__item:nth-child(3n) {
	padding-right: 0;
}
.sp-post-grid .sp-post-grid__list.columns-4 .sp-post-grid__item:nth-child(4n+1) {
	padding-left: 0;
}
.sp-post-grid .sp-post-grid__list.columns-4 .sp-post-grid__item:nth-child(4n) {
	padding-right: 0;
}
.sp-post-grid .sp-post-grid__post {
	display: flex;
	align-items: center;
	margin: 10px 0;
	position: relative;
}
/* position:relative em toda .sp-post-grid__thumb (grade e destaque) — serve de referência
   pro .sp-post-grid__terms--inside (selo de categoria "Dentro da imagem") se posicionar via
   position:absolute. Sem efeito colateral quando não há selo sobreposto ali. */
.sp-post-grid .sp-post-grid__thumb {
	position: relative;
}
/* Largura/altura configuráveis por site (--sp-grid-thumb-width/-height) — default idêntico
   ao comportamento anterior (33% de largura, altura livre acompanhando a imagem). Pra um
   tamanho fixo tipo miniatura quadrada (ex.: lista estreita ao lado de um destaque), um site
   redeclara os dois em pixel (ex.: 85px) — object-fit:cover no <img> evita distorcer a
   imagem quando a altura vira fixa. */
.sp-post-grid .sp-post-grid__post .sp-post-grid__thumb {
	width: var(--sp-grid-thumb-width);
	height: var(--sp-grid-thumb-height);
	flex: 0 0 auto;
	margin-right: 15px;
}
.sp-post-grid .sp-post-grid__post .sp-post-grid__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}
.sp-post-grid .sp-post-grid__content {
	flex-grow: 1;
	min-width: 0;
}

/* ---------- posts da grade: imagem no topo (em vez de à esquerda) ---------- */
.sp-post-grid .sp-post-grid__layout.image-position-top .sp-post-grid__post {
	flex-direction: column;
	align-items: stretch;
}
/* Precisa zerar o width: var(--sp-grid-thumb-width) (33%) herdado da regra da imagem à
   esquerda — sem isto a miniatura fica com 1/3 da largura, encostada à esquerda, em vez de
   ocupar a coluna inteira igual ao texto (align-items:stretch não vence um width explícito). */
.sp-post-grid .sp-post-grid__layout.image-position-top .sp-post-grid__post .sp-post-grid__thumb {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-right: 0;
	margin-bottom: 15px;
}
.sp-post-grid .sp-post-grid__layout.image-position-top .sp-post-grid__post .sp-post-grid__thumb-img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

/* ---------- posts da grade: imagem à direita (em vez de à esquerda) — só inverte a ordem
   visual (row-reverse); tamanho do thumbnail e do gap continuam os mesmos, só troca de lado
   (margin-right do padrão "esquerda" vira margin-left aqui). ---------- */
.sp-post-grid .sp-post-grid__layout.image-position-right .sp-post-grid__post {
	flex-direction: row-reverse;
}
.sp-post-grid .sp-post-grid__layout.image-position-right .sp-post-grid__post .sp-post-grid__thumb {
	margin-right: 0;
	margin-left: 15px;
}

/* ---------- toggle "bordas arredondadas": desligado remove o border-radius de todas as
   imagens do bloco, inclusive o destaque sobreposto (que usa background-image, não <img>). --- */
.sp-post-grid .sp-post-grid__layout.no-rounded-images .sp-post-grid__thumb-img,
.sp-post-grid .sp-post-grid__layout.no-rounded-images .sp-post-grid__featured.featured-layout-boxed {
	border-radius: 0;
}
.sp-post-grid .post-title-simple {
	color: var(--sp-grid-title-color);
	font-family: var(--sp-blog-font);
	font-size: var(--sp-grid-title-size);
	font-weight: bold;
	line-height: 1.333em;
	letter-spacing: -0.3px;
	margin: 8px 0 0;
}
.sp-post-grid .post-title-simple a {
	color: inherit;
	text-decoration: none;
}
.sp-post-grid .post-title-simple a:hover {
	color: var(--sp-grid-accent);
}
/* Resumo nos posts da grade (v1.1.0) — desligado por padrão (controle "Tamanho do resumo",
   0 palavras), só aparece quando o site ligar. Mesmo estilo do resumo do destaque. */
.sp-post-grid .post-excerpt-simple {
	font-family: var(--sp-blog-font);
	font-size: 13px;
	line-height: 1.6em;
	opacity: 0.75;
	color: var(--sp-blog-text-color);
	margin-top: 6px;
}

.sp-post-grid .sp-post-grid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: var(--sp-blog-text-color);
	font-family: var(--sp-blog-font);
	font-size: 12px;
	line-height: 1.58em;
}
.sp-post-grid .sp-post-grid__meta-item {
	display: inline-flex;
	align-items: center;
	margin-right: 15px;
}
.sp-post-grid .sp-post-grid__meta-item a {
	color: inherit;
	text-decoration: none;
}
.sp-post-grid .sp-post-grid__meta-item a:hover {
	color: var(--sp-grid-accent);
}
.sp-post-grid .sp-post-grid__meta-icon {
	margin-right: 5px;
	font-size: 12px;
	display: inline-flex;
}

/* Foto do autor no lugar do ícone (opção "Usar foto do autor") — vale pra Grade e Mosaico.
   O <span>.__meta-icon ganha a classe .has-avatar e passa a conter um <img> (get_avatar).
   Redonda, tamanho via --sp-meta-avatar-size, ajustável por site. */
.sp-post-grid .sp-post-grid__meta-icon.has-avatar,
.sp-post-tiles .sp-post-tiles__meta-icon.has-avatar {
	display: inline-flex;
	align-items: center;
	width: var(--sp-meta-avatar-size);
	height: var(--sp-meta-avatar-size);
	font-size: 0;
	line-height: 0;
}
.sp-post-grid .sp-post-grid__meta .sp-blog-blocks__avatar,
.sp-post-tiles .sp-post-tiles__meta .sp-blog-blocks__avatar {
	width: var(--sp-meta-avatar-size);
	height: var(--sp-meta-avatar-size);
	min-width: var(--sp-meta-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Destaque à esquerda/direita: em tablet/celular desfaz o split de 2 colunas (destaque |
   grade) — vira coluna única, destaque grande em cima e a grade embaixo. Sem isto o destaque
   e a grade ficam com ~50% da tela cada, com o título do destaque quebrando quase letra a
   letra. Mesmo breakpoint (1024px) do "empilhar" do Mosaico. Usa os mesmos seletores das
   regras de origem (linhas ~123-138), então a especificidade empata e o @media vence por vir
   depois. */
@media (max-width: 1024px) {
	.sp-post-grid .sp-post-grid__layout.has-featured-position-left,
	.sp-post-grid .sp-post-grid__layout.has-featured-position-right {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: stretch;
		/* Zera o "gutter" por margem negativa — em coluna, o destaque com width:100% +
		   margin:10px + flex:0 0 auto (não encolhe) estourava ~20px pra fora da margem
		   direita. Com margens zeradas e width:auto o align-items:stretch dimensiona certo. */
		margin-left: 0;
		margin-right: 0;
	}
	.sp-post-grid .sp-post-grid__layout.has-featured-position-left .sp-post-grid__featured,
	.sp-post-grid .sp-post-grid__layout.has-featured-position-right .sp-post-grid__featured,
	.sp-post-grid .sp-post-grid__layout.has-featured-position-left .sp-post-grid__list,
	.sp-post-grid .sp-post-grid__layout.has-featured-position-right .sp-post-grid__list {
		/* flex:0 0 auto anula o flex:1 1 0 das regras de origem — em coluna, flex-basis:0
		   colapsaria o destaque pra altura 0 (a grade escapa disso porque tem flex-basis:100%
		   na regra base dela). width:auto + align-items:stretch do pai = largura total sem
		   estouro; max-width:100% anula o calc(50% - 20px); margens laterais zeradas. */
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	/* Coluna única: desliga o sistema de "gutter" por margem negativa (-10 no layout, +10
	   nos filhos) e o padding lateral alternado dos cards por coluna (columns-N nth-child).
	   Isso só servia pra alinhar bordas no grid multi-coluna do desktop; no mobile deixava
	   os blocos desalinhados entre si (card par ~10px mais à direita que o ímpar) e empurrava
	   imagem/texto pra fora da margem direita. */
	.sp-post-grid .sp-post-grid__layout,
	.sp-post-grid .sp-post-grid__featured,
	.sp-post-grid .sp-post-grid__list {
		margin-left: 0;
		margin-right: 0;
	}
	/* :not(.sp-post-grid__list--keep-columns) — opção "Manter colunas da grade no mobile"
	   liga essa classe na lista e pula todo este bloco, deixando as regras de desktop
	   (largura proporcional + padding alternado por coluna, mais acima neste arquivo)
	   valendo também abaixo de 767px. :not([class*="mobile-columns-"]) faz o mesmo pulo
	   quando a lista tem um nº fixo de colunas no mobile (abaixo) — sem essa exclusão, os
	   itens em posição múltipla do nº de colunas do desktop (ex.: 1º, 4º, 5º... com 4
	   colunas) batem também no branch :nth-child(4n+1)/(4n) deste bloco, cuja especificidade
	   (6 classes) é maior que a do bloco "Colunas no mobile" (4 classes) e vencia mesmo
	   vindo antes no arquivo — só os itens em posição "neutra" (ex.: 2º/3º de 4) escapavam
	   disso, o que fazia o bug parecer intermitente. */
	.sp-post-grid .sp-post-grid__list:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item,
	.sp-post-grid .sp-post-grid__list.columns-2:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item:nth-child(odd),
	.sp-post-grid .sp-post-grid__list.columns-2:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item:nth-child(even),
	.sp-post-grid .sp-post-grid__list.columns-3:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item:nth-child(3n+1),
	.sp-post-grid .sp-post-grid__list.columns-3:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item:nth-child(3n),
	.sp-post-grid .sp-post-grid__list.columns-4:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item:nth-child(4n+1),
	.sp-post-grid .sp-post-grid__list.columns-4:not(.sp-post-grid__list--keep-columns):not([class*="mobile-columns-"]) .sp-post-grid__item:nth-child(4n) {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	/* "Colunas no mobile" = um número fixo (2/3/4), que pode ser diferente do nº de colunas
	   do desktop (classe .columns-N, sempre ativa, pode estar presente ao mesmo tempo com um
	   valor diferente). O bloco acima agora ignora explicitamente estes itens
	   (:not([class*="mobile-columns-"])), então não há disputa de especificidade a resolver
	   aqui. */
	.sp-post-grid .sp-post-grid__list.mobile-columns-2 .sp-post-grid__item {
		width: calc(100% / 2);
		padding-left: 10px;
		padding-right: 10px;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-2 .sp-post-grid__item:nth-child(odd) {
		padding-left: 0;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-2 .sp-post-grid__item:nth-child(even) {
		padding-right: 0;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-3 .sp-post-grid__item {
		width: calc(100% / 3);
		padding-left: 10px;
		padding-right: 10px;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-3 .sp-post-grid__item:nth-child(3n+1) {
		padding-left: 0;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-3 .sp-post-grid__item:nth-child(3n) {
		padding-right: 0;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-4 .sp-post-grid__item {
		width: calc(100% / 4);
		padding-left: 10px;
		padding-right: 10px;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-4 .sp-post-grid__item:nth-child(4n+1) {
		padding-left: 0;
	}
	.sp-post-grid .sp-post-grid__list.mobile-columns-4 .sp-post-grid__item:nth-child(4n) {
		padding-right: 0;
	}
	.sp-post-grid .post-title-featured {
		font-size: var(--sp-grid-featured-title-size-mobile);
	}

	/* "Posição da imagem no mobile" — só existe classe .mobile-image-position-* quando o
	   site escolheu um valor diferente do desktop (ver Render::post_grid). Reproduz aqui as
	   mesmas diferenças entre topo/esquerda/direita já usadas acima (.image-position-top e
	   .image-position-right) — precisa redeclarar TODAS as propriedades que mudam de uma
	   posição pra outra (inclusive as três margens do thumbnail, não só as que faltam em
	   cada caso), porque as regras desktop (sem @media, valem sempre) têm a MESMA
	   especificidade — quem decide então é só a ordem no arquivo, e esta vem depois. Sem
	   isso, trocar de uma combinação pra outra (ex.: desktop "direita" + mobile "topo")
	   deixava sobrando uma margem do lado errado. */
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-top .sp-post-grid__post {
		flex-direction: column;
		align-items: stretch;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-top .sp-post-grid__post .sp-post-grid__thumb {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 15px;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-top .sp-post-grid__post .sp-post-grid__thumb-img {
		aspect-ratio: 3 / 2;
		height: auto;
		object-fit: cover;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-left .sp-post-grid__post {
		flex-direction: row;
		align-items: center;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-left .sp-post-grid__post .sp-post-grid__thumb {
		width: var(--sp-grid-thumb-width);
		max-width: none;
		height: var(--sp-grid-thumb-height);
		margin-right: 15px;
		margin-left: 0;
		margin-bottom: 0;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-left .sp-post-grid__post .sp-post-grid__thumb-img {
		aspect-ratio: auto;
		height: 100%;
		object-fit: cover;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-right .sp-post-grid__post {
		flex-direction: row-reverse;
		align-items: center;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-right .sp-post-grid__post .sp-post-grid__thumb {
		width: var(--sp-grid-thumb-width);
		max-width: none;
		height: var(--sp-grid-thumb-height);
		margin-right: 0;
		margin-left: 15px;
		margin-bottom: 0;
	}
	.sp-post-grid .sp-post-grid__layout.mobile-image-position-right .sp-post-grid__post .sp-post-grid__thumb-img {
		aspect-ratio: auto;
		height: 100%;
		object-fit: cover;
	}
}

/* =====================================================================
 * Mosaico de Posts (SP) — substitui jet-blog-smart-tiles
 * ===================================================================== */

.sp-post-tiles {
	font-family: var(--sp-blog-font);
}

.sp-post-tiles .sp-post-tiles__wrap {
	display: grid;
	gap: var(--sp-tiles-gap);
	height: var(--sp-tiles-height);
}

/* ---------- layout "1-2-2" (padrão original: 1 grande à esquerda + 4 menores em grade
   2x2 à direita). "Quantidade de pequenos" (small_tiles) cresce na direção escolhida em
   "Crescer em" (small_tiles_direction) — classe .small-* só aparece quando small_tiles é
   diferente do padrão 4, ver Render::post_tiles:
   - direção "linhas" (padrão, sem sufixo): mantém 2 colunas, cresce em linhas —
     .small-6 = 2x3, .small-8 = 2x4.
   - direção "colunas" (sufixo -cols): mantém 2 linhas, cresce em colunas —
     .small-6-cols = 3x2, .small-8-cols = 4x2.
   Os blocos "-cols" são escritos por completo (não reaproveitam as regras sem sufixo
   acima) pra não depender de qual propriedade cada nth-child "herda" da regra genérica —
   mais fácil de ler e alterar sem repetir o problema de especificidade do mobile-columns
   (v1.4.1/1.4.2: lá a regra concorrente vinha de um seletor diferente; aqui, mesmo sendo
   sempre mais específico que a regra genérica .layout-1-2-2 — por ter uma classe extra —
   optei por não misturar herança parcial com override parcial. O grande (nth-child(1))
   sempre ocupa a coluna 1 inteira, do topo até a última linha, nas duas direções. ---------- */
.sp-post-tiles .sp-post-tiles__wrap.layout-1-2-2 {
	grid-template-columns: 50% 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(2) {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(3) {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(4) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(5) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-6 {
	grid-template-rows: 1fr 1fr 1fr;
}
.sp-post-tiles .layout-1-2-2.small-6 .sp-post-tiles__tile:nth-child(1) {
	grid-row: 1 / 4;
}
.sp-post-tiles .layout-1-2-2.small-6 .sp-post-tiles__tile:nth-child(6) {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
.sp-post-tiles .layout-1-2-2.small-6 .sp-post-tiles__tile:nth-child(7) {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}
.sp-post-tiles .layout-1-2-2.small-8 {
	grid-template-rows: 1fr 1fr 1fr 1fr;
}
.sp-post-tiles .layout-1-2-2.small-8 .sp-post-tiles__tile:nth-child(1) {
	grid-row: 1 / 5;
}
.sp-post-tiles .layout-1-2-2.small-8 .sp-post-tiles__tile:nth-child(6) {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
.sp-post-tiles .layout-1-2-2.small-8 .sp-post-tiles__tile:nth-child(7) {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}
.sp-post-tiles .layout-1-2-2.small-8 .sp-post-tiles__tile:nth-child(8) {
	grid-column: 2 / 3;
	grid-row: 4 / 5;
}
.sp-post-tiles .layout-1-2-2.small-8 .sp-post-tiles__tile:nth-child(9) {
	grid-column: 3 / 4;
	grid-row: 4 / 5;
}
.sp-post-tiles .layout-1-2-2.small-6-cols {
	/* grande = 2fr = largura de 2 colunas pequenas (1fr cada), não 50% fixo — com 3
	   colunas pequenas a imagem some em 2/5 (40%) da largura total. */
	grid-template-columns: 2fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(2) {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(3) {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(4) {
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(5) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(6) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-6-cols .sp-post-tiles__tile:nth-child(7) {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-8-cols {
	/* grande = 2fr = largura de 2 colunas pequenas — com 4 colunas pequenas a imagem
	   some em 2/6 (1/3) da largura total, como pedido. */
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(2) {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(3) {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(4) {
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(5) {
	grid-column: 5 / 6;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(6) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(7) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(8) {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-2-2.small-8-cols .sp-post-tiles__tile:nth-child(9) {
	grid-column: 5 / 6;
	grid-row: 2 / 3;
}

/* ---------- layout "1-1-2-h" (1 grande à esquerda ocupando as 2 linhas + 2 empilhados à
   direita) — regras extraídas do jet-blog.css real (26horasnoticias.com.br, 31/08/2026),
   não são chute. ---------- */
.sp-post-tiles .sp-post-tiles__wrap.layout-1-1-2-h {
	grid-template-columns: 50% 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-excerpt {
	max-height: 20em;
	opacity: 1;
}
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(2) {
	grid-column: 2 / 4;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(3) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(4) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

/* ---------- layout "2-1-2" (pares empilhados nas pontas + destaque central, 3 a 5 colunas
   via o controle "Colunas") — ratio de largura (coluna central = 2x cada coluna de par)
   confirmado ao vivo contra o layout nativo "2-1-2" do Jet-Blog (portal03.modelosite.com,
   14/10/2026): grid-template-columns computado = 259.5px/520.98px/259.5px pra 3 colunas,
   ou seja 1fr/2fr/1fr (a central mede exatamente 50% do total, as duas pontas 25% cada).
   Diferente do Jet-Blog (que usa 2 widgets lado a lado + auto-placement, por isso a 2ª
   coluna ali acaba virando a borda DIREITA em vez da esquerda), aqui cada coluna é POSICIONADA
   explícita por nth-child — mesmo padrão já usado em "1-2-2"/"1-1-2-h" neste arquivo — pra
   manter a ordem dos posts previsível (coluna 1 = 2 primeiros posts, central = 3º, coluna 3
   = 4º/5º, e assim por diante). */
.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2 {
	grid-template-rows: 1fr 1fr;
}
.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2.columns-3 {
	grid-template-columns: 1fr 2fr 1fr;
}
.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2.columns-4 {
	grid-template-columns: 1fr 2fr 1fr 1fr;
}
.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2.columns-5 {
	grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(2) {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(3) {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(3) .sp-post-tiles__box-excerpt {
	max-height: 20em;
	opacity: 1;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(4) {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(5) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(6) {
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(7) {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(8) {
	grid-column: 5 / 6;
	grid-row: 1 / 2;
}
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(9) {
	grid-column: 5 / 6;
	grid-row: 2 / 3;
}

/* ---------- layout "3-x" (grade simples de 3 colunas, N linhas conforme o controle
   "Linhas") — regras extraídas do jet-blog.css real, idem acima. ---------- */
.sp-post-tiles .sp-post-tiles__wrap.layout-3-x {
	grid-template-columns: repeat(3, 1fr);
}

.sp-post-tiles .sp-post-tiles__box {
	height: 100%;
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 60px 27px 26px;
	overflow: hidden;
}
.sp-post-tiles .sp-post-tiles__box::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-tiles-overlay);
	z-index: 0;
	transition: background-color 250ms linear;
}
/* Hover do tile: só a imagem escurece um pouco mais (soma --sp-tiles-hover-darken por
   baixo do gradiente --sp-tiles-overlay que já existe, sem trocar de camada nem duplicar
   pseudo-elemento) — a cor do título/texto continua igual, de propósito (padrão pedido
   pra bater com o comportamento do JetBlog, que também só escurece a imagem no hover). */
.sp-post-tiles .sp-post-tiles__box:hover::before {
	background-color: var(--sp-tiles-hover-darken);
}
.sp-post-tiles .sp-post-tiles__box-content {
	position: relative;
	z-index: 1;
}
/* A tag de categoria não acompanha o bloco de texto (que fica colado embaixo via
   justify-content:flex-end no .sp-post-tiles__box) — ela fica fixa no topo do tile,
   por isso position:absolute usando o próprio padding do box como referência. */
.sp-post-tiles .sp-post-tiles__terms {
	position: absolute;
	top: 20px;
	left: 26px;
	z-index: 1;
}
.sp-post-tiles .sp-post-tiles__box-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Badge de categoria reaproveitado no post-grid (v1.1.0) — mesma cor/fonte/padding do
   mosaico. Por padrão ("Posição da categoria" = Fora) entra no fluxo normal do texto, não
   sobrepõe imagem nenhuma. */
.sp-post-grid .sp-post-grid__terms {
	margin-bottom: 6px;
}
/* "Posição da categoria" = Dentro — sobrepõe o selo no canto superior esquerdo da imagem,
   como no Mosaico (mesmo top/left). Só é usada quando o post tem imagem destacada (ver
   Render::post_grid, que decide isso e cai pra "fora" sem thumbnail); o .sp-post-grid__thumb
   que a recebe já ganhou position:relative logo abaixo pra servir de referência. */
.sp-post-grid .sp-post-grid__terms.sp-post-grid__terms--inside {
	position: absolute;
	top: 10px;
	left: 10px;
	margin-bottom: 0;
	z-index: 1;
}
.sp-post-tiles .sp-post-tiles__terms-link,
.sp-post-grid .sp-post-grid__terms .sp-post-tiles__terms-link {
	display: inline-block;
	background: var(--sp-tiles-badge-bg);
	color: var(--sp-tiles-badge-color);
	font-family: var(--sp-blog-font);
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.34px;
	line-height: 2.3em;
	padding: 0 7px;
	text-decoration: none;
	margin-bottom: 4px;
}

.sp-post-tiles .sp-post-tiles__meta {
	color: var(--sp-tiles-title-color);
	font-size: 12px;
	line-height: 1.58em;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.sp-post-tiles .sp-post-tiles__meta-icon {
	margin-right: 8px;
	font-size: 12px;
}

.sp-post-tiles .sp-post-tiles__box-title {
	color: var(--sp-tiles-title-color);
	font-family: var(--sp-blog-font);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.33em;
}
/* O tile "grande" só existe nos layouts 1-2-2, 1-1-2-h e 2-1-2 (um tile ocupa mais espaço
   que os outros — no 2-1-2 é o 3º, não o 1º) — no layout 3-x todos os tiles têm o mesmo
   tamanho, nenhum deve ficar maior que os outros. */
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-title,
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-title,
.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(3) .sp-post-tiles__box-title {
	font-size: 36px;
	line-height: 1.16em;
	letter-spacing: 2.1px;
}

.sp-post-tiles .sp-post-tiles__box-excerpt {
	color: var(--sp-tiles-title-color);
	font-size: 14px;
	line-height: 1.71em;
	margin-top: 8px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 250ms linear;
}
.sp-post-tiles .sp-post-tiles__tile:hover .sp-post-tiles__box-excerpt {
	max-height: 10em;
	opacity: 1;
}
.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-excerpt,
.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-excerpt {
	max-height: 10em;
	opacity: 1;
}

@media (max-width: 1024px) {
	/* Empilha o mosaico em 1 coluna de largura total. Precisa citar cada classe de layout:
	   as regras grid-template-columns específicas (.sp-post-tiles__wrap.layout-*) têm
	   especificidade maior que um .sp-post-tiles__wrap solto e venceriam mesmo dentro deste
	   @media — aí os tiles ficam presos na 1ª coluna (50%/33% da tela) com o texto quebrando
	   letra a letra, como acontecia no mobile. */
	.sp-post-tiles .sp-post-tiles__wrap.layout-1-2-2,
	.sp-post-tiles .sp-post-tiles__wrap.layout-1-1-2-h,
	.sp-post-tiles .sp-post-tiles__wrap.layout-3-x,
	.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2.columns-3,
	.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2.columns-4,
	.sp-post-tiles .sp-post-tiles__wrap.layout-2-1-2.columns-5 {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		height: auto;
	}
	.sp-post-tiles .sp-post-tiles__tile {
		grid-column: 1 / 2 !important;
		grid-row: auto !important;
	}
	.sp-post-tiles .sp-post-tiles__box {
		height: 260px;
	}
}

@media (max-width: 767px) {
	.sp-post-tiles .layout-1-2-2 .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-title,
	.sp-post-tiles .layout-1-1-2-h .sp-post-tiles__tile:nth-child(1) .sp-post-tiles__box-title,
	.sp-post-tiles .layout-2-1-2 .sp-post-tiles__tile:nth-child(3) .sp-post-tiles__box-title {
		font-size: 25px;
	}
}

/* =====================================================================
 * Ticker de Últimas (SP) — substitui jet-blog-text-ticker
 * ===================================================================== */

.sp-text-ticker {
	font-family: var(--sp-blog-font);
}
.sp-text-ticker .sp-text-ticker__bar {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--sp-blog-border-color);
	border-bottom: 1px solid var(--sp-blog-border-color);
	padding: 0 23px;
}
.sp-text-ticker .sp-text-ticker__date {
	display: flex;
	align-items: center;
	color: var(--sp-blog-text-color);
	font-size: 12px;
	line-height: 1.58em;
	padding-right: 22px;
	white-space: nowrap;
}
.sp-text-ticker .sp-text-ticker__date-icon {
	margin-right: 6px;
	font-size: 12px;
}
.sp-text-ticker .sp-text-ticker__label {
	background: var(--sp-ticker-badge-bg);
	color: var(--sp-ticker-badge-color);
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.14px;
	line-height: 2.3em;
	padding: 0 8px;
	white-space: nowrap;
	margin-right: 22px;
}
.sp-text-ticker .sp-text-ticker__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 18px 40px 18px 0;
}
.sp-text-ticker__posts {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 1.285em;
}
.sp-text-ticker .sp-text-ticker__item {
	display: none;
}
.sp-text-ticker .sp-text-ticker__item.is-active {
	display: block;
}
/* v1.1.0: miniatura + data por item (opcionais) — item-content vira flex pra alinhar os
   três lado a lado quando ligados; sem eles, comportamento idêntico ao anterior. */
.sp-text-ticker .sp-text-ticker__item-content {
	display: flex;
	align-items: center;
	min-width: 0;
}
.sp-text-ticker__item-thumb {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-right: 10px;
	border-radius: 4px;
	overflow: hidden;
}
.sp-text-ticker__item-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sp-text-ticker__item-date {
	flex: 0 0 auto;
	margin-left: 10px;
	font-size: 12px;
	opacity: 0.7;
	white-space: nowrap;
}
.sp-text-ticker .sp-text-ticker__link {
	color: var(--sp-ticker-link-color);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.285em;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}
.sp-text-ticker .sp-text-ticker__link:hover {
	color: var(--sp-ticker-link-hover-color);
}
/* Cursor piscando só faz sentido com o efeito de digitação ligado (v1.1.0) — sem isso, um
   cursor piscando ao lado de um texto estático (typing_effect desligado) pareceria bug. */
.sp-text-ticker[data-typing-effect="1"] .sp-text-ticker__typed::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	background: currentColor;
	vertical-align: -0.15em;
	animation: sp-ticker-cursor 800ms steps(1) infinite;
}
@keyframes sp-ticker-cursor {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.sp-text-ticker__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: var(--sp-ticker-arrow-color);
	padding: 4px 8px;
}
.sp-text-ticker__arrow:hover {
	color: var(--sp-ticker-arrow-hover-color);
}
.sp-text-ticker__arrow--prev {
	right: 34px;
}
.sp-text-ticker__arrow--next {
	right: 4px;
}

@media (max-width: 767px) {
	.sp-text-ticker .sp-text-ticker__date,
	.sp-text-ticker .sp-text-ticker__label {
		display: none;
	}
	.sp-text-ticker .sp-text-ticker__viewport {
		padding: 12px 40px 15px 0;
	}
}

/* =====================================================================
 * Paginação de Posts (SP) — substitui jet-blog-posts-pagination
 * ===================================================================== */

.sp-posts-pagination {
	font-family: var(--sp-blog-font);
	margin: 30px 0;
}
.sp-posts-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sp-posts-pagination--center .nav-links {
	justify-content: center;
}
.sp-posts-pagination--left .nav-links {
	justify-content: flex-start;
}
.sp-posts-pagination--right .nav-links {
	justify-content: flex-end;
}
.sp-posts-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	color: var(--sp-pagination-text-color);
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
}
.sp-posts-pagination .page-numbers:hover {
	color: var(--sp-pagination-accent);
}
.sp-posts-pagination .page-numbers.current {
	background: var(--sp-pagination-accent);
	color: #ffffff;
}
.sp-posts-pagination .page-numbers.next,
.sp-posts-pagination .page-numbers.prev {
	color: var(--sp-pagination-text-color);
}
.sp-posts-pagination .sp-posts-pagination__arrow {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sp-posts-pagination .sp-posts-pagination__arrow svg path {
	fill: currentColor;
}