/*
 * Newsfeed Widget — newsfeed-widget.css
 * Themeable via CSS custom properties.
 * All selectors are namespaced under .nfw-* to avoid conflicts.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
.nfw-widget {
    --nfw-font:          inherit;
    --nfw-radius:        6px;
    --nfw-gap:           1.5rem;

    /* Colors */
    --nfw-bg:            #ffffff;
    --nfw-surface:       #f8f9fa;
    --nfw-border:        #e5e7eb;
    --nfw-text:          #1a1a2e;
    --nfw-text-muted:    #6b7280;
    --nfw-accent:        #2563eb;
    --nfw-accent-hover:  #1d4ed8;
    --nfw-tag-bg:        #eff6ff;
    --nfw-tag-color:     #2563eb;

    /* Feed column accent */
    --nfw-feed-accent:   #0ea5e9;
    --nfw-feed-bg:       #f0f9ff;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.nfw-widget {
    font-family:    var(--nfw-font);
    color:          var(--nfw-text);
    background:     var(--nfw-bg);
    border:         1px solid var(--nfw-border);
    border-radius:  var(--nfw-radius);
    padding:        var(--nfw-gap);
    box-sizing:     border-box;
}

.nfw-widget *,
.nfw-widget *::before,
.nfw-widget *::after {
    box-sizing: inherit;
}

.nfw-widget__title {
    margin: 0 0 var(--nfw-gap);
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 2px solid var(--nfw-accent);
    padding-bottom: 0.5rem;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.nfw-columns {
    display:   flex;
    gap:       var(--nfw-gap);
    flex-wrap: wrap;
}

/* Split layout: articles 60% / feed 40% */
.nfw-layout--split .nfw-col--articles {
    flex: 3 1 300px;
}
.nfw-layout--split .nfw-col--feeds {
    flex: 2 1 220px;
}

/* Single column: full width */
.nfw-layout--single .nfw-col {
    flex: 1 1 100%;
}

/* ── Column heading ─────────────────────────────────────────────────────────── */
.nfw-col__heading {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--nfw-text-muted);
    margin:        0 0 1rem;
    display:       flex;
    align-items:   center;
    gap:           0.35em;
    border-bottom: 1px solid var(--nfw-border);
    padding-bottom: 0.5rem;
}

