/* ==========================================================
 * 展会模块样式 (Exhibition Styles)
 * 路径: wp-content/plugins/mx-matrix-engine/assets/css/components/exhibition.css
 * 基于核心规范优化版：原生 <img> 标签抗变形与 0-CLS 终极补丁
 * ========================================================== */

/* =========================================
   🛡️ 第一步：MX Matrix 终极防御盾 (展会模块)
   ========================================= */

/* 1. 外部绝对清零：彻底干掉 WordPress 主题默认的所有上下左右内边距 */
body .inside-article:has(.mx-exhibition-container),
body .entry-content:has(.mx-exhibition-container) {
    padding: 0 !important; 
}

/* 2. 电脑端 (≥769px)：容器接管，上下左右绝对 30px */
@media (min-width: 769px) {
    .mx-matrix-wrapper:has(.mx-exhibition-container) .mx-container {
        padding: 30px !important; 
        max-width: 1640px; 
        margin: 0 auto;    
    }
}

/* 3. 手机端 (≤768px)：容器接管，上下 30px，左右 10px */
@media (max-width: 768px) {
    .mx-matrix-wrapper:has(.mx-exhibition-container) .mx-container {
        padding: 30px 10px !important; 
    }
}

/* --- 1. 基础容器与公共组件 --- */
.mx-exhibition-container {
    width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}

.mx-exhibition-section {
    margin-bottom: 60px;
}

/* 强制干掉底部最后一个模块产生的巨大留白 */
.mx-exhibition-section:last-child {
    margin-bottom: 0 !important;
}

/* 标题区 */
.mx-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mx-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px;
}

.mx-section-header .mx-section-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; 
    line-height: 1 !important; /* 收紧行高，确保绝对的垂直居中 */
}

/* 🛡️ 防御盾：强制清除外部主题加在标题后的伪元素短蓝条 */
.mx-section-title::after,
.mx-section-title::before {
    content: none !important;
    display: none !important;
}

/* 年份无刷新筛选器 */
.mx-year-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.mx-filter-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.mx-filter-btn:hover { background: #e9ecef; }
.mx-filter-btn.active { background: #0056b3; color: #fff; border-color: #0056b3; }

/* 基础网格间距 */
.mx-exhibition-grid {
    display: grid;
    gap: 30px;
}

/* ==========================================================
 * 2. Upcoming Exhibitions (双列卡片布局)
 * ========================================================== */
.upcoming-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .upcoming-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mx-ex-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mx-ex-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 🛡️ 核心防 CLS 占位外壳 */
.mx-ex-thumb-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* 强制锁定比例，浏览器在图片下载完成前即可精准撑开高度 */
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

/* 🛡️ 原生 img 标签强制适配规范 */
img.mx-ex-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 等同于 background-size: cover，防图片拉伸变形 */
    object-position: center;
    display: block;
}

.mx-ex-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}

