/*
Theme Name: Newshub
Author: Your Name
Description: A professional and responsive news theme with a mobile-first architecture.
Version: 1.1
*/

/* --- TABLE OF CONTENTS ---
1.  Global Styles & CSS Variables
2.  Layout & Helper Classes
3.  Header & Navigation
4.  Footer
5.  Front Page & Sections
6.  Single Post Content
7.  Reusable Components (Cards, Buttons, etc.)
8.  Comments, Forms & Misc
*/

/* --- 1. Global Styles & CSS Variables --- */
:root {
	--primary-color: #dc2626; /* Updated by functions.php */
	--secondary-color: #1e293b; /* Updated by functions.php */
	--text-dark: #1a202c;
	--text-light: #6b7280;
	--text-inverted: #ffffff;
	--bg-main: #ffffff;
	--bg-light: #f8fafc;
	--border-color: #e2e8f0;
	--border-radius: 8px;
	--shadow: 0 4px 12px rgba(0,0,0,0.08);
	--shadow-hover: 0 8px 20px rgba(0,0,0,0.12);
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: 'Merriweather', serif; /* Example serif font */
}
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: var(--font-sans);
    background-color: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
}
body.mobile-menu-active {
    overflow: hidden;
}
a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 2. Layout & Helper Classes --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* --- 3. Header & Navigation --- */
.site-header { /* Renamed from .newshub-header for clarity */
    background: var(--secondary-color);
    border-bottom: 1px solid #374151;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    color: var(--text-inverted);
}
.mobile-menu-toggle { display: none; } /* Hidden on desktop */

/* --- 4. Footer --- */
.site-footer {
    background: var(--secondary-color);
    color: #cbd5e1;
    margin-top: 4rem;
    padding: 3rem 0 1.5rem;
}
/* Mobile-First: All footer widgets stack into a single column by default */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
.footer-widget h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    color: var(--text-inverted);
}
.footer-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-widget ul a { color: #94a3b8; }
.footer-widget ul a:hover { color: var(--primary-color); padding-left: 5px; }
.footer-copyright { border-top: 1px solid #374151; padding-top: 1.5rem; text-align: center; font-size: 0.875rem; color: #94a3b8; }

/* --- 5. Front Page & Sections --- */
.page-content { padding: 2rem 0; }
.content-section { margin-bottom: 3rem; }
.section-title { font-size: 1.8rem; font-weight: 800; margin: 0 0 1.5rem; color: var(--text-dark); }
/* Hero Section (Mobile First: Stacked) */
.hero-featured { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.hero-image img { border-radius: var(--border-radius); }
.hero-title { font-size: 2rem; line-height: 1.2; font-weight: 800; margin: 1rem 0; }
.hero-title a { color: var(--text-dark); }
/* All Grids (Mobile First: Single Column) */
.post-grid, .category-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.category-grid { grid-template-columns: repeat(2, 1fr); } /* 2 columns for categories looks good on mobile */

/* --- 6. Single Post Content --- */
.single-post-container { padding: 1.5rem 0; }
.main-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.layout-full-width .main-content { max-width: 800px; margin: 0 auto; }
.post-article { background: var(--bg-main); border-radius: var(--border-radius); box-shadow: var(--shadow); }
.post-header, .article-content, .post-footer { padding: 1.5rem; }
.post-title { font-size: 2rem; line-height: 1.2; font-weight: 800; margin: 1rem 0; color: var(--text-dark); }
.enhanced-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 1rem 0; margin: 1.5rem 0; }
.article-content { line-height: 1.8; color: var(--text-dark); }
.article-content h2, .article-content h3 { font-family: var(--font-serif); }
.article-content blockquote { border-left: 4px solid var(--primary-color); padding: 1em 1.5em; background: var(--bg-light); margin: 1.5em 0; }
.social-share-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- 7. Reusable Components (Cards, Buttons, etc.) --- */
.news-card, .category-card {
    background: var(--bg-main); border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover, .category-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.card-image-link img { width: 100%; height: 200px; object-fit: cover; }
.card-content { padding: 1.25rem; }
.card-content h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin: 0.5rem 0; }
.card-content h3 a { color: var(--text-dark); }
.news-category { display: inline-block; background: var(--bg-light); color: var(--primary-color); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
.news-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: var(--text-light); }
.category-card { padding: 1.5rem 1rem; text-align: center; }
.category-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.button { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 6px; text-decoration: none; font-weight: 600; transition: all 0.2s ease; border: none; cursor: pointer; }
.button-primary { background: var(--primary-color); color: var(--text-inverted); }
.button-primary:hover { opacity: 0.85; }
.button-secondary { border: 2px solid var(--border-color); color: var(--text-light); }
.button-secondary:hover { background: var(--primary-color); color: var(--text-inverted); border-color: var(--primary-color); }

/* --- 8. Comments, Forms & Misc --- */
.comments-section { background: var(--bg-main); border-radius: var(--border-radius); padding: 1.5rem; margin-top: 3rem; }
.breaking-news-ticker { background: var(--primary-color); color: white; padding: 0.5rem 0; }
.ticker-content { display: flex; align-items: center; gap: 1rem; }
.ticker-label { background: rgba(255,255,255,0.2); padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: bold; }
.ticker-text-wrapper { overflow: hidden; }
.ticker-text { white-space: nowrap; animation: ticker-scroll 20s linear infinite; }
@keyframes ticker-scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-120%); } }

