/*≡==--==≡≡≡≡==--=≡≡*\
||       NEWS       ||
\*≡==---==≡≡==---==≡*/

/* Sections */
.section {
    padding: 2rem 1rem;
    /* reduce default section vertical padding */
    text-align: center;
}

/* News section styles */
.news-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    /* left-align news content */
}

.news-list {
    /* Use a responsive grid: 3 columns on wide screens, 2 on medium, 1 on small */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    /* small extra spacing between the title scroller and the cards */
    margin-top: 0.6rem;
    /* allow cards to size to their content for ultra-compact layout */
    align-items: start;
    grid-auto-rows: auto;
}



.news-item {
    padding: 0.12rem 0.32rem;
    border-radius: 6px;
    /* ultra-compact card style */
    background: var(--card-bg, var(--bg));
    color: var(--card-text, inherit);
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* default warm backlight */
    box-shadow: 0 6px 10px rgba(186, 159, 125, 0.06);
    transition: transform 110ms ease, box-shadow 110ms ease, background-color 110ms ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    line-height: 1.05;
}

/* small accent stripe to match the site's accent color */
.news-item::before {
    content: "";
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--accent, #ba9f7d);
    border-radius: 3px;
    margin-bottom: 0.18rem;
}

.news-actions {
    margin-top: 0.35rem;
}

.news-link {
    display: inline-block;
    padding: 0.22rem 0.4rem;
    background: transparent;
    color: var(--accent);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.news-link:hover,
.news-link:focus {
    background: rgba(186, 159, 125, 0.06);
    outline: none;
}

.news-item:hover {
    transform: translateY(-1.5px);
    /* neon blue glow on hover */
    box-shadow: 0 8px 22px rgba(0, 229, 255, 0.32);
}

.news-date {
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.62rem;
    color: rgba(0, 0, 0, 0.6);
}

.news-desc p {
    margin: 0;
    font-size: 0.66rem;
    line-height: 1.05;
    color: var(--general-text, var(--text));
}

/* ensure titles inside cards are compact */
.news-title {
    margin: 0 0 0.12rem 0;
    font-size: 0.68rem;
    line-height: 1.02;
    font-weight: 700;
}

/* Hide the description text inside the card itself — it will be shown in the modal only */
.news-item .news-desc p {
    display: none;
}

/* allow the description block to take remaining space so footer/meta stays pinned */
.news-desc {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1 1 auto;
}

/* --- News modal styles --- */
.news-modal {
    position: fixed;
    inset: 0;
    display: none;
    /* shown when active */
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.news-modal[aria-hidden="false"] {
    display: flex;
}

.news-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 40, 0.5);
    backdrop-filter: blur(2px);
}

.news-modal-content {
    position: relative;
    background: var(--card-bg, var(--bg));
    color: var(--card-text, inherit);
    max-width: 760px;
    width: calc(100% - 2rem);
    margin: 1rem;
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 18px 60px rgba(30, 75, 160, 0.18);
    z-index: 2;
    transform: translateY(6px);
    transition: transform 180ms ease, opacity 180ms ease;
}

.news-modal[aria-hidden="false"] .news-modal-content {
    transform: translateY(0);
}

.news-modal-close {
    position: absolute;
    right: 10px;
    top: 8px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--general-text);
}

.news-modal-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
}

.news-modal-date {
    display: block;
    margin-bottom: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
}

.news-modal-body {
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Styled button for the modal 'Read more' link */
.news-modal-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.55rem 0.9rem;
    background: var(--accent, #ba9f7d);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(30, 75, 160, 0.06);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.news-modal-link::after {
    content: " ↗";
    margin-left: 0.4rem;
    opacity: 0.95;
}

.news-modal-link:hover,
.news-modal-link:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(30, 75, 160, 0.09);
    outline: none;
}

@media (max-width: 700px) {
    .news-modal-content {
        padding: 1rem;
    }
}

/* <!--≡==--=≡≡≡≡≡≡=--=≡≡--> */
/* <!--   NEWS SCROLLER  --> */
/* <!--≡==---==≡≡==---==≡--> */

/* Screen-reader only helper (keeps semantic elements for accessibility) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* News title marquee / scroller */
.news-title-scroller {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.12rem 0;
    /* very tight padding so the marquee sits close to the cards */
    position: relative;
    /* needed for ::before / ::after lines */
}

.scroller-track {
    /* Use inline-flex so the track's width is exactly the combined content width
       and translateX(-50%) will shift by exactly one full copy producing a
       seamless wrap-around effect. */
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    min-width: max-content;
    /* ensure the track doesn't shrink */
    /* duplicate the content inside so translating -50% creates a seamless loop */
    will-change: transform;
    animation: scroll-left var(--duration, 18s) linear infinite;
}

.scroller-item {
    display: inline-block;
    font-size: 1.8rem;
    /* use a stronger weight so the title appears bold */
    font-weight: 700;
    font-style: italic;
    /* make the visible News title italic */
    color: var(--general-text);
    font-family: 'Orbitron', "Segoe UI", Tahoma, sans-serif;
    /* cyberpunk font */
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px var(--neon-glow);
    /* subtle neon glow */
    padding-right: 3rem;
    /* spacing between repeated items */
}

/* A single logical group that gets duplicated; measured by JS to compute --shift */
.scroller-group {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

/* Decorative horizontal lines above and below the scroller */
.news-title-scroller::before,
.news-title-scroller::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    height: var(--line-thickness);
    background: var(--neon);
    box-shadow: 0 0 18px var(--neon);
    border-radius: 2px;
    opacity: 0.95;
    pointer-events: none;
}

.news-title-scroller::before {
    top: 0;
    transform: translateY(-50%);
}

.news-title-scroller::after {
    bottom: 0;
    transform: translateY(50%);
}

@media (max-width: 700px) {

    .news-title-scroller::before,
    .news-title-scroller::after {
        left: 6%;
        right: 6%;
    }

    .scroller-item {
        font-size: 1.4rem;
    }
}

/* Pause on hover for discoverability and add reduced-motion support */
.news-title-scroller:hover .scroller-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .scroller-track {
        animation: none;
    }
}

/* The animation translates the track by a computed pixel amount (--shift).
   JS sets --shift to the width (in px) of one .scroller-group so the loop is seamless. */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(var(--shift, 0px) * -1));
    }
}

/* <!--≡==--=≡≡≡≡≡≡≡≡≡≡=--=≡≡--> */
/* <!--   END NEWS SCROLLER  --> */
/* <!--≡==---==≡≡≡≡≡≡==---==≡--> */

@media (max-width: 700px) {
    .news-container {
        padding: 0 1rem;
    }

    .news-title {
        font-size: 1.25rem;
    }

    .news-desc p {
        font-size: 1rem;
    }

    /* Stack news cards vertically on small screens */
    .news-list {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0.85rem;
    }

    .news-item {
        height: auto;
        padding: 0.9rem 1rem;
        border-radius: 8px;
    }

    /* keep modal content comfortably full-width on small devices */
    .news-modal-content {
        width: calc(100% - 1.6rem);
        margin: 0.6rem;
    }
}