/*
Theme Name: Newsmore Custom Layout
Theme URI: http://example.com/newsmore-custom/
Description: Custom layout and styling for the Newsmore Child Theme.
Author: Knox
Author URI: http://example.com
Template: morenews
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-layout, blog
Text Domain: newsmore-custom
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* =========================================================
   FONT CHANGES (Roboto Slab & Roboto)
   ========================================================= */

/* Apply Roboto (smooth sans-serif) to the main body text */
body, p, div, span, .entry-meta, .post-meta {
    font-family: 'Inter', Poppins !important;
    font-weight: 400;
}

/* Apply Roboto Slab (professional slab-serif) to all main titles/headings */
h1, h2, h3, h4, h5, h6,
.entry-title, 
.list-title, 
.compact-title, 
.trending-title, 
.grid-title, 
.block-title, 
.site-title a {
    font-family: 'Inter', serif !important;
    font-weight: 700; /* Bold for headings */
    line-height: 1.2; /* Tighter line spacing for titles */
}

/* Ensure the main feature title is easily readable */
.main-feature .entry-title h1 a {
    font-size: 2.2em; /* Keep it large */
}
/* =========================================================
   BACKGROUND MODIFICATION
   ========================================================= */

/* Set the main page background to white */
body {
    background-color: #ffffff; /* Pure white */
}

/* Ensure the main content area container also uses white, 
   or remove any inherited background color from the parent theme */
#primary, #main, .site-main {
    background-color: #ffffff; /* Pure white */
}

/* 1. Global Container and Headings */
.custom-container {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 20px 15px; 
}
h2 { 
    margin-top: 30px; 
    margin-bottom: 15px; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 5px; 
    font-size: 1.5em; 
    font-weight: bold;
}
.separator {
    border: none;
    border-top: 1px solid #eee;
    margin: 40px 0;
}

/* --- 2. HERO SECTION (Three Columns: 1/4 + 1/2 + 1/4) --- */
.top-feature-row {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 30px; 
    margin: 30px auto;
}

/* Defining the specific column widths */
.latest-posts-column { flex: 1; min-width: 250px; }
.main-feature-column { flex: 2; min-width: 500px; }
.usa-news-column { flex: 1; min-width: 250px; }

/* Latest Posts List Styling (Left Column) */
.post-list-item { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 15px; 
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
    gap: 10px; 
}
.post-list-item:last-child { border-bottom: none; }
.post-list-item img { width: 60px; height: 60px; object-fit: cover; flex-shrink: 0; }
.post-details h4.list-title { font-size: 1.1em; margin: 0 0 5px 0; }
.post-details .entry-meta { font-size: 0.8em; color: #888; }

/* Main Feature Styling (Center Column) */
.main-feature img { width: 100%; height: auto; margin-bottom: 15px; }
.main-feature h1.entry-title { font-size: 2em; line-height: 1.2; }

/* Compact News List Styling (Right Column) */
.post-compact-item { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 15px; 
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}
.post-compact-item:last-child { border-bottom: none; }
.post-compact-item img { width: 50px; height: 50px; object-fit: cover; flex-shrink: 0; }
.post-compact-item h4.compact-title { font-size: 1.05em; margin: 0; }


/* --- 3. TRENDING NOW (4-Column Grid) --- */
.trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    margin: 30px auto;
}
.trending-item img { width: 100%; height: 150px; object-fit: cover; margin-bottom: 10px; }


/* --- 4. ENTERTAINMENT (Feature + Grid Block) --- */
.category-posts-wrap {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}
.block-main-post { flex: 2; } 
.block-grid-posts {
    flex: 1; 
    display: grid;
    grid-template-rows: repeat(4, auto); /* Rows for 4 list items */
    gap: 15px;
}
.block-main-post img { width: 100%; height: auto; margin-bottom: 10px; }
.grid-support-post { display: flex; gap: 10px; align-items: center; }
.grid-support-post img { width: 50px; height: 50px; object-fit: cover; flex-shrink: 0; }


