src/styles/layout-styles.css

/* Layout specific styles */

/* Banner text styles */
.banner-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    animation: banner-fadeInUp 1s ease-out;
    font-weight: bold;
}

.banner-subtitle {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    animation: banner-fadeInUp 1s ease-out 0.3s both;
}

@keyframes banner-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移动端无侧边栏布局优化 */
@media (max-width: 768px) {
    .mobile-no-sidebar {
        display: block !important;
        width: 100% !important;
    }
    
    .mobile-no-sidebar main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .mobile-no-sidebar #content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* 移动端横幅优化 - 小屏手机 (320px - 480px) */
@media (max-width: 480px) {
    /* Banner wrapper 高度优化 - 优先保持banner显示 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 70vh !important; /* 保持较大高度优先显示banner */
        min-height: 450px;
        max-height: none; /* 移除最大高度限制 */
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 35vh !important; /* 小屏手机，提升至与波浪平行 */
        min-height: calc(100vh - 35vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 1rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 95% !important; /* 增加文本宽度利用率 */
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 3.2rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important; /* 增强阴影 */
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 13vh !important;
        min-height: 100px !important;
        max-height: 176px !important;
    }
}

/* 移动端横幅优化 - 大屏手机 (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
    /* Banner wrapper 高度优化 - 优先保持banner显示 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 75vh !important;
        min-height: 500px;
        max-height: none; /* 移除最大高度限制 */
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 38vh !important; /* 大屏手机，提升至与波浪平行 */
        min-height: calc(100vh - 38vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 1.5rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 90% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 3.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 15vh !important;
        min-height: 110px !important;
        max-height: 166px !important;
    }
}

/* 移动端横幅优化 - 超大屏手机/小平板 (641px - 767px) */
@media (min-width: 641px) and (max-width: 767px) {
    /* Banner wrapper 高度优化 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 72vh !important;
        min-height: 520px;
        max-height: none; /* 移除最大高度限制 */
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 36vh !important; /* 小平板，提升至与波浪平行 */
        min-height: calc(100vh - 36vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 1.75rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 88% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 3.9rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.85rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 16vh !important;
        min-height: 115px !important;
        max-height: 190px !important;
    }
}

