/* ==========================================
   移动端首页LOGO排版优化 - 完整方案
   ========================================== */

/* ========== 颜色变量定义 ========== */
:root {
    /* 景点主色调 - 与attractions-optimized.css保持一致 */
    --primary-green: #10b981;
    --primary-dark: #059669;
    --accent-blue: #3b82f6;
    
    /* 辅助颜色 */
    --text-dark: #0f172a;
    --text-gray: #64748b;
    --bg-light: #f9fafb;
    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);
}

/* ========== 平板设备优化 (1024px及以下) ========== */
@media (max-width: 1024px) {
    /* LOGO容器基础设置 */
    .navbar-revolution .nav-brand {
        gap: 0.75rem !important;
        min-width: auto !important;
        margin-left: 0 !important;
    }
    
    .navbar-revolution .brand-info {
        gap: 0.125rem !important;
        align-items: flex-start !important;
    }
    
    /* LOGO文字样式 */
    .navbar-revolution .brand-name {
        font-size: 1.5rem !important;
        font-weight: 900 !important;
        color: var(--primary-dark) !important;
        letter-spacing: 0.05em !important;
        line-height: 1.1 !important;
    }
    
    .navbar-revolution .brand-tagline {
        display: block !important;
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        color: var(--primary-dark) !important;
        letter-spacing: 0.15em !important;
        opacity: 0.85 !important;
    }
}

