/* css/news.css */

/* This container holds all the cards */
.news-list {
    /* We'll use the container's max-width, but 
       constrain the cards' width for readability */
    max-width: 900px;
    margin: 0 auto; /* Center the list */
}

/* The style for each wide news card */
.news-card-large {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 35px 40px;
    margin-bottom: 30px; /* Space between cards */
    border: 1px solid #eaeaea;
}

.news-card-large h3 {
    color: #1a144d; /* Theme dark blue */
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5px;
}

/* Re-using the .news-meta style from index.css */
.news-card-large .news-meta {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.news-card-large p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* The new "Read More" button style */
.btn-read-more {
    background-color: #f6f7fb; /* Light bg from contact form */
    color: #694ec2; /* Theme accent */
    border: 1px solid #eaeaea;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-read-more:hover {
    background-color: #fff;
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* The Accordion Content - HIDDEN BY DEFAULT */
.news-full-content {
    display: none; /* This is the key */
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

/* This class will be added by JavaScript */
.news-full-content.active {
    display: block; /* This makes it visible */
}

/* Pagination Styles (Re-used from previous step) */
.pagination {
    margin-top: 60px; /* Space above the pagination */
    text-align: center;
}

.pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 30px; /* Matches your theme's button radius */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.pagination li {
    margin: 0;
}

.pagination .page-link {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #161153; /* Theme primary dark */
    background-color: #fff;
    border-left: 1px solid #eaeaea;
    transition: all 0.3s ease;
    font-weight: 600;
}

.pagination li:first-child .page-link {
    border-left: none;
}

.pagination .page-link:hover {
    background-color: #f8f9fa; /* Theme light bg */
}

/* Use the theme's gradient for the active page */
.pagination .page-link.active {
    background: linear-gradient(135deg, #6652e8, #3b82f6); 
    color: #fff;
    border-color: transparent;
}

/* --- New Pagination Styles --- */

/* Style for "..." */
.pagination .ellipsis {
    color: #aaa;
    background-color: #fff;
    cursor: default;
}

/* Style for disabled "Prev" or "Next" buttons */
.pagination .disabled {
    color: #aaa;
    background-color: #f5f5f5;
    cursor: default;
    pointer-events: none; /* Disables click */
}

/* Ensure all pagination items (links or spans) look the same */
.pagination .page-link,
.pagination .ellipsis,
.pagination .disabled {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    border-left: 1px solid #eaeaea;
    transition: all 0.3s ease;
}

/* Remove border from the first item */
.pagination li:first-child .page-link,
.pagination li:first-child .disabled {
    border-left: none;
}

/* --- Responsive Pagination Fix --- */

@media (max-width: 576px) {
    .pagination ul {
        /* * Change from 'inline-flex' to 'flex' and allow wrapping.
         * This lets the items stack on small screens.
         */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        /* * Reset the desktop "pill" styles so it
         * doesn't look like a broken container.
         */
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        background-color: transparent; /* Remove the white bg */
    }

    .pagination li {
        /* Add a small space between items when they wrap */
        margin: 3px;
    }

    .pagination .page-link,
    .pagination .disabled,
    .pagination .ellipsis {
        /* * Give each link its own pill shape,
         * since the parent container no longer has one.
         */
        border-radius: 30px;
        border: 1px solid #eaeaea;
        background-color: #fff; /* Give items their own bg */
        box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Subtle shadow */
    }

    /* * This rule is no longer needed on mobile,
     * as all items have their own border now.
     */
    .pagination li:first-child .page-link,
    .pagination li:first-child .disabled {
        border-left: 1px solid #eaeaea;
    }

    /* * Make the active state stand out properly
     * with its own border.
     */
    .pagination .page-link.active {
        border-color: transparent;
    }

    /* Fix for disabled/ellipsis styles */
    .pagination .disabled,
    .pagination .ellipsis {
        background-color: #f8f9fa;
    }
}