/* ==========================================================================
   ১. গ্লোবাল এবং লেআউট স্টাইল (Global & Layout Styles)
   ========================================================================== */
.mi-content {
    flex: 1;
}

.mi-featured {
    margin-bottom: 40px;
    font-family: 'Solaimanlipi', sans-serif;
    background: #ffffff;
}

/* বক্স মডেল রিসেট নিশ্চিত করার জন্য */
*, *::before, *::after {
    box-sizing: border-box;
}

/* গ্লোবাল টাইম/মেটা স্টাইল */
.mi-meta {
    font-size: 0.85rem;
    color: #777777;
    margin-top: auto; /* সময়কে খবরের নিচে পুশ করবে */
}

/* ক্যাটাগরি শিরোনামের পাশে ছোট নীল স্কয়ার আইকন */
.mi-square-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #007bff; /* নীল রঙ */
    margin-left: 8px;
}

/* গ্লোবাল লিংক হোভার ইফেক্ট */
.mi-featured-content h2 a:hover,
.mi-sub-news-item h3 a:hover,
.mi-news-card-featured .mi-card-body h4 a:hover,
.mi-widget-list li h4 a:hover,
.mi-block-featured h3 a:hover,
.mi-block-list li h4 a:hover,
.mi-ent-sub-item h3 a:hover,
.mi-ent-main-content h2 a:hover,
.mi-two-col-main h3 a:hover,
.mi-two-col-list-item h4 a:hover,
.mi-sports-main-content h3 a:hover,
.mi-sports-sub-feat-text h4 a:hover,
.mi-sports-list-text h4 a:hover {
    color: #007bff; /* সব শিরোনামে হোভার করলে নীল রঙ হবে */
}


/* ==========================================================================
   ২. ওপরের প্রধান লিড নিউজের স্টাইল (Main Lead Article)
   ========================================================================== */
.mi-featured-main-article {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* ছবি একটু বড়, লেখা ডানে */
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #c0c0c0; /* মাঝখানের স্পষ্ট আড়াআড়ি ধূসর দাগ */
}

.mi-featured-image-block {
    display: flex;
    flex-direction: column;
}

.mi-featured-main-article img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mi-image-caption {
    font-size: 0.85rem;
    color: #666666;
    margin-top: 6px;
    line-height: 1.4;
}

.mi-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.mi-featured-content h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

.mi-featured-content h2 a {
    color: #000000;
    text-decoration: none;
}

.mi-featured-content p {
    font-size: 1.05rem;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 16px;
}


/* ==========================================================================
   ৩. নিচের দুটি সাব-নিউজের গ্রিড লেআউট (Sub News Grid)
   ========================================================================== */
.mi-featured-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ৫০%-৫০% পাশাপাশি দুটি নিউজ */
    gap: 30px;
    padding-top: 20px;
}

/* প্রতিটি ছোট নিউজের ভেতরের লেআউট (লেখা বামে, ছবি ডানে) */
.mi-sub-news-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* বাম পাশের নিউজটির ডানপাশে একটি হালকা লম্বালম্বি বর্ডার */
.mi-featured-sub-grid > article:first-child {
    border-right: 1px solid #e0e0e0;
    padding-right: 15px;
}

.mi-sub-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mi-sub-news-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.mi-sub-news-item h3 a {
    color: #000000;
    text-decoration: none;
}

.mi-red-text {
    color: #dc3545; /* শিরোনামের আংশিক লেখার লাল রঙ */
}

.mi-sub-news-item p {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 10px;
}

.mi-sub-img img {
    width: 120px;
    height: 90px;
    object-fit: cover;
}


/* ==========================================================================
   ৪. ক্যাটাগরি গ্রিড সেকশন (শিক্ষা ও চাকরি - 1grid.JPG অনুযায়ী)
   ========================================================================== */
.mi-category-grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ৫০%-৫০% পাশাপাশি দুটি কলাম */
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: 'Solaimanlipi', sans-serif;
}

/* ক্যাটাগরি হেডার স্টাইল (উপরে ধূসর মোটা বর্ডার) */
.mi-block-header {
    border-top: 1px solid #777777; /* ছবির মতো ওপরে স্পষ্ট ধূসর দাগ */
    padding-top: 8px;
    margin-bottom: 15px;
}

