/* inheritance.css - 薪火相传页面样式 */

/* 容器样式 */
.container{
    display: flex;  /* 弹性布局 */
    justify-content: space-around;  /* 子元素均匀分布，两端留有空间 */
    background-color: #faf8f5;  /* 浅米色背景 */
    padding: 35px 25px;  /* 内边距：上下35像素，左右25像素 */
    border-radius: 12px;  /* 12像素圆角 */
    gap: 30px;  /* 子元素之间间距30像素 */
    flex-wrap: wrap;  /* 允许换行 */
}

/* 子项目样式 */
.container>.item{
    width:30%;  /* 宽度30% */
    background-color: white;  /* 白色背景 */
    border-radius: 16px;  /* 16像素圆角 */
    padding: 25px;  /* 内边距25像素 */
    box-shadow: 0 8px 30px rgba(183, 28, 28, 0.12);  /* 红色调阴影效果 */
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);  /* 所有属性0.6秒贝塞尔曲线过渡效果 */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
    border: 2px solid #e8e2d9;  /* 2像素浅灰色边框 */
}

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

/* 子项目内图片样式 */
.item>img{
    width:100%;  /* 宽度100%填充父元素 */
    height: 240px;  /* 高度240像素 */
    object-fit: cover;  /* 图片填充方式：保持比例，裁剪填充 */
    border: 5px solid #ffccbc;  /* 5像素浅橙色边框 */
    border-radius: 12px;  /* 12像素圆角 */
    box-shadow: 0 6px 20px rgba(183, 28, 28, 0.15);  /* 红色调阴影效果 */
    transition: all 0.8s ease;  /* 所有属性0.8秒过渡效果 */
    filter: brightness(0.95) sepia(0.1);  /* 降低亮度5%并添加10%怀旧色调 */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 子项目悬停时图片效果 */
.item:hover img {
    transform: scale(1.08) rotate(2deg);  /* 放大1.08倍并旋转2度 */
    filter: brightness(1.05) sepia(0);  /* 增加亮度5%并移除怀旧色调 */
    border-color: #ff9800;  /* 边框颜色变为亮橙色 */
    box-shadow: 0 12px 35px rgba(183, 28, 28, 0.25);  /* 加深阴影效果 */
}

/* 子项目内段落样式 */
.item>p{
    text-indent: 2em;  /* 首行缩进2个字符 */
    line-height: 1.8;  /* 行高1.8倍字体大小 */
    font-size: 16px;  /* 字体大小16像素 */
    color: #5d4037;  /* 深棕色文字 */
    margin-top: 25px;  /* 顶部外边距25像素 */
    padding: 18px;  /* 内边距18像素 */
    background-color: #fffaf5;  /* 浅米色背景 */
    border-radius: 10px;  /* 10像素圆角 */
    border-left: 4px solid #c62828;  /* 左侧4像素红色边框 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
    position: relative;  /* 相对定位 */
    z-index: 2;  /* 设置层级为2 */
}

/* 子项目悬停时段落效果 */
.item:hover p {
    background-color: #fff8f0;  /* 悬停时背景变为更浅的米色 */
    border-left-color: #ff9800;  /* 左侧边框颜色变为橙色 */
    color: #3e2723;  /* 文字颜色变为更深棕色 */
    transform: translateY(-5px);  /* 向上移动5像素 */
}