/* --- 5. BUSINESS (3-Column Grid) --- */
.business-grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    margin-top: 20px;
}
.business-item img { width: 100%; height: 150px; object-fit: cover; }


/* --- 6. ALL TYPES BLOCK (Feature + Sidebar List) --- */
.all-types-wrap {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}
.all-types-main-post { flex: 2; } 
.all-types-main-post img { width: 100%; height: auto; margin-bottom: 15px; }

.all-types-sidebar-list {
    flex: 1; 
    display: grid;
    grid-template-rows: repeat(4, auto);
    gap: 15px;
}
.all-types-list-item { display: flex; gap: 10px; align-items: center; }
.all-types-list-item img { width: 60px; height: 60px; object-fit: cover; }


/* --- 7. Responsiveness --- */
@media (max-width: 900px) {
    .top-feature-row, .category-posts-wrap, .all-types-wrap {
        flex-direction: column; 
    }
    .trending-grid, .business-grid-3-col {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
    }
}
@media (max-width: 600px) {
    .trending-grid, .business-grid-3-col {
        grid-template-columns: 1fr; /* 1 column on phone */
    }
}

/* --- NEW STYLING FOR CONTENT DETAILS (Category Name, Author/Date) --- */

/* Wrapper for category name */
.entry-meta-top {
    font-size: 0.75em; /* Smaller font size for category */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* Style for category link/span */
.entry-meta-top .category-name a {
    color: #cc0000; /* Use a distinct color for the category, like red */
    text-decoration: none;
    padding-right: 5px; /* Spacing between multiple categories */
}
.entry-meta-top .category-name a:hover {
    text-decoration: underline;
}

/* Style for Author/Date meta information */
.post-meta, .entry-meta {
    font-size: 0.8em;
    color: #666; /* Muted color for meta info */
    margin-top: 5px; /* Space below the title */
}
/* =========================================================
   DYNAMIC EFFECTS & SMOOTH TRANSITIONS
   ========================================================= */

/* 1. Global Smoothing for all Interactive Elements */
/* Ensures all color changes, transforms, and opacity shifts are smooth */
a, a:hover, button, input[type="submit"], .post-list-item, .trending-item, .grid-support-post, .business-item {
    transition: all 0.3s ease-in-out; 
}

/* 2. Hover Effect for List Items and Grid Articles */

/* Adds a subtle lift and background change when hovering over any post in a list or grid */
.post-list-item:hover, 
.post-compact-item:hover,
.trending-item:hover, 
.grid-support-post:hover {
    background-color: #f7f7f7; /* Very light background change */
    transform: translateY(-2px); /* Subtle vertical lift */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Soft, subtle shadow */
}

/* 3. Image Hover Effect (Zoom/Scale) */
/* This creates a dynamic, smooth zoom effect on post thumbnails */
.post-list-item img, 
.trending-item img,
.grid-support-post img,
.main-feature img,
.block-main-post img {
    /* Ensures the image itself is smooth when transforming */
    transition: transform 0.4s ease-in-out; 
    overflow: hidden; /* Necessary if the image is inside a fixed container */
}

/* Apply the zoom/scale effect on hover */
.post-list-item:hover img, 
.trending-item:hover img,
.grid-support-post:hover img,
.main-feature:hover img,
.block-main-post:hover img {
    transform: scale(1.03); /* Zooms the image slightly by 3% */
}

/* 4. Refined Typography Hover */
/* Adds smooth color change to titles on hover */
.list-title a:hover, 
.compact-title a:hover, 
.trending-title a:hover, 
.grid-title a:hover, 
.block-title a:hover {
    color: #cc0000; /* Uses the same primary color defined for categories */
}

/* 5. Depth and Separation for Major Blocks */
/* Gives the main feature column and large section blocks a clear separation */
.main-feature-column .main-feature {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 6. Minor Spacing Polish */
/* Ensures there's clean vertical rhythm between sections */
.separator {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

/* Reset image overflow for certain containers */
.post-compact-item img {
    overflow: hidden;
}
/* =========================================================
   SPACING, PADDING, AND MARGIN ADJUSTMENTS
   ========================================================= */

/* --- 1. General Container Spacing --- */

/* Add vertical spacing around the main page container */
.custom-container {
    padding-top: 25px;
    padding-bottom: 25px;
    /* Max-width might need adjustment depending on your theme, but we ensure consistent padding inside */
}

/* Add more vertical space between major sections (Top Feature Row, Trending, etc.) */
.top-feature-row,
.trending-now-block,
.entertainment-block {
    margin-bottom: 40px; 
}

/* --- 2. Top Feature Row (3 Columns) --- */

/* Ensure equal spacing between the three top columns */
.top-feature-row {
    display: flex;
    gap: 30px; /* Space between the columns */
}

.latest-posts-column, 
.main-feature-column, 
.usa-news-column {
    /* Sets the columns to take up space appropriately in a 1:2:1 ratio, adjusted slightly */
    flex: 1; 
}
.main-feature-column {
    flex: 2; /* Make the main feature wider */
}


/* --- 3. List and Compact Item Spacing (Latest Posts, USA News, Grid Items) --- */

/* General spacing for items in the Latest Posts column */
.latest-posts-column .post-list-item {
    display: flex; /* Aligns thumbnail and text horizontally */
    align-items: flex-start;
    margin-bottom: 20px; 
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee; /* Light separator line */
}
.latest-posts-column .post-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Space between the thumbnail and post details */
.latest-posts-column .post-list-item img {
    margin-right: 15px; 
    flex-shrink: 0; /* Prevents image from shrinking */
}

/* Spacing for Compact News items (USA NEWS) */
.usa-news-column .post-compact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.usa-news-column .post-compact-item img {
    margin-right: 10px;
}
.usa-news-column .post-compact-item .post-details {
    padding-left: 0; /* Remove potential extra padding */
}

/* --- 4. Grid Spacing (Buying & Selling Tips) --- */

.trending-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns wide */
    gap: 20px; /* Space between grid items */
}
.trending-item {
    padding-bottom: 15px;
}

/* --- 5. Two-Part Category Block Spacing (Real Estate Trends) --- */

.category-posts-wrap {
    display: flex;
    gap: 30px;
}
.block-main-post {
    flex: 2; /* Main post takes up more space */
    padding-right: 15px;
}
.block-grid-posts {
    flex: 1; /* Grid posts take up less space */
    display: grid;
    grid-template-columns: 1fr; /* Stacked grid items */
    gap: 15px;
}

/* Space for grid support posts */
.grid-support-post {
    display: flex;
    align-items: flex-start;
}
.grid-support-post img {
    margin-right: 10px;
}

/* --- 6. Separator Line Refinement --- */

.separator {
    margin: 50px 0; /* Increased vertical margin for clean section breaks */
}
/* =========================================================
   NAVIGATION BAR STYLING (Dark Accent Bar)
   ========================================================= */

/* 1. Main Navigation Bar Background and Spacing */
/* This targets the container that holds the menu links, ensuring the background is fully black/dark gray */
.main-navigation, .header-navigation-wrap, .primary-menu-container {
    background-color: #222222; /* Maintain a deep dark gray/black */
    padding: 12px 0; /* Add a little vertical padding for height */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* 2. Menu Link Styling (Text) */
.main-navigation ul li a {
    color: #ffffff; /* White text for high contrast */
    font-size: 0.95em;
    font-weight: 500; /* Slightly thicker than body text */
    text-transform: uppercase; /* Use uppercase for menu items (common magazine style) */
    padding: 10px 15px; /* Padding for click area */
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover effects */
    letter-spacing: 0.5px; /* A little space between letters for readability */
}

/* 3. Menu Link Hover/Active State */
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    color: #ff8c00; /* Use an accent color, like a bright orange, for the hover state */
    background-color: transparent; /* Ensure no weird background boxes appear */
}

/* 4. Search Icon Styling */
.header-search-icon {
    color: #ffffff; /* White search icon */
    padding-left: 15px;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}
.header-search-icon:hover {
    color: #ff8c00; /* Match search icon hover to menu link hover */
}
/* --- TITLE ANIMATION --- */

/* Base style for all titles (titles are already using Roboto Slab font from previous step) */
.list-title a, .compact-title a, .trending-title a, .grid-title a, .block-title a, .entry-title a {
    position: relative;
    display: inline-block;
    text-decoration: none; /* Remove default underline */
}

/* Create the animated pseudo-element (the underline) */
.list-title a::after, .compact-title a::after, .trending-title a::after, .grid-title a::after, .block-title a::after, .entry-title a::after {
    content: '';
    position: absolute;
    width: 0%; /* Start at zero width */
    height: 3px;
    bottom: -5px; /* Position slightly below the text */
    left: 0;
    background-color: #ff8c00; /* Use your accent color */
    transition: width 0.3s ease-in-out; /* Animate the width change */
}

/* On hover, expand the underline to full width */
.list-title a:hover::after, .compact-title a:hover::after, .trending-title a:hover::after, .grid-title a:hover::after, .block-title a:hover::after, .entry-title a:hover::after {
    width: 100%;
}

/* =========================================================
   TITLE COLOR (Initial State)
   ========================================================= */

/* Target all titles (links) to set their default color to black */
.list-title a, 
.compact-title a, 
.trending-title a, 
.grid-title a, 
.block-title a, 
.entry-title a,
.main-feature .entry-title a { /* Specific targeting for the main feature H1 */
    color: #000000; /* Pure black for high contrast */
    text-decoration: none; /* Ensure no default underline */
    transition: color 0.3s ease-in-out; /* Keep the smooth transition */
}

/* Ensure the hover state still applies the accent color */
.list-title a:hover, 
.compact-title a:hover, 
.trending-title a:hover, 
.grid-title a:hover, 
.block-title a:hover, 
.entry-title a:hover {
    color: #ff8c00; /* Accent color on hover */
}
/* =========================================================
   NAVIGATION BAR COMPLETE REDESIGN (In-Place, Dark Theme)
   ========================================================= */

/* 1. Main Navigation Bar Container */
#main-navigation-bar {
    /* *** REVERTED POSITION CHANGES *** */
    position: relative; /* Ensure it stays in the document flow */
    top: auto;
    z-index: 100; 
    
    /* Style the bar itself */
    background-color: #222222; /* Deep dark gray/black background (Keeping it dark for contrast with logo area) */
    padding: 12px 0; /* Vertical padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Prominent shadow for depth */
    border-bottom: none; /* Remove subtle border if not needed */
    
    /* Ensure the content is centered/aligned properly */
    display: flex; 
    justify-content: center;
    align-items: center;
}

/* 2. Menu Link Styling (Text) */
#main-navigation-bar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

#main-navigation-bar ul li a {
    color: #ffffff; /* White text for high contrast */
    font-family: 'Inter', serif !important; /* Your professional font */
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 18px; 
    transition: all 0.3s ease-in-out; /* Smooth transitions */
    letter-spacing: 0.5px;
    position: relative; /* For the custom hover effect */
}

