/* 1. 外层容器：透明，无边框 */
.blg-accordion-section {
    width: 100%;
    padding: 20px 0;
}

/* 2. 手风琴容器 */
.accordion-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 500px; 
    margin: 0 auto;
    gap: 10px; 
}

/* 3. 卡片基础 */
.card {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    
    /* ★★★ 核心修复 1：强制 flex-basis 为 0，忽略内容宽度 ★★★ */
    flex: 1 1 0px; 
    /* ★★★ 核心修复 2：Safari 必需的属性，防止被文字撑大或挤压 ★★★ */
    min-width: 0; 
    
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    background-size: cover;
    background-position: center;
}

/* 背景图设置 */
.card:nth-child(1) { background-image: url('/wp-content/uploads/2026/01/Dollar.jpg'); }
.card:nth-child(2) { background-image: url('/wp-content/uploads/2026/01/InterestRate.jpg'); }
.card:nth-child(3) { background-image: url('/wp-content/uploads/2026/01/SupplyDemand.jpg'); }
.card:nth-child(4) { background-image: url('/wp-content/uploads/2026/01/ChessBoard.jpg'); }

/* 遮罩层 */
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(11, 82, 76, 0.6), rgba(0, 0, 0, 0.85));
    z-index: 0;
    transition: background 0.6s;
}

/* 激活状态 */
.card.active {
    /* ★★★ 核心修复 3：同样强制 flex-basis 为 0 ★★★ */
    flex: 3.5 1 0px;
    cursor: default;
}
.card.active::before {
    background: linear-gradient(to bottom, rgba(11, 82, 76, 0.4), rgba(0, 0, 0, 0.75));
}

/* 4. 内容区域 */
.content-wrap {
    position: relative;
    z-index: 1;
    padding: 30px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
}

/* 标题容器 */
.text-group {
    width: 100%;
    margin-top: auto; 
    text-align: left;
}

/* 标题 */
.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
    transition: all 0.4s;
    white-space: nowrap;
    
    /* 电脑端收起时：竖排文字 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 4px;
    height: 150px;
}

/* 激活后：横排 */
.card.active .card-title {
    writing-mode: horizontal-tb;
    height: auto;
    letter-spacing: 0.5px;
    font-size: 28px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 描述文字 */
.card-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    white-space: normal;
    transition: opacity 0.4s ease 0.2s;
}
.card.active .card-desc {
    opacity: 1;
    max-height: 200px;
}

/* 电脑端收起布局 */
.card:not(.active) .content-wrap {
    align-items: center; 
    padding: 30px 10px;
}
.card:not(.active) .text-group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    margin: 0;
}

/* =========================================
   5. 平板与手机端适配 (扩大适配范围至 1024px)
   ========================================= */
/* 将 max-width 从 900px 改为 1024px，包含 iPad Pro 竖屏和 iPad 横屏 */
@media (max-width: 1024px) {
    .accordion-container {
        height: 550px; 
        gap: 4px;
    }

    .card {
        border-radius: 8px;
        /* 保持修复逻辑：忽略内容宽度 */
        flex: 1.2 1 0px !important; 
        min-width: 0;
    }

    .card.active {
        /* 保持修复逻辑：忽略内容宽度 */
        flex: 8 1 0px !important; 
    }

    /* --- 收起状态 --- */
    .card:not(.active) .card-desc { display: none; }
    
    /* 强制内容居中 */
    .card:not(.active) .content-wrap {
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;     
    }

    .card:not(.active) .text-group {
        width: auto; 
        height: auto;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 标题竖排 */
    .card:not(.active) .card-title {
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: 4px;
        font-size: 16px;
        height: auto;
        opacity: 0.9;
        margin: 0 !important;
        align-self: center; 
    }

    /* --- 展开状态 --- */
    .card.active .content-wrap {
        padding: 25px 20px;
        justify-content: flex-end; 
        align-items: flex-start !important; 
    }
    
    .card.active .text-group {
        margin-top: auto;
        text-align: left;
        display: block; 
    }

    .card.active .card-title {
        font-size: 22px;
        width: auto;
    }

    .card.active .card-desc {
        font-size: 14px;
    }
}