/* LIVE FEED */
.feed-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

a.feed-card{
    position:relative;
    background:rgba(8,14,26,.92);
    border-radius:14px;
    padding:20px 20px 22px;
    min-height:178px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}

a.feed-card:hover{transform:translateY(-3px)}

a.feed-card:focus{
    outline:2px solid rgba(41,151,255,.75);
    outline-offset:2px;
}

a.feed-card h3{color:#f0f4fa}

.feed-meta-votes{margin-left:10px;opacity:.85;font-size:.9em}

.section-trending-hot{margin-top:0}

.feed-card--red{
    border:1px solid rgba(227,24,24,.7);
    box-shadow:
        inset 0 0 20px rgba(227,24,24,.22),
        inset 0 0 40px rgba(227,24,24,.1),
        inset 0 1px 0 rgba(255,120,120,.12);
}

.feed-card--green{
    border:1px solid rgba(34,197,94,.65);
    box-shadow:
        inset 0 0 20px rgba(34,197,94,.18),
        inset 0 0 40px rgba(34,197,94,.08),
        inset 0 1px 0 rgba(120,230,160,.1);
}

.feed-card--blue{
    border:1px solid rgba(26,140,255,.65);
    box-shadow:
        inset 0 0 20px rgba(26,140,255,.2),
        inset 0 0 40px rgba(26,140,255,.08),
        inset 0 1px 0 rgba(120,190,255,.1);
}

.feed-card--orange{
    border:1px solid rgba(245,158,11,.65);
    box-shadow:
        inset 0 0 20px rgba(245,158,11,.18),
        inset 0 0 40px rgba(245,158,11,.08),
        inset 0 1px 0 rgba(255,210,120,.1);
}

.feed-card--red:hover{
    box-shadow:
        inset 0 0 28px rgba(227,24,24,.32),
        inset 0 0 52px rgba(227,24,24,.14),
        inset 0 1px 0 rgba(255,120,120,.18);
}

.feed-card--green:hover{
    box-shadow:
        inset 0 0 28px rgba(34,197,94,.28),
        inset 0 0 52px rgba(34,197,94,.12),
        inset 0 1px 0 rgba(120,230,160,.15);
}

.feed-card--blue:hover{
    box-shadow:
        inset 0 0 28px rgba(26,140,255,.3),
        inset 0 0 52px rgba(26,140,255,.12),
        inset 0 1px 0 rgba(120,190,255,.15);
}

.feed-card--orange:hover{
    box-shadow:
        inset 0 0 28px rgba(245,158,11,.28),
        inset 0 0 52px rgba(245,158,11,.12),
        inset 0 1px 0 rgba(255,210,120,.15);
}

.feed-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.feed-card-top .tag{margin-bottom:0}

.feed-time{
    font-size:12px;
    color:#7d8b9c;
    white-space:nowrap;
    flex-shrink:0;
    padding-top:2px;
}

.tag{
    display:inline-block;
    padding:5px 10px;
    border-radius:6px;
    font-family:var(--font-primary);
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;
    margin-bottom:14px;
    width:fit-content;
}

.tag-red{background:rgba(227,24,24,.2);color:#ff6b6b}
.tag-green{background:rgba(34,197,94,.15);color:#4ade80}
.tag-blue{background:rgba(26,140,255,.15);color:#60a5fa}
.tag-orange{background:rgba(245,158,11,.15);color:#fbbf24}
.tag-purple{background:rgba(168,85,247,.18);color:#c084fc}

.feed-card h3{
    font-size:17px;
    font-weight:600;
    line-height:1.45;
    margin-bottom:auto;
    padding-bottom:16px;
}

.feed-meta{
    font-size:13px;
    color:#a8b4c4;
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:auto;
}

.feed-meta-icon{
    width:32px;
    height:32px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.feed-meta-icon .icon{width:17px;height:17px}

.feed-card--red .feed-meta-icon{
    background:rgba(227,24,24,.2);
    color:#ff7070;
    border:1px solid rgba(227,24,24,.45);
    box-shadow:inset 0 0 12px rgba(227,24,24,.35);
}

.feed-card--green .feed-meta-icon{
    background:rgba(34,197,94,.16);
    color:#4ade80;
    border:1px solid rgba(34,197,94,.4);
    box-shadow:inset 0 0 12px rgba(34,197,94,.3);
}

.feed-card--blue .feed-meta-icon{
    background:rgba(26,140,255,.16);
    color:#60a5fa;
    border:1px solid rgba(26,140,255,.4);
    box-shadow:inset 0 0 12px rgba(26,140,255,.32);
}

.feed-card--orange .feed-meta-icon{
    background:rgba(245,158,11,.16);
    color:#fbbf24;
    border:1px solid rgba(245,158,11,.4);
    box-shadow:inset 0 0 12px rgba(245,158,11,.3);
}