#top-stories {
    margin-bottom: 100px;
}

/* Desktop layout */
#top-stories .desktop-layout {
    display: grid;
    grid-template-columns: 50% 50%;
}

/* Left column - single large post */
#top-stories .desktop-layout > div:first-child {
    padding-right: 2rem;
    margin-bottom: -30px;
}

/* Right column - container for 4 posts */
#top-stories .desktop-layout > div:last-child {
}

/* Force the grid layout for the right column posts */
#top-stories .desktop-layout > div:last-child .post-list.vertical-tall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Ensure images maintain aspect ratio */
#top-stories img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style for the featured post on the left */
#top-stories .desktop-layout > div:first-child .post-title {
    font-size: 28px;
    line-height: 1.2;
    margin: 1rem 0;
}

#top-stories .desktop-layout > div:first-child .post-subtitle {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 1rem;
}

/* Adjust spacing between posts in the grid */
#top-stories .desktop-layout > div:last-child .post-list > div {
}

/* Remove margin from last row of posts */
#top-stories .desktop-layout > div:last-child .post-list > div:nth-last-child(-n+2) {
    margin-bottom: 0;
}

/* Ensure right side post titles are smaller */
#top-stories .desktop-layout > div:last-child .post-title {
    font-size: 18px;
    line-height: 1.3;
}

/* Tablet layout: initially hidden */
#top-stories .tablet-layout {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* Hide desktop layout, show tablet layout */
    #top-stories .desktop-layout {
        display: none;
    }
    
    #top-stories .tablet-layout {
        display: flex;
        flex-direction: column;
    }
    
    /* Top horizontal post styling - target horizontal-centered template */
    #top-stories .tablet-layout > .post-link.horizontal.centered {
        display: flex;
        flex-direction: column;
    }
    
    /* Image container for top horizontal post - full width */
    #top-stories .tablet-layout > .post-link.horizontal.centered .post-thumb {
        width: 100%;
        overflow: hidden;
    }
    
    #top-stories .tablet-layout > .post-link.horizontal.centered .post-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Content area for top horizontal post - positioned at bottom */
    #top-stories .tablet-layout > .post-link.horizontal.centered > div {
        padding: 1rem 0;
        text-align: left;
        width: 100%;
    }
    
    /* Title styling for top horizontal post - reduce font weight */
    #top-stories .tablet-layout > .post-link.horizontal.centered .post-title {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 0.75rem;
        color: #000;
    }
    
    /* Subtitle for top horizontal post - ensure it shows */
    #top-stories .tablet-layout > .post-link.horizontal.centered .post-subtitle {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 1rem;
        color: #333;
        display: block;
        font-weight: normal;
    }
    
    /* Author and meta info for top post */
    #top-stories .tablet-layout > .post-link.horizontal.centered .post-author,
    #top-stories .tablet-layout > .post-link.horizontal.centered .post-info {
        font-size: 13px;
        color: #666;
    }
    
    /* Bottom section - one-large-three-small styling */
    #top-stories .tablet-layout .post-list.one-large-three-small.tablet-bottom-section {
        margin-top: 1rem;
    }
    
    /* Adjust the large post in the one-large-three-small layout for tablet */
    #top-stories .tablet-layout .post-list.one-large-three-small > div:first-child {
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #D6D6D6;
        padding-bottom: 1.5rem;
    }
    
    /* Large post title in one-large-three-small */
    #top-stories .tablet-layout .post-list.one-large-three-small > div:first-child .post-title {
        font-size: 20px;
        line-height: 1.3;
    }
    
    /* Three small posts styling */
    #top-stories .tablet-layout .post-list.one-large-three-small > div:last-child {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        margin-left: 0rem;
        margin-right: 0rem;
    }
    
    #top-stories .tablet-layout .post-list.one-large-three-small > div:last-child .post-link {
        flex: 1;
        border-left: none !important;
        padding: 0 !important;
    }
    
    /* Small posts titles */
    #top-stories .tablet-layout .post-list.one-large-three-small > div:last-child .post-title {
        font-size: 15px;
        line-height: 1.3;
    }
}