.latest-news-section {
    display: flex;
    /* flex-wrap: wrap; */ /* No longer strictly necessary for main column wrapping with absolute positioning */
    /* gap: 20px; */ /* Gap will be handled by margin on left column */
    align-items: flex-start; /* Ensures left column determines its own height, which sets parent height */
    position: relative; /* Added for absolute positioning of the right column */
    flex-direction: column; /* Stack title above the main content */            
    padding-top: 30px;
    padding-bottom: 40px;
    background-color: #FFFFFF;
    padding-left: 10%;
    padding-right: 10%;
}

.latest-news-section>h2 {
    margin: 0;    
    padding-bottom: 10px;
}

.latest-news-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%; /* Start 10% from the left */
    width: 80%; /* Line width is 80% */
    height: 1px;
    background-color: gray!important; /* Line color */
}

.latest-news-section .latest-news-title {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    font-size: 1.8em;
    color: #333;
}

.latest-news-section .latest-news-content-wrapper {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

.latest-news-section .latest-news-content-wrapper .latest-news-left-column {
    /* flex: 1 1 48%; */ /* Removed */
    width: calc(50% - 10px); /* Adjusted for a 20px gap */
    margin-right: 20px; /* Creates the gap between columns */
    box-sizing: border-box;
}

.latest-news-section .latest-news-content-wrapper .latest-news-right-column {
    /* flex: 1 1 48%; */ /* Removed */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Replaces margin-bottom on .secondary-news for spacing between items */

    /* Added for positioning based on left column height and scrolling */
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 10px); /* Adjusted for a 20px gap */
    height: 100%; /* Takes height of .latest-news-section (determined by left column) */
    overflow-y: auto;
}

.latest-news-section .latest-news-left-column .featured-news .news-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.latest-news-section .latest-news-left-column .featured-news .news-content {
    padding: 10px;    
}

.latest-news-section .latest-news-left-column .featured-news .news-meta {
    font-size: 0.85em;
    color: #5b5b5b;
    margin-bottom: 0;
    padding-top: 10px;
    padding-right: 10px;       
    display: flex; /* Add flex display */
    justify-content: space-between; /* Space out children */   
}

.latest-news-section .latest-news-right-column .secondary-news {
    display: flex;
    gap: 15px; /* Gap between thumbnail and content within a secondary news item */
    flex: 1; /* Each secondary news item will take an equal share of the right column's height */
    overflow: hidden; /* Prevent content from spilling out if it exceeds the allocated space */
}

.latest-news-section .latest-news-right-column .secondary-news .news-thumbnail {
    flex: 2 1 0%; /* Thumbnail takes 2/5 of the width */
    height: 100%; /* Thumbnail takes the full height of its parent .secondary-news item */
}

.latest-news-section .latest-news-right-column .secondary-news .news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latest-news-section .latest-news-right-column .secondary-news .news-content {
    flex: 3 1 0%; /* Content takes 3/5 of the width */
    overflow: hidden; /* Hide content that overflows */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 顶部和底部分布 */
    padding-top: 15px; /* 保证标题离顶部15px */
    padding-bottom: 1px; /* 保证meta离底部1px */
}

.latest-news-section .latest-news-left-column .featured-news .news-title {
    font-size: 1.5em; /* Larger title for featured post */
}

.latest-news-section .latest-news-right-column .secondary-news .news-title {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
}

.secondary-news .news-meta {
    font-size: 0.85em;
    color: #5b5b5b;
    margin-bottom: 0; /* 由父容器padding-bottom控制 */
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 10px;       
    display: flex; /* Add flex display */
    justify-content: space-between; /* Space out children */     
}

.latest-news-section .news-item {
    background-color: #f3f3f3;
    box-sizing: border-box; /* Ensure padding doesn't add to the width/height for flex items */
}

.latest-news-section .news-item .news-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em; /* Adjust as needed */
    color: #000000; /* Title color to black */
}

.latest-news-section .news-item .news-excerpt {
    font-size: 0.9em;
    color: #333;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .latest-news-section .latest-news-content-wrapper {
        flex-direction: column;
        position: static; /* Reset positioning context if needed */
    }
    .latest-news-section .latest-news-content-wrapper .latest-news-left-column {
        /* flex-basis: 100%; */ /* Original */
        width: 100%; /* Full width on smaller screens */
        margin-right: 0; /* Remove margin for stacked layout */
    }
    .latest-news-section .latest-news-content-wrapper .latest-news-right-column {
        /* flex-basis: 100%; */ /* Original */
        /* Reset absolute positioning for stacked layout */
        position: static;
        width: 100%;
        height: auto; /* Allow content to determine height */
        overflow-y: visible; /* Or 'auto' if scrolling is desired in stacked view */
    }
    .latest-news-section .latest-news-right-column .secondary-news .news-thumbnail {
        flex: 0 0 100px; /* Adjust for smaller screens */
        height: 70px;
    }
}