/* 工具页面样式 */

/* 工具页面标题区域样式 */
.tools-hero {  /* 工具页面标题区域 */
    height: 150px !important;  /* 设置固定高度为150px，使用!important覆盖section-bg的min-height */
    min-height: 150px !important;  /* 覆盖section-bg的min-height设置 */
    display: flex;  /* 使用flexbox布局 */
    flex-direction: column;  /* 垂直排列 */
    justify-content: center;  /* 垂直居中对齐 */
    align-items: center;  /* 水平居中对齐 */
    padding: 30px 0 10px;  /* 内边距：上30px，下10px */
    text-align: center;  /* 文字居中对齐 */
}

.tools-hero h1 {  /* 工具页面主标题 */
    font-size: 2.5rem;  /* 字体大小2.5rem */
    font-weight: 700;  /* 字体粗细700 */
    color: #2c3e50;  /* 文字颜色深蓝灰色 */
    margin-bottom: 10px;  /* 下边距10px */
    animation: fadeInUp 1s ease-out;  /* 淡入向上动画，持续1秒 */
}

.tools-hero p {  /* 工具页面副标题 */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    color: #7f8c8d;  /* 文字颜色灰色 */
    animation: fadeInUp 1s ease-out 0.2s both;  /* 淡入向上动画，延迟0.2秒 */
}

/* 工具网格区域样式 */
.tools-grid-section {  /* 工具网格区域 */
    padding: 20px 0;  /* 内边距：上下20px */
}

.tools-grid {  /* 工具网格容器 */
    display: grid;  /* 使用grid布局 */
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));  /* 自适应列，最小宽度225px */
    gap: 22px;  /* 网格间距22px */
    max-width: 900px;  /* 最大宽度900px */
    margin: 0 auto;  /* 水平居中 */
    padding: 0 20px;  /* 左右内边距20px */
}

/* 工具卡片样式 */
.tool-card {  /* 工具卡片 */
    background: white;  /* 背景色白色 */
    border-radius: 11px;  /* 圆角11px */
    padding: 22px;  /* 内边距22px */
    text-align: center;  /* 文字居中对齐 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* 过渡动画 */
    height: 320px;  /* 桌面端固定高度 */
    display: flex;  /* 使用flexbox布局 */
    flex-direction: column;  /* 垂直排列 */
    justify-content: flex-start;  /* 内容从顶部开始排列 */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

.tool-card:hover {  /* 工具卡片悬停效果 */
    transform: translateY(-5px);  /* 向上移动5px */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);  /* 增强阴影效果 */
}

