/**
 * 布局稳定性样式
 *
 * 为动态内容预留空间，防止布局偏移（CLS）
 *
 * @package Laifen_Russia
 * @since 1.0.0
 */

/* ==========================================================================
   动态内容占位符
   ========================================================================== */

/**
 * 通用占位符样式
 * 为动态加载的内容（广告、嵌入内容等）预留空间
 */
.layout-stability-placeholder {
    position: relative;
    width: 100%;
    background-color: #f5f5f5;
    overflow: hidden;
}

.layout-stability-placeholder__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 广告占位符 */
.layout-stability-placeholder--ad {
    background-color: #f9f9f9;
    border: 1px dashed #ddd;
}

/* 嵌入内容占位符 */
.layout-stability-placeholder--embed {
    background-color: #fafafa;
}

/* 动态内容占位符 */
.layout-stability-placeholder--dynamic {
    background-color: #f5f5f5;
}

/* ==========================================================================
   图片容器 - 使用 aspect-ratio 保持宽高比
   ========================================================================== */

/**
 * 为图片容器添加 aspect-ratio 支持
 * 防止图片加载时的布局偏移
 */
.wp-block-image img,
.woocommerce-product-gallery__image img,
.product-image img,
.post-thumbnail img {
    height: auto;
    max-width: 100%;
}

/* 支持 aspect-ratio 的浏览器 */
@supports (aspect-ratio: 1 / 1) {
    .wp-block-image img[width][height],
    .woocommerce-product-gallery__image img[width][height],
    .product-image img[width][height],
    .post-thumbnail img[width][height] {
        aspect-ratio: attr(width) / attr(height);
        height: auto;
    }
}

/* ==========================================================================
   侧边栏和小工具区域
   ========================================================================== */

/**
 * 为侧边栏小工具预留最小高度
 * 防止内容加载时的布局偏移
 */
.widget-area .widget {
    min-height: 100px;
}

/* 特定小工具类型的最小高度 */
.widget_search {
    min-height: 80px;
}

.widget_recent_entries,
.widget_recent_comments,
.widget_categories,
.widget_archive {
    min-height: 150px;
}

.widget_text,
.widget_custom_html {
    min-height: 100px;
}

/* ==========================================================================
   WooCommerce 产品相关
   ========================================================================== */

/**
 * 产品卡片最小高度
 * 防止产品加载时的布局偏移
 */
.woocommerce ul.products li.product {
    min-height: 350px;
}

/**
 * 产品图片容器
 * 使用 padding-bottom 技巧保持宽高比
 */
.woocommerce-product-gallery__wrapper {
    position: relative;
}

.woocommerce-product-gallery__image {
    position: relative;
}

/* ==========================================================================
   Hero Slider 和轮播图
   ========================================================================== */

/**
 * Hero Slider 容器最小高度
 * 防止轮播图加载时的布局偏移
 */
.hero-slider {
    min-height: 400px;
}

@media (min-width: 768px) {
    .hero-slider {
        min-height: 500px;
    }
}

@media (min-width: 1024px) {
    .hero-slider {
        min-height: 600px;
    }
}

/**
 * 轮播图项目
 */
.hero-slider__slide {
    min-height: inherit;
}

/* ==========================================================================
   嵌入内容（iframe、视频等）
   ========================================================================== */

/**
 * 响应式嵌入容器
 * 使用 padding-bottom 技巧保持 16:9 宽高比
 */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* WordPress 嵌入块 */
.wp-block-embed {
    position: relative;
}

.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   加载状态
   ========================================================================== */

/**
 * 加载指示器
 * 在动态内容加载时显示
 */
.layout-stability-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: layout-stability-spin 1s linear infinite;
}

@keyframes layout-stability-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   移动端优化
   ========================================================================== */

@media (max-width: 767px) {
    /* 减少移动端的最小高度，避免占用过多空间 */
    .widget-area .widget {
        min-height: 80px;
    }

    .woocommerce ul.products li.product {
        min-height: 300px;
    }

    .hero-slider {
        min-height: 300px;
    }
}

/* ==========================================================================
   辅助类
   ========================================================================== */

/**
 * 防止布局偏移的通用类
 */
.prevent-cls {
    contain: layout;
}

/**
 * 为元素添加固定宽高比
 */
.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-3-2 {
    aspect-ratio: 3 / 2;
}

/* 回退方案（不支持 aspect-ratio 的浏览器） */
@supports not (aspect-ratio: 1 / 1) {
    .aspect-ratio-16-9 {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
    }

    .aspect-ratio-4-3 {
        position: relative;
        padding-bottom: 75%;
        height: 0;
    }

    .aspect-ratio-1-1 {
        position: relative;
        padding-bottom: 100%;
        height: 0;
    }

    .aspect-ratio-3-2 {
        position: relative;
        padding-bottom: 66.67%;
        height: 0;
    }

    .aspect-ratio-16-9 > *,
    .aspect-ratio-4-3 > *,
    .aspect-ratio-1-1 > *,
    .aspect-ratio-3-2 > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}