/* 让 HTML 和 Body 占满全屏，防止父容器高度塌陷 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc', 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif;
    font-weight: bold;
}

.parent-container {
    display: flex;
    flex-direction: column;
    /* 纵向排列 */
    align-items: center;
    /* 让子元素水平居中（如果你需要的话） */
    height: auto;
    /* 占满整个屏幕高度 */
    width: 100%;
}

.header-box {
    width: 100vw;
    height: 80vh;
    max-height: calc(9 / 16 * 100vw);
    background-image: url('./assets/img/header-background.avif');
    background-size: cover;
    background-position: bottom;

    background-color: #f4f4f4;

    display: flex;
    justify-content: center;
    align-items: center;
    /* 水平和垂直居中内容 */

    position: relative;
}

.title-box {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 2;
}

.title {
    color: #ffffff;
    font-size: min(12vw, 96px);
}

.subtitle {
    color: #ffffff;
    font-size: min(6vw, 32px);
}

.map-box {
    width: min(80%, 80vh);
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    /* 防止在空间不足时被压缩 */

    background-color: #ffffff;

    border: 5px solid #54859c;
    border-radius: 15px;

    box-shadow: 0px 4px 12px rgba(84, 133, 156, 0.6);

    margin-top: 10vh;

    /* position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.blog-list-box {
    width: min(90%, 100vh);
    /* 列表部分占满父容器宽度 */
    flex-grow: 1;
    /* 核心：自动填满剩余的所有垂直空间 */
    background-color: #f4f4f4;
    overflow-y: auto;
    /* 如果列表内容多，允许内部滚动 */
    padding: 20px;
    box-sizing: border-box;
    margin-top: 30vh;
}

/* 创建一个覆盖在背景上的渐变层 */
.header-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    /* 渐变区域的高度 */
    background: linear-gradient(to bottom,
            transparent,
            #f4f4f4 100%
            /* 这里的颜色应与 bottom-list 的背景色一致 */
        );
    pointer-events: none;
    /* 确保遮罩层不影响鼠标点击 */
    z-index: 1;
    /* 确保在背景图之上，但在地图之下（如果需要） */
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    padding: 15px;
    border-bottom: 1px solid #ddd;
}


.blog-list {
    list-style: none;
    /* 去掉列表默认圆点 */
    padding: 0;
}

.blog-item {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #5b5b5b;
    /* 文章间的分割线 */
}

.blog-title a {
    color: #333;
    text-decoration: none;
    /* 去掉下划线 */
}

.blog-title a:hover {
    color: #007bff;
    /* 悬停颜色 */
}

.blog-summary {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.blog-tags .tag {
    display: inline-block;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 5px;
    color: #555;
}

.bottom-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5vh;
    position: relative;
}

.thuja {
    position: absolute;
    width: 30%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(84, 133, 156, 0.6);
}

.thuja-distr {
    left: 17%;
    top: 0;
}

.thuja-intro {
    right: 17%;
    top: 0;
}