/* 3. Menu Link Hover/Active State - Animated Bar Underline */

/* =========================================================
   NAVIGATION BAR HOVER STYLE REDESIGN
   ========================================================= */

/* 1. Base Link Style (Reset) */
#main-navigation-bar ul li a {
    /* Keep existing color and font settings */
    color: #ffffff; 
    font-family: 'Inter', serif !important; 
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 18px; 
    transition: color 0.3s ease-in-out; /* ONLY transition color, not the border */
    letter-spacing: 0.5px;
    position: relative; /* CRITICAL: Allows absolute positioning of the pseudo-element */
    overflow: hidden; /* Ensures the hover element doesn't bleed if it starts outside */
}


/* On hover, slide the bar into view */
#main-navigation-bar ul li a:hover::before,
#main-navigation-bar ul li.current-menu-item a::before {
    transform: translateX(0); /* Slides the bar fully into position */
}

/* Search icon hover remains the same */
#main-navigation-bar .header-search-icon:hover {
    color: #ff8c00;
}

#main-navigation-bar ul li a:hover::after,
#main-navigation-bar ul li.current-menu-item a::after {
    width: 80%; /* Expand to 80% width on hover/active */
}


/* 4. Search Icon Styling */
#main-navigation-bar .header-search-icon {
    color: #ffffff; /* White icon */
    font-size: 1.1em;
    padding-left: 20px;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}
