/* ==========================================
   SOCIAL MEDIA TIMELINE
========================================== */


.timeline-page {
    display:flex;
    flex-direction:column;

    margin: 0 auto;

    width:100%;
    max-width:600px;
    
    gap:10px;
}

.account-page {
    width:100%;
    max-width:600px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
}

/* MAIN CARD */

.timeline-card {

    background:#1a1a1a;

    border-radius:12px;

    padding:18px;

    display:flex;
    flex-direction:column;

    gap:12px;

}


/* HEADER */

.timeline-header {
    display:flex;
    align-items: flex-end;
    gap:8px;
    font-size:16px;
    font-weight:bold;
}


.timeline-header strong {
    color:white;
}

.timeline-title {
    display:flex;
    flex-direction:column;
    gap:3px;
}

.timeline-title strong {
    color:white;
    font-size:16px;
}

.timeline-model {
    color:#aaa;
    font-size:12px;
    font-weight:normal;
}

/* TIMELINE META */
.timeline-meta {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.timeline-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    flex:1;
}


.timeline-date {
    flex-shrink:0;
    color:#888;
    font-size:12px;
    text-align:right;
    white-space:nowrap;
}

/* TIMELINE SERIES */
.timeline-series {

    margin-top:15px;
    padding-top:12px;
    border-top:1px solid #2a2a2a;

}


.timeline-series-title {

    color:#ddd;
    font-size:14px;
    font-weight:bold;
    margin-bottom:10px;

}


.series-carousel {

    display:flex;
    gap:12px;

    overflow-x:auto;

    scrollbar-width:none;

    padding-bottom:5px;

}


.series-carousel::-webkit-scrollbar {

    display:none;

}


.series-card {
    flex:0 0 calc(66.666% - 8px);
    background:#111;
    border-radius:12px;
    overflow:hidden;
}

@media(min-width:768px){
    .series-card {
        flex:0 0 calc(28.57% - 9px);
    }

}

.series-card a {
    color: white;
    text-decoration: none;
}

.series-card img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
}


.series-card-title {
    padding:8px;
    color:#ccc;
    font-size:12px;
}

/* DATE */

.timeline-date {
    margin-left:auto;
    color:#888;
    font-size:12px;
}


/* PLATFORM */
.timeline-platform {
    display:inline-flex;
    align-items:center;
    background:#2a2a2a;
    color:#aaa;
    font-size:11px;
    padding:5px 8px;
    border-radius:6px;
    text-transform:lowercase;
    white-space:nowrap;
}

/* ALL TAGS */

.post-tag {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 9px;
    border-radius:6px;
    font-size: 0.65em;
    line-height:1;
    font-weight:bold;
    text-transform:uppercase;
    white-space:nowrap;
    letter-spacing:.04em;
}

/* ACTIVE FILTER TAG */
/* Used when viewing posts filtered by this tag */

/* ACTIVE FILTER TAG */

.post-tag-active {
    background:#fff;
    color:#2a2a2a;

    padding:5px 12px;
    border-radius:6px;

    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;

    letter-spacing:0.05em;
    box-shadow:
        inset 0 0 0 2px #fff,
        0 0 8px rgba(255,255,255,.35);
}

.post-tag-active::before {
    content:none;
}

/* POST TYPES */
.post-video {
    background:#00A8A8;
    color:white;
}

.post-clip {
    background:#750023;
    color:white;
}

.post-image {
    background:#8E44AD;
    color:white;
}


.post-audio {
    background:#1E8449;
    color:white;
}

.post-podcast {
    background:#341e84;
    color:white;
}

.post-text {
    background:#2a2a2a;
    color:#aaa;

}

.post-premium {
    background:#D4AF37;
    color:#111;
}


.post-live {
    background:#E74C3C;
    color:white;
}


.post-featured {
    background:gold;
    color:#111;
}


.post-exclusive {
    background:#C10050;
    color:white;
}


.post-new {
    background:#27AE60;
    color:white;
}

.post-personal {
    background:#ff7ab4;
    color:white;
}

.post-bts {
    background:#34495E;
    color:white;
}

/* COMMUNITY / POLL / EVENT / AMA */
.post-community {
    background:#3498DB;
    color:white;
}