/* ========== 移动端基础优化 (768px及以下) ========== */
@media (max-width: 768px) {
    /* ========== 导航栏容器优化 ========== */
    .navbar-revolution {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        padding: 0.6rem 0 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-bottom: 1px solid rgba(16, 185, 129, 0.1) !important;
        box-shadow: 0 2px 12px rgba(5, 150, 105, 0.08) !important;
        backdrop-filter: blur(12px) saturate(150%) !important;
    }
    
    .navbar-revolution.scrolled {
        padding: 0.5rem 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
    }
    
    /* ========== 导航包装器布局 ========== */
    .nav-wrapper {
        min-height: 50px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        display: flex !important;
    }
    
    /* ========== LOGO品牌容器优化 ========== */
    .nav-brand {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        min-width: 0 !important;
    }
    
    .nav-brand:hover {
        transform: translateY(-1px) !important;
    }
    
    .nav-brand:active {
        transform: scale(0.98) !important;
    }
    
    /* ========== LOGO图标显示 ========== */
    .brand-mark {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        background: rgba(16, 185, 129, 0.12) !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .brand-mark img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    
    /* ========== LOGO文本容器优化 ========== */
    .brand-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        min-width: 0 !important;
        max-width: calc(100vw - 120px) !important;
    }
    
    /* ========== LOGO品牌名称 ========== */
    .brand-name {
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        font-size: 1.375rem !important;
        font-weight: 900 !important;
        font-stretch: condensed !important;
        color: var(--primary-dark) !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        /* 防止文字抖动 */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    .navbar-revolution.scrolled .brand-name {
        color: var(--primary-dark) !important;
    }
    
    .nav-brand:hover .brand-name {
        color: var(--primary-green) !important;
        text-shadow: 0 2px 4px rgba(16, 185, 129, 0.15) !important;
    }
    
    /* ========== LOGO副标题/标语 ========== */
    .brand-tagline {
        display: block !important;
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        font-size: 0.625rem !important;
        font-weight: 600 !important;
        color: var(--primary-dark) !important;
        letter-spacing: 0.12em !important;
        line-height: 1 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 0.125rem !important;
        opacity: 0.8 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    .nav-brand:hover .brand-tagline {
        color: var(--primary-green) !important;
        opacity: 1 !important;
    }
}

/* ========== 小屏幕优化 (576px及以下) ========== */
@media (max-width: 576px) {
    /* ========== 容器微调 ========== */
    .navbar-revolution {
        padding: 0.5rem 0 !important;
    }
    
    .nav-wrapper {
        min-height: 48px !important;
        gap: 0.375rem !important;
    }
    
    .nav-brand {
        gap: 0.625rem !important;
    }
    
    /* ========== LOGO文本缩小 ========== */
    .brand-name {
        font-size: 1.25rem !important;
        letter-spacing: 0.06em !important;
    }
    
    .brand-tagline {
        font-size: 0.5625rem !important;
        letter-spacing: 0.1em !important;
        margin-top: 0.0625rem !important;
    }
    
    /* ========== 最大宽度控制 ========== */
    .brand-info {
        max-width: calc(100vw - 100px) !important;
    }
}

/* ========== 超小屏幕优化 (480px及以下) ========== */
@media (max-width: 480px) {
    .navbar-revolution {
        padding: 0.45rem 0 !important;
    }
    
    .nav-wrapper {
        min-height: 46px !important;
    }
    
    .nav-brand {
        gap: 0.5rem !important;
    }
    
    .brand-name {
        font-size: 1.1875rem !important;
        letter-spacing: 0.04em !important;
    }
    
    .brand-tagline {
        font-size: 0.5rem !important;
        letter-spacing: 0.08em !important;
        margin-top: 0.03125rem !important;
    }
    
    .brand-info {
        max-width: calc(100vw - 90px) !important;
    }
}

/* ========== 超超小屏 (360px及以下) ========== */
@media (max-width: 360px) {
    .navbar-revolution {
        padding: 0.4rem 0 !important;
    }
    
    .nav-wrapper {
        min-height: 44px !important;
        gap: 0.25rem !important;
    }
    
    .nav-brand {
        gap: 0.5rem !important;
    }
    
    .brand-name {
        font-size: 1.0625rem !important;
        letter-spacing: 0.02em !important;
    }
    
    .brand-tagline {
        font-size: 0.4375rem !important;
        letter-spacing: 0.06em !important;
    }
    
    .brand-info {
        max-width: calc(100vw - 80px) !important;
    }
}

/* ========== 横屏模式优化 ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar-revolution {
        padding: 0.4rem 0 !important;
    }
    
    .nav-wrapper {
        min-height: 44px !important;
    }
    
    .brand-name {
        font-size: 1.1875rem !important;
    }
    
    .brand-tagline {
        font-size: 0.5rem !important;
        margin-top: 0.03125rem !important;
    }
}

/* ========== 触摸设备优化 ========== */
@media (hover: none) and (pointer: coarse) {
    /* 增大触摸目标区域 */
    .nav-brand {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .nav-brand:hover {
        transform: none !important;
    }
    
    .nav-brand:active {
        transform: scale(0.95) !important;
        opacity: 0.85 !important;
    }
}

/* ========== 高DPI屏幕优化 ========== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brand-name,
    .brand-tagline {
        -webkit-font-smoothing: subpixel-antialiased !important;
    }
}

/* ========== 暗色模式支持 ========== */
@media (prefers-color-scheme: dark) {
    .navbar-revolution {
        background: rgba(20, 20, 30, 0.96) !important;
        border-bottom-color: rgba(16, 185, 129, 0.15) !important;
    }
    
    .navbar-revolution.scrolled {
        background: rgba(20, 20, 30, 0.98) !important;
    }
    
    .brand-name {
        color: var(--primary-green) !important;
    }
    
    .brand-tagline {
        color: rgba(16, 185, 129, 0.75) !important;
    }
}

/* ========== 平衡减速模式 ========== */
@media (prefers-reduced-motion: reduce) {
    .nav-brand,
    .brand-name,
    .brand-tagline {
        transition: none !important;
    }
}

/* ========== 高对比度模式 ========== */
@media (prefers-contrast: more) {
    .brand-name {
        font-weight: 950 !important;
        letter-spacing: 0.1em !important;
    }
    
    .brand-tagline {
        font-weight: 700 !important;
        letter-spacing: 0.15em !important;
    }
}

/* ========== 响应式文本缩放 ========== */
@media (max-width: 768px) {
    /* 使用相对单位确保缩放 */
    body {
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }
    
    .brand-name,
    .brand-tagline {
        -webkit-text-size-adjust: none !important;
        -ms-text-size-adjust: none !important;
    }
}

/* ========== 打印样式 ========== */
@media print {
    .navbar-revolution {
        position: static !important;
        box-shadow: none !important;
        border-bottom: 1px solid #ccc !important;
    }
    
    .brand-name {
        color: #000 !important;
    }
    
    .brand-tagline {
        color: #666 !important;
    }
}

/* ========== 辅助功能 ========== */
@media (prefers-reduced-transparency: reduce) {
    .navbar-revolution {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 1) !important;
    }
}

/* ========== LOGO渐变效果（可选增强） ========== */
@media (max-width: 768px) {
    .brand-name::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(16, 185, 129, 0.05) 50%, 
            transparent 100%);
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    
    .nav-brand:hover .brand-name::after {
        opacity: 1;
    }
}

/* ========== 动画性能优化 ========== */
@media (max-width: 768px) {
    .nav-brand {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
}