#main-navigation-bar .header-search-icon:hover {
    color: #ff8c00;
}
/* =========================================================
   HEADER LOGO CENTERING
   Targeting: #masthead > div.af-middle-header > div > div > div > div
   ========================================================= */

/* 1. Target the immediate container wrapping the logo link */
#masthead > div.af-middle-header > div > div > div > div {
    /* Ensures the container itself spans the full width of its space */
    width: 100%;
    
    /* Center the inline content (the logo <a> tag and <img> tag inside it) */
    text-align: center; 
}

/* 2. Ensure the logo link (the <a> tag) is a block element to respect text-align: center */
#masthead > div.af-middle-header > div > div > div > div > a {
    display: inline-block; /* Or block, depending on theme structure */
}

/* 3. Minor spacing adjustment for the logo area (optional) */
/* This assumes af-middle-header is the main logo row */
div.af-middle-header {
    padding: 20px 0; /* Add vertical space around the logo */
}
/* =========================================================
   SECTION TITLE STYLING (H2)
   ========================================================= */

/* 1. Base Styling for Section Titles */
.content-area h2 {
    /* Use the bold, professional header font */
    font-family: 'Inter', serif !important;
    font-size: 1.8em;
    font-weight: 800; /* Extra bold */
    color: #0E1550; /* Dark color for contrast */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Centering the title and setting up the divider */
    text-align: center;
    padding-bottom: 5px; /* Space between text and divider */
    margin-bottom: 25px; /* Space below the entire title block */
    position: relative; /* Essential for positioning the ::after divider */
}