/*
==========================================================================
    DESKTOP & TABLET STYLES - All responsive changes happen here
==========================================================================
*/
@media (min-width: 768px) {
    /* --- Layouts --- */
    .footer-grid.layout-2-column { grid-template-columns: repeat(2, 1fr); }
    .footer-grid.layout-3-column { grid-template-columns: repeat(3, 1fr); }
    .footer-grid.layout-4-column { grid-template-columns: repeat(4, 1fr); }
    .footer-copyright { display: flex; justify-content: space-between; text-align: left; }
    .post-grid.grid-cols-desktop-2 { grid-template-columns: repeat(2, 1fr); }
    .post-grid.grid-cols-desktop-3 { grid-template-columns: repeat(3, 1fr); }
    .post-grid.grid-cols-desktop-4 { grid-template-columns: repeat(4, 1fr); }
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .layout-with-sidebar { grid-template-columns: 2fr 1fr; }

    /* --- Spacing & Typography --- */
    .page-content { padding: 3rem 0; }
    .content-section { margin-bottom: 4rem; }
    .section-title { font-size: 2rem; }
    .post-title { font-size: 2.5rem; }
    .post-header, .article-content, .post-footer { padding: 2rem; }

    /* --- Components --- */
    .hero-featured { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .hero-title { font-size: 2.5rem; }
    .enhanced-meta { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 1024px) {
    .category-grid { grid-template-columns: repeat(6, 1fr); }
}
/*
============================================================
    9. SIDEBAR & WIDGETS
============================================================
*/
.sidebar-area {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.widget {
    background: var(--bg-main);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 1.5rem;
}
.widget-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color);
    color: var(--text-dark);
}

/* --- Specific Widget Styles --- */

/* Author Widget (if you create a custom one) */
.author-box { display: flex; gap: 1rem; align-items: flex-start; }
.author-box .avatar { border-radius: 50%; }
.author-info h4 { font-weight: bold; margin: 0 0 0.5rem; }
.author-info p { font-size: 0.875rem; color: var(--text-light); margin: 0; }

/* Recent/Popular Posts List Widget */
.widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.widget ul li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-color); }
.widget ul li:first-child { padding-top: 0; }
.widget ul li:last-child { border-bottom: none; padding-bottom: 0; }
.widget ul img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.widget ul a { font-weight: 600; color: var(--text-dark); display: block; line-height: 1.3; margin-bottom: 0.25rem; }
.widget ul .post-date { font-size: 0.75rem; color: var(--text-light); }

/* Categories Widget */
.widget_categories ul { gap: 0.5rem; }
.widget_categories li { padding: 0; border: none; }
.widget_categories li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 6px;
    color: var(--text-dark);
    font-weight: 600;
    transition: background 0.2s;
}
.widget_categories li a:hover { background-color: var(--border-color); text-decoration: none; }
.widget_categories .count {
    background: var(--border-color);
    color: var(--text-light);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
    font-weight: normal;
}

/* Newsletter/Form Widget */
.newsletter-form-widget p { margin: 0 0 1rem; color: var(--text-light); }
.newsletter-form-widget form { display: flex; flex-direction: column; gap: 0.75rem; }
.newsletter-form-widget input[type="email"] { padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; }
.newsletter-form-widget button { background: var(--primary-color); color: white; border: none; padding: 0.75rem; border-radius: 6px; font-weight: 600; cursor: pointer; }
.newsletter-form-widget button:hover { opacity: 0.85; }

/*
 * ===============================================
 * STYLES FOR RESPONSIVE NEWSLETTER FORM
 * ===============================================
 */

