/* ──────────────────────────────────────────────────────────
   FictionX – News timeline (`.fx-timeline`)
   Classic centered, alternating timeline — refined & flat.
   No shadows. RTL-first using logical properties.
   ────────────────────────────────────────────────────────── */

.fx-timeline-wrap{
    padding:6px 0 10px;
}

.fx-timeline{
    position:relative;
    max-width:1060px;
    margin-inline:auto;
    padding:6px 0;
}

/* Center rail */
.fx-timeline::before{
    content:"";
    position:absolute;
    top:6px;
    bottom:6px;
    inset-inline-start:50%;
    margin-inline-start:-1px;
    width:2px;
    background:linear-gradient(180deg, rgba(165,19,19,.5) 0%, rgba(165,19,19,.22) 40%, rgba(15,23,42,.12) 100%);
}

/* ===== Item (alternating halves) ===== */
.fx-tl__item{
    position:relative;
    width:50%;
    box-sizing:border-box;
    padding-bottom:38px;
}
.fx-tl__item:nth-child(odd){
    margin-inline-start:0;
    padding-inline-end:52px;
}
.fx-tl__item:nth-child(even){
    margin-inline-start:50%;
    padding-inline-start:52px;
}
.fx-tl__item:last-child,
.fx-tl__item:nth-last-child(2):nth-child(odd){padding-bottom:6px;}

/* ===== Date badge (sits centered on the rail) ===== */
.fx-tl__date{
    position:absolute;
    top:2px;
    z-index:2;
    width:68px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
}
.fx-tl__item:nth-child(odd) .fx-tl__date{inset-inline-end:-34px;}
.fx-tl__item:nth-child(even) .fx-tl__date{inset-inline-start:-34px;}

.fx-tl__badge{
    width:100%;
    border-radius:4px;
    padding:10px 6px 9px;
    text-align:center;
    color:#fff;
    background:linear-gradient(158deg,#bb1717 0%,#a51313 55%,#860f0f 100%);
    /* flat separation from the rail (border, not a shadow) */
    border:4px solid #ffffff;
}
.fx-tl__day{
    display:block;
    font-size:24px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.5px;
}
.fx-tl__month{
    display:block;
    margin-top:4px;
    font-size:12px;
    font-weight:600;
    opacity:.95;
}
.fx-tl__year{
    font-size:12px;
    font-weight:700;
    color:#9aa3ad;
    background:#fff;
    padding:0 4px;
    border-radius:4px;
}

/* ===== Card (flat) ===== */
.fx-tl__card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e5e7ec;
    border-radius:4px;
    overflow:hidden;
    transition:border-color .25s ease;
}
.fx-tl__card:hover{border-color:rgba(165,19,19,.4);}

.fx-tl__media{
    display:block;
    height:210px;
    overflow:hidden;
    background:#eceef1;
}
.fx-tl__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .55s ease;
}
.fx-tl__card:hover .fx-tl__media img{transform:scale(1.05);}

.fx-tl__body{
    padding:17px 20px 15px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.fx-tl__meta{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin:0;padding:0;
    font-size:12.5px;
    font-weight:600;
    color:#7a8590;
}
.fx-tl__meta li{display:inline-flex;align-items:center;}
.fx-tl__meta i{color:#a51313;margin-inline-end:6px;font-size:13px;}
.fx-tl__meta a{color:inherit;text-decoration:none;transition:color .2s ease;}
.fx-tl__meta a:hover{color:#a51313;}

.fx-tl__title{
    margin:0;
    font-size:18px;
    font-weight:800;
    line-height:1.55;
    letter-spacing:-.2px;
}
.fx-tl__title a{color:#15202b;text-decoration:none;transition:color .2s ease;}
.fx-tl__title a:hover{color:#a51313;}

.fx-tl__excerpt{
    margin:0;
    font-size:14px;
    line-height:1.95;
    color:#52606d;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.fx-tl__foot{
    margin-top:4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid #eef0f3;
    padding-top:12px;
}
.fx-tl__views{
    font-size:12.5px;
    font-weight:700;
    color:#7a8590;
}
.fx-tl__views i{color:#a51313;margin-inline-end:6px;}
.fx-tl__more{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 17px;
    font-size:13px;
    font-weight:700;
    color:#a51313;
    text-decoration:none;
    border:1px solid rgba(165,19,19,.32);
    border-radius:4px;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.fx-tl__more::after{
    content:"";
    width:6px;height:6px;
    border-top:2px solid currentColor;
    border-inline-start:2px solid currentColor;
    transform:rotate(-45deg);
    display:inline-block;
}
[dir="ltr"] .fx-tl__more::after{transform:rotate(135deg);}
.fx-tl__more:hover{
    background:#a51313;
    color:#fff;
    border-color:#a51313;
}

/* ===== Mobile: single rail on the start side ===== */
@media (max-width:768px){
    .fx-timeline::before{inset-inline-start:26px;margin-inline-start:0;}
    .fx-tl__item,
    .fx-tl__item:nth-child(odd),
    .fx-tl__item:nth-child(even){
        width:100%;
        margin-inline-start:0;
        padding-inline-start:72px;
        padding-inline-end:0;
        padding-bottom:28px;
    }
    .fx-tl__item:nth-child(odd) .fx-tl__date,
    .fx-tl__item:nth-child(even) .fx-tl__date{
        inset-inline-start:-7px;
        inset-inline-end:auto;
        width:60px;
    }
    .fx-tl__badge{border-radius:4px;padding:8px 4px;}
    .fx-tl__day{font-size:20px;}
    .fx-tl__media{height:180px;}
    .fx-tl__body{padding:15px 16px 14px;}
    .fx-tl__title{font-size:16px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-tl__media img{transition:none;}
    .fx-tl__card:hover .fx-tl__media img{transform:none;}
}