/* ========= 通用重置 ========= */
*{
    border: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ========= 基础布局 ========= */

.header{
    margin-top:-10px ;
}
.main{
    margin-top: 150px;
    padding: 0 15px;          /* 两侧留白，防止贴边 */
}

/* ========= 桌面端：≥998px ========= */
.mainbox{
    max-width: 998px;        /* 最大宽度锁定 */
    margin: 0 auto 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* 图片区域 */
.mainimg{
    flex: 0 0 40%;
    aspect-ratio: 4 / 3;     /* 比例锁死 */
    overflow: hidden;
    border-radius: 6px;
}
.mainimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字区域 */
.maincontent{
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.maintitle a{
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    text-decoration: none;
}
.maintitle a:hover{
    color: #0d6efd;
}
.createBox{
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0 12px;
    text-align: center;
}
.icon{
    width:18px;
    height:18px;
    margin-right:6px;
    display:inline-block;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}
.createdbyImg{
    background-image: url('../img/user.svg');
}
.dateImg{
    background-image: url('../img/datebase.svg');
}

.requiredTimeImg{
    background-image: url('../img/book.svg');
}
.createdby:hover,.date:hover,.requiredTime:hover{
    color: purple;
}
.createdby:hover .createdbyImg{
    background-image: url('../img/userhover.svg');
}
.date:hover .dateImg{
    background-image: url('../img/datebasehover.svg');
}
.requiredTime:hover .requiredTimeImg{
    background-image: url('../img/bookhover.svg');
}



/* 包裹层：确保宽度自适应，防止被内容撑开 */
.Content {
    width: 100%;      /* 关键：占满父级宽度 */
    min-width: 0;     /* 防止 flex 子项被内容撑开 */
}

/* 文本样式 */
.Content span {
    display: block;
    text-align: left;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.8;
    color: #222;
    text-indent: 2em;

    /* 关键修复：只在超长时断行 */
    word-break: normal;          /* 中文按字换行 */
    overflow-wrap: anywhere;     /* 超长英文/数字才断行 */
}
/* ========= 响应式：≤998px ========= */
@media (max-width: 998px){
    .mainbox{
        flex-direction: column;   /* 纵向堆叠 */
        width: 100%;              /* 占满父容器 */
        height: auto;             /* 高度自适应 */
        padding: 15px;
    }
    .mainimg{
        flex: none;
        width: 100%;              /* 图片占整宽 */
        aspect-ratio: 16 / 9;     /* 可调比例 */
    }
    .maincontent{
        flex: none;
        width: 100%;
    }
    .createBox{
        width: 100%;
        justify-content: flex-start;
    }
}