/* ====== 四宫格图片组件 ====== */
/* 使用 CSS 变量接收 render.php 传入的间距 / 圆角 / 比例；自动适配主题深色模式 */

.quad-images {
    margin-bottom: 16px;
    width: 100%;
}

/* 桌面端：四列横排 */
.quad-images__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--qi-gap, 12px);
    align-items: stretch;
}

.quad-images__cell {
    min-width: 0; /* 防止图片溢出网格 */
    display: flex; /* 让 link 充满 cell */
}

.quad-images__link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* 当未填链接时，禁止指针手势，保留普通 span 行为 */
.quad-images__link--static {
    cursor: default;
}

/* 比例容器：双保险
   - 主：现代 aspect-ratio（Chrome 88+ / Safari 15+ / Edge 88+ / Firefox 89+）
   - 备：padding-top 兜底（兼容老浏览器 + 某些 grid 子项绝对定位场景）
*/
.quad-images__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--qi-ratio-num, 3 / 2);
    overflow: hidden;
    border-radius: var(--qi-radius, 8px);
    background: var(--bg-secondary); /* 加载前占位 */
}

@supports not (aspect-ratio: 1 / 1) {
    .quad-images__frame {
        height: 0;
        padding-top: var(--qi-ratio-pad, 66.6667%);
    }
    .quad-images__img,
    .quad-images__placeholder {
        position: absolute;
    }
}

.quad-images__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: inherit;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 仅在有超链接时悬停放大；无链接时禁止变形 */
.quad-images__link:hover .quad-images__img {
    transform: scale(1.04);
    opacity: 0.92;
}

/* 空格子占位：让用户直观看到组件已挂载 */
.quad-images__cell--empty .quad-images__frame {
    background: var(--bg-hover);
    border: 1px dashed var(--border-hover);
}

.quad-images__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
}

/* 移动端：保持四列横排，不切换为 2 列或单列
   原因：切换列数 + object-fit: cover 会裁切图片构图；
        统一四列 + 比例与 PC 一致 = 不裁切。
*/
@media (max-width: 768px) {
    .quad-images {
        max-width: var(--qi-mobile-max-width, none);
        margin-left: auto;
        margin-right: auto;
    }
    /* 保持四列横排 */
    .quad-images__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 极窄屏：四列横排更紧凑，仅缩小间距避免溢出 */
@media (max-width: 380px) {
    .quad-images__grid {
        gap: max(4px, var(--qi-gap, 12px) / 2);
    }
}