/**
 * MiAlbum - 小米风格相册组件样式
 * 使用mi-album-前缀进行命名空间隔离
 */

/* 基础重置和容器样式 */
.mi-album-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mi-album-container {
    font-family: "MI Sans", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: transparent;
    color: #333;
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 头部标题区域（20%） */
.mi-album-header {
    flex: 0 0 14%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mi-album-title {
    font-size: clamp(1.875rem, 8.8vw, 2.0625rem); /* 33px响应式 */
    line-height: 1.8;
    font-weight: 500;
}

.mi-album-subtitle {
    font-size: clamp(1.125rem, 5.33vw, 1.25rem); /* 20px响应式 */
    line-height: 1.5;
    color: rgba(51,51,51,0.8);
}

/* 中部（60%）包含图片与分页 */
.mi-album-middle {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Swiper相关样式：填满中部的剩余空间 */
.mi-album-swiper {
    width: 100%;
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.mi-album-swiper .swiper-wrapper {
    align-items: center;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
}

.mi-album-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: none;
    border-radius: 0; /* 直角风格，去掉圆角 */
    position: relative;
}

.mi-album-swiper .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.mi-album-swiper .swiper-slide:not(.swiper-slide-active)::after {
    opacity: 1;
}

.mi-album-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 左右两侧幻灯片特殊样式（保留可见） */
.mi-album-swiper .swiper-slide-prev,
.mi-album-swiper .swiper-slide-next {
    visibility: visible !important;
}

/* 导航容器：改为静态流式，位于图片下方 */
.mi-album-navigation {
    position: static;
    width: 100%;
    background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.7), rgba(255,255,255,0));
    padding: clamp(0.75rem, 3.2vw, 0.75rem) 0 clamp(0.5rem, 2.13vw, 0.5rem); /* 12px 8px响应式 */
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 分页器（横线样式） */
.mi-album-pagination {
    display: flex;
    max-width: 50rem; /* 800px -> 50rem */
    margin: 0 auto;
    padding: 0 1.25rem; /* 20px 固定间距 */
    gap: 1rem; /* 16px 固定间距 */
}

.mi-album-pagination-item {
    text-align: center;
    padding: 0.9375rem 0.3125rem; /* 15px 5px 固定间距 */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-line {
    width: calc(100vw / 6); /* 固定宽度约为屏幕宽度的1/7 */
    max-width: 7.14rem; /* 约114px，限制最大宽度 */
    min-width: 3rem; /* 48px，限制最小宽度 */
    height: 0.25rem; /* 2px 直角风格 */
    background-color: rgba(51,51,51,0.3);
    transition: all 0.3s ease;
}

.mi-album-pagination-item.active .pagination-line {
    background-color: rgb(247, 196, 96);
    height: 0.25rem; /* 4px 直角风格，无圆角无阴影 */
}

/* 底部描述（20%） */
.mi-album-footer {
    flex: 0 0 17%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 描述文本 */
.mi-album-description {
    max-width: 50rem; /* 800px -> 50rem */
    padding: clamp(0.75rem, 3.2vw, 0.75rem) clamp(1.25rem, 5.33vw, 1.25rem) clamp(1.25rem, 5.33vw, 1.25rem); /* 12px 20px 20px响应式 */
    text-align: left;
}

.mi-album-description-text {
    color: #222;
    font-size: clamp(1rem, 4.27vw, 1rem); /* 16px响应式 */
    line-height: 1.8;
    transition: opacity 0.3s ease;
    white-space: pre-line; /* 支持字符串中的\n 换行 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 商业配套相册特殊布局调整 */
.commercial-album .pagination-line {
    width: calc(100vw / 8);
}

/* 商业配套相册特殊布局调整 */
.commercial-album .mi-album-pagination {
    gap: 0.8rem;
}

/* 底部固定导航预留空间（导航在全局层） */
.mi-album-container {
    padding-bottom: var(--bottom-nav-height, 3.5rem);
}