/**
 * Наши оверрайды навигации Slick (стрелки/точки) — не трогаем vendor slick.css,
 * шрифт стрелок из оригинального slick-theme.css не используем (свои SVG-иконки).
 * Стрелки и точки — один блок .hero__nav, наложенный поверх фото у нижнего края слайда
 * (24px от низа), не отдельная секция под слайдером. См. VERSTKA-STANDARDS.md →
 * "Слайдеры (Slick)".
 */

.hero__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.hero__nav .slick-dots {
	order: 1;
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.hero__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

/* Серые точки — вариант для слайда на белом фоне (без фото), сейчас таких слайдов нет —
   переключается модификатором .hero__slide--light, когда он понадобится */
.hero__slide--light .hero__nav .slick-dots li button {
	background: var(--gray);
}

.hero__nav .slick-dots li:hover button,
.hero__nav .slick-dots li.slick-active button {
	background: var(--green);
}

/* По макету — чистая иконка 24px, без паддингов и кнопочного бокса (не общий .btn-компонент) */
.hero__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--light-blue);
	transition: color 0.3s ease;
}

.hero__arrow svg {
	width: 24px;
	height: 24px;
}

.hero__arrow--prev {
	order: 0;
	transform: scaleX(-1); /* тот же chevron-SVG, что и next, зеркалим вместо второго файла */
}

.hero__arrow--next {
	order: 2;
}

.hero__arrow:hover,
.hero__arrow:focus {
	color: var(--green);
}

/* Слайдер "Другие статьи" под синглом блога — та же схема стрелок, что у
   .hero__arrow, но блок навигации не наложен на фото, а отдельной строкой
   под слайдером (см. .blog-related__nav в style.css). */
.blog-related__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--light-blue);
	transition: color 0.3s ease;
}

.blog-related__arrow svg {
	width: 24px;
	height: 24px;
}

.blog-related__arrow--prev {
	order: 0;
	transform: scaleX(-1);
}

.blog-related__arrow--next {
	order: 2;
}

.blog-related__arrow:hover,
.blog-related__arrow:focus {
	color: var(--green);
}

.blog-related__arrow.slick-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Точки — та же схема, что .hero__nav .slick-dots, но серые в состоянии покоя
   (не белые — блок стоит на белом фоне, не поверх фото), активная/hover — green,
   по макету (скрин пользователя). */
.blog-related__nav .slick-dots {
	order: 1;
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-related__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.blog-related__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

.blog-related__nav .slick-dots li:hover button,
.blog-related__nav .slick-dots li.slick-active button {
	background: var(--green);
}

/* "Поговорим начистоту" на главной (js/home-blog-slider.js) — Slick активен только
   ниже 1200px, стрелки/точки — та же схема, что у .blog-related__arrow/__nav выше,
   отдельные классы (не переиспользуем те же), т.к. это разные секции с разными
   брейкпоинтами — не хотим случайно зацепить одну секцию, меняя другую. */
.home-blog__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--light-blue);
	transition: color 0.3s ease;
}

.home-blog__arrow svg {
	width: 24px;
	height: 24px;
}

.home-blog__arrow--prev {
	order: 0;
	transform: scaleX(-1);
}

.home-blog__arrow--next {
	order: 2;
}

.home-blog__arrow:hover,
.home-blog__arrow:focus {
	color: var(--green);
}

.home-blog__arrow.slick-disabled {
	opacity: 0.3;
	pointer-events: none;
}

.home-blog__nav .slick-dots {
	order: 1;
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-blog__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.home-blog__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

.home-blog__nav .slick-dots li:hover button,
.home-blog__nav .slick-dots li.slick-active button {
	background: var(--green);
}

/* "Наши постоянные партнёры" на главной (js/partners-slider.js) — та же схема
   стрелок/точек, что у .blog-related__arrow/__nav (белый фон секции, серые
   точки в покое, зелёная активная). */
.partners__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--light-blue);
	transition: color 0.3s ease;
}

.partners__arrow svg {
	width: 24px;
	height: 24px;
}

.partners__arrow--prev {
	order: 0;
	transform: scaleX(-1);
}

.partners__arrow--next {
	order: 2;
}

.partners__arrow:hover,
.partners__arrow:focus {
	color: var(--green);
}

.partners__arrow.slick-disabled {
	opacity: 0.3;
	pointer-events: none;
}

.partners__nav .slick-dots {
	order: 1;
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.partners__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.partners__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

.partners__nav .slick-dots li:hover button,
.partners__nav .slick-dots li.slick-active button {
	background: var(--green);
}

/* "Благодарности и сертификаты" на главной (js/license-slider.js) — та же
   схема стрелок/точек, что у .blog-related__arrow/__nav/.partners__. */
.license__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--light-blue);
	transition: color 0.3s ease;
}

.license__arrow svg {
	width: 24px;
	height: 24px;
}

.license__arrow--prev {
	order: 0;
	transform: scaleX(-1);
}

.license__arrow--next {
	order: 2;
}

.license__arrow:hover,
.license__arrow:focus {
	color: var(--green);
}

.license__arrow.slick-disabled {
	opacity: 0.3;
	pointer-events: none;
}

.license__nav .slick-dots {
	order: 1;
	display: flex !important;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.license__nav .slick-dots li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	margin: 0;
}

.license__nav .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gray);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	transition: background-color 0.3s ease;
}

.license__nav .slick-dots li:hover button,
.license__nav .slick-dots li.slick-active button {
	background: var(--green);
}