/* Визуальный язык sides-visual из карточки проекта, адаптированный к ширине статьи. */
.article-color-carousel {
  --article-carousel-accent: var(--accent-green, #28713f);
  --article-carousel-border: var(--border, #d7e0e5);
  margin: 28px 0 38px;
  overflow: hidden;
}

.article-color-carousel__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 16px;
}

.article-color-carousel__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.article-color-carousel__nav button {
  width: 42px;
  height: 42px;
  border: 1px solid #d7e0e5;
  border-radius: 50%;
  background: #fff;
  color: #1f3444;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: .2s;
}

.article-color-carousel__nav button:hover {
  border-color: var(--article-carousel-accent);
  background: var(--article-carousel-accent);
  color: #fff;
}

.article-color-carousel__nav button:focus-visible,
.article-color-carousel__dot:focus-visible,
.article-color-carousel__toggle:focus-visible {
  outline: 3px solid rgba(40, 113, 63, .36);
  outline-offset: 3px;
}

.article-color-carousel__track {
  overflow-x: auto;
  padding: 4px 0 10px;
  /* JavaScript explicitly requests smooth movement. */
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.article-color-carousel__track::-webkit-scrollbar { display: none; }

.article-color-carousel__row {
  display: flex;
  gap: 18px;
  padding-right: 16px;
}

.article-color-carousel__card {
  position: relative;
  flex: 0 0 min(84%, 760px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--article-carousel-border);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(12, 25, 36, .12);
  scroll-snap-align: start;
}

.article-color-carousel__card img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 670;
  object-fit: cover;
  transition: transform .7s ease;
}

.article-color-carousel__card:hover img { transform: scale(1.03); }

.article-color-carousel__meta {
  position: absolute;
  bottom: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(16, 31, 27, .58);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.article-color-carousel__auto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.article-color-carousel__dots {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-color-carousel__dot {
  position: relative;
  width: 8px;
  height: 8px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #e5e7eb;
  cursor: pointer;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.article-color-carousel__dot.is-active {
  width: 64px;
  border-radius: 10px;
}

.article-color-carousel__dot::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
  background: var(--article-carousel-accent);
  content: '';
  transition: none;
}

.article-color-carousel.autoplay-on .article-color-carousel__dot.is-active::after {
  width: 100%;
  transition: width 6s linear;
}

.article-color-carousel__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border: 0;
  border-radius: 50%;
  background: #f4f5f6;
  color: #1d1d1f;
  cursor: pointer;
  transition: .22s ease;
}

.article-color-carousel__toggle:hover {
  background: #e5e7eb;
  transform: scale(1.1);
}

.article-color-carousel__toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.article-color-carousel .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  .article-color-carousel__card { flex-basis: 91%; border-radius: 20px; }
  .article-color-carousel__nav button { width: 38px; height: 38px; }
  .article-color-carousel__row { gap: 12px; }
  .article-color-carousel__dots { gap: 9px; }
  .article-color-carousel__dot.is-active { width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-color-carousel__track { scroll-behavior: auto; }
  .article-color-carousel__card img,
  .article-color-carousel__dot,
  .article-color-carousel__dot::after,
  .article-color-carousel__toggle { transition: none; }
}