/* MAIN LAYOUT */
.main-content{
    display: flex;
    gap: 25px;
}


/* LEFT */
.sandi_main_contain_s5_left {
    width: 70%;
}

/* RIGHT SIDEBAR (UNCHANGED) */
.sandi_main_contain_s5_right {
    width: 30%;
    background: var(--white-color);
    /* padding: 20px; */
    border-radius: var(--border-radius);
}

/* HEADER */
.sandi_top_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sandi_heading {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    gap: 8px;
    align-items: center;
}

.sandi_dot {
    width: 10px;
    height: 10px;
    background: var(--blue-color);
    border-radius: 50%;
}

.sandi_btn {
    border: 1px solid var(--blue-color);
    padding: 6px 14px;
    border-radius: 20px;
    color: var(--blue-color);
    text-decoration: none;
    font-weight: 600;
}

/* ===== MAGAZINE 2×2 GRID ===== */
.sandi_magazine_layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% 50% */
    gap: 20px;
}

/* POSITION CONTROL */
.sandi_big_card:first-of-type {
    grid-column: 1;
    grid-row: 1;
    padding: 15px;
}

.sandi_small_list:first-of-type {
    grid-column: 2;
    grid-row: 1;
}

.sandi_small_list:last-of-type {
    grid-column: 1;
    grid-row: 2;
}

.sandi_big_card:last-of-type {
    grid-column: 2;
    grid-row: 2;
    padding:15px;
}

