/* ========================
   顶部 LOGO 区域
   ======================== */

/* 顶部 LOGO 区（占位）
   - 作用位置：页面最上方蓝色条
   - 用途：展示站点 LOGO 或标题
*/
.header {
    background-color: #e3f2fd;
    /* 浅蓝 */
    padding: 0;
    /* 顶部 LOGO 可视高度，图片在此高度内裁剪/缩放 */
    height: 150px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* LOGO 文本样式 */
.header .logo {
    font-size: 28px;
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 顶部 LOGO 图片 */
.header .logo .site-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* 顶部 LOGO 图片（base.html 中 class="logo-img"）*/
.header .logo .logo-img {
    /* 填满整个 LOGO 区，高度固定 150px，超出部分裁剪 */
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ========================
   自适应高度设置
   - 桌面默认：150px（上面已设置）
   - 平板：180px（视口宽度 769–1024px）
   - 手机：120px（视口宽度 ≤ 768px）
   ======================== */

/* 平板高度：略高一些，适配横屏/大屏手机和平板 */
@media (min-width: 600px) and (max-width: 1024px) {
    .header {
        height: 180px;
    }
}

/* 手机高度：更紧凑一些 */
@media (max-width: 600px) {
    .header {
        height: 120px;
    }
}