/* ============================================================
   Products → Inventory Spotlight (9-Slot Gallery)
   ULTRA-CLEAN version: cards contain ONLY the photo.
   No captions, no badges, no text blocks, no decorative borders.
   Uniform rounded corners, subtle shadow, hover mild lift + zoom.
   ============================================================ */

.gallery-block { position: relative; padding: 0; }
.gallery-head { text-align: center; max-width: 900px; margin: 0 auto 56px; }

/* ========== 3 列网格 ========== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ========== 卡片 = 纯粹的圆角容器（图直接填满） ========== */
.gallery-card {
    margin: 0;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.20);
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 64px -30px rgba(0, 0, 0, 0.30);
}

/* ========== 照片容器：全尺寸填满卡片 ========== */
.gallery-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;        /* 让 9 张图永远尺寸一致，不会因内容差异变高矮 */
    overflow: hidden;
    background: #f5f5f7;
}
.gallery-photo::before,
.gallery-photo::after { display: none !important; }

.gallery-img,
.gallery-fallback-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 保证图填满 4:3 框，不产生缝隙 */
    display: block;
    transition:
        transform 1.0s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
    filter: saturate(1.02) contrast(1.01);
}
.gallery-fallback-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
.gallery-card:hover .gallery-img,
.gallery-card:hover .gallery-fallback-svg {
    transform: scale(1.055);
    filter: saturate(1.10) contrast(1.03);
}

/* ============================================================
   响应式（保留 3 → 2 → 1 列切换）
   ============================================================ */
@media (max-width: 1100px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }
}

@media (max-width: 720px) {
    .gallery-block { margin-top: 90px !important; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
    .gallery-card { border-radius: 16px; }
}

@media (max-width: 520px) {
    .gallery-grid { grid-template-columns: 1fr; gap: 20px; }
    .gallery-card { border-radius: 16px; }
}