/* 焦点图轮播样式 - Focus Image Slider Styles */
/* 作者：SiteManager CMS */
/* 版本：2.0 */
/* 更新时间：2024年 */

/* 基础图片样式 */
img { 
    border: 0px; 
    max-width: 100%; 
    height: auto; 
}

/* 焦点图容器 */
.focus-slider-container { 
    border-right: #ccc 1px solid; 
    border-top: #ccc 1px solid; 
    margin-left: 10px; 
    border-left: #ccc 1px solid; 
    width: 90%; /* 大幅增加宽度减少右侧空白 */
    border-bottom: #ccc 1px solid; 
    position: relative; 
    max-width: 900px; /* 增加最大宽度 */
    overflow: hidden; /* 防止内容溢出 */
    box-sizing: border-box; /* 确保边框包含在宽度内 */
    /* 主图区域保持16:9比例 */
    padding-bottom: 100px; /* 为下方缩略图预留空间 */
}

/* 主图区域 */
.focus-main-area {
    /* 16:9 比例容器 */
    aspect-ratio: 16 / 9;
    min-height: 300px; /* 最小高度 */
    position: relative;
    overflow: hidden;
    width: 99%; /* 使用99%宽度适应容器 */
    margin: 0 auto; /* 居中显示 */
    box-sizing: border-box; /* 包含边框在内 */
}

/* 主图样式 */
#focus-main-image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; /* 占满容器宽度 */
    height: 100%; /* 占满容器高度 */
    object-fit: cover; /* 保持比例裁剪，适应16:9 */
    object-position: center; /* 居中显示 */
    background: #f0f0f0; /* 加载时的背景色 */
    opacity: 0; /* 初始透明 */
    transition: opacity 0.3s ease; /* 平滑过渡 */
    z-index: 1; /* 确保在背景层之上 */
}

/* 缩略图容器 */
.thumbnails-container {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 99%; /* 使用99%宽度适应容器 */
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 适当增加间距 */
    z-index: 20;
    box-sizing: border-box; /* 包含边框在内 */
    padding: 0 8px; /* 增加左右内边距 */
    margin: 0 auto; /* 居中显示 */
}

/* 缩略图基础样式 */
.thumbnail-item { 
    width: 120px; /* 增加宽度以适应更大的容器 */
    height: 85px; /* 增加高度 */
    cursor: pointer; 
    position: relative;
    border: 3px solid #ddd; /* 恢复边框 */
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
    flex-shrink: 0; /* 防止压缩 */
}

/* 当前激活的缩略图 */
.thumbnail-item.active { 
    border-color: #ff6b35;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    transform: scale(1.05);
}

/* 缩略图图片样式 */
.thumbnail-item IMG { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* 保持比例裁剪 */
    object-position: center; /* 居中显示 */
    background: #f0f0f0; /* 加载时的背景色 */
    opacity: 0; /* 初始透明 */
    transition: opacity 0.3s ease; /* 平滑过渡 */
    border: none; /* 移除边框 */
}

/* 激活缩略图的图片样式 */
.thumbnail-item.active IMG { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* 保持比例裁剪 */
    object-position: center; /* 居中显示 */
    border: none; /* 移除边框 */
}

/* 缩略图位置由flexbox自动处理，无需单独定位 */

/* 标题背景层 - 黑色半透明悬浮层 */
#focus-title-background { 
    z-index: 10; 
    background: rgba(0, 0, 0, 0.6); /* 黑色半透明背景 */
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 50px; /* 增加高度以容纳文字 */
    /* 渐变效果，从透明到半透明 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
}

/* 标题文字样式 */
#focus-title-text { 
    font-size: 14px; 
    font-weight: 500;
    z-index: 11; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    color: #fff; 
    line-height: 50px; 
    text-align: center; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 文字阴影增强可读性 */
    padding: 0 15px; /* 左右内边距 */
    box-sizing: border-box;
}

/* 标题链接样式 */
#focus-title-text A:link { color: #fff; }
#focus-title-text A:hover { color: #fff; }
#focus-title-text A:active { color: #fff; }
#focus-title-text A:visited { color: #fff; }

/* 占位符样式 */
.thumbnail-item[style*="display:none"] {
    display: none !important;
}

/* 默认图片样式 */
.focus-slider-container img[src*="default-news.jpg"],
.focus-slider-container img[src*="placeholder.jpg"] {
    background: #f0f0f0;
    border: 2px dashed #ccc;
}

/* 缩略图悬停效果 */
.thumbnail-item:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* 主图链接悬停效果 */
#focus-main-link:hover #focus-main-image {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* 标题文字悬停效果 */
#focus-title-text a:hover {
    color: #ffeb3b !important;
    text-decoration: underline;
}

/* 无内容时的样式 */
.focus-slider-container .no-content {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

/* 响应式设计 - 平板设备 */
@media screen and (max-width: 768px) {
    .focus-slider-container {
        width: 95%; /* 进一步增加宽度 */
        margin-left: 2.5%;
        padding-bottom: 85px; /* 调整下方空间 */
        max-width: 800px; /* 大幅增加最大宽度 */
    }
    
    .focus-main-area {
        /* 保持16:9比例 */
        aspect-ratio: 16 / 9;
        min-height: 280px;
        width: 99%; /* 使用99%宽度适应容器 */
        margin: 0 auto; /* 居中显示 */
    }
    
    #focus-main-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .thumbnails-container {
        height: 80px;
        gap: 8px;
        padding: 0 6px;
        width: 99%; /* 使用99%宽度适应容器 */
        margin: 0 auto; /* 居中显示 */
    }
    
    .thumbnail-item {
        width: 110px; /* 增加宽度适应更大容器 */
        height: 80px; /* 增加高度 */
    }
    
    #focus-title-background {
        height: 40px;
    }
    
    #focus-title-text {
        line-height: 40px;
        font-size: 12px;
    }
}

/* 响应式设计 - 手机设备 */
@media screen and (max-width: 480px) {
    .focus-slider-container {
        width: 100%;
        margin-left: 0;
        border: none;
        padding-bottom: 75px; /* 调整下方空间 */
        max-width: 100%; /* 移除最大宽度限制 */
    }
    
    .focus-main-area {
        /* 保持16:9比例 */
        aspect-ratio: 16 / 9;
        min-height: 200px;
        width: 99%; /* 使用99%宽度适应容器 */
        margin: 0 auto; /* 居中显示 */
    }
    
    #focus-main-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .thumbnails-container {
        height: 70px;
        gap: 6px;
        padding: 0 4px;
        flex-wrap: wrap; /* 允许换行 */
        width: 99%; /* 使用99%宽度适应容器 */
        margin: 0 auto; /* 居中显示 */
    }
    
    .thumbnail-item {
        width: 80px; /* 适当增加宽度 */
        height: 60px; /* 适当增加高度 */
    }
    
    #focus-title-background {
        height: 35px;
    }
    
    #focus-title-text {
        line-height: 35px;
        font-size: 11px;
        padding: 0 10px;
    }
}