/* Templates: home (listagem) e artigo. Medidas tiradas dos frames 64:2, 64:240, 64:457, 64:622. */

/* Top category (5:46) */
.top-category {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
	max-width: var(--page-max);
	margin-inline: auto;
	padding: var(--spacing-10) var(--page-margin);
}

.top-category__description a {
	color: var(--theme-slate-text-primary);
}

@media (min-width: 1024px) {
	.top-category {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--spacing-6);
		padding: var(--spacing-12);
	}

	.top-category__title {
		flex: 0 1 300px;
	}

	.top-category__description {
		flex: 0 1 720px;
	}
}

/* Listagem (64:61): padding 48 vertical, gap 32 entre blocos */
.post-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding-block: var(--spacing-12);
}

.tag-list__items {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--spacing-4);
	row-gap: var(--spacing-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Estado vazio (busca sem resultados, arquivo vazio, 404) — derivado do DS */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-6);
	max-width: 720px;
}

.top-category__description p + p {
	margin-top: var(--spacing-2);
}

/* Artigo (64:493): padding 48 vertical; coluna 976 + sidebar 320, gap 48 */
.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-12);
	padding-block: var(--spacing-12);
}

@media (min-width: 1024px) {
	.article-layout {
		grid-template-columns: minmax(0, var(--article-column)) minmax(240px, var(--sidebar-column));
		justify-content: space-between;
	}

	.article-layout--single-column {
		grid-template-columns: minmax(0, var(--article-column));
	}
}

.article {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	min-width: 0;
}

.article__header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.breadcrumb a {
	color: var(--theme-slate-text-muted);
}

.breadcrumb a:hover {
	color: var(--theme-slate-text-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.breadcrumb p {
	margin: 0;
}

/*
 * H1 do artigo — decisão de design aprovada (fora da escala do Figma, que usa 14/20):
 * Intel One Mono Bold 20/28 no mobile e 24/32 a partir de 1024 px.
 */
.article__title {
	font-family: var(--font-monotype);
	font-size: 20px;
	line-height: 28px;
	letter-spacing: var(--mono-tracking);
	font-weight: 700;
	color: var(--theme-slate-text-primary);
}

@media (min-width: 1024px) {
	.article__title {
		font-size: 24px;
		line-height: 32px;
	}
}

.article__featured img {
	display: block;
	width: 100%;
	height: auto;
}

.article__footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.related {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.related__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Sidebar (64:543): gap 24 entre todos os itens */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	min-width: 0;
}

.sidebar__section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.sidebar__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar__post {
	color: var(--theme-slate-text-primary);
}

.sidebar__post:hover,
.sidebar__section a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}