/* =====================================
   SHYAMSARTHI TRAVELS — BLOG LIST
   (re-themed from healthcare template)
===================================== */

body{
    background:#f4f7fb;
}

.rr-container{

    max-width:1320px;

    margin:35px auto 60px;

    padding:0 20px;
}

/* HERO */

.rr-page-title{

    text-align:center;

    font-size:42px;

    font-weight:800;

    color:#081120;

    margin:0 0 45px;

    position:relative;

    padding-bottom:20px;

    font-family:'Inter', sans-serif;
}

.rr-page-title::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:70px;

    height:4px;

    border-radius:20px;

    background:linear-gradient(90deg, #FF8C00, #FFD166);
}

/* GRID */

.rr-blog-grid{

    display:grid !important;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:28px;

    align-items:start;
}

/* =====================================
   CARD DESIGN
===================================== */

.rr-blog-card-lg{

    width:100%;

    background:#fff;

    border:1px solid #E4EAF3;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 4px 16px rgba(8, 17, 32, .06);

    transition:.3s ease;

    position:relative;
}

.rr-blog-card-lg:hover{

    transform:translateY(-6px);

    border-color:rgba(255, 140, 0, .35);

    box-shadow:
    0 16px 34px rgba(11, 61, 145, .14), 0 0 24px rgba(255, 140, 0, .12);
}

/* IMAGE */

.rr-blog-card-lg .rr-blog-thumb{

    display:block;

    position:relative;

    overflow:hidden;
}

.rr-blog-card-lg .rr-blog-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(8,17,32,0) 55%, rgba(8,17,32,.55) 100%);
}

.rr-blog-card-lg .rr-blog-thumb img{

    width:100%;

    height:210px;

    object-fit:cover;

    display:block;

    transition:.4s ease;
}

.rr-blog-card-lg:hover .rr-blog-thumb img{

    transform:scale(1.06);
}

/* BODY */

.rr-blog-card-lg .rr-blog-body{

    padding:18px 16px 20px;
}

/* TITLE */

.rr-blog-card-lg .rr-blog-title{

    margin:0 0 8px;

    font-size:19px;

    font-weight:700;

    line-height:1.35;

    min-height:52px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    font-family:'Inter', sans-serif;
}

.rr-blog-card-lg .rr-blog-title a{

    color:#081120;

    text-decoration:none;

    transition:.25s ease;
}

.rr-blog-card-lg .rr-blog-title a:hover{

    color:#FF8C00;
}

/* EXCERPT */

.rr-blog-card-lg .rr-excerpt{

    font-size:13.5px;

    line-height:1.6;

    color:#5b6b82;

    margin-bottom:14px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* DATE */

.rr-blog-card-lg .rr-date{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.03em;

    text-transform:uppercase;

    color:#0B3D91;

    background:rgba(11, 61, 145, .07);

    border:1px solid rgba(11, 61, 145, .15);

    padding:5px 12px;

    border-radius:20px;
}



/* =====================================
   PAGINATION
===================================== */

.rr-pagination{

    margin:55px 0 10px;

    display:flex;

    justify-content:center;

    gap:8px;

    flex-wrap:wrap;
}

.rr-pagination a{

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:10px;

    background:#fff;

    border:1px solid #E4EAF3;

    color:#081120;

    font-weight:700;

    transition:.25s ease;
}

.rr-pagination a:hover{

    background:rgba(255, 140, 0, .08);

    border-color:#FF8C00;

    color:#FF8C00;
}

.rr-pagination a.active{

    background:linear-gradient(135deg, #FF8C00, #FFA01C);

    color:#03070E;

    border-color:transparent;

    box-shadow:0 0 18px rgba(255, 140, 0, .4);
}

/* TABLET */

@media(max-width:1024px){

    .rr-blog-grid{

        grid-template-columns:
        repeat(2,minmax(0,1fr));
    }
}

/* MOBILE */

@media(max-width:768px){

    .rr-container{
        padding:0 14px;
    }

    .rr-page-title{

        font-size:34px;

        margin-bottom:30px;
    }

    .rr-blog-grid{

        grid-template-columns:1fr;
    }

    .rr-blog-card-lg .rr-blog-thumb img{

        height:200px;
    }

    .rr-blog-card-lg .rr-blog-title{

        font-size:17px;

        min-height:auto;
    }
}