/* 平板设备横幅优化 (768px - 1023px) - Tailwind md 断点 */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Banner wrapper 高度优化 - 仅在首页应用 */
    #banner-wrapper:not(.mobile-hide-banner) {
        height: 70vh !important;
        min-height: 500px;
        top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
    }
    
    /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
        top: 33vh !important; /* 平板端，提升至与波浪平行 */
        min-height: calc(100vh - 33vh) !important;
    }
    
    /* 横幅文本覆盖层优化 */
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 2rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    /* 文本容器优化 */
    .banner-text-overlay > div {
        margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
        width: 85% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 标题字体优化 */
    .banner-title {
        font-size: 4rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    
    /* 副标题字体优化 */
    .banner-subtitle {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 波浪效果高度调整 - 与文章列表提升同步 */
    .waves {
        height: 17vh !important;
        min-height: 120px !important;
        max-height: 216px !important;
    }
}

/* 桌面端保持居中 (1024px+) - Tailwind lg 断点 */
@media (min-width: 1024px) {
    .banner-text-overlay {
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        padding: 2rem !important;
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-text-overlay > div {
        margin-bottom: 0 !important;
        width: 75% !important;
        text-align: center !important; /* 确保文字居中 */
    }
    
    /* 背景图片优化 */
    #banner img {
        transition: transform 1s ease-out !important;
    }
    
    /* 波浪效果恢复默认 */
    .waves {
        height: 15vh !important;
        min-height: 80px !important;
        max-height: 150px !important;
    }
}

/* 移动端图片优化 */
@media (max-width: 1023px) {
    /* 移动端背景图片优化 */
    #banner img {
        transition: transform 0.5s ease-out !important;
    }
}

/* 平板和手机端非首页隐藏banner - 改进的分阶段动画 (1024px以下) */
@media (max-width: 1023px) {
    #banner-wrapper {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-out;
        transform-origin: top center;
        /* 硬件加速优化 */
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    .mobile-hide-banner {
        transform: translateY(-100%) translateZ(0) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        /* 快速消失 */
        transition: transform 0.3s ease-in, opacity 0.2s ease-in !important;
    }
    
    /* 手机端非首页时主内容区域从顶部开始 - 延迟出现的动画 */
    .absolute.w-full.z-30 {
        transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
        /* 硬件加速优化 */
        will-change: top;
        /* 禁用transform以保证back to top 按钮可以显示
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        */
    }
    
    .absolute.w-full.z-30.mobile-main-no-banner {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        /* 内容区域快速上移 */
        transition: top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s !important;
    }
}

/* 移动端banner性能优化 */
@media (max-width: 1023px) {
    .banner-container {
        /* 启用硬件加速 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform, opacity;
        
        /* 优化渲染性能 */
        contain: layout style paint;
        
        /* 减少重绘 */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .carousel-item {
        /* 硬件加速 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform, opacity;
        
        /* 优化触摸响应 */
        touch-action: pan-y;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .banner-text-overlay {
        /* 文字渲染优化 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        
        /* 减少重排 */
        contain: layout style;
    }

    /* 移动端图片优化 - 只针对装饰性图片 */
    .banner-container img:not(.interactive):not([onclick]):not([data-clickable]) {
        /* 图片渲染优化 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        
        /* 防止图片拖拽 */
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        
        /* 触摸优化 - 只针对装饰性图片 */
        pointer-events: none;
    }
    
    /* 交互式图片保持可点击 */
    .banner-container img.interactive,
    .banner-container img[onclick],
    .banner-container img[data-clickable] {
        pointer-events: auto;
        cursor: pointer;
    }
}

/* 当banner被禁用时的布局样式 */
.no-banner-layout {
    top: 5.5rem !important;
    min-height: calc(100vh - 5.5rem) !important;
}

/* 移动端当banner被禁用时的布局样式 */
@media (max-width: 1023px) {
    .absolute.w-full.z-30.no-banner-layout {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        transition: none !important; /* 移除过渡动画，立即应用位置 */
    }
}

/* 小屏手机当banner被禁用时的布局样式 */
@media (max-width: 480px) {
    .absolute.w-full.z-30.no-banner-layout {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        transition: none !important;
    }
}

/* 平板设备当banner被禁用时的布局样式 */
@media (min-width: 768px) and (max-width: 1023px) {
    .absolute.w-full.z-30.no-banner-layout {
        top: 5.5rem !important;
        min-height: calc(100vh - 5.5rem) !important;
        transition: none !important;
    }
}

/* 移动端横屏优化 */
@media (max-width: 1023px) and (orientation: landscape) {
    #banner-wrapper:not(.mobile-hide-banner) {
        top: 0 !important; /* 横屏模式从顶部开始，避免被导航栏覆盖 */
        height: 60vh !important;
    }
    
    /* 主内容区域位置调整 - 确保在banner下面，但不影响非首页 */
    /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
    body.enable-banner .absolute.w-full.z-30:not(.mobile-main-no-banner):not(.no-banner-layout) {
        top: 32vh !important; /* 横屏模式，提升至与波浪平行 */
        min-height: calc(100vh - 32vh) !important;
    }
    
    .banner-container {
        height: 60vh;
        min-height: 300px;
    }

    .banner-text-overlay {
        padding: 1rem 1.5rem;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }

    .banner-title {
        font-size: 2.2rem !important; /* 增大字体大小 */
        line-height: 1.3;
    }

    .banner-subtitle {
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }
}

/* 移动端暗色模式优化 */
@media (max-width: 1023px) and (prefers-color-scheme: dark) {
    .banner-text-overlay {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            transparent 100%
        );
    }

    .banner-title {
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    }

    .banner-subtitle {
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    }
}

/* 水波纹显示优化 */
.waves {
    /* 确保水波纹完整显示 */
    overflow: visible;
    z-index: 5;
    /* 硬件加速，确保与背景同步渲染 */
    transform: translateZ(0);
    will-change: transform;
    /* 移除contain属性，避免限制动画渲染范围 */
    contain: none;
}

.waves svg {
    /* 确保SVG完整渲染 */
    width: 100%;
    height: 100%;
    display: block;
    /* SVG硬件加速 */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 波浪填充色主题切换优化 */
.waves use {
    /* 确保填充色与页面背景同步更新 */
    will-change: fill;
}

/* 波浪与背景同步切换优化 - 解决交界线闪烁 */
#header-waves {
    /* 确保波浪容器与页面背景在同一合成层 */
    isolation: isolate;
    /* 移除contain属性，避免限制波浪动画 */
    contain: none;
    /* 精确对齐 */
    margin-bottom: -1px;
}

/* 主题切换时的额外保护 */
.theme-changing #header-waves,
.theme-changing #header-waves svg,
.theme-changing #header-waves use {
    /* 在主题切换期间禁用所有可能的渲染延迟 */
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 移动端水波纹特殊优化 */
@media (max-width: 1023px) {
    #header-waves {
        /* 确保水波纹容器不被裁剪 */
        overflow: visible;
        z-index: 5;
        /* 水波纹快速消失动画 */
        transition: transform 0.3s ease-in, opacity 0.2s ease-in;
    }
    
    /* 当banner隐藏时，水波纹也隐藏 */
    .mobile-hide-banner #header-waves {
        display: none !important;
        transform: translateY(-100%);
        opacity: 0;
        /* 水波纹比banner更快消失 */
        transition: transform 0.25s ease-in, opacity 0.15s ease-in;
    }
    
    .waves svg {
        /* 移动端SVG优化 */
        min-height: 60px;
    }
    
    /* 确保水波纹在banner底部正确定位 */
    .waves {
        bottom: -1px !important;
        position: absolute !important;
    }
}

