/* 模块容器 */
.company-showcase {
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 30px 20px;
    background-color: #ffffff;
    margin-top: 30px;
}

/* 标题样式 */
.showcase-title {
    margin-bottom: 3rem;
    text-align: center;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: bold;
    color: #000000;
    --tw-text-opacity: 1;
}

/* 轮播整体容器 - 新增相对定位用于承载分页器 */
.carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 0 60px; /* 为箭头预留空间 */
    box-sizing: border-box;
}

/* 轮播内容容器 */
.carousel-container {
    width: 100%;
    overflow: hidden;
    /* 新增触摸事件优化，解决滑动卡顿 */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* 轮播轨道 */
.carousel-track {
    display: flex;
    transition: transform 0.4s ease-out;
    will-change: transform;
}

/* 轮播项样式 */
.carousel-item {
    min-width: 25%; /* 默认显示4个项目 */
    padding: 0 10px;
    box-sizing: border-box;
}

.item-inner {
    background: #f2f2f2;
    overflow: hidden;
}

.item-inner:hover {
    background: #f2f2f2;
}

.item-image {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
}

.item-title {
    text-align: center;
    padding: 18px 10px;
    font-size: 17px;
    color: #333333;
    border-top: 1px solid #eeeeee;
}

/* 箭头样式 */
.carousel-arrow {
    position: absolute;
    top: 50%;
    width: 56px;
    height: 90px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.arrow-left {
    left: 0;
}

.arrow-right {
    right: 0;
}

.carousel-arrow:hover {
    background-color: #f8f8f8;
}

.arrow-icon {
    font-size: 44px;
    color: #333333;
    font-weight: bold;
}

/* 新增：分页指示器容器样式 */
.carousel-pagination {
    display: none; /* 默认隐藏，移动端显示 */
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 8px; /* 圆点之间的间距 */
}

/* 新增：分页指示器圆点样式 */
.pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #dddddd; /* 默认灰色 */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 新增：当前激活的分页圆点样式（蓝色） */
.pagination-dot.active {
    background-color: #1e88e5; /* 蓝色，可根据需求调整色值 */
}

/* 响应式调整 */
@media (max-width: 992px) {
    .carousel-item {
        min-width: 33.333%; /* 中等屏幕显示3个项目 */
    }
}

@media (max-width: 768px) {
    .carousel-item {
        min-width: 50%; /* 平板显示2个项目 */
    }
    
    .carousel-arrow {
        width: 46px;
        height: 70px;
    }
    
    .arrow-icon {
        font-size: 36px;
    }
    
    .carousel-wrapper {
        padding: 0 50px;
    }
}

@media (max-width: 576px) {
    .carousel-item {
        min-width: 100%; /* 手机显示1个项目 */
    }
    
    /* 1. 手机端：隐藏箭头按钮 */
    .carousel-arrow {
        display: none;
    }
    
    .carousel-wrapper {
        padding: 0; /* 移除箭头预留空间 */
    }
    
    .showcase-title {
        font-size: 24px;
    }
    
    /* 2. 手机端：显示分页指示器 */
    .carousel-pagination {
        display: flex;
    }
}