/* ===========================================================================
   c-changelog - versoes do cliente
   =========================================================================== */

.c-changelog { border-top: 1px solid var(--linha); }

.c-changelog__cabeca { margin-bottom: var(--e-5); }

.c-changelog__vazio { color: var(--ink-3); }

.c-changelog__lista {
	display: flex;
	flex-direction: column;
}

/* Linha do tempo: cada entrada tem uma coluna de meta a esquerda e um fio
   vertical ligando as versoes. */
.c-changelog__entrada {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: var(--e-4);
	padding: var(--e-3) 0;
	border-top: 1px solid var(--linha);
}

.c-changelog__entrada:first-child { border-top: 0; }

.c-changelog__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
}

.c-changelog__versao {
	color: var(--ouro);
	font-family: var(--fonte-mono);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.c-changelog__data {
	color: var(--ink-3);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.c-changelog__selo {
	padding: 0.1rem 0.5rem;
	border: 1px solid rgba(217, 180, 90, 0.4);
	border-radius: 999px;
	background: rgba(217, 180, 90, 0.1);
	color: var(--ouro-claro);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c-changelog__titulo {
	font-size: 1.125rem;
	font-weight: 600;
}

.c-changelog__itens {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: var(--e-2);
}

.c-changelog__itens li {
	position: relative;
	padding-left: 1.125rem;
	color: var(--ink-2);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.c-changelog__itens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 5px;
	height: 1px;
	background: var(--linha-forte);
}

/* ----------------------------------------------------------- responsivo ---- */

@media (max-width: 768px) {
	.c-changelog__entrada {
		grid-template-columns: 1fr;
		gap: var(--e-2);
	}

	.c-changelog__meta {
		flex-direction: row;
		align-items: center;
		gap: 0.625rem;
	}
}