/* ===================== KNOWLEDGE BASE (ГБО) ===================== */

/* ---- Заголовок раздела / навигация ---- */
.gg-kb-header{
	margin-bottom: 28px;
}
.gg-kb-header__label{
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-secondary, #0088CC);
	margin-bottom: 6px;
}
.gg-kb-header__title{
	margin: 0 0 8px;
}
.gg-kb-header__subtitle{
	color: var(--text-gray-color, #969ba5);
	font-size: 15px;
	margin: 0;
	max-width: 760px;
}

/* ---- Breadcrumbs-навигация по разделу (детальная) ---- */
.gg-kb-nav{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	margin-bottom: 18px;
	color: var(--text-gray-color, #969ba5);
}
.gg-kb-nav a{
	color: var(--href-color-light, #0088CC);
}
.gg-kb-nav svg{
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: .6;
}

/* ---- Карточки разделов знаний (список категорий) ---- */
.gg-kb-cards{
	margin-bottom: 6px;
}
.gg-kb-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .2s;
}
.gg-kb-card:hover{
	box-shadow: 0 8px 28px rgba(0,0,0,.10);
	transform: translateY(-3px);
	color: inherit;
}
.gg-kb-card__img-wrap{
	display: block;
	aspect-ratio: 16/10;
	background: var(--color-bg-grey, #fafafa);
	overflow: hidden;
}
.gg-kb-card__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gg-kb-card__noimg{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-secondary, #0088CC);
	background: var(--color-bg-second, #E5F9FF);
}
.gg-kb-card__body.gg-manu-card__body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}
.gg-kb-card__title{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--text-color, #171717);
}
.gg-kb-card__title svg{
	color: var(--color-secondary, #0088CC);
	flex-shrink: 0;
}
.gg-kb-card__text{
	color: var(--text-gray-color, #969ba5);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}
.gg-kb-card__count{
	margin-top: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary, #012ECD);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ---- Карточки статей (список статей) ---- */
.gg-kb-article-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow .2s, transform .2s;
}
.gg-kb-article-card:hover{
	box-shadow: 0 8px 28px rgba(0,0,0,.10);
	transform: translateY(-3px);
}
.gg-kb-article-card__img-wrap{
	display: block;
	aspect-ratio: 16/10;
	background: var(--color-bg-grey, #fafafa);
	overflow: hidden;
}
.gg-kb-article-card__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gg-kb-article-card__noimg{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-secondary, #0088CC);
	background: var(--color-bg-second, #E5F9FF);
}
.gg-kb-article-card__body.gg-manu-card__body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}
.gg-kb-article-card__meta{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--text-gray-color, #969ba5);
	margin-bottom: 8px;
}
.gg-kb-article-card__meta span{
	display: flex;
	align-items: center;
	gap: 4px;
}
.gg-kb-article-card__meta svg{ width: 14px; height: 14px; }
.gg-kb-article-card__title{
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--text-color, #171717);
}
.gg-kb-article-card__title a{ color: inherit; }
.gg-kb-article-card__title a:hover{ color: var(--color-primary, #012ECD); }
.gg-kb-article-card__text{
	color: var(--text-gray-color, #969ba5);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
	flex: 1;
}
.gg-kb-article-card__btn{
	width: 100%;
	justify-content: center;
	margin-top: auto;
}

/* Горизонтальный скролл карточек на мобильных (общее правило для обоих блоков) */
@media (max-width: 767px){
	.gg-kb-cards.row{
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -4px 14px;
		padding: 0 4px 14px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #2D7FFF var(--color-bg-second, #E5F9FF);
	}
	.gg-kb-cards.row > [class*="col"]{
		flex: 0 0 260px;
		width: 260px;
		max-width: 82%;
		scroll-snap-align: start;
	}
	.gg-kb-cards.row::-webkit-scrollbar{ height: 6px; }
	.gg-kb-cards.row::-webkit-scrollbar-track{
		background: var(--color-bg-second, #E5F9FF);
		border-radius: 10px;
	}
	.gg-kb-cards.row::-webkit-scrollbar-thumb{
		background: #2D7FFF;
		border-radius: 10px;
	}
}

/* ---- Блок привлечения внимания (CTA) в списках ---- */
.gg-kb-attention{
	margin: 32px 0;
	padding: 22px 26px;
	border-radius: 18px;
	background: var(--color-bg-second, #E5F9FF);
	border: 1px solid var(--border-color, #ddd);
}
.gg-kb-attention__icon{
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #2D7FFF;
	border: 6px solid #fff;
	flex-shrink: 0;
}
.gg-kb-attention__title{
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 4px;
}
.gg-kb-attention__text{
	color: #3a4a5a;
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 575px){
	.gg-kb-attention{ padding: 18px; text-align: center; }
	.gg-kb-attention .col-auto{ margin: 0 auto; }
}

/* ---- Пустой результат ---- */
.gg-kb-empty{
	grid-column: 1/-1;
	text-align: center;
	padding: 50px 20px;
	color: var(--text-gray-color, #969ba5);
}

/* =============== ДЕТАЛЬНАЯ СТРАНИЦА СТАТЬИ =============== */

.gg-kb-detail{
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.gg-kb-detail__toc{
	flex: 0 0 280px;
	width: 280px;
}
.gg-kb-detail__toc-inner{
	position: sticky;
	top: 24px;
	background: #fff;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 16px;
	padding: 20px 22px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}
.gg-kb-detail__toc-title{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-color, #171717);
	margin: 0 0 14px;
}
.gg-kb-detail__toc-title svg{ color: var(--color-secondary, #0088CC); }
.gg-kb-detail__toc-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gg-kb-detail__toc-list a{
	display: block;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text-color, #171717);
	border-left: 3px solid transparent;
	transition: .2s;
}
.gg-kb-detail__toc-list a:hover{
	background: var(--color-bg-second, #E5F9FF);
	color: var(--color-primary, #012ECD);
}
.gg-kb-detail__toc-list a.active{
	background: var(--color-bg-second, #E5F9FF);
	border-left-color: var(--color-primary, #012ECD);
	color: var(--color-primary, #012ECD);
	font-weight: 600;
}

.gg-kb-detail__content{
	flex: 1;
	min-width: 0;
}
.gg-kb-detail__block{
	margin-bottom: 36px;
	padding-top: 6px;
	scroll-margin-top: 24px;
}
.gg-kb-detail__block:last-child{ margin-bottom: 0; }
.gg-kb-detail__block-title{
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border-color, #ddd);
}
.gg-kb-detail__block-body{
	line-height: 1.7;
	color: var(--text-color, #171717);
}
.gg-kb-detail__block-body img{
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.gg-kb-detail__block-body table{
	width: 100%;
}

/* Мобильное содержание — сворачиваемая панель под шапкой, sticky сверху */
.gg-kb-detail__toc-mobile{
	display: none;
}
@media (max-width: 991px){
	.gg-kb-detail{
		flex-direction: column;
		gap: 0;
	}
	.gg-kb-detail__toc{
		display: none;
	}
	.gg-kb-detail__toc-mobile{
		display: block;
		position: sticky;
		top: 0;
		z-index: 1020;
		background: #fff;
		border: 1px solid var(--border-color, #ddd);
		border-radius: 14px;
		margin-bottom: 20px;
		box-shadow: 0 4px 16px rgba(0,0,0,.06);
	}
	.gg-kb-detail__toc-mobile-toggle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: none;
		border: none;
		padding: 14px 18px;
		font-size: 15px;
		font-weight: 700;
		color: var(--text-color, #171717);
		cursor: pointer;
	}
	.gg-kb-detail__toc-mobile-toggle .gg-kb-detail__toc-current{
		color: var(--color-primary, #012ECD);
		font-weight: 600;
		font-size: 13px;
		margin-left: 8px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		text-align: right;
	}
	.gg-kb-detail__toc-mobile-toggle svg.chevron{
		transition: transform .25s;
		flex-shrink: 0;
	}
	.gg-kb-detail__toc-mobile.open .gg-kb-detail__toc-mobile-toggle svg.chevron{
		transform: rotate(180deg);
	}
	.gg-kb-detail__toc-mobile-body{
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
		border-top: 1px solid var(--border-color, #ddd);
	}
	.gg-kb-detail__toc-mobile.open .gg-kb-detail__toc-mobile-body{
		max-height: 60vh;
		overflow-y: auto;
	}
	.gg-kb-detail__toc-mobile-list{
		list-style: none;
		margin: 0;
		padding: 8px;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.gg-kb-detail__toc-mobile-list a{
		display: block;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 14px;
		color: var(--text-color, #171717);
	}
	.gg-kb-detail__toc-mobile-list a.active{
		background: var(--color-bg-second, #E5F9FF);
		color: var(--color-primary, #012ECD);
		font-weight: 600;
	}
	.gg-kb-detail__block-title{ font-size: 20px; }
}
@media (max-width: 575px){
	.gg-kb-detail__block-title{ font-size: 18px; }
}