/* ── Reset lists ────────────────────────────────────────────────────────────── */
.nfw-articles,
.nfw-feeds,
.nfw-article__tags {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* ── Article card ───────────────────────────────────────────────────────────── */
.nfw-article {
    display:       flex;
    gap:           0.875rem;
    padding:       0.875rem 0;
    border-bottom: 1px solid var(--nfw-border);
}

.nfw-article:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.nfw-article__thumb-link {
    flex-shrink: 0;
}

.nfw-article__thumb {
    width:         80px;
    height:        64px;
    object-fit:    cover;
    border-radius: calc(var(--nfw-radius) - 2px);
    display:       block;
}

.nfw-article__body {
    flex: 1;
    min-width: 0;
}

.nfw-article__title {
    margin:      0 0 0.25rem;
    font-size:   0.95rem;
    font-weight: 600;
    line-height: 1.35;
}

.nfw-article__title a {
    color:           var(--nfw-text);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.nfw-article__title a:hover,
.nfw-article__title a:focus {
    color:           var(--nfw-accent);
    text-decoration: underline;
}

.nfw-article__meta {
    font-size:   0.75rem;
    color:       var(--nfw-text-muted);
    margin:      0 0 0.35rem;
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.2em 0.4em;
    align-items: center;
}

.nfw-article__sep {
    opacity: 0.4;
}

.nfw-article__excerpt {
    font-size:   0.82rem;
    color:       var(--nfw-text-muted);
    margin:      0 0 0.4rem;
    line-height: 1.5;

    /* Clamp to 2 lines */
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
}

.nfw-article__tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.25rem;
    margin-bottom: 0.4rem;
}

.nfw-tag {
    font-size:     0.68rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:         var(--nfw-tag-color);
    background:    var(--nfw-tag-bg);
    border-radius: 99px;
    padding:       0.15em 0.55em;
    white-space:   nowrap;
}

.nfw-article__read-more {
    font-size:       0.78rem;
    font-weight:     600;
    color:           var(--nfw-accent);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.nfw-article__read-more:hover,
.nfw-article__read-more:focus {
    color:           var(--nfw-accent-hover);
    text-decoration: underline;
}

/* ── Feed column ────────────────────────────────────────────────────────────── */
.nfw-col--feeds {
    background:    var(--nfw-feed-bg);
    border-radius: var(--nfw-radius);
    padding:       0.875rem;
    align-self:    flex-start;
    border:        1px solid #bae6fd;
}

.nfw-feed-item {
    padding:       0.75rem 0;
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
}

.nfw-feed-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.nfw-feed-item__title {
    margin:      0 0 0.2rem;
    font-size:   0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.nfw-feed-item__title a {
    color:           var(--nfw-text);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.nfw-feed-item__title a:hover,
.nfw-feed-item__title a:focus {
    color:           var(--nfw-feed-accent);
    text-decoration: underline;
}

.nfw-feed-item__ext {
    font-size:  0.7em;
    opacity:    0.5;
    margin-left: 0.2em;
}

.nfw-feed-item__meta {
    font-size:   0.72rem;
    color:       var(--nfw-text-muted);
    margin:      0 0 0.3rem;
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.2em 0.35em;
    align-items: center;
}

.nfw-feed-item__source {
    font-weight: 600;
    color:       var(--nfw-feed-accent);
}

.nfw-feed-item__summary {
    font-size:          0.78rem;
    color:              var(--nfw-text-muted);
    margin:             0;
    line-height:        1.45;
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow:           hidden;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.nfw-empty {
    text-align: center;
    color:      var(--nfw-text-muted);
    padding:    2rem;
    font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .nfw-columns {
        flex-direction: column;
    }

    .nfw-article__thumb {
        width:  60px;
        height: 48px;
    }
}

.nfw-widget--cards {
    margin: 2rem 0;
}

.nfw-widget__header {
    margin-bottom: 1.5rem;
}

.nfw-widget__title {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.2;
}

.nfw-section + .nfw-section {
    margin-top: 2.5rem;
}

.nfw-section__header {
    margin-bottom: 1rem;
}

.nfw-section__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.nfw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.nfw-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nfw-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.nfw-card__image-link {
    display: block;
}

.nfw-card__image {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.nfw-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1rem 1.1rem;
    flex: 1;
}

.nfw-card__type {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.nfw-card__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.nfw-card__title a {
    color: inherit;
    text-decoration: none;
}

.nfw-card__title a:hover {
    text-decoration: underline;
}

.nfw-card__meta {
    margin: 0;
    font-size: 0.92rem;
    color: #6b7280;
}

.nfw-card__sep {
    margin: 0 0.35rem;
}

.nfw-card__excerpt {
    color: #374151;
    font-size: 0.96rem;
    line-height: 1.6;
}

.nfw-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nfw-card__tag {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.82rem;
    color: #374151;
}

.nfw-card__footer {
    margin-top: auto;
    padding-top: 0.25rem;
}

.nfw-card__link {
    font-weight: 600;
    text-decoration: none;
}

.nfw-card__link:hover {
    text-decoration: underline;
}

.nfw-market-news--compact {
    font-size: 0.95rem;
}

.nfw-market-news__title {
    margin-bottom: 0.75rem;
}

.nfw-market-news__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nfw-market-news__item {
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.nfw-market-news__meta {
    display: block;
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0.1rem;
}

.nfw-market-news__link {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.nfw-market-news__link:hover {
    text-decoration: underline;
}