/* Carousel 每页显示单张图片*/

.carousel {
    position: relative;
}

.fixed-carousel {
    width: 960px;
    height: 600px;          /* 👈  核心 */
    margin: 40px auto;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    height: 100%;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artwork-img {
    width: 100%;
    height: 100%;  
    object-fit: cover;      /* 关键 */
}

.artwork-frame a {
    display: block;   
    width: 100%;
    height: 100%;  /* 关键 否则裁剪图片不生效*/
}

/* buttons */

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.carousel-btn {
    z-index: 10;
    pointer-events: auto;
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-slide img {
    pointer-events: none;
}


                                       /* Fluid Carousel 每页显示多张图片 高度统一*/

/* 外层 Carousel */
.fluid-carousel {
    height: 200px;              /* 固定高度 */
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 轨道 */
.fluid-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

/* 每个 slide */
.art-slide {
    position: relative;
    flex-shrink: 0;
    height: 100%;
    width: auto;                /* slide宽度由图片撑开 */
    margin-right:12px;
}

/* 图片 */
.art-slide img {
    height: 100%;               /* 高度统一 */
    width: auto;                /* 宽度自适应 */
    display: block;
    object-fit: contain;        /* 保持纵横比，显示完整 */
}

/* hover信息层 */
.art-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}

.art-slide:hover .art-overlay {
    opacity: 1;
}

.art-title {
    font-size: 16px;
    font-weight: 600;
}
.art-artist {
    font-size: 14px;
    opacity: 0.85;
}

/* 圆点容器 */
.art-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

/* 单个圆点 */
.art-carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
}

/* 当前激活圆点 */
.art-carousel-dots .dot.active {
    background: rgba(255,255,255,1);
}