/* ==========================================================================
   组件（components.css）
   --------------------------------------------------------------------------
   - 项目卡片：用于首页与"科研"页中展示重点项目（如 CATPU）
   - 按钮：主按钮、次按钮（用于页内引导链接）
   - 引导块：用于段落级别的强调与说明
   ========================================================================== */


/* ==========================================================================
   一、项目卡片
   --------------------------------------------------------------------------
   使用方式（直接在页面 HTML 中嵌入，或通过 functions.php 中预留的短代码）：

   <div class="caiees-project-card">
       <div class="caiees-project-label">重点项目</div>
       <h3>中亚贸易政策不确定性指数 CA-TPU</h3>
       <p>基于多语种新闻文本构建的区域性高频不确定性指标，按季度更新。</p>
       <a class="caiees-btn caiees-btn-primary"
          href="https://catpu.caiees.cn"
          target="_blank" rel="noopener">访问项目站点 →</a>
   </div>
   ========================================================================== */

.caiees-project-card {
    border: 1px solid var(--caiees-color-border);
    background: var(--caiees-color-bg-soft);
    padding: 2em 2.4em;
    margin: 2.4em 0;
    border-radius: 4px;
}

.caiees-project-card .caiees-project-label {
    font-family: var(--caiees-font-sans);
    font-size: 0.8rem;
    color: var(--caiees-color-text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.8em;
}

.caiees-project-card h3 {
    margin-top: 0;
    margin-bottom: 0.6em;
    font-size: 1.25rem;
}

.caiees-project-card p {
    margin-bottom: 1.2em;
    color: var(--caiees-color-text-muted);
    line-height: 1.75;
}


/* ==========================================================================
   二、按钮
   ========================================================================== */

.caiees-btn {
    display: inline-block;
    font-family: var(--caiees-font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0.6em 1.5em;
    border: 1px solid var(--caiees-color-link);
    color: var(--caiees-color-link);
    background: transparent;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.caiees-btn:hover,
.caiees-btn:focus {
    background: var(--caiees-color-link);
    color: #fff;
    text-decoration: none;
}

.caiees-btn-primary {
    background: var(--caiees-color-link);
    color: #fff;
}

.caiees-btn-primary:hover,
.caiees-btn-primary:focus {
    background: var(--caiees-color-link-hover);
    border-color: var(--caiees-color-link-hover);
    color: #fff;
}


/* ==========================================================================
   三、研究方向横列（首页用）
   --------------------------------------------------------------------------
   使用方式：

   <div class="caiees-directions">
       <div class="caiees-direction-item">区域经济与贸易</div>
       <div class="caiees-direction-item">资源环境与可持续发展</div>
       <div class="caiees-direction-item">区域社会与政策</div>
   </div>
   ========================================================================== */

.caiees-directions {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 2em 0;
    padding: 1.6em 0;
    border-top: 1px solid var(--caiees-color-border);
    border-bottom: 1px solid var(--caiees-color-border);
}

.caiees-direction-item {
    flex: 1 1 200px;
    text-align: center;
    font-family: var(--caiees-font-sans);
    font-size: 1rem;
    color: var(--caiees-color-text-muted);
    padding: 0.4em;
}


/* ==========================================================================
   四、移动端适配
   ========================================================================== */

@media (max-width: 768px) {

    .caiees-project-card {
        padding: 1.5em 1.6em;
        margin: 2em 0;
    }

    .caiees-directions {
        flex-direction: column;
    }

    .caiees-direction-item {
        flex: 1 1 100%;
    }

}