/**
 * Post Grid — o que é de listagem.
 *
 * O cartão, a grade, o botão da seta e a entrada por colunas vêm da folha
 * do Related Posts (brz-related-posts.css), carregada antes desta como
 * dependência declarada. Aqui ficam só os padrões da listagem do blog
 * (medidas do tema Redox), as divisórias entre colunas e a paginação.
 *
 * @package Brz_Elements
 * @since   1.4.0
 */

.brz-post-grid {
	--brzpg-col-gap: 40px;
	--brzpg-row-gap: 46px;
	--brzpg-divider: color-mix(in srgb, currentColor 10%, transparent);
	--brz-related-ratio: 16 / 9;
	--brz-related-radius: 21px;
	--brz-related-card-gap: 24px;
	--brz-related-card-title-size: 24px;
	--brzpg-page-active-text: #111111;
	--brz-related-meta-gap: 12px;
}

.brz-post-grid .brz-related__list {
	gap: var(--brzpg-row-gap) var(--brzpg-col-gap);
	overflow: hidden;
}

.brz-post-grid .brz-related__card-title {
	letter-spacing: -0.07em;
	line-height: 1;
}

/* Divisória: linha vertical à esquerda de cada cartão, no meio do espaço
   entre colunas. A da primeira coluna cai fora da grade e o overflow da
   lista a esconde — sem precisar saber quantas colunas há. */
.brz-post-grid--dividers .brz-related__item {
	position: relative;
}

.brz-post-grid--dividers .brz-related__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--brzpg-col-gap) / -2);
	width: 1px;
	background-color: var(--brzpg-divider);
}

@media (min-width: 1920px) {
	.brz-post-grid {
		--brzpg-col-gap: 60px;
		--brzpg-row-gap: 76px;
		--brz-related-card-title-size: 36px;
	}
}

@media (max-width: 1399px) {
	.brz-post-grid {
		--brz-related-card-title-size: 22px;
	}
}

@media (max-width: 1199px) {
	.brz-post-grid {
		--brz-related-card-gap: 14px;
		--brz-related-card-title-size: 20px;
	}
}

/* Paginação ----------------------------------------------------------- */

/* A paginação segue a cor do título dos cartões, e não a do texto da
   página: num fundo escuro o texto do tema costuma ser cinza, e o número
   ativo (fundo na cor do texto) ficava cinza sobre cinza. */
.brz-post-grid__pagination {
	color: var(--brzpg-page-color, var(--brz-related-card-title-color, inherit));
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 60px;
}

.brz-post-grid__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 999px;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Número atual e hover: o fundo vira a cor do texto (currentColor) e o
   texto vira a cor de contraste. text-fill-color, e não color, porque
   mudar color mudaria também o currentColor do fundo. */
.brz-post-grid__pagination a.page-numbers:hover,
.brz-post-grid__pagination a.page-numbers:focus-visible,
.brz-post-grid__pagination .page-numbers.current {
	border-color: currentColor;
	background-color: currentColor;
	-webkit-text-fill-color: var(--brzpg-page-active-text, #111111);
}

.brz-post-grid__pagination .page-numbers.dots {
	border-color: transparent;
}

.brz-post-grid__empty {
	opacity: 0.7;
}