/* =========== © 2024 Centroarts.com - https://honista.com =========== */

.changelog-section { overflow: hidden; }
.changelog-item { position: relative; }
.changelog-item .wrp { display: flex; position: relative; z-index: 1; }
.changelog-item:not(:last-child) .changelog-item-cont { margin-bottom: var(--sgap-sm); }
.changelog-item:first-child .changelog-item-cont { margin-bottom: calc(var(--sgap-sm) * 2); }

.changelog-item-cont { flex: 1 1 auto; min-width: 0; max-width: 900px; }
.changelog-item-head .title { display: flex; white-space: nowrap; margin-bottom: 0; min-width: 0; }
.changelog-item-head { font-weight: bold; display: flex; align-items: center; margin-bottom: 20px; }
.changelog-item-head .highlighting { margin-left: 12px; }
.changelog-item-num { margin-left: .3em; }

:dir(rtl) .changelog-item-head .highlighting { margin-right: 12px; margin-left: 0; }
:dir(rtl) .changelog-item-num { margin-left: 0; margin-right: .3em; }

.changelog-line {
	display: flex; flex-direction: column; align-items: center;
	min-width: 16px; max-width: 16px; order: -1; margin-right: var(--wrp-pad);
	color: var(--color-primary); user-select: none; pointer-events: none;
}
.changelog-line::after { content: ""; background-color: rgba(var(--color-primary-rgb), 0.2); flex: 1 1 auto; width: 2px; border-radius: 2px; }

:dir(rtl) .changelog-line { margin-left: var(--wrp-pad); margin-right: 0; }

.changelog-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 8px 0; }
.changelog-icon .ic { width: inherit; height: inherit; }
.changelog-item:first-child .changelog-icon .ic { min-width: 24px; min-height: 24px; }
.changelog-item:first-child .changelog-line::after { background-image: linear-gradient(to top, rgba(var(--color-primary-rgb),0.2), rgba(var(--color-primary-rgb),1)); }

.changelog-first-bg {
	position: absolute; left: 0; right: 0; height: 100%; max-height: 272px; bottom: var(--sgap-sm);
	border-bottom: 1px dashed rgba(var(--color-primary-rgb),0.2); overflow: hidden;
}
.changelog-first-bg::after, .changelog-first-bg::before { top: 0; }

@media (max-width: 991px) {
	.changelog-item-head + .changelog-date { margin-top: -16px; }
	.changelog-date { display: block; font-size: var(--text-sm-size); margin-bottom: 20px; }
}
@media (max-width: 767px) {
	.changelog-item:not(:last-child) .changelog-item-cont { margin-bottom: var(--sgap-mob); }
	.changelog-item:first-child .changelog-item-cont { margin-bottom: calc(var(--sgap-mob) * 2); }

	.changelog-first-bg { bottom: var(--sgap-mob); }
}
@media (max-width: 575px) {
	.changelog-item-head .highlighting {
		position: absolute; right: 0; transform: translateX(20px) rotate(-15deg); width: 112px; height: 112px; border-radius: 50%; padding: 24px;
		align-items: center; justify-content: center; text-align: center;
	}
	.changelog-item-head { padding-right: 80px; }

	:dir(rtl) .changelog-item-head .highlighting { left: 0; right: auto; transform: translateX(-20px) rotate(15deg); }
	:dir(rtl) .changelog-item-head { padding-right: 0; padding-left: 80px; }
}
@media (min-width: 992px) {
	.changelog-date {
		position: absolute; top: 0; left: var(--wrp-pad);
		height: var(--title-lh); padding: 8px 0; line-height: calc(var(--title-lh) - 16px);
		font-weight: bold;
	}

	.changelog-line { margin-left: 236px; margin-right: 64px; }
	.changelog-icon { margin: 12px 0; }
	.changelog-item:first-child .changelog-icon .ic { min-width: 32px; min-height: 32px; }

	:dir(rtl) .changelog-date { right: var(--wrp-pad); left: auto; }
	:dir(rtl) .changelog-line { margin-right: 236px; margin-left: 64px; }
}