/* --- Main Container --- */
.newsletter-container {
    background-color: #1e293b; /* A modern, dark blue-gray */
    color: #cbd5e1;
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: 12px;
    margin: 2rem auto; /* Centers the container in the footer */
    max-width: 650px; /* Prevents it from being too wide on large screens */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.newsletter-content h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9; /* A brighter white for the heading */
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.newsletter-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 2rem;
    color: #94a3b8; /* A lighter gray for readability */
}

/* --- The Form --- */
/* Mobile-First: Form is stacked vertically by default */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Space between the input and button */
}

.newsletter-form input[type="email"] {
    width: 100%;
    min-height: 52px; /* Taller for easy tapping on mobile */
    padding: 0.75rem 1rem;
    font-size: 1rem; /* Prevents iOS from zooming on input focus */
    color: #f1f5f9;
    background-color: #334155;
    border: 1px solid #475569;
    border-radius: 8px;
    -webkit-appearance: none; /* Fix for iOS input styling */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-form input[type="email"]::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.newsletter-form button[type="submit"] {
    width: 100%;
    min-height: 52px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #dc2626; /* Your theme's primary red color */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}


/* --- Hover & Focus States --- */
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: #dc2626; /* Highlight with primary color */
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.4); /* Glow effect */
}

.newsletter-form button[type="submit"]:hover {
    background-color: #b91c1c; /* A slightly darker red on hover */
    transform: translateY(-2px); /* Subtle lift effect */
}


/* --- Privacy Note --- */
.newsletter-privacy {
    font-size: 0.8rem !important; /* Use !important to override other p styles if needed */
    color: #94a3b8 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}


/* --- Accessibility --- */
/* Hides the label visually but keeps it for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/*
 * --- RESPONSIVE STYLES --- 
 * Media query for screens wider than 768px (tablets and up)
 */
@media (min-width: 768px) {
    /* Switch to a horizontal layout */
    .newsletter-form {
        flex-direction: row;
        gap: 0.5rem;
    }

    .newsletter-form input[type="email"] {
        flex-grow: 1; /* Allow the input to take up available space */
    }

    .newsletter-form button[type="submit"] {
        width: auto; /* Button shrinks to fit its content */
    }
}

/*
============================================================
    10. COMMENTS SECTION
============================================================
*/
.comments-area {
    background: var(--bg-main);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 3rem;
    box-shadow: var(--shadow);
}
.comments-title, .comment-reply-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    color: var(--text-dark);
}
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}
.comment-list .comment {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.comment-list .children {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 1.5rem;
    border-left: 2px solid var(--border-color);
}
.comment-body {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1rem;
}
.comment-author .avatar {
    border-radius: 50%;
}
.comment-author .fn {
    font-weight: 700;
    font-style: normal;
}
.comment-metadata {
    font-size: 0.875rem;
    color: var(--text-light);
}
.comment-metadata a {
    color: inherit;
}
.reply a {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--bg-light);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
}
.comment-content {
    grid-column: 2 / 3;
    line-height: 1.7;
}
.comment-form p {
    margin-bottom: 1rem;
}
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-light);
}
.comment-form .required {
    color: var(--primary-color);
}
.form-submit .submit {
    /* Uses the .button and .button-primary classes */
    font-size: 1rem;
}

@media (min-width: 768px) {
    .comments-area {
        padding: 2.5rem;
    }
    .comment-list .children {
        padding-left: 2.5rem;
    }
}
/*
============================================================
    10. FOOTER WIDGETS
============================================================
*/
/* Mobile-First: All widgets stack by default */
.footer-widgets-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

/* Change the class name in your existing footer widget styles if needed */
.footer-widget-area .widget {
    background: none; /* Remove individual widget backgrounds in the footer */
    padding: 0;
    box-shadow: none;
}
.footer-widget-area .widget-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    color: var(--text-inverted);
    border-bottom: none; /* Footer titles might not need a border */
}

/* Footer menu and list styling */
.footer-widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer-widget-area ul a {
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s ease;
}
.footer-widget-area ul a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}
.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Site Info / Copyright section */
.site-info {
    border-top: 1px solid #374151;
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-light);
}
.copyright-text {
    margin-bottom: 0.5rem;
}

/* --- Desktop Styles for Footer --- */
@media (min-width: 768px) {
    .footer-widgets-grid.layout-2-column { grid-template-columns: repeat(2, 1fr); }
    .footer-widgets-grid.layout-3-column { grid-template-columns: repeat(3, 1fr); }
    .footer-widgets-grid.layout-4-column { grid-template-columns: repeat(4, 1fr); }
    
    .site-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .copyright-text {
        margin-bottom: 0;
    }
}