.mi-block-title {
    font-size: 1.35rem;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* লাল রঙের অ্যারো চিহ্নের স্টাইল */
.mi-arrow {
    color: #dc3545; /* লাল কালার */
    margin-left: 6px;
    font-family: sans-serif;
    font-size: 1.1rem;
}

/* ফিচার্ড অংশ (ছবি ও প্রধান শিরোনাম) */
.mi-block-featured {
    margin-bottom: 15px;
}

.mi-block-featured img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 12px;
}

.mi-block-featured h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

.mi-block-featured h3 a,
.mi-block-list li h4 a {
    color: #000000;
    text-decoration: none;
}

/* নিচে অন্যান্য খবরের তালিকা */
.mi-block-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mi-block-list li {
    padding: 12px 0;
    border-top: 1px solid #e0e0e0; /* খবরের মাঝখানের হালকা ডিভাইডার */
}

.mi-block-list li h4 {
    font-size: 1.05rem;
    font-weight: normal;
    line-height: 1.45;
    margin: 0;
}


/* ==========================================================================
   ৫. সিঙ্গেল উইজেট কার্ড সেকশন (রাজনীতি ও খেলাধুলা - sec.JPG অনুযায়ী)
   ========================================================================== */
.mi-news-widget-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.mi-news-widget-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 15px;
    font-family: 'SolaimanLipi', Arial, sans-serif;
}

.mi-widget-header {
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
    padding-bottom: 5px;
    display: flex;
}

.mi-widget-header .mi-category {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-bottom: 5px;
}

.mi-widget-header .mi-category::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #d9534f;
}

.mi-news-card-featured {
    margin-bottom: 15px;
}

.mi-news-card-featured img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.mi-news-card-featured .mi-card-body h4 {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.mi-news-card-featured .mi-card-body h4 a {
    color: #333;
    text-decoration: none;
    font-weight: normal;
}

.mi-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mi-widget-list li {
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.mi-widget-list li:first-child {
    border-top: none;
}

.mi-widget-list li h4 {
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
}

.mi-widget-list li h4 a {
    color: #333;
    text-decoration: none;
    font-weight: normal;
}

.mi-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

.mi-widget-footer {
    text-align: center;
    margin-top: 15px;
}

.mi-btn-more {
    background-color: #007bff;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    border: none;
    display: inline-block;
}

.mi-btn-more:hover {
    background-color: #0056b3;
}


/* ==========================================================================
   ৬. বিনোদন সেকশন স্টাইল (বাম পাশে ৩ নিউজ, ডান পাশে মেইন নিউজ - se3.JPG)
   ========================================================================== */
.mi-entertainment-section {
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: 'Solaimanlipi', sans-serif;
}

.mi-entertainment-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* বাম ও ডান কলামের অনুপাত */
    gap: 24px;
}

.mi-ent-left-column {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #c0c0c0; /* লম্বালম্বি বর্ডার */
    padding-right: 24px;
}

.mi-ent-sub-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.mi-ent-left-column .mi-ent-sub-item:first-child {
    padding-top: 0;
}

.mi-ent-left-column .mi-ent-sub-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mi-ent-sub-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mi-ent-sub-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 8px 0;
}

.mi-ent-sub-item h3 a,
.mi-ent-main-content h2 a {
    color: #000000;
    text-decoration: none;
}

.mi-ent-sub-img img {
    width: 120px;
    height: 90px;
    object-fit: cover;
}

.mi-ent-right-column {
    display: flex;
    flex-direction: column;
}

.mi-ent-main-article {
    display: flex;
    flex-direction: column;
}

.mi-ent-main-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 15px;
}

.mi-ent-main-content h2 {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px 0;
}

.mi-ent-main-content p {
    font-size: 0.98rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 12px;
}


/* ==========================================================================
   ৭. ক্যাটাগরি তালিকা সেকশন (লাইফস্টাইল ও টেক - se4.JPG অনুযায়ী)
   ========================================================================== */
.mi-two-column-list-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ৫০%-৫০% কলাম */
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: 'Solaimanlipi', sans-serif;
}

