/*
 * 金雷电机公司官网样式文件
 * 版本: 1.0.0
 * 日期: 2026-03-08
 * 描述: 包含网站所需的自定义工具类和组件样式
 */

@layer utilities {

    /*
     * 性能优化工具类
     * 作用: 自动控制元素的内容可见性，提高页面渲染性能
     */
    .content-auto {
        content-visibility: auto;
    }

    /*
     * 文本阴影效果
     * 作用: 为文本添加阴影，增强视觉层次感
     * 参数: 水平偏移 2px, 垂直偏移 2px, 模糊半径 4px, 阴影颜色 rgba(0, 0, 0, 0.3)
     */
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    /*
     * 蓝色渐变背景
     * 作用: 创建从深蓝色到亮蓝色的渐变背景效果
     * 应用: 主要用于英雄区背景
     */
    .bg-gradient-blue {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    }

    /*
     * 基础按钮样式
     * 作用: 为所有按钮提供统一的基础样式
     */
    .btn {
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        transition: all 300ms ease;
        text-align: center;
    }

    /*
     * 主要按钮样式
     * 作用: 用于重要的操作按钮，如"查看产品"
     * 颜色: 橙色背景 (#f97316)，白色文字
     * 交互: 悬停时背景色变为深橙色 (#ea580c)
     */
    .btn-primary {
        background-color: #f97316;
        color: white;
    }

    .btn-primary:hover {
        background-color: #ea580c;
    }

    /*
     * 次要按钮样式
     * 作用: 用于次要操作按钮，如"联系我们"
     * 特点: 透明背景，白色边框，白色文字
     * 交互: 悬停时背景变为白色，文字变为深蓝色
     */
    .btn-secondary {
        background-color: transparent;
        border: 2px solid white;
        color: white;
    }

    .btn-secondary:hover {
        background-color: white;
        color: #1e40af;
    }

    /*
     * 轮廓按钮样式
     * 作用: 用于"查看全部产品"等按钮
     * 颜色: 深蓝色背景 (#1e40af)，白色文字
     * 交互: 悬停时背景色变为亮蓝色 (#3b82f6)
     */
    .btn-outline {
        background-color: #1e40af;
        color: white;
        display: inline-block;
    }

    .btn-outline:hover {
        background-color: #3b82f6;
    }

    /*
     * 主要链接样式
     * 作用: 用于产品卡片中的"查看详情"链接
     * 颜色: 深蓝色文字 (#1e40af)
     * 布局: 弹性布局，垂直居中对齐
     * 交互: 悬停时文字颜色变为亮蓝色 (#3b82f6)
     */
    .link-primary {
        color: #1e40af;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    .link-primary:hover {
        color: #3b82f6;
    }
}

.imgs01 {
    width: 80%;
    height: 16rem; /* 固定高度，保持一致的卡片布局 */
    object-fit: cover; /* 保持图片比例，填充整个容器 */
}
.imgs02 {
    width: 100%;
    height: 35rem; /* 固定高度，保持一致的卡片布局 */
    object-fit: cover; /* 保持图片比例，填充整个容器 */
}
.imgs03 {
    width: 100%;
    height: 15rem; /* 固定高度，保持一致的卡片布局 */
    object-fit: cover; /* 保持图片比例，填充整个容器 */
}