/* 2. Creating the Custom Divider Line (::after pseudo-element) */
.content-area h2::after {
    content: '';
    display: block;
    width: 60px; /* Short, prominent line */
    height: 4px; /* Thickness of the line */
    background-color: #ff8c00; /* Use your accent color */
    
    /* Center the line horizontally */
    margin: 10px auto 0; /* Top margin to separate from text, auto margins for centering */
}

/* 3. Special case for the Top Feature Row titles (adjust margins if needed) */
.top-feature-row h2 {
    /* Don't center titles in the side columns, align them left */
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 15px; 
    position: relative;
}

/* 4. Remove the centered divider from the side columns */
.top-feature-row h2::after {
    content: none; 
}

/* Ensure the titles in the side columns are bold and clear */
.latest-posts-column h2, 
.usa-news-column h2 {
    border-bottom: 2px solid #ff8c00; /* Use a full-width bottom border for side columns */
    padding-bottom: 5px;
}
/* =========================================================
   MEDIA QUERY: TABLET (Max-width: 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    /* 1. Hero Section (Three Columns) */
    .top-feature-row {
        flex-direction: column; /* Stack columns vertically */
        gap: 40px; /* Increase space between stacked sections */
    }

    /* 2. Buying & Selling Tips (4-Column Grid) */
    .trending-grid {
        grid-template-columns: repeat(2, 1fr); /* Change to a 2-column grid */
        gap: 30px;
    }

    /* 3. Real Estate Trends (Feature + Grid Block) */
    .category-posts-wrap {
        flex-direction: column; /* Stack the main post and the grid block */
        gap: 30px;
    }
    .block-main-post {
        padding-right: 0; 
    }

    /* 4. Navigation Bar (Adjust padding for touch) */
    #main-navigation-bar ul li a {
        padding: 10px 12px;
        font-size: 0.9em;
    }
}
/* =========================================================
   MEDIA QUERY: MOBILE PHONE (Max-width: 767px)
   ========================================================= */
