/* css/pages/news.css */

/* Ensure the news section matches the search section's width */
.news-articles-section {
    padding-top: 0; /* Adjust if needed to control spacing from search bar */
    padding-bottom: calc(var(--spacing-unit) * 1.5); /* Maintain bottom spacing */
}

/* Make the news card full width */
.news-articles-section .full-width-card {
    grid-column: 1 / -1; /* Spans all columns in a grid layout, effectively full width of its parent */
    width: 100%; /* Ensure it takes full width of the container */
    margin-bottom: 0; /* No extra margin, section padding handles it */
}

/* Styling for the sort buttons */
.sort-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap to next line if space is limited */
    gap: 0.8rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--border-color);
}

.sort-buttons .sort-btn {
    background-color: var(--input-bg);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none; /* Important for anchor tags */
    display: inline-block; /* Treat anchors like buttons */
}

.sort-buttons .sort-btn:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    text-decoration: none;
}

.sort-buttons .sort-btn.active {
    background-color: var(--accent-green); /* Use a distinct active color */
    color: white;
    border-color: var(--accent-green);
    font-weight: 600;
}

/* Styling for the news list container */
.news-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit); /* Space between list items */
}

/* Styling for individual news items in list view */
.news-item-list {
    background-color: var(--bg-primary);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-item-list:hover {
    transform: translateY(-3px); /* Slightly less pronounced hover for list */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.news-item-list a {
    display: flex; /* Use flexbox for image-left, content-right layout */
    align-items: center; /* Vertically align items */
    padding: var(--spacing-unit); /* Padding inside the card */
    color: inherit;
    text-decoration: none;
}

.news-item-list img {
    width: 120px; /* Smaller fixed width for list view image */
    height: 90px; /* Fixed height */
    object-fit: cover;
    border-radius: var(--card-border-radius) / 2; /* Slightly rounded corners for image */
    margin-right: var(--spacing-unit);
    flex-shrink: 0; /* Prevent image from shrinking */
}

.news-item-list .news-content-list {
    flex-grow: 1; /* Allow content to take remaining space */
}

.news-item-list h3 {
    font-size: 1rem; /* Slightly smaller title for list view */
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--text-light);
    line-height: 1.3;
}

.news-item-list .snippet {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Keep the prefixed version for older browser support */
    line-clamp: 2;          /* Add the standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-item-list .source-date {
    font-size: 0.7rem; /* Smallest font for source/date */
    color: var(--text-dark);
    font-style: italic;
}

/* Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--spacing-unit) * 2);
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0 var(--spacing-unit);
    /* NEW: Consistent styling with your card elements */
    background-color: var(--bg-primary); /* Use your card background */
    border: 1px solid var(--border-color); /* Use your border color */
    border-radius: var(--card-border-radius); /* Use your defined border-radius */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Lighter, subtle shadow */
    padding: var(--spacing-unit); /* Add padding around the pagination links within the container */
}

.pagination .page-link {
    /* Existing base styles from your news-page.css pagination */
    background-color: var(--input-bg); /* Use input-bg for non-active/non-hover state for better contrast */
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1rem;
    border-radius: var(--card-border-radius); /* Match your card/button radius */
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    white-space: nowrap;
    /* NEW: Ensure consistent button-like appearance */
    display: inline-flex; /* Use flex for centering if content grows */
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Give it a minimum width */
    font-weight: 500; /* Standard font weight for non-active */
}

.pagination .page-link:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    text-decoration: none;
    /* NEW: Subtle hover effects */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* More noticeable shadow on hover */
}

.pagination .page-link.active {
    background-color: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
    font-weight: 600;
    /* NEW: Prevent hover effects on active state */
    cursor: default; /* No pointer cursor */
    transform: none; /* No lift */
    box-shadow: 0 0 0 rgba(0,0,0,0); /* No extra shadow */
}


.pagination .page-link.active:hover {
    background-color: var(--accent-green); /* Maintain active background on hover */
    color: white;
    border-color: var(--accent-green);
    text-decoration: none;
}

/* NEW: Styles for disabled pagination links */
.pagination .page-link.disabled-page-link {
    background-color: var(--input-bg); /* Use a duller background */
    color: var(--text-dark); /* Duller text color */
    border-color: var(--border-color); /* Neutral border */
    opacity: 0.6; /* Visually dim the link */
    cursor: not-allowed; /* Change cursor to indicate it's not clickable */
    pointer-events: none; /* Crucially, prevent all mouse events */
    transform: none; /* Ensure no lift effect */
    box-shadow: none; /* No shadow */
}

/* Ensure disabled links don't get active hover styles if they somehow get combined */
.pagination .page-link.disabled-page-link:hover {
    background-color: var(--input-bg);
    color: var(--text-dark);
    border-color: var(--border-color);
    transform: none;
    box-shadow: none;
}


/* NEW: Specific styles for Previous/Next and First/Last links to match existing button styles */
.pagination .page-link.previous-next-link,
.pagination .page-link.first-last-link {
    background-color: var(--button-bg); /* Use your main button background */
    color: white; /* White text for these buttons */
    border-color: var(--button-bg);
    font-weight: 600;
    padding: 0.6rem 1.2rem; /* Slightly more padding for these */
    margin: 0 0.4rem; /* Adjust spacing */
}

.pagination .page-link.previous-next-link:hover,
.pagination .page-link.first-last-link:hover {
    background-color: var(--button-hover-bg); /* Use your button hover color */
    border-color: var(--button-hover-bg);
    color: white;
}

/* Responsive adjustments for news page list view */
@media (max-width: 768px) {
    .news-item-list a {
        flex-direction: row; /* Keep image on left */
        align-items: flex-start; /* Align text to top */
    }
    .news-item-list img {
        width: 100px;
        height: 75px;
    }
    .news-item-list h3 {
        font-size: 0.95rem;
    }
    .news-item-list .snippet {
        font-size: 0.75rem;
    }
    .sort-buttons, .pagination {
        justify-content: flex-start; /* Align buttons to start on smaller screens */
    }
    /* NEW: Adjust pagination padding for smaller screens */
    .pagination {
        padding: var(--spacing-unit) calc(var(--spacing-unit) / 2); /* Less padding on very small screens */
    }
    .pagination .page-link {
        padding: 0.5rem 0.8rem; /* Slightly smaller padding for links */
        font-size: 0.85rem; /* Slightly smaller font for links */
    }
}

@media (max-width: 576px) {
    .news-item-list a {
        flex-direction: column; /* Stack image on top of content */
        align-items: stretch; /* Stretch items to fill width */
        padding: calc(var(--spacing-unit) * 0.8);
    }
    .news-item-list img {
        width: 100%; /* Full width image when stacked */
        height: 150px; /* Taller image when stacked */
        margin-right: 0;
        margin-bottom: var(--spacing-unit);
        border-radius: var(--card-border-radius); /* Full card radius for image */
    }
    .news-item-list .snippet {
        -webkit-line-clamp: 3; /* Keep the prefixed version */
        line-clamp: 3;          /* Add the standard property */
    }
    .pagination .page-link {
        padding: 0.4rem 0.7rem; /* Even smaller padding for links */
        font-size: 0.75rem; /* Even smaller font for links */
    }
    .sort-buttons .sort-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    /* NEW: Ensure pagination items can wrap even more aggressively if needed */
    .pagination {
        gap: 0.3rem; /* Reduce gap between pagination links */
    }
}