/* --- Root Variables --- */
:root {
    --border-radius: 6px; /* Protita card e root wise radius */
    --blue-color: #0bbcd6;
    --pink-color: #FC1CB2;
    --white-color: #fff;
    --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transform: scale(1.1);
    --heading: 25px;
    --big-card-fsize: 17px;
    --small-card-fsize: 15px;
    --para-fsize: 14px;
    --background-linear-gradient: linear-gradient(331deg, #0bbcd6, #FC1CB2);
}
.looplane_main_home_sports_main_wrapper{
    width: 100%;
    display: flex;
    gap: 5px;
}
.somnath_main_contain_right{
width: 35%;
    height: 800px;
    background: linear-gradient(45deg, #dfe6e9, #b2bec3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-weight: 600;
    color: rgb(148, 148, 148);
    font-size: 13px;
    margin-top: 15px;
}

/* --- Base Wrapper (Desktop 70% Left) --- */
.looplane_main_home_sports_wrapper {
    width: 70%;
    margin: 30px 0;
    padding-right: 25px;
    box-sizing: border-box;
}

/* --- Hero Section --- */
.looplane_main_home_sports_first_section {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.looplane_main_home_sports_hero_item {
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    align-items: flex-end;
    color: var(--white-color);
    border-radius: var(--border-radius); /* Root wise radius */
    cursor: pointer;
}

.looplane_main_home_sports_hero_item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: var(--transition);
    z-index: -1;
}

.looplane_main_home_sports_hero_main { grid-row: span 2; height: 460px; }

/* .looplane_main_home_sports_hero_main::before { 
    
    background-image: url('https://img.freepik.com/free-photo/coronavirus-cells-close-up_23-2148501235.jpg'); 
} */
/* .looplane_main_home_sports_hero_sub_1::before, 
.looplane_main_home_sports_hero_sub_2::before { background-image: url('https://images.pexels.com/photos/1583582/pexels-photo-1583582.jpeg'); } */

.looplane_main_home_sports_hero_item:hover::before { transform: var(--transform); }

.looplane_main_home_sports_hero_right_container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.looplane_main_home_sports_overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, transparent 100%);
    padding: 20px;
    width: 100%;
}

.looplane_main_home_sports_badge {
    background: var(--background-linear-gradient);
    padding: 6px 15px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-radius: 4px;
    color: #fff;
}

.looplane_main_home_sports_title {
    font-size: var(--heading);
    line-height: 1.2;
    font-weight: bold;
}

/* --- Second Section (Small Cards) --- */
.looplane_main_home_sports_second_section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.looplane_main_home_sports_card {
    width: 100%;
    cursor: pointer;
}

.looplane_main_home_sports_card_img_box {
    position: relative;
    overflow: hidden;
    height: 165px;
    border-radius: var(--border-radius); /* Root wise radius */
}

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

.looplane_main_home_sports_card:hover img { transform: var(--transform); }

.looplane_card_btn_fixed {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--background-linear-gradient);
    padding: 5px 12px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
}

.looplane_main_home_sports_card_info { 
    padding: 12px 0; 
}

.looplane_main_home_sports_card_author {
    background: var(--background-linear-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: var(--para-fsize);
}

.looplane_main_home_sports_card_date {
    font-size: var(--para-fsize);
    color: #777;
    margin-left: 5px;
}

.looplane_main_home_sports_card_title {
    font-size: var(--small-card-fsize);
    margin-top: 8px;
    color: #1a1a1a;
    line-height: 1.5;
    font-weight: bold;
    transition: var(--transition);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.looplane_main_home_sports_card:hover .looplane_main_home_sports_card_title {
    color: var(--blue-color);
}

/* -----------------------------------------------------------------
   MEDIA QUERIES (AS PER LOOPLANE.IN PATTERN)
----------------------------------------------------------------- */

/* 1. Desktop & Laptop Adjustments */
@media screen and (max-width: 1200px) {
    .looplane_main_home_sports_wrapper {
        width: 100%;
        padding: 0 20px;
        margin: 20px auto;
    }
}

/* 2. Tablets (3 Columns for Small Cards) */
@media screen and (max-width: 992px) {
    .looplane_main_home_sports_second_section {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3. Mobile & Small Tablet (Stacked Hero + 2 Column Cards) */
@media screen and (max-width: 768px) {
    .looplane_main_home_sports_first_section {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .looplane_main_home_sports_hero_main {
        height: 350px;
        grid-row: auto;
    }
    .looplane_main_home_sports_hero_right_container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 15px;
    }
    .looplane_main_home_sports_second_section {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 4. PERFECT PHONE FIX (480px down to 320px) */
@media screen and (max-width: 480px) {
    .looplane_main_home_sports_wrapper {
        width: 100% !important;
        padding: 0 !important; /* Edge-to-edge content */
        margin: 10px 0 !important;
    }

    /* Hero items full width, no radius on edges for cleaner look */
    .looplane_main_home_sports_hero_item {
        border-radius: 0; 
        height: 220px;
    }

    .looplane_main_home_sports_hero_main {
        height: 260px;
    }

    .looplane_main_home_sports_hero_right_container {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    /* Small Cards 100% Width */
    .looplane_main_home_sports_second_section {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0; /* Container padding 0 */
    }

    .looplane_main_home_sports_card_img_box {
        height: 230px; /* PH e card image height barlam visibility r jonno */
        border-radius: 0; /* Edge to edge image */
    }

    /* Card Text Alignment Fix (Perfect spacing like looplane) */
    .looplane_main_home_sports_card_info {
        padding: 12px 15px; /* Text gulo ke screen edge theke ektu sore rakha */
    }

    .looplane_main_home_sports_title {
        font-size: 20px;
    }

    .looplane_main_home_sports_card_title {
        font-size: 16px;
        line-height: 1.4;
    }

    /* Very Small Devices (320px) */
    @media (max-width: 320px) {
        .looplane_main_home_sports_hero_main { height: 210px; }
        .looplane_main_home_sports_title { font-size: 18px; }
    }
}