/**
 * MFonts幻灯片预加载样式 - 防止布局偏移
 * 
 * 这个文件包含关键的布局稳定性样式，必须在主样式之前加载
 * 确保幻灯片容器在任何情况下都保持正确的高度
 *
 * @package cxzzt-clean
 * @since 1.1.1
 * @priority critical
 */

/* === 关键布局锁定样式 - 最高优先级 === */

/* 基础容器高度锁定 - 防止任何外部样式覆盖 */
.cxz-mfonts-slider {
    /* 使用!important确保高度不被任何样式覆盖 */
    height: var(--cxz-slider-height-pc, 420px) !important;
    min-height: var(--cxz-slider-height-pc, 420px) !important;
    max-height: var(--cxz-slider-height-pc, 420px) !important;
    
    /* 基础布局属性 */
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    
    /* 防止内容撑开容器 */
    display: block !important;
    contain: layout style !important;
    
    /* 默认背景，防止空白闪烁 */
    background-color: #f8f9fa;
    
    /* 确保在所有状态下都保持稳定 */
    visibility: visible !important;
}

/* 移动端高度锁定 */
@media (max-width: 768px) {
    .cxz-mfonts-slider {
        height: var(--cxz-slider-height-mb, 260px) !important;
        min-height: var(--cxz-slider-height-mb, 260px) !important;
        max-height: var(--cxz-slider-height-mb, 260px) !important;
    }
}

/* === Splide核心结构稳定性 === */

/* 轨道容器 - 防止高度变化 */
.cxz-mfonts-slider .splide__track {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* 幻灯片列表 - 确保填满容器 */
.cxz-mfonts-slider .splide__list {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

/* 单个幻灯片 - 防止尺寸变化 */
.cxz-mfonts-slider .splide__slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 图片容器 - 确保填满幻灯片 */
.cxz-mfonts-slider .splide__slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 防止图片加载时的布局偏移 */
    background-color: #f0f0f0;
}

/* === 覆盖Splide默认的visibility控制 === */

/* 确保容器始终可见，防止Splide的隐藏/显示导致闪烁 */
.cxz-mfonts-slider.splide {
    visibility: visible !important;
}

.cxz-mfonts-slider.splide:not(.is-initialized) {
    visibility: visible !important;
}

.cxz-mfonts-slider.splide.is-initialized {
    visibility: visible !important;
}

/* === 加载状态优化 === */

/* 加载中的占位效果 - 保持高度稳定 */
.cxz-mfonts-slider:not(.is-initialized)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: cxz-loading-shimmer 1.5s infinite;
    z-index: 1;
}

@keyframes cxz-loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 初始化完成后移除加载效果 */
.cxz-mfonts-slider.is-initialized::before {
    display: none;
}

/* === 深色模式适配 === */
.theme-dark .cxz-mfonts-slider {
    background-color: #1a1a1a;
}

.theme-dark .cxz-mfonts-slider:not(.is-initialized)::before {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* === 无障碍访问 - 减少动画 === */
@media (prefers-reduced-motion: reduce) {
    .cxz-mfonts-slider:not(.is-initialized)::before {
        animation: none !important;
        background: #f0f0f0;
    }
    
    .theme-dark .cxz-mfonts-slider:not(.is-initialized)::before {
        background: #2a2a2a;
    }
}