/* 超小屏幕水波纹优化 */
@media (max-width: 360px) {
    .waves {
        height: 6vh !important;
        min-height: 50px !important;
        max-height: 70px !important;
    }
}

/* 基于屏幕高度的banner优化 - 优先显示banner */
/* 极小高度屏幕 (高度 ≤ 500px) */
@media (max-height: 500px) {
    #banner-wrapper {
        height: 85vh !important; /* 占用更多高度确保banner显示 */
        min-height: 350px !important;
    }
    
    .banner-text-overlay {
        padding: 1rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 2.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .banner-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    .waves {
        height: 10vh !important;
        min-height: 60px !important;
    }
}

/* 小高度屏幕 (高度 501px - 600px) */
@media (min-height: 501px) and (max-height: 600px) {
    #banner-wrapper {
        height: 80vh !important;
        min-height: 400px !important;
    }
    
    .banner-text-overlay {
        padding: 1.5rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 3.2rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .banner-subtitle {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    .waves {
        height: 17vh !important;
        min-height: 250px !important;
    }
}

/* 中等高度屏幕 (高度 601px - 700px) */
@media (min-height: 601px) and (max-height: 700px) {
    #banner-wrapper {
        height: 75vh !important;
        min-height: 450px !important;
    }
    
    .banner-text-overlay {
        padding: 2rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 3.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .banner-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
    }
    
    .waves {
        height: 15vh !important;
        min-height: 200px !important;
    }
}

/* 横屏模式特殊处理 - 优先显示banner */
@media (orientation: landscape) and (max-height: 500px) {
    #banner-wrapper {
        height: 90vh !important; /* 横屏时占用更多高度 */
        min-height: 300px !important;
    }
    
    .banner-text-overlay {
        padding: 1rem 2rem !important;
        align-items: center !important; /* 垂直居中 */
        justify-content: center !important; /* 水平居中 */
        text-align: center !important; /* 文字居中对齐 */
    }
    
    .banner-title {
        font-size: 2.8rem !important; /* 增大字体大小 */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .banner-subtitle {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    
    .waves {
        height: 10vh !important;
        min-height: 50px !important;
    }
}