/* 移动端和平板响应式样式 - DORA */

/* ========================================
   通用移动端样式
   ======================================== */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) {
    /* 导航栏 */
    .navbar, .top-navbar {
        padding: 12px 24px !important;
    }
    
    .navbar-brand img {
        height: 44px !important;
    }
    
    .navbar-right {
        gap: 16px !important;
    }
    
    /* 隐藏部分导航元素 */
    .navbar-center {
        gap: 24px !important;
    }
    
    .navbar-center a {
        font-size: 0.9rem !important;
    }
    
    /* 按钮调整 */
    .btn-primary, .btn-nav-primary {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
    
    /* 用户区域 */
    .user-name {
        display: none !important;
    }
    
    .user-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* 下拉菜单 */
    .dropdown-menu {
        min-width: 180px !important;
        right: 0 !important;
    }
}

/* 手机设备 (小于768px) */
@media (max-width: 768px) {
    /* ========== 导航栏 ========== */
    .navbar, .top-navbar {
        padding: 10px 16px !important;
        height: auto !important;
    }
    
    .navbar-brand img {
        height: 36px !important;
    }
    
    .navbar-center {
        display: none !important;
    }
    
    .navbar-right {
        gap: 12px !important;
    }
    
    .btn-primary, .btn-nav-primary, .btn-hero-primary {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }
    
    .btn-secondary, .btn-nav-login, .btn-hero-secondary {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }
    
    /* 隐藏返回按钮文字，只显示箭头 */
    .btn-secondary[onclick*="main.html"] {
        padding: 8px 12px !important;
        font-size: 0 !important;
    }
    
    .btn-secondary[onclick*="main.html"]::before {
        content: '←';
        font-size: 1rem;
    }
    
    /* 用户区域 */
    .user-area {
        gap: 8px !important;
    }
    
    .user-name {
        display: none !important;
    }
    
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
    
    .user-profile-trigger {
        padding: 4px 8px !important;
    }
    
    .user-profile-trigger svg {
        display: none !important;
    }
    
    /* 下拉菜单 - 底部弹出样式 */
    .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 20px 16px 32px !important;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff !important;
        border: none !important;
        box-shadow: 0 -10px 50px rgba(0,0,0,0.2) !important;
        z-index: 2000 !important;
        /* 不使用 !important，让 JS 内联样式可以控制 */
        transform: translateY(100%);
        opacity: 1;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.35s;
    }
    
    .dropdown-menu.active {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #E0E0E0;
        border-radius: 2px;
        margin: 0 auto 16px;
    }
    
    .dropdown-item {
        padding: 16px 18px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        margin-bottom: 6px !important;
        background: #f5f5f7 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: #1D1D1F !important;
        text-decoration: none !important;
    }
    
    .dropdown-item:active {
        background: #e8e8ed !important;
    }
    
    .dropdown-item .icon {
        font-size: 1.2rem !important;
        width: 28px !important;
        text-align: center !important;
    }
    
    .dropdown-divider {
        height: 1px !important;
        background: #e5e5ea !important;
        margin: 12px 0 !important;
    }
    
    .dropdown-item.danger {
        color: #ef4444 !important;
        background: #fef2f2 !important;
    }
    
    /* 下拉菜单遮罩层 */
    .dropdown-overlay,
    .mobile-dropdown-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .dropdown-overlay.active,
    .mobile-dropdown-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* ========== 首页 Hero ========== */
    .hero-fullscreen {
        min-height: 100vh;
        padding: 80px 20px 40px;
    }
    
    .hero-content {
        margin-top: 100px !important;
    }
    
    .hero-intro {
        font-size: 0.9rem !important;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
        padding: 0 20px;
    }
    
    .hero-actions a {
        width: 100%;
        text-align: center;
    }
    
    /* ========== Logo Wall ========== */
    .logo-wall-section {
        padding: 40px 20px 60px !important;
    }
    
    .logo-track {
        gap: 30px !important;
        margin-bottom: 40px !important;
    }
    
    .partner-logo {
        font-size: 1rem !important;
    }
    
    .slogan-container h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    /* ========== Apps Section ========== */
    .apps-section {
        padding: 60px 20px !important;
    }
    
    .section-header-light h2 {
        font-size: 1.8rem !important;
    }
    
    .section-header-light p {
        font-size: 1rem !important;
    }
    
    .apps-carousel {
        padding: 10px 0 40px !important;
    }
    
    .apps-track .app-card {
        width: 280px !important;
        min-width: 280px !important;
    }
    
    .app-card {
        height: 380px !important;
        padding: 24px 20px 20px !important;
    }
    
    .app-card h3 {
        font-size: 1.3rem !important;
    }
    
    /* ========== Spotlight Section ========== */
    .spotlight-section {
        padding: 0 20px 60px !important;
    }
    
    .spotlight-row {
        flex-direction: column !important;
        gap: 30px !important;
        margin-bottom: 60px !important;
    }
    
    .spotlight-content {
        padding: 0 !important;
        order: 2;
    }
    
    .spotlight-visual {
        height: 280px !important;
        order: 1;
    }
    
    .spotlight-content h2 {
        font-size: 2rem !important;
    }
    
    .spotlight-content p {
        font-size: 1rem !important;
        max-width: 100% !important;
    }
    
    /* ========== Resources Section ========== */
    .resources-section {
        padding: 0 20px 60px !important;
    }
    
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .resource-art {
        height: 180px !important;
    }
    
    .resource-card h3 {
        font-size: 1.3rem !important;
    }
    
    /* ========== Article Section ========== */
    .article-section {
        padding: 0 20px 80px !important;
    }
    
    .article-title {
        font-size: 2rem !important;
    }
    
    .article-hero-image {
        height: 250px !important;
        margin-bottom: 40px !important;
    }
    
    .article-body p {
        font-size: 1rem !important;
    }
    
    /* ========== News Section ========== */
    .news-section {
        padding: 0 20px 60px !important;
    }
    
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .news-content h3 {
        font-size: 1.1rem !important;
    }
    
    /* ========== Footer ========== */
    footer {
        padding: 60px 20px 40px !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        gap: 40px !important;
    }
    
    .footer-brand {
        max-width: 100% !important;
    }
    
    .footer-nav {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .footer-column {
        gap: 12px !important;
    }
}

/* 小屏手机 (小于480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .slogan-container h2 {
        font-size: 1.3rem !important;
    }
    
    .section-header-light h2 {
        font-size: 1.5rem !important;
    }
    
    .spotlight-content h2 {
        font-size: 1.6rem !important;
    }
    
    .article-title {
        font-size: 1.6rem !important;
    }
}


/* ========================================
   移动端导航栏汉堡菜单
   ======================================== */
@media (max-width: 768px) {
    /* 汉堡菜单按钮 */
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        gap: 5px;
        z-index: 1001;
    }
    
    .mobile-menu-btn span {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* 移动端菜单遮罩 */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* 移动端侧边菜单 */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 80vw;
        height: 100vh;
        background: #fff;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 80px 24px 40px;
        overflow-y: auto;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-menu.active {
        transform: translateX(0);
    }
    
    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-menu-nav a {
        display: block;
        padding: 16px;
        color: #1D1D1F;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 12px;
        transition: background 0.2s;
    }
    
    .mobile-menu-nav a:hover {
        background: #f5f5f7;
    }
    
    .mobile-menu-divider {
        height: 1px;
        background: #e5e5ea;
        margin: 16px 0;
    }
    
    .mobile-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }
    
    .mobile-menu-actions a {
        display: block;
        padding: 16px;
        text-align: center;
        border-radius: 100px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }
    
    .mobile-menu-actions .btn-primary {
        background: #000;
        color: #fff;
    }
    
    .mobile-menu-actions .btn-secondary {
        background: #f5f5f7;
        color: #1D1D1F;
    }
}

