/* 
 * 航海日志区域修复CSS - 按照WordPress的正确实现
 * 三层结构：bg-wave(背景) → sec-news(内容) → news-draw-wave(遮罩+波浪)
 */

/* 1. bg-wave外层容器 - 提供bg-container.jpg背景，向外扩展，无遮罩 */
.bg-wave {
    margin: 0 -20px;                    /* 向外扩展，突破容器限制 */
    padding: 190px 20px 160px;          /* 大幅度内边距，营造空间感 */
    background: url('assets/images/bg-container.jpg') repeat center; /* 改为repeat center，避免过度放大 */
    overflow: hidden;
    position: relative;
}

/* 2. sec-news中层容器 - 只管内容，无背景无遮罩 */
.sec-news {
    position: relative;
    margin: 0;                          /* 移除外边距，由bg-wave控制 */
    padding: 0;                         /* 移除内边距，由bg-wave控制 */
    color: #fff;
    z-index: 0;
    /* 移除所有背景设置 */
}

/* 移除sec-news的伪元素背景和遮罩 */
.sec-news::before,
.sec-news::after {
    display: none;
}

/* 3. news-draw-wave内层 - 蓝色遮罩 + 波浪纹，从80px开始 */
.news-draw-wave {
    position: absolute;
    top: 80px;                          /* 固定80px开始，不用百分比 */
    left: 50%;
    width: 100vw;
    height: 200%;                       /* 覆盖大部分下方区域 */
    opacity: 0.5;
    transform: translateX(-50%);
    background: #2061a2;                /* 蓝色遮罩，与波浪纹颜色一致 */
    z-index: -1;
}

.news-draw-wave canvas {
    position: absolute;
    top: -20px;
    vertical-align: bottom;
}

/* 4. 新闻内容区域 - 重新调整层级 */
.sec-inner {
    position: relative;
    z-index: 1;                         /* 确保内容在遮罩之上 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 5. 新闻容器布局保持不变 */
.news-container {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;                         /* 内容层级更高 */
}

/* 6. 新闻列表样式微调 */
.news-list {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 8px;
}

/* 7. 按钮样式保持一致 */
.mod-btn-01:hover {
    background: #fff;
    color: #2061a2;                     /* 与波浪纹颜色一致 */
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

/* 8. 响应式设计 */
@media screen and (max-width: 767px) {
    .bg-wave {
        margin: 0 -6.67vw;              /* 移动端向外扩展 */
        padding: 26.67vw 6.67vw;        /* 移动端内边距 */
        background: url('assets/images/bg-container-sp.jpg') repeat center; /* 移动端也使用repeat center */
    }
    
    .news-draw-wave {
        top: 60px;                      /* 移动端调整开始位置 */
    }
}

/* 9. 标题样式 */
.news__ttl {
    margin-bottom: 90px;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.news__ttl span {
    display: inline-block;
    position: relative;
    padding: 0 1.25em;
}

.news__ttl span:before,
.news__ttl span:after {
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -0.5em;
    font-size: 60%;
    content: "●";
    color: #d2dfec;
}

.news__ttl span:before {
    left: 0;
}

.news__ttl span:after {
    right: 0;
}