/* =========================================
   JOT321 Rails System
========================================= */

.jot321-rail{
    margin:0 0 28px;
}

.jot321-rail__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 14px;
}

.jot321-rail__head span{
    font-size:15px;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#0f172a;
}

.jot321-rail__track{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.jot321-rail__pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:38px;

    padding:8px 14px;

    border-radius:999px;

    background:#f8fafc;
    border:1px solid #cbd5e1;

    color:#0b3a75;

    font-size:14px;
    font-weight:800;

    text-decoration:none;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.jot321-rail__pill:hover{
    background:#0b3a75;
    border-color:#0b3a75;
    color:#ffffff;
}

.jot321-rail__pill.is-active{
    background:#0b3a75;
    border-color:#0b3a75;
    color:#ffffff;
}

.jot321-rail__pill small{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:22px;
    height:22px;

    padding:0 6px;

    border-radius:999px;

    background:#ffffff;
    color:#0b3a75;

    font-size:12px;
    font-weight:900;
}

.jot321-rail__pill.is-active small{
    background:#ffffff;
    color:#0b3a75;
}

/* ===== MOBILE ===== */

@media (max-width:768px){

    .jot321-rail{
        overflow:hidden;
    }

    .jot321-rail__track{
        flex-wrap:nowrap;

        overflow-x:auto;
        overflow-y:hidden;

        gap:12px;

        padding:4px 2px 10px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        scroll-behavior:smooth;
    }

    .jot321-rail__track::-webkit-scrollbar{
        display:none;
    }

    .jot321-rail__pill{
        flex:0 0 auto;

        min-height:42px;

        padding:10px 18px;

        font-size:15px;

        scroll-snap-align:start;
    }
}