/*
  Scoped and Corrected Styles for the "Don't Miss" section.
*/

body {
    background-color: white;
}

.dont-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dont-miss-section {
    font-family: 'Oswald', sans-serif;
    margin: 20px auto;
    padding: 40px;
    background-color: #fdfdff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* --- CHANGE 1: SIMPLIFIED HEADER --- */
/* The header no longer needs to be a flex container */
.dont-miss-section .section-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
    margin-bottom: 0;
    /* Margin will be on the nav now */
}

.dont-miss-section .dont-section-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    position: relative;
    padding-bottom: 15px;
    color: #000000;
}

.dont-miss-section .dont-section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 35%;
    /* Adjusted width for aesthetics */
    height: 3px;
    background-color: #d9534f;
}

/* --- CHANGE 2: STYLING THE STANDALONE NAV --- */
.dont-miss-section .filter-nav {
    display: flex;
    align-items: center;
    gap: 8px; /* This is now handled by margin-right on the buttons, but can be kept for fallback */
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 30px;
    /* ADD THIS LINE to create the gray line the buttons sit on */
    border-bottom: 1px solid #dee2e6;
}

/* --- CHANGE 2: Define Column Sizes --- */
/* This is your main content area on the left */
.dont-right {
    flex: 1; /* Allows this column to grow and fill remaining space */
    min-width: 0; /* Prevents content from overflowing */
}

/* This is your sidebar on the right */
.dont-left {
    flex-basis: 300px; /* Sets a fixed width for the sidebar */
    flex-shrink: 0; /* Prevents the sidebar from shrinking */
}

/* --- Base Button Style (Applies to both filter and tab buttons) --- */
.dont-miss-section .filter-btn,
.dont-miss-section .tab-btn {
    border: none;
    background: none;
    /* Removed horizontal padding to let the text define the width */
    padding: 10px 0; /* Only top/bottom padding */
    cursor: pointer;
    font-size: 15px;
    color: #6c757d;
    position: relative;
    /* Spacing between buttons */
    margin-right: 20px;
    font-family: 'Oswald', sans-serif; /* Ensures font consistency */
    font-weight: 500; /* A good default weight */
}

/* --- Active State (Applies to the currently selected button in both areas) --- */
.dont-miss-section .filter-btn.active,
.dont-miss-section .tab-btn.active {
    font-weight: bold;
    color: #EBA219; /* The active color from the sidebar tabs */
}

/* --- Underline for Active State (Applies to both) --- */
.dont-miss-section .filter-btn.active::after,
.dont-miss-section .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Aligns with the parent's bottom border */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffc107; /* The yellow underline color */
}

/* --- Styling for the "More" dropdown button to match --- */
.dont-miss-section .more-btn {
    padding-right: 10px; /* Add some space for the dropdown arrow */
}

/* Dropdown Menu styling (no changes here) */
.dont-miss-section .dropdown {
    position: relative;
    display: inline-block;
}

.dont-miss-section .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
    border: 1px solid #ddd;
    border-radius: 4px;
    right: 0;
}

.dont-miss-section .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dont-miss-section .dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dont-miss-section .dropdown:hover .dropdown-content {
    display: block;
}


/* --- CHANGE 3: UPDATED GRID FOR TWO COLUMNS --- */
.dont-miss-section .content-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    /* Adjusted for two columns */
    gap: 30px;
    align-items: start;
}

/* Card Styling (no changes here) */
.dont-miss-section .main-article1,
.dont-miss-section .side-article,
.dont-miss-section .sidebar {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.dont-miss-section .sidebar {
    padding: 20px;
}

.dont-miss-section .main-article1 .article-image {
    position: relative;
    margin: -15px -15px 15px -15px;
}

.dont-miss-section .main-article1 .article-image img {
    width: 100%;
    height: auto;
    display: block;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dont-miss-section .category-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #8e44ad;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
}

.dont-miss-section .article-meta {
    color: #999999;
    font-size: 13px;
    margin-bottom: 8px;
}

.dont-miss-section .article-title {
    font-size: 22px;
    margin: 0 0 10px 0;
    line-height: 1.3;
    font-weight: bold;
    color: #2D2D2D;
}

.dont-miss-section .article-excerpt {
    color: #495057;
    font-size: 15px;
    line-height: 1.6;
}

.dont-miss-section .secondary-articles,
.dont-miss-section .sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: none;
    padding: 0;
    border: none;
}