@media (max-width: 767px) {
    /* 1. Overall Spacing */
    .custom-container {
        padding-left: 15px;
        padding-right: 15px; /* Add internal padding to prevent content hitting edges */
    }
    
    /* 2. Main Sections (Already stacked from Tablet view, but spacing adjusted) */
    .latest-posts-column, 
    .main-feature-column, 
    .usa-news-column,
    .trending-now-block,
    .entertainment-block {
        margin-bottom: 30px; 
    }

    /* 3. Buying & Selling Tips (Single Column) */
    .trending-grid {
        grid-template-columns: 1fr; /* Force to single column */
    }
    
    /* 4. List Item Adjustments (Latest Posts, USA News) */
    .post-list-item {
        flex-direction: column; /* Stack image and text */
        text-align: center;
    }
    .post-list-item img {
        margin-right: 0;
        margin-bottom: 10px; /* Space between image and stacked text */
    }
    .post-compact-item {
        margin-bottom: 20px;
    }

    /* 5. Navigation Bar (Crucial for mobile experience) */
    /* Hiding the full nav bar (often replaced by a hamburger menu in the theme) */
    #main-navigation-bar {
        display: none; 
    }
    /* NOTE: If your theme doesn't automatically show a hamburger menu, 
       you'll need separate CSS/JS to implement one. */
       
    /* 6. Section Titles */
    .content-area h2 {
        font-size: 1.5em; 
        margin-bottom: 20px;
    }

    /* 7. Footer Widgets */
    .footer-widgets-area {
        flex-direction: column; /* Stack footer columns */
    }
}
/* =========================================================
   MEDIA QUERY: MOBILE PHONE (Max-width: 767px)
   Image Fluidity and Fixes
   ========================================================= */
@media (max-width: 767px) {
    /* ... (Existing mobile rules here, like single column grids) ... */

    /* 1. Global Image Fluidity */
    /* This rule is CRUCIAL: Makes every image responsive, preventing overflow */
    img {
        max-width: 100%; 
        height: auto; /* Maintains aspect ratio */
        display: block;
    }
    
    /* 2. Specific Image Container Fixes for Lists/Grids */

    /* Ensures post list item images (Latest Posts, USA News) scale correctly */
    .post-list-item img, 
    .post-compact-item img,
    .grid-support-post img {
        /* If they have fixed dimensions, remove them or set them to fluid */
        width: 100%;
        height: auto;
    }

    /* When images and text are stacked (flex-direction: column) in lists */
    .post-list-item {
        /* Centers the image when it becomes full width */
        align-items: center; 
    }
    
    /* Ensures main feature images and grid images are fully fluid */
    .main-feature img,
    .trending-item img,
    .block-main-post img {
        width: 100%;
        height: auto;
    }
    
    /* Adjust specific containers that might have fixed widths */
    .latest-posts-column .post-list-item {
        /* When we set .post-list-item to flex-direction: column (if it's not already)
           we need to make sure the image is no longer restricted to a small size. */
        flex-direction: column;
        align-items: center;
    }
    
    /* Make the images in the Latest Posts/USA News list take up a decent amount of space */
    .latest-posts-column .post-list-item img,
    .usa-news-column .post-compact-item img {
        /* On mobile, let's limit them to a reasonable size so they don't look too big */
        max-width: 80%; 
        margin-bottom: 15px;
    }
    
    /* Override to ensure the post details take up full width when stacked */
    .post-details {
        width: 100%;
        text-align: center;
    }
    
    /* ... (The rest of your existing mobile rules) ... */
}