/* index.css - 首页样式 */

/* 容器样式 */
.container{
    display: flex;  /* 弹性布局 */
    flex-wrap: wrap;  /* 允许换行 */
    justify-content: space-between;  /* 子元素两端对齐 */
    background-color: #faf8f5;  /* 浅米色背景 */
    padding: 30px 15px;  /* 内边距：上下30像素，左右15像素 */
    gap: 20px;  /* 子元素之间间距20像素 */
}

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

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

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

/* 子项目悬停时图片效果 */
.item:hover img {
    transform: scale(1.08) rotate(1deg);  /* 放大1.08倍并旋转1度 */
    filter: brightness(1.05);  /* 增加亮度5% */
    border-color: #ff9800;  /* 边框颜色变为亮橙色 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);  /* 添加阴影效果 */
}

/* 子项目内标题样式 */
.item >h4 {
    font-size: 22px;  /* 字体大小22像素 */
    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: 10px;  /* 底部内边距10像素 */
    transition: all 0.3s ease;  /* 所有属性0.3秒过渡效果 */
}

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

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

/* 子项目悬停时段落效果 */
.item:hover p {
    color: #3e2723;  /* 文字颜色变为更深棕色 */
}