/* ------------------------------------------------------------
   HACKBR Destaques
   Todas as classes começam com .hackbr- e todas as regras estão
   dentro de um container próprio: nada aqui vaza para o tema, e o
   tema não precisa ser alterado em nada.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   O bloco se adapta à LARGURA DA COLUNA onde foi colocado, não à
   largura da janela.

   Isso não é detalhe: a home tem uma barra lateral de anúncios à
   direita, então o conteúdo vive numa coluna estreita mesmo num
   monitor largo. Com @media, o navegador olharia a janela — 1400px,
   "cabe tudo" — e espremeria três cards num espaço de 700px. Com
   @container, ele olha os 700px reais e reorganiza.

   Mais abaixo há um bloco @supports com o comportamento antigo,
   para navegadores que ainda não entendem container queries.
   ------------------------------------------------------------ */
.hackbr-bloco {
	container-type: inline-size;
	container-name: hackbr;
	width: 100%;
	margin: 0 0 34px;
}

.hackbr-destaques,
.hackbr-ultimas {
	--hackbr-vermelho: #c8102e;
	--hackbr-escuro: #12161c;
	--hackbr-linha: #e2e5ea;
	--hackbr-apagado: #5d626b;
	--hackbr-raio: 6px;
	width: 100%;
	box-sizing: border-box;
}

.hackbr-destaques *,
.hackbr-ultimas * {
	box-sizing: border-box;
}

/* ---------- grade dos destaques ---------- */
.hackbr-destaques {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.hackbr-coluna {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	min-width: 0;
}

/* ---------- card ---------- */
.hackbr-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--hackbr-raio);
	background: var(--hackbr-escuro);
	min-width: 0;
}

.hackbr-capa {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.hackbr-n1 .hackbr-capa {
	aspect-ratio: 16 / 11;
}

.hackbr-n2 .hackbr-capa {
	aspect-ratio: 16 / 9;
}

.hackbr-card .hackbr-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.hackbr-card:hover .hackbr-img {
	transform: scale(1.04);
}

/* Véu escuro por cima da foto: sem ele, título branco sobre
   imagem clara fica ilegível — e imagem clara é justamente o que
   pedimos ao gerador. */
.hackbr-veu {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.42) 0%,
		rgba(0, 0, 0, 0.05) 38%,
		rgba(0, 0, 0, 0.78) 100%
	);
}

/* Sem imagem destacada: painel com a inicial da categoria */
.hackbr-sem-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 64px;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.16);
	background: linear-gradient(135deg, #1b2029, #2b323e);
}

/* ---------- etiqueta de categoria ---------- */
.hackbr-card .hackbr-cat {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: var(--hackbr-vermelho);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 5px 11px;
	border-radius: 3px;
	line-height: 1.4;
}

.hackbr-card .hackbr-cat:hover {
	background: #a50d26;
	color: #fff;
}

/* ---------- título sobre a foto ---------- */
.hackbr-titulo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 18px 20px;
	line-height: 1.25;
}

.hackbr-titulo a {
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.hackbr-titulo a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #fff;
}

.hackbr-n1 .hackbr-titulo {
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -0.4px;
}

.hackbr-n2 .hackbr-titulo {
	font-size: 16px;
	font-weight: 700;
	padding: 14px 16px;
}

/* ---------- lista de últimas ---------- */
.hackbr-linha {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hackbr-linha);
	align-items: flex-start;
}

.hackbr-linha:first-child {
	border-top: 1px solid var(--hackbr-linha);
}

.hackbr-miniatura {
	flex: 0 0 148px;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hackbr-escuro);
	position: relative;
}

.hackbr-miniatura .hackbr-img,
.hackbr-miniatura .hackbr-sem-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	font-size: 30px;
}

.hackbr-texto {
	min-width: 0;
	flex: 1;
}

/* Na lista a etiqueta é discreta: texto, não caixa vermelha.
   Cinco caixas vermelhas empilhadas competem com os destaques. */
.hackbr-ultimas .hackbr-cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--hackbr-vermelho);
	text-decoration: none;
	margin-bottom: 3px;
}

.hackbr-ultimas .hackbr-cat:hover {
	text-decoration: underline;
}

.hackbr-texto h3 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.hackbr-texto h3 a {
	color: inherit;
	text-decoration: none;
}

.hackbr-texto h3 a:hover {
	color: var(--hackbr-vermelho);
}

.hackbr-meta {
	margin: 0;
	font-size: 12.5px;
	color: var(--hackbr-apagado);
}

