/* Announcements Heading */
.announcements-title {
    color: #fbfdff;
    font-size: 16px;
    font-family: 'Grobold', 'Arial Black', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;          /* ← changed */
    margin: 0 auto 30px;         /* ← changed (centers the pill block) */
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.523);
    background-color: rgba(103, 182, 252, 0.973);
    padding: 12px 15px;
    border-radius: 50px;
    width: fit-content;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.219),
        inset 0 -4px 0 rgba(10, 60, 120, 0.55);
}

/* Horizontal Scroll Container */
.news-container {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Allows horizontal scrolling if cards exceed width */
    padding: 10px 5px 30px 5px;
    align-items: stretch;
}

/* Hide scrollbar for a cleaner look (optional) */
.news-container::-webkit-scrollbar {
    height: 8px;
}
.news-container::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

/* Individual News Card */
.news-card {
    background-color: #212121; /* Dark grey similar to screenshot */
    border: 1px solid #333;
    border-radius: 4px;
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease-in-out;
}

.news-card:hover {
    transform: translateY(-5px);
}

/* Top Image Section */
.news-card-image {
    position: relative;
    background-color: #111;
    padding: 30px 0;
    text-align: center;
    border-bottom: 2px solid #b83b3b; /* Accent border */
}

.news-icon {
    width: 100px;
    height: 100px;
    border-radius: 20px; /* Squircle shape */
    border: 2px solid #555;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8);
    object-fit: cover;
}

/* The red 'NEWS' bubble overlapping the bottom */
.news-badge-main {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #d62828, #9a031e);
    color: #fff;
    padding: 4px 20px;
    font-size: 16px;
    font-weight: 900;
    border-radius: 20px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    letter-spacing: 1px;
}

