/**
 * ================================================
 * 袁去病自然教育® - 首页样式文件
 * 文件名: b_0010_0001_index.css
 * 设计风格: 抖音式全屏封面轮播 + 微信式底部导航
 * 创建日期: 2026-05-24
 * ================================================
 */

/* ================================================
   第一部分: 全局重置与基础布局
   核心策略: 禁止滚动、禁止溢出、满屏填充
   ================================================ */

/* 所有元素通用重置 - 清除默认边距、统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
    -webkit-touch-callout: none; /* 禁用长按菜单 */
    -webkit-user-select: none; /* 禁用文本选择 */
    user-select: none;
}

/* HTML和Body - 固定全屏、禁止滚动 */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #000;
    margin: 0;
    padding: 0;
}

/* 根字体大小 - 由JavaScript动态设置（自适应字体） */
html {
    font-size: 100px; /* 默认值，会被JS覆盖 */
}

/* ================================================
   第二部分: 主容器布局
   结构: Grid布局，中间轮播、底部导航栏、ICP备案（header悬浮在轮播图上）
   ================================================ */

.main-container {
    width: 100%;
    height: 100dvh;
    /*注意，此处不允许使用vh,而是要用dvh,因为vh是视口高度,而dvh是设备高度,在移动端会更准确*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #000;
    box-sizing: border-box;
    /*border: 10px solid red;*/
}

/* ================================================
   第三部分: 顶部标题栏
   高度: 1/12高度或最小60px
   样式: 渐变透明背景，白色字体，压在封面轮播图顶层
   ================================================ */

.header-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 0.7rem;
    height: 8.33vh; /* 约为1/12屏幕高度 */
    /* 从顶部黑色渐变到透明，文字浮在封面上 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.1rem;
    padding-top: env(safe-area-inset-top); /* 适配iPhone刘海屏 */
    z-index: 100; /* 确保在轮播图之上 */
    /*font-size: 1rem;*/
}

/* 标题文字样式 - 白色+暖金色描边，适合儿童教育主题 */
.header-title {
    color: #fff;
    /* font-size: clamp(0.22rem, 6vmin, 0.32rem); 响应式字体大小 */
    font-size: 0.25rem;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出显示省略号 */
    max-width: 90%;
    /* 柔和阴影增强可读性 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* 暖金色描边，传递温暖关爱的氛围 */
    -webkit-text-stroke: 0.5px rgba(255, 215, 0, 0.6);
}

/* ================================================
   第四部分: 中间轮播区域
   功能: 占满中间剩余空间
   策略: 封面图较长边充满容器，保持比例
   ================================================ */

.slideshow-area {
    flex: 1;
    position: relative; /* 作为header绝对定位的参照 */
    width: 100%;
    overflow: hidden;
    background-color: #000;
    /* 触摸滑动支持 - 只允许垂直方向滑动 */
    touch-action: pan-y;
    /*border:1px solid green;*/
    font-size: 0; /* 消除空白节点导致的间隙 */
    /* 关键：确保在微信浏览器中正确计算剩余高度 */
    min-height: 0;
    /*border: 1px solid yellow;*/
}

/* 轮播图片容器 - 全封闭填充 */
.slideshow-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0.16rem; /* 恢复字体大小，避免继承父元素font-size:0 */
}

/* 轮播项样式 */
.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 默认隐藏 */
    pointer-events: none; /* 隐藏时禁用点击 */
}

/* 激活状态的轮播项 */
.slide-item.active {
    opacity: 1;
    pointer-events: auto;
    animation: slideZoomFade 5s forwards; /* 缩放渐隐动画 */
}

/* 轮播图缩放渐隐动画 */
@keyframes slideZoomFade {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    80% {                     /* 4秒时刻：放大到100%，保持不透明 */
        transform: scale(1);
        opacity: 1;
    }
    100% {                     /* 5秒时刻：缩小到0%，完全透明 */
        transform: scale(0);
        opacity: 0;
    }
}

/* 轮播图片样式 */
.slide-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例，完整显示 */
    object-position: center center;
    display: block;
    /*border: 1px solid red;*/
}

/* ================================================
   第五部分: 底部导航栏
   高度: 2倍字高
   样式: darkcyan背景色，均匀分布5个导航项
   ================================================ */

.nav-bar {
    grid-area: nav;
    width: 100%;
    min-height: auto;
    height: auto;
    /*background-color: darkcyan;*/
    display: flex;
    align-items: center;
    justify-content: space-around;
    /*padding: 0.08rem 0.05rem;*/
    padding-bottom: env(safe-area-inset-bottom); /* 适配iPhone底部安全区域 */
    z-index: 100;
    overflow: hidden;
    /*border:1px solid red;*/
}

/* 导航项容器 - 纯文字布局 */
.nav-item {
    flex: 1;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    font-size: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

/* 导航项点击状态 */
.nav-item:active {
    background-color: white;
    color: darkgreen;
    transform: scale(1.15); /* 新增：点击时字体放大15% */
}

/*
分割区
*/
#nav-icp {
    height: 0.05rem;
    /*background-color: darkcyan;*/
}



/* ================================================
   第六部分: ICP备案信息区域
   位置: 位于底部导航栏下方，固定定位
   ================================================ */

.icp-bar {
    grid-area: icp;
    width: 100%;
    height: calc(1.5* clamp(0.1rem, 2.5vmin, 0.14rem) + 0.1rem);
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    /*font-size: calc(1.5*clamp(0.1rem, 2.5vmin, 0.14rem));*/
    line-height: 1.2;
}

/* ICP链接样式 */
.icp-bar a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
        font-size: 0.2rem;
}

/* ICP链接悬停状态 */
.icp-bar a:hover {
    color: #4db8ff;
}

/* ================================================
   开发调试工具 - 正式版隐藏
   需要调试时，请注释掉以下代码
   ================================================ */

#debugBtn,
#debugPanel,
#clearCacheBtn {
    display: none !important;
}

/* ================================================
   轮播图弹窗样式   
   ================================================ */

.slide-modal-overlay {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 80%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
    /*border: 1px solid red;*/
}

/* 轮播图弹窗-容器-激活状态 */
.slide-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 轮播图弹窗-容器 */
.slide-modal {
    background-color: #fff;
    width: 86%;
    /*height: 100%;*/
   /* max-width: 360px;*/
    /*max-height: 65vh;*/
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 120px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    overflow-y: auto;
    border: 1px solid greenyellow;
}

.slide-modal-overlay.active .slide-modal {
    transform: scale(1);
}

.slide-modal-content {
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 10px;
    font-size: 0.2rem;
    font-weight: normal;
    line-height: 1.8;
    color: #333;
    white-space: pre-line;
}

.slide-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.slide-action-btn {
    padding: 10px 8px;
    border-radius: 10px;
    font-size: 0.25rem;
    font-weight: normal;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.2s;
}

.slide-action-btn:active {
    opacity: 1;
}

.slide-action-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.slide-action-btn.detail {
    background-color: #015d5d;
    color: #fff;
}

.slide-action-btn.audio {
    background-color: #9e01ff;
    color: #fff;
}

.slide-action-btn.video {
    background-color: #2100fb;
    color: #fff;
}

.slide-action-btn.close {
    background-color: #a20101;
    color: #fff;
}