/**
 * Moedes 图片布局专用样式
 * 专注于图片排列和显示逻辑
 */

/* ============================================
   图片布局核心功能
   ============================================ */

/* 预隐藏多图容器，防止初始大图显示 */
.imgbox-container.lists-imgs:not(.count-1):not(.layout-ready) {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

/* 布局就绪后立即显示 */
.imgbox-container.lists-imgs:not(.count-1).layout-ready {
    opacity: 1;
    visibility: visible;
    transition: none;
}

/* 基础布局 - 水平排列 */
.imgbox-container.lists-imgs:not(.count-1) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: visible;
    width: auto;
    max-width: none;
    align-items: flex-start;
    justify-content: flex-start;
}

/* 图片容器 */
.imgbox-container.lists-imgs:not(.count-1) > span {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-grow: 0;
    display: block;
    border-radius: 4px;
    overflow: visible;
    position: relative;
    padding-bottom: 0;
    margin: 0;
    width: auto;
    height: auto;
}

/* 图片样式 - 等比例缩放，不裁剪 */
.imgbox-container.lists-imgs:not(.count-1) > span > img {
    position: static;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    background-color: transparent;
    flex-shrink: 0;
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
}

/* 防止任何闪烁和变形 */
.imgbox-container.lists-imgs:not(.count-1),
.imgbox-container.lists-imgs:not(.count-1) > span,
.imgbox-container.lists-imgs:not(.count-1) > span > img {
    transition: none;
    animation: none;
}

/* 图片容器优化样式 */
html body .imgbox-container.lists-imgs:not(.count-1) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: visible;
    width: auto;
    max-width: none;
    align-items: flex-start;
    justify-content: flex-start;
}

/* 强制覆盖动态添加的样式 */
.imgbox-container.lists-imgs:not(.count-1)[style*="transform"] {
    transform: none !important;
}

.imgbox-container.lists-imgs:not(.count-1)[style*="height"] {
    height: auto !important;
}

.imgbox-container.lists-imgs:not(.count-1)[style*="margin-bottom"] {
    margin-bottom: 10px !important;
}

/* 阻止容器缩放和负边距 */
body .imgbox-container.lists-imgs,
html .imgbox-container.lists-imgs,
.imgbox-container.lists-imgs[style] {
    transform: none !important;
    margin-bottom: 10px !important;
    scale: none !important;
}

/* 强制等比例缩放，最高优先级 - 永不裁剪 */
body .imgbox-container.lists-imgs:not(.count-1) > span > img,
body .imgbox-container.lists-imgs:not(.count-1) > span > img.fit-cover,
html .imgbox-container.lists-imgs:not(.count-1) > span > img,
html .imgbox-container.lists-imgs:not(.count-1) > span > img.fit-cover,
.imgbox-container.lists-imgs:not(.count-1) > span > img[style],
.imgbox-container.lists-imgs:not(.count-1) > span > img.fit-cover[style],
.imgbox-container.lists-imgs span img.fit-cover {
    object-fit: contain !important;
    object-position: center !important;
    max-width: 200px !important;
    max-height: 150px !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--moedes-border-radius, 4px) !important;
}

/* 特别针对移动端的fit-cover类 */
@media (max-width: 768px) {
    .imgbox-container.lists-imgs span img.fit-cover {
        max-width: 150px !important;
        max-height: 100px !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .imgbox-container.lists-imgs span img.fit-cover {
        max-width: 180px !important;
        max-height: 120px !important;
    }
}

@media (max-width: 480px) {
    .imgbox-container.lists-imgs span img.fit-cover {
        max-width: 120px !important;
        max-height: 80px !important;
    }
}

/* 终极强制覆盖 - 处理所有可能的情况 */
body .imgbox-container.lists-imgs span img,
html body .imgbox-container.lists-imgs span img,
.imgbox-container.lists-imgs span img,
.imgbox-container.lists-imgs span img.fit-cover,
.imgbox-container.lists-imgs:not(.count-1) span img,
.imgbox-container.lists-imgs:not(.count-1) span img.fit-cover {
    object-fit: contain !important;
    object-position: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 150px !important;
    border-radius: 4px !important;
}

/* 阻止内联样式覆盖 - 最高优先级 */
.imgbox-container.lists-imgs[style] {
    transform: none !important;
    scale: 1 !important;
    margin-bottom: 10px !important;
}

.imgbox-container.lists-imgs span[style] {
    transform: none !important;
    scale: 1 !important;
}

.imgbox-container.lists-imgs span img[style] {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 150px !important;
    transform: none !important;
    scale: 1 !important;
}