/**
 * 手机端详情页专用样式
 * 使用严格的媒体查询，只影响≤768px设备
 * 确保不影响PC端布局
 */

/* === 手机端专用样式 - 严格隔离 === */
@media (max-width: 768px) {
    
    /* === 移除tool-detail-layout层，只保留main-content间距 === */
    
    /* 第一层：main-content - 提供统一的左右间距 */
    .main-content {
        padding: 0 12px !important; /* 统一的外边距 */
        margin-top: 80px !important; /* 保持导航栏间距 */
    }
    
    /* 第二层：container - 移除所有padding */
    .container {
        padding: 0 !important; /* 移除额外padding */
        max-width: none !important; /* 手机端不限制宽度 */
    }
    
    /* detail容器 */
    #detail-container {
        padding: 0 !important; /* 移除额外padding */
    }
    
    /* === tool-detail-layout透明化 === */
    /* 使其成为透明的布局容器，不产生任何间距 */
    .tool-detail-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* === tool-detail-main透明化 === */
    .tool-detail-main {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: none !important;
        order: 1 !important;
    }
    
    /* === tool-detail-sidebar透明化 === */
    .tool-detail-sidebar {
        width: 100% !important;
        padding: 0 !important;
        margin: 30px 0 0 0 !important;
        flex: none !important;
        order: 2 !important;
    }
    
    /* === 隐藏精选工具模块 - 手机端专用 === */
    .featured-section,
    .featured-tools-section,
    #featured-tools-container,
    .tool-detail-sidebar .featured-section,
    .detail-section.featured-section {
        display: none !important;
    }
    
    /* === tool-sections-container透明化 === */
    .tool-sections-container {
        padding: 0 !important; /* 移除内侧padding，改用main-content的间距 */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* === section-content透明化 === */
    .section-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* === 图片容器全宽显示 === */
    .tool-image-container-new {
        width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        border-radius: 0 !important;
        order: 3 !important;
    }
    
    /* === 工具标题间距优化 === */
    .tool-title {
        margin: 15px 0 10px 0 !important;
        padding: 0 !important;
    }
    
    /* === 工具详情描述区域间距优化 === */
    .tool-detail-sections {
        margin-top: 15px !important;
        padding: 0 !important;
    }
    
    /* === 相关推荐卡片访问按钮样式优化 === */
    #recommended-tools-container .tool-card__visit-btn {
        padding: 4px 8px !important; /* 减少左右内间距从10px改为8px */
        min-width: auto !important; /* 移除最小宽度限制 */
        width: auto !important; /* 宽度自适应内容 */
        font-size: 13px !important; /* 稍微减小字体大小 */
        gap: 4px !important; /* 减小图标和文字的间距 */
    }
    
    /* === 推荐工具标题间距 === */
    .recommended-section h3 {
        margin: 20px 0 15px 0 !important;
    }
    
    /* === 精选工具卡片访问按钮样式优化 === */
    .featured-section .tool-card__visit-btn,
    #featured-tools-container .tool-card__visit-btn,
    .tool-detail-sidebar .featured-section .tool-card__visit-btn {
        padding: 4px 8px !important; /* 减少左右内间距 */
        min-width: auto !important; /* 移除最小宽度限制 */
        width: fit-content !important; /* 宽度适应内容 */
        font-size: 13px !important; /* 稍微减小字体大小 */
        gap: 4px !important; /* 减小图标和文字的间距 */
        flex-shrink: 0 !important; /* 防止按钮被压缩 */
        max-width: none !important; /* 移除最大宽度限制 */
    }
    
    /* 确保按钮容器不会强制按钮拉伸 */
    .featured-section .tool-card__actions,
    #featured-tools-container .tool-card__actions,
    .tool-detail-sidebar .featured-section .tool-card__actions {
        width: auto !important;
        justify-content: flex-start !important;
    }
}

/* === PC端确保精选工具正常显示 === */
@media (min-width: 769px) {
    .featured-section,
    .featured-tools-section,
    #featured-tools-container,
    .tool-detail-sidebar .featured-section,
    .detail-section.featured-section {
        display: block !important;
    }
    
    #featured-tools-container {
        display: flex !important;
        flex-direction: column !important;
    }
}