/* ------------------------------------------------------------
   Adaptação por largura da COLUNA

   840px  — largura confortável para os três cards lado a lado
   620px  — coluna com barra lateral: o N1 vira largura cheia e
            N2/N3 ficam lado a lado embaixo
   420px  — celular: tudo empilhado
   ------------------------------------------------------------ */
@container hackbr (max-width: 840px) {
	.hackbr-n1 .hackbr-titulo {
		font-size: 22px;
	}

	.hackbr-n2 .hackbr-titulo {
		font-size: 15px;
	}
}

@container hackbr (max-width: 620px) {
	.hackbr-destaques {
		grid-template-columns: 1fr;
	}

	.hackbr-coluna {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
	}

	.hackbr-n1 .hackbr-capa {
		aspect-ratio: 16 / 9;
	}
}

@container hackbr (max-width: 420px) {
	.hackbr-coluna {
		grid-template-columns: 1fr;
	}

	.hackbr-n1 .hackbr-titulo {
		font-size: 19px;
		padding: 14px 16px;
	}

	.hackbr-miniatura {
		flex-basis: 104px;
	}

	.hackbr-texto h3 {
		font-size: 15.5px;
	}

	.hackbr-linha {
		gap: 12px;
	}
}

/* ------------------------------------------------------------
   Navegador antigo, sem container queries: cai no comportamento
   por largura de janela. Não é tão preciso, mas nunca quebra.
   ------------------------------------------------------------ */
@supports not (container-type: inline-size) {
	@media (max-width: 1100px) {
		.hackbr-destaques {
			grid-template-columns: 1fr;
		}

		.hackbr-coluna {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: none;
		}

		.hackbr-n1 .hackbr-titulo {
			font-size: 22px;
		}
	}

	@media (max-width: 560px) {
		.hackbr-coluna {
			grid-template-columns: 1fr;
		}

		.hackbr-n1 .hackbr-titulo {
			font-size: 19px;
			padding: 14px 16px;
		}

		.hackbr-miniatura {
			flex-basis: 104px;
		}
	}
}

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
	.hackbr-card .hackbr-img,
	.hackbr-card:hover .hackbr-img {
		transition: none;
		transform: none;
	}
}

/* ---------- link "Continuar lendo" nas listagens ---------- */
.hackbr-continuar {
	margin: 10px 0 0;
}

.hackbr-continuar a {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-decoration: none;
	color: #c8102e;
	border-bottom: 2px solid transparent;
	padding-bottom: 1px;
}

.hackbr-continuar a:hover {
	border-bottom-color: #c8102e;
}

/* ------------------------------------------------------------
   Paginação  « ‹ 1 2 3 4 5 › »   (1.3.0)
   Usada na lista da home e nas páginas de categoria, tag, autor,
   data e busca. Tem as próprias cores porque, nas listagens, fica
   fora do container .hackbr-ultimas.
   ------------------------------------------------------------ */
.hackbr-pag {
	--hackbr-pag-cor: #12161c;
	--hackbr-pag-apagado: #b3b8c0;
	--hackbr-pag-ativo: #c8102e;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: 28px 0 8px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
}
.hackbr-pag .hackbr-pag-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border-radius: 6px;
	color: var(--hackbr-pag-cor);
	text-decoration: none;
	font-weight: 500;
	transition: background .12s ease, color .12s ease;
}
.hackbr-pag a.hackbr-pag-item:hover,
.hackbr-pag a.hackbr-pag-item:focus-visible {
	background: #f1f2f4;
	color: var(--hackbr-pag-ativo);
}
.hackbr-pag a.hackbr-pag-item:focus-visible {
	outline: 2px solid var(--hackbr-pag-ativo);
	outline-offset: 1px;
}
.hackbr-pag .is-atual {
	color: var(--hackbr-pag-ativo);
	font-weight: 700;
}
.hackbr-pag .is-desligada {
	color: var(--hackbr-pag-apagado);
	cursor: default;
}
.hackbr-pag svg { display: block; }

/* Celular: menos folga, mesma barra numa linha só */
@media (max-width: 480px) {
	.hackbr-pag { gap: 0; }
	.hackbr-pag .hackbr-pag-item { min-width: 34px; height: 36px; padding: 0 4px; font-size: 15px; }
}

/* Esconde a navegação "Anterior / Próximo" do tema nas listagens
   onde o plugin desenha a sua — senão aparecem duas. */
body.hackbr-paginado #nav-below,
body.hackbr-paginado .paging-navigation,
body.hackbr-paginado .posts-navigation,
body.hackbr-paginado nav.navigation.pagination {
	display: none !important;
}