/* ============================================================
 * Listing 3 - Case study / project list
 * 参考样式：左图(40%) + 右内容（标题、描述、"Learn More"橙色圆角按钮），上下细线分隔
 * ============================================================ */
.block-listing-3-vue .wrapper.posts {
    display: flex;
    flex-direction: column;
}

/* 单个案例：左右结构 + 上下分隔线 */
.block-listing-3-vue .post {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(17, 35, 55, 0.12);
}
.block-listing-3-vue .post:first-child {
    border-top: 0;
}
.block-listing-3-vue .post:last-child {
    border-bottom: 1px solid rgba(17, 35, 55, 0.12);
}

/* 左：图片 */
.block-listing-3-vue .post > figure {
    flex: 0 0 40%;
    max-width: 40%;
    margin: 0;
    position: relative;
}
.block-listing-3-vue .post > figure .picture {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
}
.block-listing-3-vue .post > figure .picture .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 右：内容 */
.block-listing-3-vue .post > .infos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 隐藏原模板里的日期(overline)，与参考图保持一致 */
.block-listing-3-vue .post .overline {
    display: none;
}

/* 标题 */
.block-listing-3-vue .post .title {
    margin: 0;
    font-family: Aeonik Pro, system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    color: #112337;
}
.block-listing-3-vue .post .title a {
    color: inherit;
    text-decoration: none;
}

/* 描述 */
.block-listing-3-vue .post .description {
    margin: 0;
    font-family: Aeonik Pro, system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}

/* 橙色圆角 "Learn More" 按钮：去掉箭头图标(参考图中无) */
.block-listing-3-vue .post .component-button {
    align-self: flex-start;
    margin-top: 0.75rem;
    text-decoration: none;
}
.block-listing-3-vue .post .component-button .button-wrapper .icon-wrapper {
    display: none;
}

/* 分页 */
.block-listing-3-vue .moban-pagination {
    margin-top: 2.5rem;
}

/* 移动端：上下堆叠 */
@media (max-width: 767px) {
    .block-listing-3-vue .post {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.5rem 0;
    }
    .block-listing-3-vue .post > figure {
        flex: 0 0 auto;
        max-width: 100%;
    }
}