/* Article carousel controls: lightweight arrows and compact position dots. */
.articles-carousel-button,
.articles-carousel-button:hover,
.articles-carousel-button:focus-visible {
  width: 36px !important;
  height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary) !important;
  transform: translateY(-50%) !important;
}

.articles-carousel-button::before,
.articles-carousel-button::after {
  display: none !important;
  content: none !important;
}

.articles-carousel-button:hover,
.articles-carousel-button:focus-visible {
  color: var(--primary-strong) !important;
}

.articles-carousel-glyph {
  width: 19px !important;
  height: 19px !important;
  filter: drop-shadow(0 4px 10px rgba(var(--ink-rgb), 0.28)) !important;
}

.articles-carousel-glyph::before {
  inset: 2px !important;
  border-block-start-width: 2px !important;
  border-inline-start-width: 2px !important;
}

.articles-carousel-dots {
  min-height: 16px !important;
  gap: 6px !important;
  margin-block-start: 14px !important;
}

.articles-carousel-dot {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.7 !important;
  transform: none !important;
}

.articles-carousel-dot::before {
  inset: 5px !important;
  border-width: 1px !important;
  background: transparent !important;
}

.articles-carousel-dot:hover,
.articles-carousel-dot:focus-visible,
.articles-carousel-dot.is-active {
  transform: scale(1.08) !important;
}

.articles-carousel-dot:hover::before,
.articles-carousel-dot:focus-visible::before,
.articles-carousel-dot.is-active::before {
  background: var(--primary) !important;
}

/* Keep the horizontal article track independent from the archive's two-column grid. */
@media (min-width: 761px) and (max-width: 1100px) {
  .articles-carousel {
    --articles-carousel-count: 2;
  }

  .articles-feature-grid {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc(
      (100% - ((var(--articles-carousel-count) - 1) * var(--articles-carousel-gap))) /
        var(--articles-carousel-count)
    ) !important;
  }
}

/* Mobile carousel: one full card per viewport, with the rest scrollable horizontally. */
@media (max-width: 760px) {
  .articles-carousel {
    --articles-carousel-card-width: calc(
      100vw - (var(--gutter) * 2) - (var(--articles-carousel-arrow-space) * 2)
    );
  }

  .articles-carousel-viewport {
    overflow-x: hidden !important;
    scroll-snap-type: x mandatory !important;
  }

  .articles-feature-grid {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    grid-template-columns: none !important;
    grid-auto-columns: auto !important;
    grid-auto-flow: initial !important;
    gap: var(--articles-carousel-gap) !important;
  }

  .articles-feature-grid > .article-card-home {
    width: var(--articles-carousel-card-width) !important;
    min-width: 0 !important;
    max-width: var(--articles-carousel-card-width) !important;
    flex: 0 0 var(--articles-carousel-card-width) !important;
    scroll-snap-align: start;
  }
}