@import '/css/page/page.css';
@import '/css/blocks/accentuum-block/accentuum-block.css';
@import '/css/blocks/attention-block/attention-block.css';
@import '/css/ui/checkbox/checkbox.css';
@import '/css/list/list.css';

.page {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 600px;
}

.font__h3 {
	padding: 16px 24px;
	border-radius: 8px;
	background-color: var(--50);
	color: var(--text-main-900);
	font-weight: 500;
}

.font__h3 {
	margin-top: 16px;
}

.font__h2 + .font__h3 {
	margin-top: 0;
}

.font__h1 + .font__h3 {
	margin-top: 0;
}

.font__h3.attention-block__title {
	margin-top: 0;
}

ul {
	list-style: disc !important;
}

li {
	list-style: inherit !important;
}

nav ul li {
	list-style: none !important;
}

ul,
ol {
	margin-left: 20px !important;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 4px;
	font-family: 'Inter';
}

.imagebox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 8px;
}

.imagebox img {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 8px;
}

.image-gallery img {
	width: 300px;
}

.owl-carousel.owl-theme .owl-nav {
	height: 0 !important;
}

a.btn {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

.upload-file a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	color: #525866;
}

.upload-file a:hover {
	color: #525866;
}

thead tr th:first-child {
	border-radius: 8px 0 0 0;
}

thead tr th:last-child {
	border-radius: 0 8px 0 0;
}

thead tr {
	background: #8c0d18;
}

thead tr th {
	color: #ffff;
	padding: 8px;
}

td {
	padding: 8px;
	color: #0a0d14;
	text-align: center;
}

tr:nth-child(2n) {
	background: #f7f7f9;
}

tbody tr:last-child td:first-child {
	border-radius: 0 0 0 8px;
}

tbody tr:last-child td:last-child {
	border-radius: 0 0 8px 0;
}

td li {
	text-align: left !important;
}

.owl-carousel.owl-theme .owl-nav {
	z-index: 2 !important;
}

.owl-theme .owl-nav .disabled {
	opacity: 0.5;
	cursor: default;
}

.image-gallery__slider.owl-carousel .owl-item img {
	height: 190px !important;
}

.accentuum-block {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 8px;
}

.page .form-checkbox__input {
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.seporator {
	width: 100%;
	height: 1px;
	min-height: 1px;
	background: #e0e2e7;
}

.imagebox figcaption {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 142.857%;
}

@media (max-width: 768px) {
	.seporator {
		padding-bottom: 1px;
	}
}

@media (max-width: 768px) {
	.page {
		max-width: 100%;
	}

	.imagebox img {
		max-height: 230px;
	}

	table {
		display: block;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	thead tr th {
		width: 85px;
		min-width: 85px;
	}
}

.editor-article-title {
	width: 100%;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	height: 350px;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	display: flex;
	align-items: flex-end;
	padding: 30px;
	& img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -1;
	}
	& h1 {
		color: var(--White);
		font-weight: 500;
	}
	@media (max-width: 768px) {
		padding: 20px;
	}
}

/* стили для нового слайдера в деталке */
.hooli-plit-slider {
	overflow: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.hooli-plit-slider .swiper-container {
	width: 100%;
	height: 100%;
}

.hooli-plit-slider .slider__flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-orient: vertical;
}

.hooli-plit-slider .slider__next,
.hooli-plit-slider .slider__prev {
	display: none;
}

.hooli-plit-slider .slider__col {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 103px;
	margin-right: 16px;
}

.hooli-plit-slider .slider__thumbs {
	height: calc(400px - 96px);
	min-width: 87px;
}

.hooli-plit-slider .slider__thumbs .slider__image {
	-webkit-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.5;
}

.hooli-plit-slider .slider__thumbs .slider__image:hover {
	opacity: 1;
}

.hooli-plit-slider .slider__thumbs .swiper-slide-thumb-active .slider__image {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	opacity: 1;
}

.hooli-plit-slider .slider__images {
	height: 443px;
}

.hooli-plit-slider .slider__images .slider__image img {
	-webkit-transition: 3s;
	-o-transition: 3s;
	transition: 3s;
}

.hooli-plit-slider .slider__image {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hooli-plit-slider .slider__image img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.hooli-plit-slider .slider__thumbs .slider__image {
	padding: 5px;
	/* border: 1px solid transparent; */
	border: 1px solid #bababa;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.hooli-plit-slider .slider__images {
		height: 230px;
		width: 100%;
	}

	.hooli-plit-slider .slider__col {
		width: 100%;
		margin: 0;
	}

	.hooli-plit-slider .slider__flex {
		gap: 16px;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.hooli-plit-slider .slider__thumbs {
		height: 80px;
		width: 100%;
	}

	.hooli-plit-slider .slider__images .slider__image img {
		-o-object-fit: cover;
		object-fit: cover;
	}
}
/* конец стили для нового слайдера в деталке */

.test-page-navigation {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.buttons-cont {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
}

.detail-page-aside {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	position: sticky;
    top: 0;
    height: fit-content;
}

@media(min-width: 769px){
    .detail-page-aside{
        height: 60vh;
        overflow: hidden;
        overflow-y: auto;
        padding: 0 4px;
    }
}

.detail-page-aside__btns {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 8px;
}

.detail-page-aside__btn {
	color: var(--text-main-900);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 8px;
	background: #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.detail-page-aside__btn .copy-popup {
	top: calc(100%);
	bottom: initial;
	left: 0;
}

.detail-page-aside__btn:hover {
	background: var(--50);
}

.detail-page-aside__btn svg path {
	fill: var(--300-grey);
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.detail-page-aside__btn:hover svg path {
	fill: var(--Akzendent);
}

/* Стили для печати */
.print-container{
	max-width: 600px;
	width: 100%;
}

.article-container {
	display: grid;
    grid-template-columns: 1fr minmax(280px, 20vw);
	height: initial;
}

@media(max-width: 1280px) {
    .article-container {
        display: flex;
    }

    .print-container {
        max-width: 500px;
    }
}

@media(max-width: 1024px) {
    .print-container {
        max-width: 400px;
    }
}

@media print {
	body * {
		visibility: hidden;
	}

	article.page,
	article.page * {
		visibility: visible;
	}

	article.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.page-break {
		page-break-before: always;
	}

	article.page * {
		-webkit-column-break-inside: avoid;
		-moz-column-break-inside: avoid;
		break-inside: avoid; /* Запрещает разрыв внутри элемента */
		page-break-inside: avoid; /* Для старых браузеров */
	}

	h2,
	h3,
	h4 {
		-webkit-column-break-after: avoid;
		-moz-column-break-after: avoid;
		break-after: avoid; /* Запрещает разрыв страницы после заголовка */
		page-break-after: avoid;
	}

	#bx-panel,
	#bx-panel-top {
		height: 0px;
		display: none;
	}

	/* .hooli-plit-slider {
		width: 600px;
		height: 337px;
	} */

	.slider__col,
	.hooli-plit-slider .slider__thumbs .slider__image,
	.swiper-slide:not(:first-child),
	.hooli-plit-slider,
	.news-video,
	.imagebox:has(.image-gallery) {
		display: none;
		height: 0;
		width: 0;
	}

	img,
	.imagebox img {
		-o-object-fit: contain;
		object-fit: contain;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		height: 337px;
	}

	.swiper-slide:first-child {
		/* width: 600px; */
		height: 337px;
	}

	table {
		width: 100%;
		min-width: 600px;
	}

	.accentuum-block {
		border-radius: 8px;
		border-left: 4px solid var(--Akzendent);
	}
}