/* --- News Control Bar & View Modes --- */
.news-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: none;
    margin: 30px 0 10px 0; /* Adjust marginTop now it's inside wrapper */
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    color: inherit; /* Inherit dark/light color */
}

body.dark-mode .news-control-bar {
    color: white;
}

@media screen and (min-width: 1024px) {
    .news-control-bar {
        padding: 0; /* Align with content */
        margin-top: 140px; /* Still need top margin to clear fixed header? No. */
        /* It is inside news-section. news-section is inside wrapper. Wrapper has margin-top if needed. */
        /* Actually the fixed header covers top 100px. */
        /* We need margin-top on the Wrapper, not the control bar. */
        /* Let's reset bar margin and handle wrapper margin in style-layout-new.css or style.css */
        margin-top: 0; 
    }
}
/* IMPORTANT: Wrapper needs top margin */

.news-header-left {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.news-header-left h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    color: #000;
}
body.dark-mode .news-header-left h2 {
    color: white;
}


#total-news-count {
    font-size: 16px;
    color: #666;
    font-weight: normal;
}
body.dark-mode #total-news-count {
    color: #ccc;
}

/* Bold number in total-news-count color overriding */
#total-news-count b {
    color: black;
    font-weight: 800; /* Extra bold */
}
body.dark-mode #total-news-count b {
    color: white; /* In dark mode, distinct color means white usually, since black is bg */
}

.news-view-controls {
    display: flex;
    gap: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: white; /* Default white bg for buttons area */
}
body.dark-mode .news-view-controls {
    background: black;
    border-color: #333;
}


.view-mode-btn {
    background: white;
    border: none;
    border-right: 1px solid #ddd;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    padding: 10px;
}
body.dark-mode .view-mode-btn {
    background: black;
    border-color: #333;
}

.view-mode-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.3;
}

body.dark-mode .view-mode-btn img {
    filter: invert(1); /* Invert icon to be white-ish if it was black */
    opacity: 0.5;
}

.view-mode-btn:last-child {
    border-right: none;
}

.view-mode-btn:hover {
    background-color: #f0f0f0;
}
body.dark-mode .view-mode-btn:hover {
    background-color: #333;
}

.view-mode-btn.active {
    background-color: #333;
}
body.dark-mode .view-mode-btn.active {
    background-color: #555; /* Visible active state in dark mode */
}

.view-mode-btn.active img {
    opacity: 1;
    filter: invert(1);
}
body.dark-mode .view-mode-btn.active img {
    filter: invert(1); /* Should be white icon on dark bg */
    opacity: 1;
}


.news-divider {
    border: 0;
    border-top: 2px solid #000;
    height: 0;
    width: 100%;
    margin: 10px 0 30px 0;
    max-width: none;
    box-sizing: border-box;
}
body.dark-mode .news-divider {
    border-top-color: #555;
}

@media screen and (min-width: 1024px) {
    .news-divider { 
        width: 100%;
        max-width: none;
    }
}

/* Override Container Margin since control bar takes the space */
#card-container {
    margin-top: 0 !important;
    max-width: none; /* Let fill container */
    margin-left: 0;
    margin-right: 0;
    padding: 0; 
    min-height: 500px;
    box-sizing: border-box;
}
@media screen and (min-width: 1024px) {
    #card-container { padding: 0; }
}

/* --- List View --- */
#card-container.list-view {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Increased gap */
}

#card-container.list-view .card-link {
    width: 100%;
    display: block;
}

/* Removed 5n spacing rule */

#card-container.list-view .card {
    width: 100%;
    border: none; /* No border around */
    border-bottom: 1px solid #eee; /* Divider */
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    padding: 25px 5px; /* Increased padding */
    height: auto;
    background: transparent;
}
body.dark-mode #card-container.list-view .card {
    border-bottom-color: #333;
    background: transparent;
}

#card-container.list-view .card:hover {
    transform: none;
    background-color: #f8f9fa;
}

