/**
 * Comece Imperfeito — home.css
 *
 * Índice do blog (página inicial e /page/N/). Carregado apenas nessas
 * páginas e consome somente tokens de tokens.css.
 *
 * Índice
 *  1. Estrutura
 *  2. Abertura
 *  3. Seções
 *  4. Mais recentes (destaque)
 *  5. Explore por tema
 *  6. Páginas 2+
 */

/* 1. Estrutura ----------------------------------------------------------- */

/* Substitui as larguras em degraus e o padding de 10px do theme.css do Hello. */
body.blog .site-main.ci-home {
	width: 100%;
	max-width: none;
	padding-inline: 0;
	padding-block: var(--ci-space-8) var(--ci-space-section);
}

/* 2. Abertura ------------------------------------------------------------ */

.ci-home__title {
	max-width: 20ch;
	margin-block: 0 var(--ci-space-5);
	font-size: var(--ci-text-4xl);
	line-height: var(--ci-leading-tight);
	letter-spacing: var(--ci-tracking-tight);
}

.ci-home__lead {
	max-width: 34rem;
	margin: 0;
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

/* 3. Seções -------------------------------------------------------------- */

.ci-home__section {
	margin-block-start: var(--ci-space-section);
}

.ci-home__heading {
	margin-block: 0 var(--ci-space-6);
	font-size: var(--ci-text-xl);
}

/* 4. Mais recentes (destaque) -------------------------------------------- */

.ci-home__featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ci-space-7) var(--ci-space-6);
}

.ci-home__featured-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--ci-space-6);
}

@media (min-width: 768px) {
	.ci-home__featured-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ci-home__featured {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.ci-home__featured-side {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 5. Explore por tema ---------------------------------------------------- */

.ci-topics {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-topics__item {
	display: grid;
	grid-template-areas:
		"name count"
		"subs subs";
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--ci-space-2) var(--ci-space-5);
	margin: 0;
	padding-block: var(--ci-space-5);
	border-block-end: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-topics__name {
	grid-area: name;
	color: var(--ci-color-text);
	font-size: var(--ci-text-xl);
	font-weight: var(--ci-weight-semibold);
	line-height: var(--ci-leading-snug);
	letter-spacing: var(--ci-tracking-snug);
}

.ci-topics__name:hover {
	text-decoration-line: underline;
}

.ci-topics__subs {
	grid-area: subs;
	margin: 0;
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

.ci-topics__subs a {
	color: inherit;
}

.ci-topics__subs a:hover {
	color: var(--ci-color-text);
	text-decoration-line: underline;
}

.ci-topics__sep {
	color: var(--ci-color-text-tertiary);
}

.ci-topics__count {
	grid-area: count;
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (min-width: 960px) {
	.ci-topics__item {
		grid-template-areas: "name subs count";
		grid-template-columns: 14rem minmax(0, 1fr) auto;
		gap: var(--ci-space-6);
	}
}

/* 6. Páginas 2+ ---------------------------------------------------------- */

.ci-home__paged-header {
	margin-block-end: var(--ci-space-7);
}

.ci-home__paged-title {
	margin-block: 0 var(--ci-space-2);
}

.ci-home__paged-meta {
	margin: 0;
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-sm);
}