/* ===== Shared Feed Components (fc- prefix) ===== */

/* Post Card */
.fc-card {
    background: var(--nv-surface, #fff);
    border: 1px solid var(--nv-border, #E7E2D8);
    border-radius: var(--nv-r-lg, 14px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--nv-sh-sm, 0 1px 2px rgba(22,35,61,.06));
    transition: transform .28s var(--nv-ease, ease), box-shadow .28s, border-color .28s;
    display: flex;
    flex-direction: column;
}
.fc-card:hover { transform: translateY(-4px); box-shadow: var(--nv-sh-lg, 0 18px 40px -14px rgba(22,35,61,.2)); border-color: var(--nv-border-2, #D8D2C5); }
.fc-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--nv-surface-2, #F3F0EA);
}
.fc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: var(--ub-gray-100);
}
.fc-img-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--nv-ink, #16233D) 0%, var(--nv-ink-900, #0C1424) 100%);
    position: relative; overflow: hidden;
}
.fc-img-ph::before {
    content: "\F588"; /* bi-stars (Notova spark feel) */
    font-family: "bootstrap-icons"; position: absolute;
    right: -10px; bottom: -14px; font-size: 5.5rem;
    color: rgba(240, 165, 0, 0.10); line-height: 1; transform: rotate(-8deg);
}
.fc-img-ph i { font-size: 2rem; color: rgba(240, 165, 0, 0.85); position: relative; z-index: 1; }
.fc-badge-ext {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 0.68rem; font-weight: 600;
    padding: 0.2rem 0.5rem; border-radius: var(--ub-radius-sm);
    backdrop-filter: blur(4px);
}
.fc-unclaimed-icon {
    color: #f59e0b; font-size: 0.7rem; margin-left: 4px;
}
.fc-badge-paid {
    position: absolute; bottom: 10px; left: 10px;
    background: rgba(109,40,217,0.85); color: #fff;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.2rem 0.5rem; border-radius: var(--ub-radius-sm);
    backdrop-filter: blur(4px); letter-spacing: 0.01em;
    display: flex; align-items: center; gap: 4px;
}
.fc-blog-badge {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.68rem; font-weight: 600; color: var(--nv-spark-700, #B97F08);
    background: var(--nv-spark-100, #FDF1D6); padding: 1px 6px; border-radius: 6px;
    text-decoration: none; white-space: nowrap; margin-left: 4px;
    transition: background 0.15s, color 0.15s;
}
.fc-blog-badge:hover { background: var(--nv-ink, #16233D); color: #fff; }
.fc-price-badge {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(22,163,74,0.9); color: #fff;
    font-size: 0.72rem; font-weight: 700;
    padding: 0.25rem 0.6rem; border-radius: 8px;
    backdrop-filter: blur(4px); letter-spacing: 0.01em;
}
.fc-rank {
    position: absolute; top: 10px; left: 10px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.2rem 0.5rem; border-radius: 6px;
    backdrop-filter: blur(4px);
}
/* Round 92: Newcomer-Spotlight Badge — frische, in den letzten 14 Tagen verifizierte Blogs */
.fc-badge-newcomer {
    position: absolute; top: 10px; right: 10px;
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
    font-size: 0.68rem; font-weight: 700;
    padding: 0.2rem 0.55rem; border-radius: var(--ub-radius-sm);
    box-shadow: 0 2px 6px rgba(239,68,68,0.3);
    letter-spacing: 0.01em;
}
.fc-card-body { padding: 1rem 1rem 0.875rem; display: flex; flex-direction: column; flex: 1; }
.fc-card-meta-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.fc-card-cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nv-spark-700, #B97F08); }
.fc-card-dest { font-size: 0.68rem; color: var(--ub-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-card-title { font-family: var(--nv-font-display, 'Space Grotesk', sans-serif); font-size: 0.98rem; font-weight: 600; color: var(--nv-ink, #16233D); line-height: 1.3; letter-spacing: -0.015em; margin-bottom: 0.3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.5rem; }
.fc-card-tag { font-size: 0.68rem; font-weight: 600; color: #0F1B33; background: #F4F6F9; padding: 1px 7px; border-radius: var(--ub-radius-full); }
.fc-card-excerpt { font-family: var(--nv-font-serif, 'Newsreader', Georgia, serif); font-size: 0.92rem; color: var(--nv-text-2, #55607A); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 0.6rem; }
.fc-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.8rem;
    border-top: 1px solid var(--nv-border, #E7E2D8);
}
.fc-card-author { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ub-gray-700); font-weight: 500; }
.fc-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--ub-bg-card); }
.fc-avatar-ph { background: var(--nv-grad-ink, #16233D); color: var(--nv-on-dark, #F6F3EC); font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fc-card-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.fc-meta-date { font-size: 0.7rem; color: var(--ub-gray-400); }
.fc-meta-stat { font-size: 0.7rem; color: var(--ub-gray-400); display: flex; align-items: center; gap: 0.15rem; }
.fc-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ub-gray-300); }

/* Featured Post */
.fc-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ub-bg-card);
    border-radius: var(--ub-radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ub-shadow-md);
    margin-bottom: 1.5rem;
    transition: transform var(--ub-transition-base), box-shadow var(--ub-transition-base);
}
.fc-featured:hover { transform: translateY(-3px); box-shadow: var(--ub-shadow-xl); }
.fc-featured-img-wrap { position: relative; overflow: hidden; }
.fc-featured-img {
    width: 100%; height: 100%; object-fit: cover; display: block; background-color: var(--ub-gray-100);
}
.fc-featured-overlay {
    position: absolute; top: 14px; left: 14px;
    display: flex; gap: 0.5rem;
}
.fc-rank-badge {
    background: linear-gradient(135deg, #f59e0b, #eab308);
    color: #fff; font-size: 0.85rem; font-weight: 800;
    padding: 0.3rem 0.75rem; border-radius: 8px;
}
.fc-overlay-badge {
    color: #fff; font-size: 0.75rem; font-weight: 600;
    padding: 0.3rem 0.75rem; border-radius: 8px;
}
.fc-featured-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.fc-featured-title { font-family: var(--nv-font-display, 'Space Grotesk', sans-serif); font-size: 1.2rem; font-weight: 600; color: var(--nv-ink, #16233D); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.fc-featured-excerpt { font-size: 0.84rem; color: var(--ub-gray-500); line-height: 1.5; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-featured-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.fc-feat-author { font-size: 0.85rem; font-weight: 600; color: var(--ub-gray-700); }
.fc-feat-stats { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--ub-gray-400); }
.fc-feat-stats span { display: flex; align-items: center; gap: 0.25rem; }

/* Grid */
.fc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

/* Skeleton */
.fc-card-skel { background: var(--ub-bg-card); border-radius: var(--ub-radius-lg); overflow: hidden; box-shadow: var(--ub-shadow-sm); }
.fc-skel-img { aspect-ratio: 16 / 9; background: var(--ub-gray-100); animation: ub-pulse 1.5s infinite; }
.fc-skel-body { padding: 0.875rem; }
.fc-skel-line { height: 12px; background: var(--ub-gray-100); border-radius: var(--ub-radius-sm); margin-bottom: 0.75rem; animation: ub-pulse 1.5s infinite; }

/* Empty State */
.fc-empty {
    text-align: center; padding: 4rem 2rem;
    background: var(--ub-bg-card); border-radius: var(--ub-radius-xl);
    box-shadow: var(--ub-shadow-sm);
    max-width: 500px; margin: 0 auto 2rem;
}
.fc-empty h3 { font-size: 1.25rem; font-weight: 700; color: var(--ub-gray-700); margin: 1rem 0 0.5rem; }
.fc-empty p { font-size: 0.9rem; color: var(--ub-gray-500); margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 1024px) {
    .fc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .fc-featured { grid-template-columns: 1fr; border-radius: var(--nv-r-lg, 14px); }
    .fc-featured-img { aspect-ratio: 16 / 9; }
    .fc-featured-body { padding: 1.1rem; }
    .fc-featured-title { font-size: 1.15rem; }
    .fc-featured-excerpt { font-size: 0.9rem; -webkit-line-clamp: 2; }

    /* Notova: Karten bleiben mobil VERTIKAL (Cover oben, Inhalt drunter) —
       kein gequetschtes Thumbnail-Row-Layout mehr. */
    .fc-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    .fc-card { flex-direction: column; border-radius: var(--nv-r-lg, 14px); }
    .fc-card-img-wrap { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--nv-r-lg, 14px) var(--nv-r-lg, 14px) 0 0; }
    .fc-card-body { padding: 1rem 1.1rem 1.1rem; }
    .fc-card-title { font-size: 1.05rem; line-height: 1.3; }
    .fc-card-excerpt { font-size: 0.92rem; line-height: 1.5; -webkit-line-clamp: 2; margin-bottom: 0.6rem; }
    .fc-card-footer { padding-top: 0.8rem; }

    .fc-empty { padding: 3rem 1.5rem; }
}