#card-container.list-view img {
    display: none;
}

#card-container.list-view .theme-label {
    display: none;
}

#card-container.list-view .card-content {
    padding: 0 0 10px 0;
}

#card-container.list-view .card-content h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}
body.dark-mode #card-container.list-view .card-content h3 {
    color: white;
}

#card-container.list-view .card-footer {
    border-top: none;
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

#card-container.list-view .tag-container {
    gap: 8px;
}
#card-container.list-view .tag {
    font-size: 13px;
    padding: 2px 8px;
}
#card-container.list-view .published-date {
    margin-left: 0;
    color: #999;
    font-size: 13px;
}
#card-container.list-view .published-date::before {
    content: "|";
    margin-right: 15px;
    color: #ddd;
}

/* --- Normal View (Summary) --- */
#card-container.normal-view {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Reduced gap */
}

#card-container.normal-view .card-link {
    width: 100%;
}

#card-container.normal-view .card {
    width: 100%;
    height: 160px;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    padding: 15px 0; /* Reduced padding */
    background: transparent;
    
    /* Grid Layout for Image Left, Content Right */
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-column-gap: 25px;
    align-items: start;
    overflow: visible;
}

#card-container.normal-view .card:hover {
    transform: none;
    background-color: transparent;
}
#card-container.normal-view .card:hover h3 {
    text-decoration: underline;
}

/* Image in Grid: Left Column, Spans both rows */
#card-container.normal-view img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-left: 0;
}

/* Theme Label: Position relative to card */
#card-container.normal-view .theme-label {
    top: 25px;
    left: 5px; /* On Top of Image */
    right: auto;
}

/* Content (Title): Right Column, Top Row */
#card-container.normal-view .card-content {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    margin-bottom: 15px; /* Space between title and meta */
    align-self: end; /* Align to bottom of top row or just normal flow */
}

#card-container.normal-view h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
}

/* Footer (Meta): Right Column, Bottom Row */
#card-container.normal-view .card-footer {
    grid-column: 2;
    grid-row: 2;
    border: none;
    padding: 0;
    justify-content: flex-start;
    gap: 15px;
    align-self: start;
}

#card-container.normal-view .published-date {
    margin-left: 0;
}
#card-container.normal-view .published-date::before {
    content: "|";
    margin-right: 15px;
    color: #ddd;
}


/* --- Gallery View (Default) explicit override if necessary --- */
#card-container.gallery-view {
    /* Uses default styles */
}

/* Make card transparent so we can style pieces */
#card-container.gallery-view .card {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible; /* Allow date to sit outside */
    margin-bottom: 30px; /* Space for the date */
}

#card-container.gallery-view img {
    display: block; /* Eliminate bottom whitespace */
    width: 100%;
    background: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #ddd;
    border-bottom: none;
    box-sizing: border-box; /* Ensure border integration */
}
body.dark-mode #card-container.gallery-view img {
    background: #222;
    border-color: #333;
}

#card-container.gallery-view .theme-label {
    top: 10px; /* Closer to edge */
    left: 10px; /* Closer to edge */
    right: auto;
}

#card-container.gallery-view .card-content {
    background: white;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd; /* Add bottom border to close the card */
    border-bottom-left-radius: 10px; /* Round bottom corners */
    border-bottom-right-radius: 10px; /* Round bottom corners */
    padding: 15px 15px 15px 15px; /* Increased padding */
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Shadow on card block */
}
body.dark-mode #card-container.gallery-view .card-content {
    background: #222;
    border-color: #333;
    color: #eee;
}

#card-container.gallery-view h3 {
    font-size: 20px; /* Increased font size (22 -> 24) */
    line-height: 1.3;
    margin-bottom: 5px;
    /* 3 lines limit */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.dark-mode #card-container.gallery-view h3 {
    color: #eee;
}