/*
============================================================
    11. TEMPLATE TAGS & META
============================================================
*/
.entry-meta-wrapper {
    padding: 1rem 0;
    margin: 1.5rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-light);
}
.entry-meta a {
    color: var(--text-dark);
    font-weight: 600;
}

/* Post Navigation (Next/Previous) */
.post-navigation {
    margin: 2rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
    padding: 1.5rem 0;
    width: 50%;
}
.post-navigation .nav-next {
    text-align: right;
    border-left: 1px solid var(--border-color);
    padding-left: 1.5rem;
}
.post-navigation .nav-previous {
    padding-right: 1.5rem;
}
.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}
.post-navigation .nav-title {
    font-weight: 700;
    color: var(--text-dark);
}

/* Author Bio Box */
.author-bio-box {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.author-avatar .avatar {
    border-radius: 50%;
}
.author-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}
.author-description p {
    color: var(--text-light);
    margin: 0 0 1rem;
}
.author-link {
    font-weight: 600;
}

/* Taxonomy (Cats and Tags) */
.cat-links, .tags-links {
    font-size: 0.9rem;
    color: var(--text-light);
}
.tags-links {
    margin-top: 0.5rem;
}

/* --- Desktop Styles for Template Tags --- */
@media (min-width: 640px) {
    .author-bio-box {
        flex-direction: row;
        text-align: left;
    }
}

/*
============================================================
    12. ELEMENTOR COMPATIBILITY STYLES
============================================================
*/

/* Styles for the "Elementor Full Width" template */
.elementor-full-width-page .container {
    max-width: 100%; /* Allow Elementor sections to go full-width */
    padding: 0;
}

/* This ensures Elementor sections with a defined width still get centered */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px; /* Match your theme's default .container width */
}

