/* ===== 企业资质证书展示样式文件 ===== */
/* 功能：确保不同尺寸的证书图片完整显示，不被裁剪或变形 */
/* 作者：AI助手 | 创建时间：2025年 */

/* ===== 证书网格容器样式 ===== */
.certificates-grid {
    /* 使用CSS Grid实现3列均匀分布 */
    display: grid;
    /* 固定3列，每列等宽 */
    grid-template-columns: repeat(4, 1fr);
    /* 网格间距：列间距20px */
    gap: 20px;
    /* 容器内边距 */
    padding: 20px 0;
    /* 最大宽度限制 */
    max-width: 1200px;
    margin: 0 auto;
}

/* 证书项目容器 - 极简样式 */
.certificate-item {
    position: relative;
    overflow: hidden;
}

/* 证书包装器 */
.certificate-wrapper {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

/* 证书图片样式 - 完全无背景无边框 */
.certificate-image {
    width: 100%;
    height: 300px;
    object-fit: contain; /* 确保证书完整显示，不被裁剪 */
    object-position: center;
    background: transparent; /* 透明背景 */
    border: none; /* 无边框 */
}

/* 图片加载状态 - 无背景 */
.certificate-image[data-loading="true"] {
    background: transparent;
}

.certificate-image[data-error="true"] {
    background: transparent;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        max-width: 800px;
    }
    
    .certificate-image {
        height: 250px;
    }
    
    .certificate-wrapper {
        min-height: 250px;
    }
}

@media (max-width: 576px) {
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px 10px;
        max-width: 100%;
    }
    
    .certificate-image {
        height: 220px;
    }
    
    .certificate-wrapper {
        min-height: 220px;
    }
}

/* ===== 图片加载状态样式 ===== */
.certificate-image[loading="lazy"] {
    /* 懒加载图片的占位背景 */
    /* background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); */
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* 加载动画 */
@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== 图片错误状态样式 ===== */
.certificate-image:not([src]),
.certificate-image[src=""],
.certificate-image[src*="placeholder"] {
    /* 占位图片样式 */
    background-color: #f8f9fa;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="%23f8f9fa"/><text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="%236c757d" font-family="Arial, sans-serif" font-size="16">证书图片</text></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    min-height: 200px;
}

/* ===== 打印样式 ===== */
@media print {
    .certificates-grid {
        /* 打印时使用简单布局 */
        display: block;
    }
    
    .certificate-item {
        /* 打印时每个证书独占一页或合理分页 */
        page-break-inside: avoid;
        margin-bottom: 20px;
        box-shadow: none;
    }
    
    .certificate-image {
        /* 打印时确保图片质量 */
        max-height: none;
        width: 100%;
    }
}

/* ===== 可访问性增强 ===== */
.certificate-item:focus {
    /* 键盘焦点样式 */
    outline: 2px solid #022e59;
    outline-offset: 2px;
}

/* 减少动画的用户偏好 */
@media (prefers-reduced-motion: reduce) {
    .certificate-item,
    .certificate-image {
        transition: none;
    }
    
    .certificate-item:hover {
        transform: none;
    }
    
    .certificate-image:hover {
        transform: none;
    }
}