/**
 * Dynamic Components Styles
 * 
 * 确保动态组件的布局设置能够正确覆盖区块编辑器的默认样式
 */

/* ============================================
   动态组件基础样式
   ============================================ */

.lt-dynamic-component {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* 确保内联样式（padding, background-color）生效 */
.lt-dynamic-component[style] {
    /* 内联样式优先 - 不需要额外规则 */
    display: block;
}

/* ============================================
   容器基础样式
   
   注意：对齐方式由布局设置的CSS生成器控制
   这里只定义基础结构样式，不硬编码对齐属性
   ============================================ */

/* 所有容器的基础样式 */
.lt-dynamic-component > .container,
.lt-dynamic-component > .container-wide,
.lt-dynamic-component > .container-narrow,
.lt-dynamic-component > .container-custom {
    box-sizing: border-box;
    /* 注意：不设置 width: 100%，否则 margin: auto 无法生效 */
    /* 对齐方式由 CSS 生成器控制 */
}

/* 流体容器需要 100% 宽度 */
.lt-dynamic-component > .container-fluid {
    width: 100%;
    box-sizing: border-box;
}

/* 标准容器 - 仅设置最大宽度 */
.lt-dynamic-component > .container {
    max-width: 1200px;
    padding-left: 15px;
    padding-right: 15px;
}

/* 宽容器 */
.lt-dynamic-component > .container-wide {
    max-width: 1400px;
    padding-left: 15px;
    padding-right: 15px;
}

/* 流体容器 */
.lt-dynamic-component > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* 流体容器内的网格布局全宽 */
.lt-dynamic-component > .container-fluid > .lt-grid-layout {
    width: 100%;
}

/* 全屏容器突破父容器padding限制 */
.lt-dynamic-component > .container-fluid.lt-fullwidth,
.lt-section > .container-fluid.lt-fullwidth {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 全屏容器内的网格也要全宽 - 这是布局设置的职责范围 */
.lt-fullwidth > .lt-grid-layout {
    width: 100% !important;
    max-width: none !important;
}

/* 
 * 注意：布局设置只负责到 grid-layout 这一层（桌子）
 * grid-area 的尺寸由网格编辑器的行高/列宽控制（纸张）
 * wp-block-image/figure/img 的尺寸由区块内容自己控制（画作）
 * 各司其职，互不越权
 */

/* 窄容器 */
.lt-dynamic-component > .container-narrow {
    max-width: 960px;
    padding-left: 15px;
    padding-right: 15px;
}

/* 自定义宽度容器 */
.lt-dynamic-component > .container-custom {
    padding-left: 15px;
    padding-right: 15px;
    /* max-width 通过内联样式设置 */
}

/* ============================================
   区块样式重置
   ============================================ */

/* 动态内容包装器 */
.lt-dynamic-content {
    width: 100%;
}

/* 重置区块组的默认样式 */
.lt-dynamic-component .lt-block-group-reset {
    padding: 0 !important;
    margin: 0 !important;
}

/* 中和对齐类 */
.lt-dynamic-component .lt-block-neutralized {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 移除区块编辑器的默认边距 */
.lt-dynamic-component .wp-block-group,
.lt-dynamic-component .wp-block-columns,
.lt-dynamic-component .wp-block-column,
.lt-dynamic-component .wp-block-cover,
.lt-dynamic-component .wp-block-image {
    margin-top: 0;
    margin-bottom: 0;
}

/* 保留区块内部的间距 */
.lt-dynamic-component .wp-block-group > *:not(:last-child),
.lt-dynamic-component .wp-block-columns > *:not(:last-child) {
    margin-bottom: 1em;
}

/* ============================================
   区块对齐覆盖
   ============================================ */

/* 覆盖 alignwide 和 alignfull */
.lt-dynamic-component .alignwide,
.lt-dynamic-component .alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================
   图片自适应样式
   ============================================ */

/* 确保图片在容器内正确显示 - 自适应而非裁剪 */
.lt-dynamic-component .wp-block-image {
    overflow: visible;
}

.lt-dynamic-component .wp-block-image img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 图片大于容器时缩小到容器宽度 */
.lt-dynamic-component .wp-block-image.size-full img,
.lt-dynamic-component .wp-block-image.size-large img {
    max-width: 100%;
    height: auto;
}

/* 图片小于容器时保持原始尺寸 */
.lt-dynamic-component .wp-block-image:not(.is-resized) img {
    width: auto;
    max-width: 100%;
}

/* 居中对齐的图片 */
.lt-dynamic-component .wp-block-image.aligncenter {
    text-align: center;
}

.lt-dynamic-component .wp-block-image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

/* 左对齐的图片 */
.lt-dynamic-component .wp-block-image.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

/* 右对齐的图片 */
.lt-dynamic-component .wp-block-image.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* 清除浮动 */
.lt-dynamic-content::after {
    content: "";
    display: table;
    clear: both;
}

/* figure 元素样式 */
.lt-dynamic-component figure.wp-block-image {
    margin: 0;
    padding: 0;
}

/* 图片说明文字 */
.lt-dynamic-component .wp-block-image figcaption {
    margin-top: 0.5em;
    font-size: 0.875em;
    color: #666;
    text-align: center;
}

/* 画廊图片 */
.lt-dynamic-component .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.lt-dynamic-component .wp-block-gallery .wp-block-image {
    flex: 1 1 auto;
    max-width: calc(50% - 0.5em);
}

.lt-dynamic-component .wp-block-gallery .wp-block-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Cover 区块中的图片 */
.lt-dynamic-component .wp-block-cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ============================================
   响应式调整
   ============================================ */

@media (max-width: 768px) {
    .lt-dynamic-component > .container,
    .lt-dynamic-component > .container-narrow {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 移动端保持内联样式的padding值 */
    .lt-dynamic-component {
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .lt-dynamic-component > .container,
    .lt-dynamic-component > .container-narrow {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ============================================
   调试样式（仅在WP_DEBUG模式下显示）
   ============================================ */

body.wp-debug .lt-dynamic-component {
    outline: 2px dashed rgba(0, 128, 255, 0.3);
    outline-offset: -2px;
}

body.wp-debug .lt-dynamic-component::after {
    content: "Dynamic: " attr(id);
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 128, 255, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 9999;
    pointer-events: none;
}


/* ============================================
   网格布局样式
   Grid Layout Styles
   Requirements: 9.1, 9.2, 9.3, 9.4
   ============================================ */

/* 网格布局容器 */
.lt-grid-layout {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

/* 网格单元格 */
.lt-grid-cell {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* 单元格内容样式 */
.lt-grid-cell > * {
    max-width: 100%;
}

/* 单元格内的区块内容 */
.lt-grid-cell .wp-block-paragraph,
.lt-grid-cell .wp-block-heading,
.lt-grid-cell .wp-block-list,
.lt-grid-cell .wp-block-image,
.lt-grid-cell .wp-block-cover {
    margin-top: 0;
    margin-bottom: 0;
}

/* 单元格内的图片自适应 */
.lt-grid-cell .wp-block-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 单元格内的 Cover 区块 */
.lt-grid-cell .wp-block-cover {
    min-height: 100%;
}

/* 空单元格样式（前端不显示占位符，但保持结构） */
.lt-grid-cell:empty {
    /* 保持单元格结构，但不显示任何内容 */
}

/* ============================================
   空网格区域处理
   Empty Grid Area Handling
   
   当网格区域没有内容时，隐藏它以避免空白占位
   这解决了组件有网格配置但没有内容时产生的空白问题
   ============================================ */

/* 隐藏空的网格区域 - 使用 :empty 伪类 */
.lt-grid-area:empty {
    display: none !important;
    min-height: 0 !important;
}

/* 
 * 注意：:empty 只匹配完全没有子节点的元素（包括文本节点）
 * 如果区域只有空白字符，需要额外处理
 */

/* 隐藏只包含空白内容的网格区域 */
.lt-grid-area:has(> :only-child:empty),
.lt-grid-area:not(:has(*)) {
    display: none !important;
    min-height: 0 !important;
}

/* ============================================
   网格布局响应式默认行为
   ============================================ */

/* 平板端默认调整 */
@media (max-width: 1024px) and (min-width: 768px) {
    .lt-grid-layout {
        /* 响应式配置通过内联样式覆盖 */
    }
    
    .lt-grid-cell {
        /* 确保单元格在平板端正确显示 */
    }
}

/* 移动端默认调整 */
@media (max-width: 767px) {
    .lt-grid-layout {
        /* 移动端默认单列布局（可被内联样式覆盖） */
    }
    
    .lt-grid-cell {
        /* 确保单元格在移动端正确显示 */
    }
}

/* ============================================
   网格布局调试样式
   ============================================ */

body.wp-debug .lt-grid-layout {
    outline: 2px dashed rgba(0, 200, 100, 0.3);
    outline-offset: -2px;
}

body.wp-debug .lt-grid-cell {
    outline: 1px dashed rgba(0, 200, 100, 0.2);
    outline-offset: -1px;
}

body.wp-debug .lt-grid-cell::before {
    content: attr(data-cell);
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgba(0, 200, 100, 0.7);
    color: white;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
}


/* ============================================
   媒体组件基础样式
   Media Component Base Styles
   
   注意：这里只定义最基础的结构样式，不使用 !important
   所有尺寸、对齐、定位相关的样式由布局设置的CSS生成器控制
   
   @since 2.3.0
   @updated 2.4.0 - 移除硬编码，改为受布局设置控制
   ============================================ */

/* 媒体包装器 - 基础结构 */
.lt-media-wrapper {
    position: relative;
    box-sizing: border-box;
}

/* 媒体背景层 - 基础结构 */
.lt-media-background {
    box-sizing: border-box;
}

/* 媒体图片容器 - 基础结构 */
.lt-media-image {
    box-sizing: border-box;
}

.lt-media-image img {
    display: block;
}

/* 媒体轮播 - 基础结构 */
.lt-media-carousel {
    position: relative;
    box-sizing: border-box;
}

/* 
 * 注意：.swiper-slide 的对齐方式由布局设置控制
 * 不在这里硬编码 align-items 和 justify-content
 */
.lt-media-carousel .swiper-slide img {
    display: block;
}

/* 轮播导航按钮 - 仅样式，不影响布局 */
.lt-media-carousel .swiper-button-prev,
.lt-media-carousel .swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.lt-media-carousel .swiper-button-prev:hover,
.lt-media-carousel .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lt-media-carousel .swiper-button-prev::after,
.lt-media-carousel .swiper-button-next::after {
    font-size: 18px;
}

/* 轮播分页指示器 - 仅样式 */
.lt-media-carousel .swiper-pagination {
    bottom: 10px;
}

.lt-media-carousel .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.lt-media-carousel .swiper-pagination-bullet-active {
    background: #fff;
}

/* 视频组件 - 基础结构 */
.lt-media-video {
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.lt-media-video video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* 视频回退提示 */
.lt-video-fallback {
    padding: 20px;
    text-align: center;
    background: #f5f5f5;
    color: #666;
}

.lt-video-fallback a {
    color: #0073aa;
    text-decoration: underline;
}

/* 视频错误提示 */
.lt-video-error {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.lt-video-error p {
    margin: 0 0 10px;
    color: #495057;
    font-size: 14px;
}

.lt-video-error-hint {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 15px !important;
}

.lt-video-download-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.2s ease;
}

.lt-video-download-btn:hover {
    background: #005a87;
    color: #fff;
}

/* 响应式视频容器（用于嵌入式视频）- 保持16:9比例 */
.lt-video-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
}

.lt-video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* YouTube/Vimeo 视频背景 */
.lt-media-video--youtube .lt-video-responsive,
.lt-media-video--vimeo .lt-video-responsive {
    background: #000;
}

/* ============================================
   图片轮播+视频组件
   ============================================ */

.lt-carousel-video {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.lt-cv-carousel {
    width: 100%;
    position: relative;
}

.lt-cv-carousel .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.lt-cv-carousel .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 轮播导航按钮 */
.lt-cv-carousel .swiper-button-prev,
.lt-cv-carousel .swiper-button-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 0.3s ease;
    z-index: 15;
    margin-top: -22px; /* 垂直居中 */
}

.lt-cv-carousel .swiper-button-prev:hover,
.lt-cv-carousel .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lt-cv-carousel .swiper-button-prev::after,
.lt-cv-carousel .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
}

/* 轮播分页指示器 */
.lt-cv-carousel .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    z-index: 15;
}

.lt-cv-carousel .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 0 4px;
    cursor: pointer;
}

.lt-cv-carousel .swiper-pagination-bullet-active {
    background: #fff;
}

/* 播放按钮 */
.lt-cv-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
}

.lt-cv-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.lt-cv-play-button.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.lt-carousel-video:hover .lt-cv-play-button.is-hidden {
    opacity: 1;
    pointer-events: auto;
}

.lt-cv-play-icon {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    color: rgba(255, 255, 255, 0.9);
}

.lt-cv-play-button:hover .lt-cv-play-icon {
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

/* 视频容器 */
.lt-cv-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: #000;
}

.lt-cv-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.lt-cv-video-player {
    width: 100%;
    height: 100%;
}

.lt-cv-video-player video,
.lt-cv-video-player iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
}

/* 关闭按钮 */
.lt-cv-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    z-index: 25;
}

.lt-cv-close-button:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* 响应式 */
@media (max-width: 768px) {
    .lt-cv-play-icon {
        width: 48px;
        height: 48px;
    }
    
    .lt-cv-close-button {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }
}

/* 遮罩层 - 基础结构 */
.lt-media-overlay {
    pointer-events: none;
    box-sizing: border-box;
}

/* 内容层 - 基础结构 */
.lt-content-layer {
    box-sizing: border-box;
}

/* ============================================
   媒体组件响应式调整 - 仅UI元素
   ============================================ */

@media (max-width: 768px) {
    .lt-media-carousel .swiper-button-prev,
    .lt-media-carousel .swiper-button-next {
        width: 36px;
        height: 36px;
    }
    
    .lt-media-carousel .swiper-button-prev::after,
    .lt-media-carousel .swiper-button-next::after {
        font-size: 14px;
    }
    
    .lt-media-carousel .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    
    /* 移动端视频响应式调整 */
    .lt-media-video {
        width: 100%;
    }
    
    .lt-media-video video {
        width: 100%;
        height: auto;
    }
    
    /* 移动端嵌入视频保持比例 */
    .lt-video-responsive {
        padding-bottom: 56.25%; /* 保持 16:9 比例 */
    }
}

/* ============================================
   媒体组件调试样式
   ============================================ */

body.wp-debug .lt-media-wrapper {
    outline: 2px dashed rgba(255, 100, 0, 0.5);
    outline-offset: -2px;
}

body.wp-debug .lt-media-background::after {
    content: "Media Background";
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(255, 100, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
}

body.wp-debug .lt-content-layer::after {
    content: "Content Layer";
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 100, 255, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
}


/* ============================================
   玻璃摩卡虚化效果样式
   Glass Morphism Blur Effect Styles
   
   这些是基础样式，确保虚化效果正确显示
   具体的模糊度、亮度等参数由 CSS 生成器动态生成
   
   @since 2.5.0
   ============================================ */

/* ========================================
   玻璃摩卡媒体虚化效果 - 基础样式
   
   注意：具体的参数值由 CSS 生成器动态生成
   这里只定义最小必要的基础结构样式
   ======================================== */

/* 玻璃摩卡媒体虚化模式标记 */
.lt-glass-media-blur {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* 虚化背景层 - 具体定位值由 CSS 生成器设置 */
.lt-glass-blur-bg {
    position: absolute;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 虚化背景图片 - 具体 filter/transform 值由 CSS 生成器设置 */
.lt-glass-blur-bg__image {
    object-fit: cover;
    object-position: center;
    transition: opacity 0.6s ease-out;
}

/* 过渡用的第二张图片（由 JS 动态创建） */
.lt-glass-blur-bg__image--next {
    position: absolute;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* 暗角遮罩 - 具体渐变由 CSS 生成器设置 */
.lt-glass-blur-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* 边缘融合叠加层 - 具体渐变由 CSS 生成器设置 */
.lt-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* 颜色模式的玻璃效果 - 使用伪元素 */
.lt-glass-color-mode::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    /* background 和 backdrop-filter 由 CSS 生成器动态设置 */
}

/* 调试样式 */
body.wp-debug .lt-glass-media-blur::after {
    content: "Glass Blur Mode";
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(128, 0, 255, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 9999;
    pointer-events: none;
}

body.wp-debug .lt-glass-blur-bg {
    outline: 2px dashed rgba(128, 0, 255, 0.5);
    outline-offset: -2px;
}