/* Hide the default page title on Elementor Full Width pages */
.page-template-template-elementor-full-width .entry-header {
    display: none;
}
/*
============================================================
    13. FRONT PAGE CATEGORY SHOWCASE
============================================================
*/
.category-showcase-section {
    border-top: 1px solid var(--border-color);
    padding-top: 3rem;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.section-header .section-title {
    margin-bottom: 0;
}
.view-all-link {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Mobile-First: All items stack */
.category-showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Featured Card in Showcase */
.featured-card .card-image-link img {
    height: 250px; /* Taller image for featured post */
}
.featured-card h3 {
    font-size: 1.5rem;
}

/* List Item Cards */
.post-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.news-card-list-item {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.news-card-list-item .card-image-link img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
    flex-shrink: 0;
}
.news-card-list-item .card-content {
    padding: 0;
}
.news-card-list-item h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.25rem;
}

/* --- Desktop Styles for Category Showcase --- */
@media (min-width: 768px) {
    /* Create the 2-column layout */
    .category-showcase-grid {
        grid-template-columns: 1.5fr 1fr; /* 60% for featured, 40% for list */
        gap: 2rem;
    }
    .featured-card .card-image-link img {
        height: 400px;
    }
}

/*
============================================================
    13. IMAGE GRID & OVERLAY CARDS
============================================================
*/
.image-grid-section .post-grid {
    /* On mobile, use a 2-column grid for these image cards */
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.image-card {
    position: relative; /* Required for overlay positioning */
    display: block; /* Make the whole article a block link */
}

/* Make the image link cover the entire card */
.image-card .card-image-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.image-card .card-image-link img {
    height: 280px; /* A good height for this card style */
    transition: transform 0.4s ease;
}

.image-card:hover .card-image-link img {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Content overlay */
.image-card .card-content {
    position: relative; /* Position on top of the image */
    z-index: 2; /* Ensure content is above the image link */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
    height: 100%;
    padding: 1rem;
    color: var(--text-inverted);
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}

.image-card .news-category {
    background-color: var(--primary-color);
    color: var(--text-inverted);
    align-self: flex-start; /* Keep category badge at the top of its flex context */
    margin-bottom: auto; /* Push everything else down */
}

.image-card h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0.5rem 0 0;
    color: var(--text-inverted); /* White text for overlay */
}
.image-card h3 a {
    color: inherit;
    text-decoration: none;
}
.image-card h3 a:hover {
    text-decoration: underline;
}

/* --- Desktop Styles for Image Grid --- */
@media (min-width: 768px) {
    .image-grid-section .post-grid {
        /* On desktop, use the 4-column grid */
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .image-card .card-image-link img {
        height: 320px;
    }

    .image-card h3 {
        font-size: 1.25rem;
    }
}

/*
============================================================
    14. MAGAZINE FRONT PAGE LAYOUT
============================================================
*/

/* --- Main 2-Column Layout --- */
/* Mobile-First: Stacks by default */
.main-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.main-content-area {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.sidebar-area {
    margin-top: 2rem;
}
/* Desktop: 2 columns */
@media (min-width: 992px) {
    .main-grid-layout {
        /* A common news layout ratio */
        grid-template-columns: 2fr 1fr;
        gap: 2.5rem;
    }
    .sidebar-area {
        margin-top: 0;
    }
}


/* --- Section Header Styling --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}
.section-header .section-title {
    font-size: 1.5rem;
    margin: 0;
    position: relative;
    padding-left: 1rem;
}
.section-header .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: var(--primary-color);
}
.section-header .section-title a {
    color: var(--text-dark);
}
.view-all-link {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* --- Section Content Grids --- */
/* Default Layout (1 featured post, list below) */
.category-section.layout-default .section-content-grid,
.category-section.layout-showcase .section-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/* Showcase Layout (1 featured, list to the side on desktop) */
@media (min-width: 768px) {
    .category-section.layout-showcase .section-content-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 2rem;
    }
}


/* --- Reusable Post Component Styles --- */
/* Featured Post in a Section */
.featured-post .card-image-link img {
    height: 250px;
    object-fit: cover;
    border-radius: var(--border-radius);
}
.featured-post .card-content {
    padding: 1rem 0 0 0;
}
.featured-post .card-title {
    font-size: 1.5rem;
    line-height: 1.3;
}
.featured-post .card-summary {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0.75rem 0;
}
@media (min-width: 768px) {
    .featured-post .card-image-link img {
        height: 350px;
    }
}

/* List Item Posts */
.list-item-post {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
.list-item-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.list-item-post .card-image-link img {
    height: 75px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.list-item-post .card-content { padding: 0; }
.list-item-post .card-title { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0; }


/* Visual Stories / Image Overlay Cards */
.visual-stories-section .post-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .visual-stories-section .post-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.image-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.image-card .card-image-link img {
    height: 250px;
    transition: transform 0.4s ease;
}
.image-card:hover .card-image-link img {
    transform: scale(1.05);
}
.image-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.image-card .card-title {
    color: white;
    font-size: 1rem;
    line-height: 1.3;
}
.image-card .card-title a { color: inherit; }

/*
============================================================
    14. MAGAZINE FRONT PAGE LAYOUT
============================================================
*/

/* --- Main 2-Column Layout --- */
/* Mobile-First: Stacks by default */
.main-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.main-content-area {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.sidebar-area {
    margin-top: 2rem;
}
/* Desktop: 2 columns */
@media (min-width: 992px) {
    .main-grid-layout {
        /* A common news layout ratio */
        grid-template-columns: 2fr 1fr;
        gap: 2.5rem;
    }
    .sidebar-area {
        margin-top: 0;
    }
}


/* --- Section Header Styling --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}
.section-header .section-title {
    font-size: 1.5rem;
    margin: 0;
    position: relative;
    padding-left: 1rem;
}
.section-header .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: var(--primary-color);
}
.section-header .section-title a {
    color: var(--text-dark);
}
.view-all-link {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* --- Section Content Grids --- */
/* Default Layout (1 featured post, list below) */
.category-section.layout-default .section-content-grid,
.category-section.layout-showcase .section-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/* Showcase Layout (1 featured, list to the side on desktop) */
@media (min-width: 768px) {
    .category-section.layout-showcase .section-content-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 2rem;
    }
}


/* --- Reusable Post Component Styles --- */
/* Featured Post in a Section */
.featured-post .card-image-link img {
    height: 250px;
    object-fit: cover;
    border-radius: var(--border-radius);
}
.featured-post .card-content {
    padding: 1rem 0 0 0;
}
.featured-post .card-title {
    font-size: 1.5rem;
    line-height: 1.3;
}
.featured-post .card-summary {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0.75rem 0;
}
@media (min-width: 768px) {
    .featured-post .card-image-link img {
        height: 350px;
    }
}

/* List Item Posts */
.list-item-post {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
.list-item-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.list-item-post .card-image-link img {
    height: 75px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.list-item-post .card-content { padding: 0; }
.list-item-post .card-title { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0; }


/* Visual Stories / Image Overlay Cards */
.visual-stories-section .post-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .visual-stories-section .post-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.image-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.image-card .card-image-link img {
    height: 250px;
    transition: transform 0.4s ease;
}
.image-card:hover .card-image-link img {
    transform: scale(1.05);
}
.image-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.image-card .card-title {
    color: white;
    font-size: 1rem;
    line-height: 1.3;
}
.image-card .card-title a { color: inherit; }