.article-carousel-wrap {
    position: relative;
    align-self: stretch;
    width: 100%;
}

.article-carousel-wrap:hover .article-carousel__btn {
    display: block;
}

.article-carousel.swiper {
    display: block;
    width: 100%;
    overflow: hidden;
}

.article-carousel .swiper-wrapper {
    align-items: stretch;
}

.article-carousel .swiper-slide {
    height: auto;
    box-sizing: border-box;
}

.article-carousel .swiper-slide.article-card,
.article-carousel .swiper-slide.carousel-slide {
    height: 230px;
}

.article-carousel .article-card__img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.article-carousel .swiper-slide.article-card--pink {
    position: relative;
}

.article-carousel .swiper-slide .article-card__shell {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
}

.article-carousel__btn {
    position: absolute;
    z-index: 3;
    top: 50%;
    padding: 0;
    line-height: 0;
    border: 2px solid transparent;
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    display: none;
}

.article-carousel__btn[hidden] {
    display: none !important;
}

.article-carousel__btn:hover {
    opacity: 1;
}

.article-carousel__btn:focus-visible {
    border-color: rgba(138, 107, 255, 0.8);
    border-radius: 999px;
}

.article-carousel__btn--prev {
    left: 24px;
    transform: translateY(-50%) rotate(180deg);
}

.article-carousel__btn--prev:hover {
    transform: translateY(-50%) rotate(180deg) scale(1.05);
}

.article-carousel__btn--next {
    right: 24px;
    transform: translateY(-50%);
}

.article-carousel__btn--next:hover {
    transform: translateY(-50%) scale(1.05);
}

.article-carousel__btn img {
    display: block;
    pointer-events: none;
}

/* Swiper 默认导航样式不使用，保留自定义箭头 */
.article-carousel .swiper-button-prev,
.article-carousel .swiper-button-next {
    display: none;
}

/* ==========================================================================
   Article carousel — prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .article-carousel.swiper {
        --swiper-wrapper-transition-timing-function: linear;
    }
}