/* ==========================================================
   NEWS INDEX
   SoftSpin Smart Theme compatible
   ========================================================== */


/* ==========================================================
   PAGE-SPECIFIC TOP SPACING
   ========================================================== */

/*
 * The global theme applies:
 *
 * section,
 * .section {
 *     padding: 60px 0;
 * }
 *
 * Remove only the top padding from the first News section.
 * This works for:
 * 1) The standard #news-index section.
 * 2) A dynamically generated first section inside #news-page.
 */
/* Remove top spacing from standard and dynamically generated News */
#news-index.section,
#news-page section[data-softspin-runtime="news"] {
    padding-top: 0 !important;
}


/* ==========================================================
   MAIN NEWS SECTION
   ========================================================== */

#news-index {
    background-color: var(--background-color);
    color: var(--default-color);
}

    #news-index .container {
        position: relative;
    }


    /* Section badge
---------------------------------------------------------- */

    #news-index .section-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        margin-bottom: 1.5rem;
        color: var(--heading-color);
        font-size: 1rem;
        font-weight: 600;
    }

        #news-index .section-badge i {
            color: var(--accent-color);
        }


    /* News cards
---------------------------------------------------------- */

    #news-index .news-card {
        height: 100%;
        border: 1px solid var(--card-border) !important;
        border-radius: var(--radius-md);
        background-color: var(--surface-color);
        color: var(--default-color);
        box-shadow: var(--shadow-md) !important;
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

        #news-index .news-card:hover {
            transform: translateY(-3px);
            border-color: color-mix( in srgb, var(--accent-color), transparent 55% ) !important;
            box-shadow: 0 12px 30px color-mix( in srgb, var(--default-color), transparent 88% ) !important;
        }


        /* Card body
---------------------------------------------------------- */

        #news-index .news-card .card-body {
            background-color: transparent;
            color: var(--default-color);
        }


        /* News title
---------------------------------------------------------- */

        #news-index .news-card .card-title {
            margin-bottom: .35rem;
        }

            #news-index .news-card .card-title a {
                color: var(--accent-color);
                font-weight: 600;
                line-height: 1.4;
                text-decoration: none;
                transition: color .2s ease;
            }

                #news-index .news-card .card-title a:hover {
                    color: var(--accent-variant);
                }


        /* Publish date
---------------------------------------------------------- */

        #news-index .news-card .text-muted {
            color: var(--muted-color) !important;
        }


/* ==========================================================
   NEWS MEDIA / PREVIEW
   ========================================================== */

.news-media {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: .75rem 0 1.25rem;
    color: var(--default-color);
}

.news-text {
    flex: 1;
    color: var(--default-color);
    font-size: .95rem;
    line-height: 1.6;
}


/* Thumbnail
---------------------------------------------------------- */

.news-img {
    display: flex;
    width: 92px;
    height: 92px;
    flex: 0 0 92px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
}

    .news-img img {
        display: block;
        width: 92px;
        height: 92px;
        object-fit: contain;
        border-radius: var(--radius-md);
    }


/* ==========================================================
   READ MORE BUTTON
   ========================================================== */

#news-index .news-read-more {
    position: relative;
    z-index: 2;
    border: 1px solid var(--accent-color) !important;
    border-radius: var(--radius-md);
    background-color: transparent !important;
    color: var(--accent-color) !important;
    font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

    #news-index .news-read-more:hover,
    #news-index .news-read-more:focus {
        border-color: var(--accent-color) !important;
        background-color: var(--accent-color) !important;
        color: var(--contrast-color) !important;
        transform: translateY(-1px);
    }

    #news-index .news-read-more:active {
        border-color: var(--accent-variant) !important;
        background-color: var(--accent-variant) !important;
        color: var(--contrast-color) !important;
    }


/* ==========================================================
   LOADING / EMPTY STATES
   ========================================================== */

#news-spinner {
    color: var(--accent-color);
}

    #news-spinner .spinner-border {
        color: var(--accent-color) !important;
    }

#news-empty-placeholder {
    color: var(--muted-color) !important;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

#news-pagination {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    background-color: var(--background-color);
}

    #news-pagination nav {
        width: 100%;
    }


/* Pagination list
---------------------------------------------------------- */