/* 桌面端隐藏汉堡菜单 */
@media (min-width: 769px) {
    .mobile-menu-btn,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ========================================
   通用移动端工具类
   ======================================== */
@media (max-width: 768px) {
    /* 隐藏桌面端元素 */
    .desktop-only {
        display: none !important;
    }
    
    /* 显示移动端元素 */
    .mobile-only {
        display: block !important;
    }
    
    /* 移动端全宽 */
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 移动端居中 */
    .mobile-center {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 移动端隐藏滚动条 */
    .mobile-hide-scrollbar {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .mobile-hide-scrollbar::-webkit-scrollbar {
        display: none !important;
    }
    
    /* 安全区域适配 (iPhone X+) */
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }
    
    .safe-area-top {
        padding-top: env(safe-area-inset-top, 20px) !important;
    }
}

/* 桌面端隐藏移动端元素 */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* ========================================
   触摸优化
   ======================================== */
@media (max-width: 768px) {
    /* 增大触摸目标 */
    button, a, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 禁用双击缩放 */
    * {
        touch-action: manipulation;
    }
    
    /* 移除点击高亮 */
    a, button {
        -webkit-tap-highlight-color: transparent;
    }
}


/* ========================================
   Index 页面额外优化
   ======================================== */
@media (max-width: 768px) {
    /* 资源卡片网格 - 改为单列 */
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .resource-card {
        padding: 20px !important;
    }
    
    .resource-art {
        height: 160px !important;
        border-radius: 12px !important;
    }
    
    .resource-card h3 {
        font-size: 1.2rem !important;
        margin: 16px 0 8px !important;
    }
    
    .resource-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* App 卡片优化 */
    .apps-track .app-card {
        width: 260px !important;
        min-width: 260px !important;
        height: 360px !important;
    }
    
    .app-card h3 {
        font-size: 1.2rem !important;
    }
    
    .app-card p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    /* Spotlight 区域优化 */
    .spotlight-content h2 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    
    .spotlight-content p {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .resources-grid {
        gap: 16px !important;
    }
    
    .resource-art {
        height: 140px !important;
    }
    
    .resource-card h3 {
        font-size: 1.1rem !important;
    }
    
    .apps-track .app-card {
        width: 240px !important;
        min-width: 240px !important;
        height: 340px !important;
    }
}

/* ========================================
   骨架屏移动端适配
   ======================================== */
@media (max-width: 768px) {
    .skeleton-card {
        border-radius: 14px !important;
    }
    
    .skeleton-thumbnail {
        border-radius: 14px 14px 0 0 !important;
    }
    
    .skeleton-info {
        padding: 10px 12px !important;
    }
    
    .skeleton-title {
        height: 14px !important;
    }
    
    .skeleton-meta {
        height: 10px !important;
    }
    
    /* 页面切换淡入效果 - 移动端更快 */
    .grid-fade-in {
        animation: gridFadeIn 0.2s ease-out !important;
    }
    
    .content-fade-in {
        animation: contentFadeIn 0.2s ease-out !important;
    }
    
    /* 表格行淡入 */
    .table-fade-in tr {
        animation: rowFadeIn 0.15s ease-out !important;
    }
}

@media (max-width: 480px) {
    .skeleton-card {
        border-radius: 12px !important;
    }
    
    .skeleton-thumbnail {
        border-radius: 12px 12px 0 0 !important;
    }
    
    .skeleton-info {
        padding: 8px 10px !important;
    }
    
    .skeleton-title {
        height: 12px !important;
    }
    
    .skeleton-meta {
        height: 8px !important;
    }
}