.dont-miss-section .side-article {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dont-miss-section .side-article img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.dont-miss-section .side-article-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    color: #2D2D2D;
}

/* Sidebar Tabs */
.dont-miss-section .sidebar-tabs {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 35px;
}

.dont-miss-section .tab-btn {
    border: none;
    background: none;
    padding: 10px 10px 10px 0;
    cursor: pointer;
    font-size: 15px;
    color: #6c757d;
    position: relative;
    margin-right: 20px;
}

.dont-miss-section .tab-btn.active {
    font-weight: bold;
    color: #EBA219;
}

.dont-miss-section .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffc107;
}

/* --- Responsive Adjustments --- */

/* For Tablets and smaller devices */
@media (max-width: 1024px) {
    .dont-miss-section {
        /* flex-direction: column; */
        padding: 30px;
        gap: 10px;
    }

    .dont-miss-section .content-grid {
        /* grid-template-columns: 1fr; */
        /* Stack the columns */
    }

    .dont-header {
        /* flex-direction: column; */
        align-items: flex-start;
    }

    .dont-miss-section .filter-nav {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .dont-miss-section .sidebar-tabs {
        margin-bottom: 24px;
        justify-content: center;
    }

    .dont-miss-section .side-article {
        gap: 10px;
    }

    .dont-miss-section .secondary-articles,
    .dont-miss-section .sidebar-content {
        gap: 5px;
    }

    .dont-miss-section {
        /* flex-direction: column; */
        padding: 10px;
    }

    .dont-miss-section .content-grid {
        gap: 10px;
    }

    .dont-miss-section .sidebar {
        padding: 10px;
    }
    
    .dont-miss-section .filter-btn{
    margin-right: 10px;
}
}

@media (max-width: 992px) {
    .dont-miss-section {
        /* flex-direction: column; */
        padding: 20px;
    }

    .dont-miss-section .content-grid {
        grid-template-columns: 1fr;
        /* Stack the columns */
    }

    .dont-miss-section .main-article1 .article-image img {
        width: 75%;
        margin: auto;
    }

    .dont-miss-section .category-tag {
        left: 90px;
    }

    .dont-miss-section .side-article {
        gap: 30px;
    }

}

/* For Mobile Phones */
@media (max-width: 768px) {
    .dont-miss-section {
        flex-direction: column;
    }

    .dont-miss-section .main-article1 .article-image img {
        width: 100%;
        margin: auto;
    }

    .dont-miss-section .category-tag {
        left: 15px;
    }

    .dont-miss-section .dont-section-title {
        font-size: 24px;
    }

    .dont-miss-section .filter-btn {
        padding: 6px 4px;
        font-size: 13px;
    }

    .dont-miss-section .article-title {
        font-size: 20px;
    }

    .dont-miss-section .article-excerpt {
        font-size: 14px;
    }

    .dont-miss-section .side-article {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .dont-miss-section .side-article img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    /* --- KEY CHANGE HERE --- */
    /* Apply grid to both the sidebar and the dynamic secondary articles */
    .dont-left .sidebar-content,
    .secondary-articles {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* Two equal columns */
        gap: 20px;
    }

    .dont-right .secondary-articles {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        /* Two equal columns */
        gap: 20px;
    }

    /* --- AND HERE --- */
    /* Ensure articles in both sections behave the same */
    .dont-left .side-article,
    .secondary-articles .side-article {
        display: flex;
        flex-direction: column;
    }

    .dont-miss-section .main-article1 {
        width: 70%;
        margin: auto;
    }

    .dont-miss-section .side-article {
        gap: 0px;
    }

    .dont-miss-section .side-article {
        padding: 10px;
    }

    /* .dont-header {
        flex-direction: column;
    } */

    .dont-miss-section .dont-section-title {
        padding-bottom: 0px;
        margin-top: 10px;
    }
    

.dont-miss-section .main-article1, .dont-miss-section .side-article, .dont-miss-section .sidebar {
    margin: auto;
    padding:auto;
}
}

/* For smaller Mobile Phones */
@media (max-width: 480px) {
    .dont-miss-section .main-article1 {
        width: 100%;
        margin: auto;
    }

    /* --- KEY CHANGE HERE --- */
    /* Apply grid to both the sidebar and the dynamic secondary articles */
    .dont-left .sidebar-content,
    .secondary-articles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dont-right .secondary-articles {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dont-miss-section {
        padding: 15px;
        margin: 0px 10px;
    }

    .dont-miss-section .side-article img {
        margin-bottom: 5px;
    }

    .dont-miss-section .dont-section-title {
        font-size: 22px;
    }

    .dont-miss-section .filter-nav {
        gap: 6px;
    }

    .dont-miss-section .filter-btn {
        padding: 5px 1px;
        font-size: 12px;
    }

    .dont-miss-section .dropdown-content a {
        padding: 10px 14px;
        font-size: 13px;
    }

    .dont-miss-section .article-title {
        font-size: 18px;
    }

    .dont-miss-section .side-article-title {
        font-size: 13px;
    }

    .dont-miss-section .tab-btn {
        font-size: 14px;
        margin-right: 15px;
    }
    
        .dont-miss-section .filter-btn{
    margin-right: 4px;
}
}

@media (max-width: 400px) {
    .dont-header {
        flex-direction: column;
    }
}

@media (max-width: 376px) {
    .dont-miss-section .sidebar-tabs {
        margin-bottom: 8px;
        justify-content: center;
    }

    .dont-miss-section .side-article {
        padding: 3px;
    }
}

/* Add this to your CSS file */
.no-articles-found {
  color: black;
  padding: 20px 0; /* Optional: Adds some spacing */
}



/*animation*/
/* --- Animations for the "Don't Miss" Section --- */

/* 1. Hover Effect for Article Cards */
/* This adds a "lift" effect to the articles when you hover over them */
.dont-miss-section .main-article1,
.dont-miss-section .side-article {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dont-miss-section .article-link-wrapper:hover .main-article1,
.dont-miss-section .article-link-wrapper:hover .side-article {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* --- NEW: Main Article Image Hover Effect --- */

/* First, ensure the image container clips the zooming image */
.dont-miss-section .main-article1 .article-image {
    overflow: hidden; 
}

/* Add a smooth transition to the image itself */
.dont-miss-section .main-article1 .article-image img {
    transition: transform 0.4s ease-out;
}

/* On hover, scale the image up slightly for a zoom effect */
.dont-miss-section .article-link-wrapper:hover .main-article1 .article-image img {
    transform: scale(1.05);
}
/* --- END: New Additions --- */


/* 2. Scroll-in Animation Keyframe */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Initial "Hidden" State for Animation Elements */
/* Before the animation runs, the elements are invisible and moved down */
.dont-miss-section .main-article1,
.dont-miss-section .secondary-articles,
.dont-miss-section .dont-left { /* Targeting the sidebar wrapper */
    opacity: 0;
}

/* 4. Animation Trigger */
/* When the .in-view class is added by JavaScript, we run the animation */
.dont-miss-section.in-view .main-article1,
.dont-miss-section.in-view .secondary-articles,
.dont-miss-section.in-view .dont-left {
    animation: slideInFromBottom 0.7s ease-out forwards;
}

/* 5. Staggered Animation Delays */
/* This makes the elements appear one after another for a smoother effect */
.dont-miss-section.in-view .main-article1 {
    animation-delay: 0.2s;
}

.dont-miss-section.in-view .secondary-articles {
    animation-delay: 0.4s;
}

.dont-miss-section.in-view .dont-left {
    animation-delay: 0.6s;
}