/* Layout - Three column grid layout (matches live site) */
.front-page-container {
    display: grid;
    grid-template-columns: 600px 300px 220px;
    grid-template-areas: "articles worldnews sidebar";
    max-width: 1200px;
    margin: 40px auto;
    gap: 20px;
    padding: 0 20px;
    align-items: start;
}

.single-post-container {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr);
    grid-template-areas: "articles worldnews";
    max-width: 1200px;
    margin: 40px auto;
    gap: 20px;
    padding: 0 20px;
    align-items: start;
}

/* Updated single post layout: two equal columns */
.single-post-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "articles summary";
}

.articles-column {
    grid-area: articles;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0; /* Prevent content overflow */
}

.content-column {
    grid-area: articles;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-right: 1px solid var(--border-light);
    padding-right: 40px;
    margin-left: -19.5px; /* Move entire column right to center border on red dot */
    min-width: 0; /* Prevent content overflow */
}

/* New column for world news widget */
.world-news-column {
    grid-area: worldnews;
    width: 100%;
    padding-right: 20px;
    border-right: 1px solid var(--border-light);
    margin-right: -5px; /* Move divider 5px to the left */
    min-width: 0; /* Prevent content overflow */
    overflow: visible; /* Explicitly allow sticky elements to work */
    position: relative; /* Context for sticky/absolute children */
}

/* Sidebar column for sticky ads */
.sidebar-column {
    grid-area: sidebar;
    width: 100%;
    min-width: 0; /* Prevent content overflow */
    overflow: visible; /* Allow sticky elements to work */
    position: relative; /* Context for sticky/absolute children */
}

/* New column for AI chat on single post */
.ai-chat-column {
    grid-area: aichat;
    width: 100%;
    padding-right: 20px;
    border-right: 1px solid var(--border-light);
    min-width: 0; /* Prevent content overflow */
    display: flex;
    flex-direction: column;
    gap: 30px; /* Add spacing between widgets */
    overflow: visible; /* Explicitly allow sticky elements to work */
    position: relative; /* Context for sticky/absolute children */
}

/* Add margin to separate widgets within AI chat column */
.ai-chat-column > #snc-chatbot-container {
    margin-bottom: 0; /* Let the column gap handle spacing */
}



/* Small Articles Row Grid */
.small-articles-row {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px; /* Horizontal gap only */
    margin-bottom: 40px;
}

.small-articles-row-titles,
.small-articles-row-images,
.small-articles-row-excerpts {
    display: contents; /* Allows direct grid placement */
}

.small-article-title-cell,
.small-article-image-cell,
.small-article-excerpt-cell {
    padding: 0 0 12px 0; /* Bottom padding */
}

.small-article-title-cell {
    grid-row: 1; /* Ensure it's in the first row */
}

.small-article-image-cell {
    grid-row: 2; /* Ensure it's in the second row */
}

.small-article-excerpt-cell {
    grid-row: 3; /* Ensure it's in the third row */
}


/* Allow sidebar ads container to use sticky positioning */
.dark-mode .front-page-container,
.dark-mode .single-post-container,
.dark-mode .articles-column,
.dark-mode .content-column,
.dark-mode .world-news-column {
    background-color: var(--background-light);
}

/* --- Archive Page Layout --- */
body.archive .site-main {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0 20px;
}

body.archive .page-header,
body.archive .front-page-container {
    width: 100%;
    max-width: 1200px;
}

body.archive .page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

body.archive .front-page-container {
    margin-top: 0;
    margin-bottom: 40px;
}
/* --- End Archive Page Layout --- */

.summary-column {
    grid-area: summary;
    padding-left: 20px;
    border-left: 1px solid var(--border-light);
    min-width: 0;
}