/* News Feed Carousel widget */

.news-feed-carousel {
    font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", sans-serif;
    width: 100%;
}

.news-feed-carousel .nfc-heading {
    margin: 0 0 16px;
    color: #0053a5;
    font-size: 18px;
    line-height: 26px;
}

/* Outer frosted shell ------------------------------------------------------ */
.news-feed-carousel .nfc-shell {
    display: flex;
    align-items: stretch;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 0 0 24px 24px;
    overflow: hidden;
}

/* Horizontal, snapping track of cards -------------------------------------- */
.news-feed-carousel .nfc-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* hide scrollbar (Firefox / IE) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-feed-carousel .nfc-track::-webkit-scrollbar {
    display: none; /* hide scrollbar (WebKit) */
}

/* Individual card ---------------------------------------------------------- */
.news-feed-carousel .nfc-card {
    flex: 0 0 305px;
    width: 305px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 17px;
    border-bottom: 1px solid #e9f0f4;
    border-left: 1px solid #e9f0f4;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}

.news-feed-carousel .nfc-card:first-child {
    border-bottom-left-radius: 24px;
}

.news-feed-carousel .nfc-card:hover .nfc-card-title {
    text-decoration: underline;
}

.news-feed-carousel .nfc-card-title {
    margin: 0;
    color: #0053a5;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    word-break: break-word;
    /* clamp to two lines like the design ("...") */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-feed-carousel .nfc-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.news-feed-carousel .nfc-card-meta-text {
    flex: 1 1 0;
    min-width: 0;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.news-feed-carousel .nfc-time {
    color: #3c5567;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

.news-feed-carousel .nfc-type {
    color: #868f98;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

/* Circular type icon ------------------------------------------------------- */
.news-feed-carousel .nfc-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(0, 83, 165, 0.1);
    border-radius: 360px;
}

.news-feed-carousel .nfc-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Vertical prev / next navigation ------------------------------------------ */
.news-feed-carousel .nfc-nav {
    flex: 0 0 55px;
    width: 55px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #d2dce6;
    border-right: 1px solid #d2dce6;
    border-bottom: 1px solid #d2dce6;
    border-bottom-right-radius: 24px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.news-feed-carousel .nfc-nav-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    margin: 0;
    border: none;
    background: #fff;
    color: #486284;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.news-feed-carousel .nfc-next {
    border-bottom: 1px solid #d2dce6;
}

.news-feed-carousel .nfc-nav-btn:hover:not([disabled]) {
    color: #0053a5;
}

.news-feed-carousel .nfc-nav-btn[disabled] {
    opacity: 0.25;
    cursor: default;
}

.news-feed-carousel .nfc-nav-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* bottom arrow points the other way (prev) */
.news-feed-carousel .nfc-prev svg {
    transform: rotate(180deg);
}

/* Mobile: one full-width card visible at a time ---------------------------- */
@media (max-width: 767px) {
    /* One card shows at a time, so let each card size to its own content instead
       of stretching to the tallest sibling. The JS syncs the track height to the
       card in view, which removes the dead space under short headlines. */
    .news-feed-carousel .nfc-track {
        align-items: flex-start;
        transition: height 0.2s ease;
    }

    .news-feed-carousel .nfc-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .news-feed-carousel .nfc-card-title {
        font-size: 16px;
        line-height: 24px;
    }

    .news-feed-carousel .nfc-time,
    .news-feed-carousel .nfc-type {
        font-size: 14px;
        line-height: 22px;
    }
}