/* 工具图标样式 */
.tool-icon {  /* 工具图标容器 */
    width: 60px;  /* 宽度60px */
    height: 60px;  /* 高度60px */
    background: linear-gradient(135deg, #3498db, #2980b9);  /* 蓝色渐变背景 */
    border-radius: 50%;  /* 圆形 */
    display: flex;  /* 使用flexbox布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    margin: 0 auto 15px;  /* 水平居中，下边距15px */
    flex-shrink: 0;  /* 防止被压缩 */
}

.tool-icon i {  /* 工具图标 */
    font-size: 1.5rem;  /* 图标大小1.5rem */
    color: white;  /* 图标颜色白色 */
}

/* 工具卡片标题样式 */
.tool-card h3 {  /* 工具卡片标题 */
    font-size: 1.6rem;  /* 字体大小1.6rem */
    font-weight: 600;  /* 字体粗细600 */
    color: #2c3e50;  /* 文字颜色深蓝灰色 */
    margin-bottom: 11px;  /* 下边距11px */
    flex-shrink: 0;  /* 防止被压缩 */
}

/* 工具卡片描述样式 */
.tool-card p {  /* 工具卡片描述 */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    color: #7f8c8d;  /* 文字颜色灰色 */
    line-height: 1.6;  /* 行高1.6 */
    margin-bottom: 19px;  /* 下边距19px */
    flex-grow: 1;  /* 让描述文字占据剩余空间 */
    display: flex;  /* 使用flexbox布局 */
    align-items: flex-start;  /* 描述文字从顶部开始对齐 */
    justify-content: center;  /* 水平居中 */
}

/* 工具链接按钮样式 */
.tool-link {  /* 工具链接按钮 */
    display: inline-block;  /* 行内块元素 */
    background: linear-gradient(135deg, #3498db, #2980b9);  /* 蓝色渐变背景 */
    color: white;  /* 文字颜色白色 */
    text-decoration: none;  /* 去除下划线 */
    padding: 9px 22px;  /* 内边距：上下9px，左右22px */
    border-radius: 19px;  /* 圆角19px */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    font-weight: 500;  /* 字体粗细500 */
    transition: all 0.3s ease;  /* 过渡动画 */
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);  /* 蓝色阴影 */
    margin-top: auto;  /* 按钮自动推到底部 */
    align-self: center;  /* 按钮居中对齐 */
    flex-shrink: 0;  /* 防止被压缩 */
}

.tool-link:hover {  /* 工具链接按钮悬停效果 */
    background: linear-gradient(135deg, #2980b9, #1f4e79);  /* 深蓝色渐变背景 */
    transform: translateY(-2px);  /* 向上移动2px */
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);  /* 增强阴影效果 */
}

/* 响应式设计 */
@media (max-width: 768px) {  /* 平板和手机端样式 */
    .tools-hero {  /* 工具页面标题区域 */
        height: 120px !important;  /* 移动端设置固定高度为120px，使用!important覆盖 */
        min-height: 120px !important;  /* 移动端覆盖section-bg的min-height设置 */
        padding: 25px 0 15px;  /* 内边距：上25px，下15px */
    }
    
    .tools-hero h1 {  /* 工具页面主标题 */
        font-size: 2rem;  /* 字体大小2rem */
    }
    
    .tools-hero p {  /* 工具页面副标题 */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
    
    .tools-grid {  /* 工具网格容器 */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 最小宽度200px */
        gap: 18px;  /* 网格间距18px */
        padding: 0 15px;  /* 左右内边距15px */
    }
    
    .tool-card {  /* 工具卡片 */
        padding: 18px;  /* 内边距18px */
        height: 300px;  /* 移动端高度300px */
    }
    
    .tool-card h3 {  /* 工具卡片标题 */
        font-size: 1.4rem;  /* 字体大小1.4rem */
    }
    
    .tool-card p {  /* 工具卡片描述 */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
    
    .tool-link {  /* 工具链接按钮 */
        padding: 8px 18px;  /* 内边距：上下8px，左右18px */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
}

@media (max-width: 480px) {  /* 小屏幕手机端样式 */
    .tools-grid {  /* 工具网格容器 */
        grid-template-columns: 1fr;  /* 单列布局 */
        gap: 15px;  /* 网格间距15px */
        padding: 0 10px;  /* 左右内边距10px */
    }
    
    .tool-card {  /* 工具卡片 */
        height: 280px;  /* 小屏幕高度280px */
    }
    
    .tool-card h3 {  /* 工具卡片标题 */
        font-size: 1.3rem;  /* 字体大小1.3rem */
    }
    
    .tool-card p {  /* 工具卡片描述 */
        font-size: 1rem;  /* 字体大小1rem */
    }
}

/* 动画效果 */
@keyframes fadeInUp {  /* 淡入向上动画 */
    from {  /* 动画开始状态 */
        opacity: 0;  /* 透明度0 */
        transform: translateY(30px);  /* 向下偏移30px */
    }
    to {  /* 动画结束状态 */
        opacity: 1;  /* 透明度1 */
        transform: translateY(0);  /* 回到原位置 */
    }
}

/* 工具卡片进入动画 */
.tool-card {  /* 工具卡片 */
    animation: fadeInUp 0.6s ease-out;  /* 淡入向上动画，持续0.6秒 */
}

.tool-card:nth-child(1) { animation-delay: 0.1s; }  /* 第1个卡片延迟0.1秒 */
.tool-card:nth-child(2) { animation-delay: 0.2s; }  /* 第2个卡片延迟0.2秒 */
.tool-card:nth-child(3) { animation-delay: 0.3s; }  /* 第3个卡片延迟0.3秒 */
.tool-card:nth-child(4) { animation-delay: 0.4s; }  /* 第4个卡片延迟0.4秒 */
.tool-card:nth-child(5) { animation-delay: 0.5s; }  /* 第5个卡片延迟0.5秒 */
.tool-card:nth-child(6) { animation-delay: 0.6s; }  /* 第6个卡片延迟0.6秒 */
.tool-card:nth-child(7) { animation-delay: 0.7s; }  /* 第7个卡片延迟0.7秒 */
.tool-card:nth-child(8) { animation-delay: 0.8s; }  /* 第8个卡片延迟0.8秒 */
.tool-card:nth-child(9) { animation-delay: 0.9s; }  /* 第9个卡片延迟0.9秒 */
.tool-card:nth-child(10) { animation-delay: 1.0s; }  /* 第10个卡片延迟1.0秒 */
.tool-card:nth-child(11) { animation-delay: 1.1s; }  /* 第11个卡片延迟1.1秒 */
.tool-card:nth-child(12) { animation-delay: 1.2s; }  /* 第12个卡片延迟1.2秒 */