/* ==========================================
   CITY TABS
========================================== */

.jsn-city-tabs{
    margin-bottom:40px;
}

/* ==========================================
   Tabs
========================================== */

.jsn-city-list{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.jsn-city-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:10px 18px;

    border:1px solid #ececec;
    border-radius:40px;

    background:#fff;

    color:#222;
    text-decoration:none;

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

    transition:.3s ease;
}

.jsn-city-btn:hover,
.jsn-city-btn.active{

    background:#d71920;
    border-color:#d71920;
    color:#fff;

}

/* ==========================================
   More Dropdown
========================================== */

.jsn-more-wrapper{
    position:relative;
}

.jsn-more-btn{

    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;
    transition:.3s;
}

.jsn-more-btn:hover{

    background:#d71920;
    color:#fff;

}

.jsn-more-dropdown{

    position:absolute;

    top:110%;
    left:0;

    min-width:220px;

    background:#fff;

    border-radius:14px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    padding:10px;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.3s;

    z-index:99;

}

.jsn-more-wrapper.open .jsn-more-dropdown{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.jsn-more-dropdown .jsn-city-btn{

    width:100%;
    justify-content:flex-start;
    margin-bottom:8px;

}

.jsn-more-dropdown .jsn-city-btn:last-child{

    margin-bottom:0;

}

/* ==========================================
   Grid
========================================== */

.jsn-city-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;

}
.jsn-category-badge{

    position:absolute;
    top:12px;
    left:12px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 10px;

    background:#e30613;
    color:#fff;

    font-size:12px;
    font-weight:600;

    border-radius:4px;

    line-height:1;

    z-index:5;
}

@media(max-width:768px){

    .jsn-city-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================
   Card
========================================== */

.jsn-city-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    overflow:hidden;

    transition:.35s;

}


/* ==========================================
   Image
========================================== */

.jsn-card-image{
    position: relative;
    display:block;
    width:100%;
    height:220px;
    overflow:hidden;

}

.jsn-card-image img{

    width:100%;
    height:240px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.jsn-city-card:hover .jsn-card-image img{

    transform:scale(1.05);

}

/* ==========================================
   Content
========================================== */

.jsn-card-content{

    padding:22px;

}

/* ==========================================
   Meta
========================================== */

.jsn-card-meta{

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

    margin-bottom:15px;

    font-size:14px;
    color:#777;

}

.jsn-city-name{

    color:#e30613;
    font-weight:600;

}

/* ==========================================
   Title
========================================== */

.jsn-card-title{

    margin:0 0 15px;

    font-size:30px;

    line-height:1.35;

    font-weight:700;

}

.jsn-card-title a{

    color:#111;
    text-decoration:none;

}

.jsn-card-title a:hover{

    color:#d71920;

}

.jsn-card-title{

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

}

/* ==========================================
   Excerpt
========================================== */

.jsn-card-excerpt{

    font-size:16px;

    color:#666;

    line-height:1.7;

    margin-bottom:18px;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* ==========================================
   Read More
========================================== */

.jsn-read-more{

    color:#d71920;

    text-decoration:none;

    font-weight:700;

    text-transform:uppercase;

    font-size:14px;

}

.jsn-read-more:hover{

    color:#000;

}

/* ==========================================
   No Posts
========================================== */

.jsn-no-posts{

    padding:50px;

    text-align:center;

    background:#fafafa;

    border:1px solid #eee;

    border-radius:12px;

}

/* ==========================================
   Mobile Tabs
========================================== */

@media(max-width:767px){

    .jsn-city-list{

        overflow-x:auto;

        flex-wrap:nowrap;

        scrollbar-width:none;

    }

    .jsn-city-list::-webkit-scrollbar{

        display:none;

    }

    .jsn-city-btn{

        flex:none;

    }

}