/* ------------------------公司介绍------------------------------------- */
/* 5. Our Story 版块样式 (最大化内容宽度) */
/* ---------------------------------------------------- */

.story-section {
    background-color: #ffffff;
    padding: 30px 20px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* 调整为网格布局 */
.story-content-grid {
    display: grid;
    /* 定义网格模板：两列，每列自适应内容 */
    grid-template-columns: 1fr 1fr;
    /* 定义网格行：三行，分别用于图片、文字和另一张图片 */
    grid-template-rows: auto auto auto;
    gap: 10px 30px; /* 调整行和列之间的间距 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* 左上角图片 */
.story-top-left-image-wrapper {
    grid-column: 1; /* 占据第一列 */
    grid-row: 1; /* 占据第一行 */
    overflow: hidden;
}

/* 右上角文本 */
.story-text-right-top-wrapper {
    grid-column: 2; /* 占据第二列 */
    grid-row: 1; /* 占据第一行 */
    padding-top: 5px;
}

/* 左下角文本 */
.story-text-left-bottom-wrapper {
    grid-column: 1; /* 占据第一列 */
    grid-row: 2 / span 2; /* 从第二行开始，跨越两行，以便与右侧的图片对齐 */
    padding-top: 5px;
}

/* 右下角图片 */
.story-bottom-right-image-wrapper {
    grid-column: 2; /* 占据第二列 */
    grid-row: 2 / span 2; /* 从第二行开始，跨越两行，与左侧的文本对齐 */
    overflow: hidden;
}

.story-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.founder-vision-title {
    font-size: 24px; /* 调整为固定像素值，更精确控制 */
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    /* 已取消细线 */
    padding-bottom: 0; /* 移除底部内边距，使其看起来更紧凑 */
    border-bottom: none; /* <--- 关键修改：移除边框 */
}

.story-paragraph {
    font-size: 20px; /* 调整为固定像素值 */
    line-height: 1.7;
    color: #666;
    margin-bottom: 18px;
}

/* 响应式设计：手机移动端 (上图下文) */
@media (max-width: 768px) {
    .story-section {
        padding: 40px 20px;
    }

    .story-content-grid {
        display: flex; /* 手机端恢复flex布局 */
        flex-direction: column; /* 垂直堆叠 */
        gap: 25px;
        padding: 0;
    }

    /* 手机端重新排序，保持上图下文的逻辑顺序 */
    .story-top-left-image-wrapper { order: 1; width: 100%; }
    .story-text-right-top-wrapper { order: 2; width: 100%; }
    .story-text-left-bottom-wrapper { order: 3; width: 100%; }
    .story-bottom-right-image-wrapper { order: 4; width: 100%; }

    .story-top-left-image-wrapper,
    .story-bottom-right-image-wrapper {
        flex: none;
        max-width: 100%;
    }

    .story-text-right-top-wrapper,
    .story-text-left-bottom-wrapper {
        flex: none;
        width: 100%;
        padding-top: 0;
    }

    .founder-vision-title {
        font-size: 1.3em;
        margin-top: 0;
    }
}