/* footprints.css - 红色足迹页面样式 */

/* 标题区域样式 */
.title{
    position: relative;  /* 相对定位 */
    text-align: center;  /* 文字水平居中 */
    margin-bottom: 30px;  /* 底部外边距30像素 */
    padding: 25px 0;  /* 内边距：上下25像素，左右0 */
    background: linear-gradient(to right, #fffaf5, #ffebee);  /* 从左到右的浅米色到浅红色渐变背景 */
    border-radius: 12px;  /* 12像素圆角 */
    box-shadow: 0 6px 25px rgba(183, 28, 28, 0.1);  /* 红色调阴影效果 */
    border: 2px solid #ffebee;  /* 2像素浅红色边框 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 标题区域顶部装饰线 */
.title::before {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    right: 0;  /* 右侧对齐 */
    height: 4px;  /* 高度4像素 */
    background: linear-gradient(90deg, #ff9800, #c62828, #ff9800);  /* 橙色-红色-橙色渐变 */
}

/* 主标题样式（第一个段落） */
.title>p:nth-child(1){
    font-size: 34px;  /* 字体大小34像素 */
    letter-spacing: 5px;  /* 字符间距5像素 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    color: #c62828;  /* 红色文字 */
    font-weight: bold;  /* 文字加粗 */
    text-shadow: 2px 2px 4px rgba(198, 40, 40, 0.15);  /* 红色文字阴影 */
    position: relative;  /* 相对定位 */
    display: inline-block;  /* 行内块级显示 */
    padding: 0 20px;  /* 内边距：上下0，左右20像素 */
}

/* 主标题前后的装饰符号 */
.title>p:nth-child(1)::before,
.title>p:nth-child(1)::after {
    content: '✦';  /* 星形符号作为装饰 */
    position: absolute;  /* 绝对定位 */
    top: 50%;  /* 顶部50%位置 */
    transform: translateY(-50%);  /* 向上平移自身高度的50%，实现垂直居中 */
    color: #ff9800;  /* 橙色 */
    font-size: 24px;  /* 字体大小24像素 */
    opacity: 0.7;  /* 透明度0.7（70%不透明） */
}

/* 主标题前的装饰符号位置 */
.title>p:nth-child(1)::before {
    left: -10px;  /* 左侧偏移-10像素 */
}

/* 主标题后的装饰符号位置 */
.title>p:nth-child(1)::after {
    right: -10px;  /* 右侧偏移-10像素 */
}

/* 副标题样式（第二个段落） */
.title>p:nth-child(2){
    letter-spacing: 3px;  /* 字符间距3像素 */
    color: #e53935;  /* 亮红色文字 */
    font-size: 19px;  /* 字体大小19像素 */
    margin-top: 10px;  /* 顶部外边距10像素 */
    font-style: italic;  /* 文字斜体 */
}

/* 标题区域内的音频播放器样式 */
.title > audio{
    position: absolute;  /* 绝对定位 */
    right:100px;  /* 距离右侧100像素 */
    top:50%;  /* 顶部50%位置 */
    transform: translateY(-50%);  /* 向上平移自身高度的50%，实现垂直居中 */
    border: 2px solid #ffccbc;  /* 2像素浅橙色边框 */
    border-radius: 30px;  /* 30像素圆角，形成椭圆形 */
    padding: 8px;  /* 内边距8像素 */
    background-color: white;  /* 白色背景 */
    box-shadow: 0 4px 15px rgba(183, 28, 28, 0.1);  /* 红色调阴影效果 */
    transition: all 0.3s ease;  /* 所有属性0.3秒过渡效果 */
}

/* 音频播放器悬停效果 */
.title > audio:hover {
    transform: translateY(-50%) scale(1.05);  /* 保持垂直居中同时放大1.05倍 */
    box-shadow: 0 6px 20px rgba(183, 28, 28, 0.15);  /* 加深阴影效果 */
    border-color: #ff9800;  /* 边框颜色变为亮橙色 */
}

/* 信息区域样式 */
.info{
    margin:35px 0 30px 0;  /* 外边距：上35像素，下30像素，左右0 */
    display: flex;  /* 弹性布局 */
    justify-content: space-around;  /* 子元素均匀分布，两端留有空间 */
    align-items: center;  /* 垂直居中对齐子元素 */
    background-color: white;  /* 白色背景 */
    padding: 25px;  /* 内边距25像素 */
    border-radius: 12px;  /* 12像素圆角 */
    box-shadow: 0 6px 25px rgba(183, 28, 28, 0.1);  /* 红色调阴影效果 */
    border: 2px solid #ffebee;  /* 2像素浅红色边框 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
}

/* 信息区域悬停效果 */
.info:hover {
    box-shadow: 0 10px 35px rgba(183, 28, 28, 0.15);  /* 加深阴影效果 */
    border-color: #ffccbc;  /* 边框颜色变为浅橙色 */
}

/* 信息区域内所有子元素通用样式 */
.info>*{
    width:48%;  /* 宽度48% */
}

/* 信息区域内段落样式 */
.info>p{
    text-indent: 2em;  /* 首行缩进2个字符 */
    line-height: 1.8;  /* 行高1.8倍字体大小 */
    font-size: 17px;  /* 字体大小17像素 */
    color: #5d4037;  /* 深棕色文字 */
    padding: 20px;  /* 内边距20像素 */
    background-color: #fffaf5;  /* 浅米色背景 */
    border-radius: 10px;  /* 10像素圆角 */
    border-left: 4px solid #c62828;  /* 左侧4像素红色边框 */
    transition: all 0.3s ease;  /* 所有属性0.3秒过渡效果 */
}

/* 信息区域悬停时段落效果 */
.info:hover p {
    background-color: #fff8f0;  /* 悬停时背景变为更浅的米色 */
    border-left-color: #ff9800;  /* 左侧边框颜色变为橙色 */
    color: #3e2723;  /* 文字颜色变为更深棕色 */
}

/* 信息区域内视频样式 */
.info>video{
    border-radius: 12px;  /* 12像素圆角 */
    border: 3px solid #ffccbc;  /* 3像素浅橙色边框 */
    box-shadow: 0 6px 20px rgba(183, 28, 28, 0.15);  /* 红色调阴影效果 */
    transition: all 0.5s ease;  /* 所有属性0.5秒过渡效果 */
    filter: brightness(0.95);  /* 降低亮度5% */
}

/* 信息区域内视频悬停效果 */
.info>video:hover {
    transform: scale(1.02);  /* 放大1.02倍 */
    border-color: #ff9800;  /* 边框颜色变为亮橙色 */
    box-shadow: 0 10px 30px rgba(183, 28, 28, 0.2);  /* 加深阴影效果 */
    filter: brightness(1.05);  /* 增加亮度5% */
}

/* 项目容器样式 */
.items{
    width:100%;  /* 宽度100%填充父元素 */
    display: flex;  /* 弹性布局 */
    justify-content: space-around;  /* 子元素均匀分布，两端留有空间 */
    align-items: stretch;  /* 子元素拉伸填充容器高度 */
    margin-top: 25px;  /* 顶部外边距25像素 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 25px;  /* 子元素之间间距25像素 */
}

/* 子项目通用样式 */
.item{
    margin:0;  /* 清除外边距 */
    width: calc(33.333% - 25px);  /* 宽度计算：三分之一减去间距 */
    height: 420px;  /* 高度420像素 */
    padding:18px;  /* 内边距18像素 */
    border: 2px solid #e8e2d9;  /* 2像素浅灰色边框 */
    border-radius: 12px;  /* 12像素圆角 */
    background-color: white;  /* 白色背景 */
    box-shadow: 0 6px 25px rgba(183, 28, 28, 0.1);  /* 红色调阴影效果 */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);  /* 所有属性0.6秒贝塞尔曲线过渡效果 */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 子项目悬停效果 */
.item:hover{
    transform: translateY(-10px) scale(1.03);  /* 向上移动10像素并放大1.03倍 */
    box-shadow: 0 20px 45px rgba(183, 28, 28, 0.18);  /* 加深阴影效果 */
    border-color: #ffb74d;  /* 边框颜色变为橙色 */
}

/* 子项目内图片样式 */
.item>img{
    width:100%;  /* 宽度100%填充父元素 */
    height: 200px;  /* 高度200像素 */
    object-fit: cover;  /* 图片填充方式：保持比例，裁剪填充 */
    border-radius: 10px;  /* 10像素圆角 */
    border: 2px solid #f0e6d9;  /* 2像素浅米色边框 */
    transition: all 0.7s ease;  /* 所有属性0.7秒过渡效果 */
    filter: brightness(0.95) contrast(1.1);  /* 降低亮度5%并增加对比度10% */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 子项目悬停时图片效果 */
.item:hover img {
    transform: scale(1.1) rotate(1.5deg);  /* 放大1.1倍并旋转1.5度 */
    filter: brightness(1.05) contrast(1.2);  /* 增加亮度5%并增加对比度20% */
    border-color: #ff9800;  /* 边框颜色变为亮橙色 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  /* 添加黑色阴影效果 */
}

/* 子项目内标题样式 */
.item >h4 {
    font-size: 23px;  /* 字体大小23像素 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    letter-spacing: 3px;  /* 字符间距3像素 */
    color: #c62828;  /* 红色文字 */
    text-align: center;  /* 文字水平居中 */
    margin:18px 0 12px 0;  /* 外边距：上18像素，下12像素，左右0 */
    font-weight: bold;  /* 文字加粗 */
    border-bottom: 2px dashed #ffccbc;  /* 底部2像素浅橙色虚线边框 */
    padding-bottom: 12px;  /* 底部内边距12像素 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
}

/* 子项目悬停时标题效果 */
.item:hover h4 {
    color: #b71c1c;  /* 文字颜色变为深红色 */
    letter-spacing: 4px;  /* 字符间距增加到4像素 */
    transform: translateY(-2px);  /* 向上移动2像素 */
}

/* 子项目内段落样式 */
.item > p{
    text-indent: 2em;  /* 首行缩进2个字符 */
    font-size: 16px;  /* 字体大小16像素 */
    line-height: 1.7;  /* 行高1.7倍字体大小 */
    font-weight: 500;  /* 字体粗细500（中等粗细） */
    color: #5d4037;  /* 深棕色文字 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
}

/* 子项目悬停时段落效果 */
.item:hover p {
    color: #3e2723;  /* 文字颜色变为更深棕色 */
    line-height: 1.8;  /* 行高增加到1.8倍字体大小 */
}