.post-ama {
    background:#535756;
    color:white;
}

.post-poll {
    background:#16A085;
    color:white;
}

.post-event {
    background:#34db74;
    color:#000;
}


.post-trending {
    background:#E67E22;
    color:white;
}


.post-interview {
    background:#cfa61d;
    color:white;
}


.post-announcement {
    background:#16A085;
    color:white;
}


.post-important {
    background:red;
    color:white;
}


/* IMAGE */

.timeline-image {
    width:100%;
    border-radius:12px;
    overflow:hidden;
    background:#111;
}


.timeline-image img {

    width:100%;

    display:block;

    object-fit:cover;

    border-radius:12px;

}


/* TEXT */

.timeline-text {
    color:#ccc;
    font-size:.9em;
    line-height:1.5;
    margin:0;
}

/* TIMELINE POLLS */
.timeline-poll {

    background:#151515;

    border-radius:12px;

    padding:14px;

    margin-top:8px;

}


.poll-question {

    color:white;

    font-size:15px;

    font-weight:bold;

    margin-bottom:12px;

}


.poll-option {
    background:#222;
    border-radius:8px;
    padding:10px;
    margin-bottom:8px;
    position:relative;
    overflow:hidden;
    color:#ddd;
    cursor:pointer;
}


.poll-option-bar {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    background:rgba(193,0,80,.35);
    z-index:0;
}

.poll-option-text {
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
}

.poll-footer {
    color:#888;
    font-size:12px;
    margin-top:10px;
}

.timeline-comments {
    border-top:1px solid #2a2a2a;
    padding-top:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}


.timeline-comment {
    background:#151515;
    border-radius:8px;
    padding:10px;
}


.comment-header {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
}


.comment-header strong {
    color:white;
}


.comment-header small {
    margin-left:auto;
    color:#777;
}


.comment-text {
    color:#ccc;
    font-size:13px;
    margin-top:6px;
}

.comments-more {
    text-align:right;
    color:#888;
    font-size:12px;
    cursor:pointer;
    margin-top:4px;
}

.comments-more:hover {
    color:white;
}

/* FOOTER */

.timeline-footer {

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:8px;
    padding-top:10px;

    border-top:1px solid #2a2a2a;

}


/* LEFT SIDE STATS */

.timeline-stats {

    display:flex;
    gap:12px;

    color:#888;
    font-size:12px;

}


/* RIGHT SIDE ACTIONS */

.timeline-actions {

    display:flex;
    gap:10px;

}


.timeline-action {

    color:#aaa;
    font-size:12px;

}




/* PINNED */

.timeline-pinned {

    border:1px solid #C10050;

}


/* VIDEO */

.timeline-video {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background: #000;
}

.timeline-video .video-background {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(15px);
    transform: scale(2);
    opacity: .6;
}

.timeline-video video {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.timeline-video.portrait video {
    max-height: 100vh;
}

.timeline-video.landscape video {
    width: 100%;
}

.timeline-clip {
    width:100%;
    aspect-ratio:16/9;
    background:#111;
    border-radius:12px;
    overflow:hidden;
}

.timeline-clip video {
    width:100%;
    aspect-ratio:16/9;
    background:#111;
    border-radius:12px;
    overflow:hidden;
}

/* LINK POSTS */

.timeline-link {

    background:#151515;

    padding:12px;

    border-radius:10px;

    color:#ddd;

    font-size:13px;

}



/* MOBILE */

@media(max-width:600px){

    .timeline-card {
        padding:14px;
        border-radius:10px;
    }


    .timeline-header {
        font-size:15px;
    }


    .timeline-text {

        font-size:.85em;

    }

}


/* DESKTOP */

@media(min-width:1280px){
    .timeline-page {
        max-width:600px;
    }


    .timeline-card {
        padding:20px;
    }
}

/* ACTIVE FILTER OVERRIDE */

.post-tag.post-tag-active {

    background:#fff;

    color:#2a2a2a;

    box-shadow:
        0 0 6px rgba(212,175,55,0.65),
        0 0 16px rgba(212,175,55,0.45),
        0 0 28px rgba(212,175,55,0.25);

    transform:translateY(-1px);
}