/* BIG CARD */
.sandi_big_card {
    background: var(--white-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition:.3s;
}

.big-img{
    width: 100%;
    height: 260px;
    object-fit: cover;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.big-img .big {
    height: 100%;
    width: 100%;
    transition: var(--transition);
}
.sandi_big_card:hover .big{
    transform: var(--transform);
    transition: var(--transition);
}

.sandi_content {
    padding-top: 14px;
}
.user{
    display: flex;
    justify-content: space-between  ;
    /* margin-top: 15px; */
    /* border: 1px solid red; */
}
.sub-user1{
  /* width: 60%; */
  display: flex;
  align-items: center;
  gap: 10px;
  /* border: 1px solid green; */
}
.sub-user1 span{
    font-size: var(--small-card-fsize);
}
.sub-user2{
    /* width: 40%; */
    display: flex;
    align-items: center;
    justify-content: end;
    /* border: 1px solid yellow; */
}
.user-img{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #0bbcd6, #FC1CB2);
    /* border: 1px solid blue; */
}
.user-img img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.sandi_content h3 {
    font-size: var(--big-card-fsize);
    margin-bottom: 10px;
    transition: var(--transition);
}
.sandi_big_card:hover .sandi_content h3{
    color: var(--blue-color);
    transition: var(--transition);
}
/* SMALL LIST */
.sandi_small_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sandi_small_card {
    display: flex;
    gap: 10px;
    background: var(--white-color);
    padding: 10px;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 8px rgba(0,0,0,.04);
    transition:var(--transition);
}
.small-img{
    width: 127px;
    height: 94px;
    border-radius: var(--border-radius);
    overflow: hidden;
    /* border: 1px solid yellow; */
}
.small-img img{
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transition: var(--transition);
}
.sandi_small_card:hover .small-img img{
    transform: var(--transform);
    transition: var(--transition);
}
.con-tent{
    width: 70%;
}


.sandi_small_card h4 {
    font-size: var(--small-card-fsize);
    margin-bottom: 4px;
    transition: var(--transition);
}

.sandi_small_card span,
.sandi_meta {
    font-size: var(--para-fsize);
    color: #777;
}
.sandi_small_card:hover h4{
    color: var(--blue-color);
    transition: var(--transition);
} 

/* ================= RESPONSIVE ================= */
@media(max-width:1087px) {
    .main-content{
        flex-direction: column;
        padding: 0px !important;
    }
    .sandi_main_contain_s5_left {
    width: 100%;
}
    .sandi_main_contain_s5_right{
        width: 100%;
    }
}
/* Tablet */
@media(max-width:992px) {
    .sandi_main_contain_s5 {
        flex-direction: column;
    }

    .sandi_main_contain_s5_left,
    .sandi_main_contain_s5_right {
        width: 100%;
    }

    .sandi_magazine_layout {
        grid-template-columns: 1fr;
    }

    .sandi_big_card,
    .sandi_small_list {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .con-tent {
    width: 82%;
}
}

/* Mobile */
@media(max-width:599px) {
    .sandi_big_card img {
        height: 200px;
    }

    .sandi_small_card img {
        width: 70px;
        height: 60px;
    }
    .user-img img{
       height: 100%;
       width: 100%;
    }
    /* .small-img{
        width: 127px;
    height: 94px;
    } */
     .small-img img{
        height: 100%;
        width: 100%;
     }
}

/* Small Mobile */
@media(max-width:400px) {
    .sandi_heading {
        font-size: 16px;
    }

    .sandi_content h3 {
        font-size: 15px;
    }
}

/* -------------right site content---------- */
.anirban_sidebar_widget {
            width: 100%;
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }


        .anirban_widget_header {
            margin-bottom: 20px;
        }

        .anirban_widget_title {
            font-size: var(--big-card-fsize);
            font-weight: 700;
            color: #222;
            position: relative;
            padding-bottom: 10px;
        }

        .anirban_widget_title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(to left,#0bbcd6, #FC1CB2);;
            border-radius: 3px;
        }


        .anirban_post_list {
            display: flex;
            flex-direction: column;
            gap: 18px;
            margin-bottom: 25px;
        }

        .anirban_post_item {
            display: flex;
            gap: 12px;
        }
         .anirban_post_item:hover .anirban_post_thumb img{
            transform: var(--transform);
            transition: var(--transition);
         }

        .anirban_post_thumb {
            width: 60px;
            height: 60px;
            border-radius: var( --border-radius);
            overflow: hidden;
            flex-shrink: 0;
            margin: 5px 0px 0px 0px;
        }

        .anirban_post_thumb img {
            width: 100%;
            height: 100%;
            transition: var(--transition);
            object-fit: cover;
        }

        /* .anirban_post_content{} */

        .anirban_post_date {
            font-size: var(--para-fsize);
            color: #999;
            margin-bottom: 4px;
        }

        .anirban_post_title {
            font-size: var(--small-card-fsize);
            font-weight: 600;
            color: #222;
            line-height: 1.4;
            cursor: pointer;
        }

        .anirban_post_title:hover {
            color: var(--blue-color);
            transition: var(--transition);
        }

        .anirban_featured_list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .anirban_featured_item {
            display: flex;
            gap: 14px;
            align-items: center;
        }
        .anirban_featured_item:hover .anirban_featured_image img{
            transform: var(--transform);
            transition: var(--transition);
        }

        .anirban_featured_content {
            flex: 1;
        }

        .anirban_featured_tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            margin-bottom: 6px;
        }

        .anirban_tag_gadget {
            background: linear-gradient(331deg, #0bbcd6, #FC1CB2);
            color: #fff;
        }

        .anirban_tag_technology {
            background: linear-gradient(331deg, #0bbcd6, #FC1CB2);
            color: #fff;
        }

        .anirban_featured_title {
            font-size: var(--small-card-fsize);
            font-weight: 600;
            color: #222;
            line-height: 1.4;
            margin-bottom: 4px;
            transition: var(--transition);
        }
        .anirban_featured_title:hover{
            color: var(--blue-color);
            transition: var(--transition);
        }

        .anirban_featured_date {
            font-size: 12px;
            color: #888;
        }

        .anirban_featured_image {
            width: 70px;
            height: 70px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            transition: var(--transition);
        }

        .anirban_featured_image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* <----------media-query--------> */
        @media(max-width:576px) {
            body {
                padding: 15px;
            }

            .anirban_sidebar_widget {
                width: 100%;
            }
        }

        @media(min-width:577px) and (max-width:992px) {
            .anirban_sidebar_widget {
                width: 100%;
            }
        }