/* The footer container is transparent, acts as wrapper for tags and date */
#card-container.gallery-view .card-footer {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Tags appear BELOW the card now, transparent background */
#card-container.gallery-view .tag-container {
    background: transparent; /* No background */
    border: none; /* No border */
    border-radius: 0;
    box-shadow: none; /* No shadow */
    
    padding: 8px 0 0 5px; /* Spacing from card (top padding) */
    margin-bottom: 0px; 
    width: 100%;
    
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 5px;
    box-sizing: border-box;
}

#card-container.gallery-view .tag {
    flex-shrink: 0;
    /* Ensure tags look clickable/nice without container */
}

/* Date sits Top-Right on Image now */
#card-container.gallery-view .published-date {
    position: absolute;
    top: 10px; /* Closer to edge */
    right: 10px; /* Closer to edge */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    width: auto;
    text-align: center;
    pointer-events: none; /* Let clicks pass through to image link */
    z-index: 10;
}
/* No change needed for dark mode since it's overlay */


/* Hide the ::before pipe if strictly styling the date box */
#card-container.gallery-view .published-date::before {
    display: none;
}

/* --- Mobile View Adjustments (Task 4) --- */
@media screen and (max-width: 768px) {
    /* Hide View Toggle Buttons */
    .news-view-controls {
        display: none !important;
    }

    /* Adjust Title/Count alignment */
    .news-control-bar {
        justify-content: flex-start; /* Left align since controls are gone */
    }

    /* Force Normal Card Layout (Image Left, Content Right) */
    #card-container.list-view,
    #card-container.normal-view,
    #card-container.gallery-view {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    #card-container .card-link {
        width: 100% !important;
    }

    #card-container .card {
        /* Use Grid like PC Normal View */
        display: grid !important;
        grid-template-columns: 110px 1fr !important; /* Left Image (Fixed), Right Content */
        grid-template-rows: auto auto !important; /* Rows flow naturally */
        grid-column-gap: 15px !important;
        
        height: auto !important;
        padding: 5px 0 !important; /* Vertical padding only, internal pads handled by grid */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-items: start !important;
    }
    body.dark-mode #card-container .card {
        background: transparent !important;
        border-bottom-color: #333 !important;
    }

    #card-container .card img {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important; /* Span all rows */
        display: block !important;
        width: 100% !important;
        height: 110px !important; /* Square-ish Image */
        object-fit: cover !important;
        border-radius: 8px !important; /* Slightly rounded */
        margin-left: 0 !important;
    }

    #card-container .card-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 0 !important; /* Remove padding */
        min-width: 0; /* Enable text truncation */
    }
    
    #card-container h3 {
        font-size: 16px !important; /* Adjusted for mobile */
        line-height: 1.4 !important;
        margin: 0 0 5px 0 !important;
        font-weight: bold !important;
        
        /* Limit to 2 lines */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
    }
    
    /* Force Theme Label Position for Mobile Grid Layout */
    #card-container .theme-label {
        top: 0px !important; /* Stuck to Top (since padding is 5px, use negative? No, absolute to card. If padding 5px, top 5px is start of image. Let's try 5px) */
                             /* Actually, let's use 5px to align with image top edge */
        top: 10px !important;
        left: 5px !important;
        right: auto !important;
    }
    
    /* Footer (Tags + Date) */
    #card-container .card-footer {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important; /* Task 2: Row layout */
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin-top: 5px !important;
        border: none !important;
        background: transparent !important;
        gap: 0 !important; /* Gap handled by spacer or margins */
    }

    #card-container .tag-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        background: transparent !important;
        padding: 0 !important;
    }

    #card-container .tag {
        font-size: 11px !important;
        padding: 2px 6px !important;
        border-width: 1px !important;
    }
    
    #card-container .published-date {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        color: #999 !important;
        font-size: 11px !important;
        width: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Task 2: Add separator */
    #card-container .published-date::before {
        display: inline-block !important;
        content: "|";
        margin: 0 8px 0 8px !important; /* Spacing around pipe */
        color: #ccc !important;
    }
}