.mx-ex-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mx-ex-title { font-size: 20px; font-weight: 700; margin: 0 0 15px 0; line-height: 1.4; }
.mx-ex-title a { color: #222; text-decoration: none; transition: color 0.2s; }
.mx-ex-title a:hover { color: #0056b3; }

.mx-ex-date { font-size: 14px; font-weight: 600; color: #d9534f; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.mx-ex-meta { list-style: none; padding: 0; margin: 0 0 20px 0; font-size: 15px; color: #666; }
.mx-ex-meta li { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mx-highlight-booth { font-weight: 700; color: #111; background: #f1f3f5; padding: 4px 8px; border-radius: 2px; display: inline-flex !important; }

.mx-ex-action { margin-top: auto; display: flex; gap: 15px; flex-wrap: wrap; }
.mx-btn { display: inline-block; padding: 10px 20px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; border-radius: 2px; transition: all 0.2s; cursor: pointer; }
.mx-btn-primary { background: #0056b3 !important; color: #fff !important; border: 1px solid #0056b3 !important; }
.mx-btn-primary:hover { background: #004494 !important; }
.mx-btn-outline { background: transparent; color: #333; border: 1px solid #ccc; }
.mx-btn-outline:hover { border-color: #333; background: #f8f9fa; }


/* ==========================================================
 * 3. Past Exhibitions (全新左右分栏列表布局)
 * ========================================================== */
.past-grid {
    grid-template-columns: 1fr; /* 强制单列列表排布 */
}

.mx-ex-list-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
    /* 💥 核心防御：打破 Grid Item 默认不收缩的魔咒 */
    min-width: 0; 
    width: 100%;
}

.mx-ex-list-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

@media (min-width: 992px) {
    .mx-ex-list-card {
        flex-direction: row;
        align-items: center;
    }
}

/* 🛡️ 移动端极致适配补丁：缩减留白，防御超长文本撑破 */
@media (max-width: 991px) {
    .mx-ex-list-card {
        padding: 20px; 
        gap: 20px;
    }
    .mx-ex-title, 
    .mx-ex-title a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* 列表左侧信息 */
.mx-ex-list-left {
    flex: 0 0 380px; 
    padding-right: 30px;
    border-right: 1px solid #eaeaea;
}
@media (max-width: 991px) {
    .mx-ex-list-left {
        flex: none;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 20px;
        /* 💥 核心防御二：确保文本区也能被挤压 */
        min-width: 0;
        width: 100%;
    }
}

.mx-ex-list-left .mx-ex-title { 
    font-size: 20px; 
    font-weight: 700; 
    margin: 0 0 15px 0; 
    color: #111; 
    line-height: 1.4; 
    /* 🛡️ 强制屏蔽外部主题的蓝条 */
    border-left: none !important;
    padding-left: 0 !important;
}

.mx-ex-info-list { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    color: #555; 
    font-size: 15px; 
}

.mx-ex-info-list li { 
    margin: 0 0 12px 0 !important; 
    padding: 0 !important; 
    line-height: 1.5; 
}

.mx-ex-info-list li .dashicons { color: #0056b3; margin-top: 2px; font-size: 18px; }

/* 列表右侧多图画廊 */
.mx-ex-list-right {
    flex: 1; 
    display: flex;
    gap: 20px;
    overflow-x: auto; 
    padding-bottom: 8px; 
    scrollbar-width: thin; 
    /* 💥 核心防御三：打破 Flex 默认的 min-width: auto 魔咒，允许容器收缩 */
    min-width: 0;
    width: 100%;
}
.mx-ex-list-right::-webkit-scrollbar { height: 6px; }
.mx-ex-list-right::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* 🛡️ 往届图集 img 占位加抗拉伸样式 */
img.mx-ex-img-item {
    flex: 0 0 calc(33.333% - 14px); 
    min-width: 220px; 
    aspect-ratio: 4 / 3; /* 强制要求 4:3 黄金比例占位 */
    object-fit: cover;   /* 完美裁切各种野蛮尺寸图片，绝不变形 */
    background-color: #f8f9fa;
    border-radius: 4px;
    display: block;
}

div.mx-ex-img-item.placeholder {
    flex: 0 0 calc(33.333% - 14px);
    min-width: 220px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 14px;
    border: 1px dashed #ccc;
    background: #fdfdfd;
}

/* ==========================================================
 * 🪄 智能画廊数量操作规范 (Smart Gallery Layout)
 * ========================================================== */

/* 场景 A：当历史画廊刚好只有 1 张图时 - 尺寸自适应防裁剪 */
.mx-ex-list-right .mx-ex-img-item:only-child {
    /* 1. 修复电脑端“太大了”：取消 100% 强制撑满，限制最大宽度 */
    flex: 0 0 auto; 
    max-width: 600px; /* 限制最大宽度，在电脑端不会巨无霸，可根据喜好微调 */
    width: 100%;      /* 确保在手机端依然能自适应占满屏幕 */
    
    /* 2. 修复手机端“上下留白”：彻底删除原有的 min-height 保底高度 */
    aspect-ratio: auto; 
    min-height: auto !important; /* 让 img 标签根据真实图片比例自然撑开，0留白 */
    
    object-fit: contain; 
    object-position: left center;
}

/* 场景 B：当刚好只有 2 张图时 */
.mx-ex-list-right .mx-ex-img-item:first-child:nth-last-child(2),
.mx-ex-list-right .mx-ex-img-item:first-child:nth-last-child(2) ~ .mx-ex-img-item {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}


/* ==========================================================
 * 🛡️ 细节修复与巨幕适配
 * ========================================================== */

.upcoming-card .mx-ex-title {
    border-left: none !important;
    padding-left: 0 !important;
}

/* 🌟 智能预告巨幕 (Single Upcoming Exhibition Hero Layout) */
@media (min-width: 992px) {
    /* 当 Upcoming 列表里极度孤单地只有 1 张卡片时触发横向巨幕生态 */
    .upcoming-card:only-child {
        grid-column: 1 / -1; 
        flex-direction: row; 
        align-items: stretch;
    }
    
    .upcoming-card:only-child .mx-ex-thumb-wrapper {
        flex: 0 0 55%; 
        aspect-ratio: auto; 
        height: 100%;       
        min-height: 400px; 
        border-bottom: none !important;
        border-right: 1px solid #eaeaea; 
    }
    
    .upcoming-card:only-child img.mx-ex-thumb-img {
        object-fit: contain; /* 巨幕形态完整保真展示不裁剪 */
        background-color: transparent;
    }
    
    .upcoming-card:only-child .mx-ex-content {
        flex: 1; 
        padding: 50px 40px; 
        justify-content: center; 
    }
    
    .upcoming-card:only-child .mx-ex-title {
        font-size: 26px;
        margin-bottom: 25px;
    }
}

/* ==========================================================
 * 静态天数徽章样式 (Static Countdown Badge)
 * ========================================================== */
.mx-ex-badge {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    border-radius: 2px;
    vertical-align: text-bottom;
}

/* 状态 A：进行中 (Live Now) */
.mx-badge-live {
    background-color: #E32D2D;
    color: #ffffff;
    border: 1px solid #E32D2D;
}

/* 状态 B：倒计时 (Upcoming) */
.mx-badge-upcoming {
    background-color: rgba(0, 86, 179, 0.08); 
    color: #0056b3; 
    border: 1px solid rgba(0, 86, 179, 0.3);
}

@media (min-width: 992px) {
    .upcoming-card:only-child .mx-ex-badge {
        font-size: 13px;
        padding: 4px 10px;
        margin-left: 15px;
        vertical-align: middle;
    }
}

/* 📱 移动端空间治理补丁 */
@media (max-width: 768px) {
    .mx-section-header {
        row-gap: 15px; 
    }
    .mx-year-filter {
        gap: 8px; 
    }
    .mx-filter-btn {
        padding: 5px 12px; 
        font-size: 13px;   
    }
}