/* Content Area */
.news-card-content {
    padding: 30px 15px 15px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Date and Tag Row */
.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.news-date {
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
}

.news-tag {
    background-color: #d35400; /* Orange badge */
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Title Styling */
.news-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Text Body Truncation */
.news-excerpt p {
    color: #aaaaaa;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 15px 0;
    
    /* Truncate text to 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-excerpt {
    flex-grow: 1;
}

/* Footer (Author & Read More) */
.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-top: 10px;
    border-top: 1px solid #333;
}

.news-author {
    color: #ccc;
}

.author-name {
    color: #e74c3c; 
    font-weight: bold;
}

.news-read-more {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.2s;
}

.news-read-more:hover {
    color: #e74c3c;
}

.news-empty {
    color: #6ca8f8;
    text-shadow: 0px 2px 1.6px rgba(19, 29, 46, 0.114);
    font-family: 'Informb', sans-serif;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
}

.announcements-page-section {
    position: relative;
    width: 100%;
    min-height: 540px;
    margin: 0 auto;
    padding: 42px 30px;
    box-sizing: border-box;
}

/* The news archive now carries an intro line under its h1. The old 170px gap
   below the title is kept intact by splitting it across the two elements, so
   the artwork below still clears the heading block. */
.announcements-page-section .announcements-title {
    margin: 0 auto 18px;
}

.announcements-intro {
    max-width: 720px;
    margin: 0 auto 150px;
    color: #111111;
    font-family: 'Informb', sans-serif;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .3px;
    text-align: center;
    text-shadow: none;
}

.announcements-page-section .news-container {
    justify-content: center;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.announcements-page-section .news-empty {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .announcements-page-section {
        min-height: 420px;
        padding: 34px 18px;
    }

    .announcements-page-section .announcements-title {
        margin-bottom: 14px;
    }

    .announcements-intro {
        margin-bottom: 86px;
        font-size: 12px;
    }
}

/* Event/news artwork stored in the CMS body is rendered as a real 16:9 card banner. */
.news-card-image.has-banner {
    padding: 0;
    height: 158px;
    overflow: hidden;
    background: #111;
}

.news-icon.news-icon-wide {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px 4px 0 0;
    box-shadow: none;
    object-fit: cover;
}

/* ===== TrivalRO light news-card theme ===== */
.news-container {
    gap: 22px;
    padding-top: 12px;
}

.news-card {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,251,255,.98) 100%);
    border: 1px solid rgba(119, 183, 228, .42);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 10px 28px rgba(54, 111, 158, .12),
        0 2px 8px rgba(54, 111, 158, .08);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(82, 164, 221, .72);
    box-shadow:
        0 14px 34px rgba(54, 111, 158, .16),
        0 3px 10px rgba(54, 111, 158, .10);
}

.news-card-image {
    background:
        radial-gradient(circle at 50% 20%, rgba(203,236,255,.95), rgba(234,247,255,.96) 60%, rgba(219,241,255,.98) 100%);
    border-bottom: 1px solid rgba(119, 183, 228, .38);
}

.news-card-image.has-banner {
    background: #eaf6ff;
    border-bottom: 1px solid rgba(119, 183, 228, .38);
}

.news-icon {
    border: 1px solid rgba(111, 174, 219, .42);
    box-shadow: 0 8px 18px rgba(57, 113, 154, .14);
}

.news-icon.news-icon-wide {
    border: 0;
    box-shadow: none;
}

.news-badge-main {
    background: linear-gradient(180deg, #70c4f5 0%, #3f9edb 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,.96);
    box-shadow:
        0 5px 12px rgba(38, 111, 163, .22),
        inset 0 -2px 0 rgba(18, 91, 144, .18);
    font-size: 12px;
    letter-spacing: .8px;
    padding: 5px 16px;
}

.news-card-content {
    padding: 28px 17px 16px;
}

.news-date {
    color: #7890a4;
    font-weight: 700;
}

.news-tag {
    background: #e5f4ff;
    color: #3b8fc9;
    border: 1px solid #b9def5;
    border-radius: 999px;
    padding: 3px 9px;
    font-weight: 800;
}

.news-title {
    color: #2d638b;
    font-size: 15px;
    line-height: 1.35;
}

.news-excerpt p {
    color: #5f7485;
    line-height: 1.6;
}

.news-footer {
    border-top: 1px solid #dcecf7;
}

.news-author {
    color: #7a8f9f;
}

.author-name {
    color: #4b9fd8;
}

.news-read-more {
    color: #318dc9;
    text-decoration: none;
    font-weight: 800;
}

.news-read-more:hover {
    color: #1f6f9f;
    text-decoration: underline;
}

.news-container::-webkit-scrollbar-thumb {
    background: #9dcae8;
}

/* Keep the archive cards centered and visually consistent with the homepage. */
.announcements-page-section .news-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

/* ===== News layout sizing v2 ===== */
/* Shared card shape: less rounded, cleaner RO site fit. */
.news-card {
    border-radius: 8px;
    overflow: visible;
}

.news-card-image,
.news-card-image.has-banner {
    position: relative;
    overflow: visible;
    border-radius: 8px 8px 0 0;
}

.news-icon.news-icon-wide {
    border-radius: 8px 8px 0 0;
}

/* Fix the large EVENT badge being clipped at the image/content seam. */
.news-badge-main {
    bottom: -14px;
    z-index: 6;
    min-width: 104px;
    padding: 5px 16px;
    line-height: 1.1;
    white-space: nowrap;
    box-sizing: border-box;
}

.news-card-content {
    padding-top: 32px;
}

/* HOME: larger cards while retaining the horizontal recent-news rail. */
.announcements-section .news-container {
    gap: 26px;
    padding: 14px 8px 32px;
    overflow-x: auto;
    align-items: stretch;
}

.announcements-section .news-card {
    width: 350px;
    min-width: 350px;
}

.announcements-section .news-card-image.has-banner {
    height: 197px;
}

.announcements-section .news-title {
    font-size: 17px;
}

.announcements-section .news-excerpt p {
    font-size: 13px;
    line-height: 1.62;
}

/* MODULE NEWS: real vertical archive grid, no horizontal scrollbar. */
.announcements-page-section {
    padding-left: 36px;
    padding-right: 36px;
}

.announcements-page-section .news-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: min(1320px, 100%);
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 0 34px;
    overflow: visible;
    align-items: stretch;
}

.announcements-page-section .news-container::-webkit-scrollbar {
    display: none;
}

.announcements-page-section .news-card {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.announcements-page-section .news-card-image.has-banner {
    height: auto;
    aspect-ratio: 16 / 9;
}

.announcements-page-section .news-card-content {
    padding: 34px 20px 20px;
}

.announcements-page-section .news-title {
    font-size: 18px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.announcements-page-section .news-excerpt p {
    font-size: 13px;
    line-height: 1.62;
    -webkit-line-clamp: 5;
}

/* The small EVENT metadata badge should not look like an oversized pill. */
.news-tag {
    border-radius: 6px;
}

/* Responsive archive: 2 columns on tablet, 1 on mobile. */
@media (max-width: 1080px) {
    .announcements-page-section .news-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .announcements-section .news-card {
        width: 325px;
        min-width: 325px;
    }

    .announcements-section .news-card-image.has-banner {
        height: 183px;
    }
}

@media (max-width: 700px) {
    .announcements-page-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .announcements-page-section .news-container {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .announcements-section .news-card {
        width: 300px;
        min-width: 300px;
    }

    .announcements-section .news-card-image.has-banner {
        height: 169px;
    }
}

/* ===== News archive two-column + show-more v3 ===== */
/* Keep the larger empty-state breathing room, but tighten the heading-to-cards
   spacing only when real news exists. */
.announcements-page-section.has-news .announcements-title {
    margin-bottom: 12px;
}

.announcements-page-section.has-news .announcements-intro {
    margin-bottom: 34px;
}

/* Exactly two large cards per row on the news archive. */
.announcements-page-section.has-news .news-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: min(1120px, 100%);
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 0 20px;
    overflow: visible;
}

.announcements-page-section.has-news .news-card {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.announcements-page-section.has-news .news-card-image.has-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Initial archive view is 8 cards. The button reveals the next 8. */
.announcements-page-section .news-card-more {
    display: none;
}

.news-show-more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px auto 6px;
    width: 100%;
}

.news-show-more-btn {
    min-width: 148px;
    padding: 10px 24px;
    border: 1px solid #8bc8ee;
    border-radius: 7px;
    background: linear-gradient(180deg, #67baf0 0%, #3797d3 100%);
    color: #fff;
    font-family: 'Informb', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(45, 118, 166, .18), inset 0 -2px 0 rgba(22, 95, 145, .18);
}

.news-show-more-btn:hover {
    background: linear-gradient(180deg, #74c2f3 0%, #3ca2df 100%);
}

.news-show-more-btn:focus-visible {
    outline: 2px solid #2e91ce;
    outline-offset: 3px;
}

@media (max-width: 800px) {
    .announcements-page-section.has-news .news-container {
        grid-template-columns: 1fr;
        width: min(560px, 100%);
        gap: 22px;
    }

    .announcements-page-section.has-news .announcements-intro {
        margin-bottom: 26px;
    }
}

/* ===== Homepage two-column + show-more v4 ===== */
/* When home actually has news, remove the old 120px empty band. */
.home-news-section.has-news {
    justify-content: flex-start;
    padding: 36px 0 54px;
}

/* Two large cards per row on the homepage, matching the news archive. */
.home-news-section.has-news .news-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: min(1120px, calc(100% - 48px));
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 0 20px;
    overflow: visible;
    align-items: stretch;
}

.home-news-section.has-news .news-container::-webkit-scrollbar {
    display: none;
}

.home-news-section.has-news .news-card {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.home-news-section.has-news .news-card-image.has-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.home-news-section.has-news .news-card-content {
    padding: 34px 20px 20px;
}

.home-news-section.has-news .news-title {
    font-size: 18px;
}

/* First 8 on home; Show more reveals the next 8. */
.home-news-section .home-news-card-more {
    display: none;
}

.home-news-section .home-news-show-more-wrap {
    margin-top: 18px;
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .home-news-section.has-news {
        padding: 28px 0 42px;
    }

    .home-news-section.has-news .news-container {
        grid-template-columns: 1fr;
        width: min(560px, calc(100% - 32px));
        gap: 22px;
    }
}

/* Homepage news: strict responsive containment.
 * The main module now carries home-news-section/has-news so these rules
 * actually apply to ?module=main instead of falling back to the old rail. */
.home-news-section.has-news .news-container {
    box-sizing: border-box;
}
.home-news-section.has-news .news-card,
.home-news-section.has-news .news-card-content,
.home-news-section.has-news .news-card-image {
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 800px) {
    .home-news-section.has-news .news-container {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 24px);
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }

    .home-news-section.has-news .news-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .home-news-section.has-news .news-container {
        width: calc(100% - 16px);
        gap: 18px;
    }

    .home-news-section.has-news .news-card-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ===== News page: full descriptions (20260929) =====
   Cards on ?module=news grow downward to fit the whole description instead of
   clamping it to 5 lines with an ellipsis. Cards in the same grid row still
   line up to the tallest one. The homepage carousel keeps its short preview. */
.announcements-page-section .news-card {
    height: auto;
}

.announcements-page-section .news-excerpt {
    height: auto;
}

.announcements-page-section .news-excerpt p {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ===== News page, phones only: full-width cards =====
   Four nested layers each added side padding (#main-wrapper 24 + #content-col
   16 + .content-inner 22 + section 30 = 92px per side), leaving a 191px-wide
   card on a 375px screen. Trim them to ~10px total, but only on the page that
   holds the news archive (:has), so no other page's layout changes. */
@media (max-width: 700px) {
    #main-wrapper:has(.announcements-page-section) {
        padding-left: 10px;
        padding-right: 10px;
    }
    #content-col:has(.announcements-page-section),
    #content-box .content-inner:has(.announcements-page-section) {
        padding-left: 0;
        padding-right: 0;
    }
    .announcements-section.announcements-page-section,
    .announcements-section.announcements-page-section.has-news {
        padding-left: 0;
        padding-right: 0;
    }
}