.softspin-news-pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.softspin-news-pagination-list,
#news-pagination-ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}


    /* Pagination list items
---------------------------------------------------------- */

    .softspin-news-pagination-list li,
    #news-pagination-ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
    }


    /* Base pagination link
---------------------------------------------------------- */

    .softspin-news-pagination-list a,
    #news-pagination-ul a {
        display: inline-flex;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: 0 .9rem;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background-color: var(--surface-color);
        color: var(--default-color);
        font-size: .95rem;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 2px 6px color-mix( in srgb, var(--default-color), transparent 92% );
        transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    }


    /* Page number circles
---------------------------------------------------------- */

    #news-pagination-ul li a:not([aria-label]) {
        width: 42px;
        min-width: 42px;
        padding: 0;
        border-radius: 50%;
    }


    /* Previous / Next
---------------------------------------------------------- */

    #news-pagination-ul a[aria-label="Previous page"],
    #news-pagination-ul a[aria-label="Next page"] {
        min-width: 108px;
        padding: 0 1rem;
        border-radius: 999px;
    }


    /* Pagination hover
---------------------------------------------------------- */

    .softspin-news-pagination-list a:not(.disabled):not(.active):hover,
    #news-pagination-ul a:not(.disabled):not(.active):hover {
        border-color: var(--accent-color);
        background-color: var(--accent-soft);
        color: var(--accent-color);
        transform: translateY(-1px);
    }


    /* Active page
---------------------------------------------------------- */

    .softspin-news-pagination-list a.active,
    #news-pagination-ul a.active {
        border-color: var(--accent-color);
        background-color: var(--accent-color);
        color: var(--contrast-color);
        font-weight: 700;
        box-shadow: 0 6px 14px color-mix( in srgb, var(--accent-color), transparent 70% );
    }


    /* Disabled Previous / Next
---------------------------------------------------------- */

    .softspin-news-pagination-list a.disabled,
    #news-pagination-ul a.disabled {
        border-color: color-mix( in srgb, var(--default-color), transparent 88% );
        background-color: color-mix( in srgb, var(--surface-color), var(--background-color) 35% );
        color: color-mix( in srgb, var(--default-color), transparent 55% );
        box-shadow: none;
        cursor: default;
        pointer-events: none;
        opacity: 1;
    }


    /* Pagination ellipsis
---------------------------------------------------------- */

    .softspin-news-pagination-list .ellipsis,
    #news-pagination-ul .ellipsis {
        display: inline-flex;
        min-width: 28px;
        height: 42px;
        align-items: center;
        justify-content: center;
        color: var(--muted-color);
        font-weight: 600;
    }


    /* Pagination icons
---------------------------------------------------------- */

    .softspin-news-pagination-list a i,
    #news-pagination-ul a i {
        font-size: .9rem;
        line-height: 1;
    }


/* ==========================================================
   TAG SUPPORT
   ========================================================== */

.news-tag {
    display: inline-flex;
    width: fit-content;
    margin-bottom: .6rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background-color: var(--accent-soft);
    color: var(--accent-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

:root[data-theme="dark"] #news-index .news-card {
    border-color: var(--card-border) !important;
    background-color: var(--surface-color);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35) !important;
}

:root[data-theme="dark"] .news-img {
    background-color: var(--surface-color);
}

:root[data-theme="dark"] #news-pagination-ul a {
    border-color: var(--border-color);
    background-color: var(--surface-color);
}

    :root[data-theme="dark"] #news-pagination-ul a.active {
        border-color: var(--accent-color);
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    :root[data-theme="dark"] #news-pagination-ul a.disabled {
        background-color: color-mix( in srgb, var(--surface-color), var(--background-color) 35% );
    }


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 575.98px) {

    .news-media {
        flex-direction: column;
    }

    .news-img {
        width: 100%;
        height: auto;
        flex-basis: auto;
    }

        .news-img img {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: contain;
        }


    /* Pagination mobile
    ------------------------------------------------------ */

    #news-pagination {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    #news-pagination-ul {
        gap: .4rem;
    }

        #news-pagination-ul a {
            height: 40px;
        }

        #news-pagination-ul li a:not([aria-label]) {
            width: 40px;
            min-width: 40px;
        }

        #news-pagination-ul a[aria-label="Previous page"],
        #news-pagination-ul a[aria-label="Next page"] {
            min-width: 42px;
            padding: 0 .75rem;
        }

        #news-pagination-ul .ellipsis {
            height: 40px;
        }
}