.mi-two-col-header {
    border-top: 1px solid #c0c0c0; /* চিকন ধূসর দাগ */
    padding-top: 12px;
    margin-bottom: 18px;
}

.mi-two-col-title {
    font-size: 1.35rem;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.mi-two-col-main {
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.mi-two-col-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 12px;
}

.mi-two-col-main h3 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}

.mi-two-col-main h3 a,
.mi-two-col-list-item h4 a {
    color: #000000;
    text-decoration: none;
}

.mi-two-col-list {
    display: flex;
    flex-direction: column;
}

.mi-two-col-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.mi-two-col-list-item:last-child {
    border-bottom: none;
}

.mi-two-col-list-item h4 {
    flex: 1;
    font-size: 1.05rem;
    font-weight: normal;
    line-height: 1.45;
    margin: 0;
}

.mi-two-col-list-item img {
    width: 100px;
    height: 70px;
    object-fit: cover;
}


/* ==========================================================================
   ৮. খেলাধুলা সেকশন স্টাইল (বাম পাশে বড় ও মাঝারি নিউজ, ডান পাশে ৩টি লিস্ট - se5.JPG)
   ========================================================================== */
.mi-sports-section {
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: 'Solaimanlipi', sans-serif;
}

.mi-sports-header {
    border-top: 1px solid #c0c0c0;
    padding-top: 12px;
    margin-bottom: 18px;
}

.mi-sports-title {
    font-size: 1.35rem;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.mi-sports-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.mi-sports-left-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #c0c0c0; /* মাঝখানের লম্বালম্বি বর্ডার */
    padding-right: 24px;
}

.mi-sports-main-feat {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
}

.mi-sports-main-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 12px;
}

.mi-sports-main-content h3 {
    font-size: 1.45rem;
    font-weight: bold;
    line-height: 1.35;
    margin: 0 0 8px 0;
}

.mi-sports-main-content p,
.mi-sports-sub-feat-text p,
.mi-sports-list-text p {
    font-size: 0.92rem;
    color: #555555;
    line-height: 1.5;
    margin: 0;
}

.mi-sports-sub-feat {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mi-sports-sub-feat-img img {
    width: 160px;
    height: 105px;
    object-fit: cover;
}

.mi-sports-sub-feat-text {
    flex: 1;
}

.mi-sports-sub-feat-text h4 {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 6px 0;
}

.mi-sports-main-content h3 a,
.mi-sports-sub-feat-text h4 a,
.mi-sports-list-text h4 a {
    color: #000000;
    text-decoration: none;
}

.mi-sports-right-col {
    display: flex;
    flex-direction: column;
}

.mi-sports-list-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #e0e0e0;
    align-items: flex-start;
}

.mi-sports-right-col .mi-sports-list-item:first-child {
    padding-top: 0;
}

.mi-sports-right-col .mi-sports-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mi-sports-list-img img {
    width: 150px;
    height: 95px;
    object-fit: cover;
}

.mi-sports-list-text {
    flex: 1;
}

.mi-sports-list-text h4 {
    font-size: 1.15rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 6px 0;
}


/* ==========================================================================
   ৯. মোবাইল রেসপনসিভ ডিজাইন (Responsive Layouts)
   ========================================================================== */
@media (max-width: 768px) {
    /* প্রধান ফিচার্ড নিউজ */
    .mi-featured-main-article {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* সাব-নিউজ গ্রিড */
    .mi-featured-sub-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mi-featured-sub-grid > article:first-child {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        padding-right: 0;
        padding-bottom: 20px;
    }

    /* শিক্ষা ও চাকরি সেকশন */
    .mi-category-grid-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* বিনোদন সেকশন */
    .mi-entertainment-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .mi-ent-left-column {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #c0c0c0;
        padding-bottom: 20px;
    }
    
    .mi-ent-left-column .mi-ent-sub-item:last-child {
        border-bottom: none;
    }

    /* লাইফস্টাইল ও টেক সেকশন */
    .mi-two-column-list-section {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* খেলাধুলা সেকশন */
    .mi-sports-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .mi-sports-left-col {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #c0c0c0;
        padding-bottom: 25px;
    }
    
    .mi-sports-right-col .mi-sports-list-item:first-child {
        padding-top: 15px;
    }
}