/* Additional styles for VPS Calculator */

/* Fix for blog articles grid layout */
.blog-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Special layout for filtered articles */
.filtered-view .blog-articles {
    display: grid; /* Keep grid layout when filtering */
    grid-template-columns: 1fr; /* One column for filtered view */
    gap: 30px;
}

.filtered-view .blog-article {
    width: 100%;
    margin-bottom: 0; /* Grid gap will handle spacing */
    min-height: auto; /* Allow natural height */
    height: auto;
}

/* Fix for blog article display when filtering */
.blog-article {
    height: auto;
    min-height: 400px; /* Set a minimum height for consistency */
    display: flex;
    flex-direction: column;
}

.blog-article .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-article .article-excerpt {
    flex: 1;
}

/* Fix for blog pagination position - now outside blog-articles */
.blog-pagination {
    display: flex;
    justify-content: center; /* Center the pagination */
    margin-top: 40px; /* Add more space from the articles */
    margin-bottom: 20px; /* Add some space at the bottom */
    width: 100%; /* Ensure full width */
    clear: both; /* Clear any floats */
    position: relative; /* Create a new stacking context */
    z-index: 10; /* Ensure it's above other elements */
    background-color: transparent; /* Ensure no background color */
    grid-column: 2; /* Position in the second column of the grid */
}

.filtered-view .blog-pagination {
    display: flex !important; /* Force flex display */
    flex-direction: row !important; /* Force horizontal layout */
    justify-content: center !important; /* Force center alignment */
    position: relative !important; /* Ensure proper positioning */
    margin-top: 40px !important; /* Add space from the articles */
    margin-bottom: 20px !important; /* Add space at the bottom */
    width: 100% !important; /* Ensure full width */
    height: auto !important; /* Natural height */
    background-color: transparent !important; /* Remove any background */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any box shadows */
    grid-column: 2 !important; /* Force position in the second column of the grid */
}

/* Fix for blog-content-wrapper to handle pagination properly */
.blog-content-wrapper {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    grid-template-rows: auto auto !important; /* Add a second row for pagination */
    gap: 40px !important;
    padding: 60px 0 !important;
}

/* Ensure blog-articles takes the full width of its grid cell */
.blog-articles {
    grid-column: 2 !important;
    width: 100% !important;
    grid-row: 1 !important; /* First row */
}

/* Ensure sidebar stays in the first column */
.blog-sidebar {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important; /* Make sidebar span both rows */
    height: fit-content !important; /* Prevent it from stretching */
    align-self: start !important; /* Align to the top */
}

/* Ensure pagination is in the second row of the second column */
.blog-pagination {
    grid-column: 2 !important;
    grid-row: 2 !important; /* Second row */
    margin-top: 20px !important;
}

.blog-pagination button,
.blog-pagination .pagination-ellipsis {
    display: inline-block !important;
    margin: 0 5px !important;
}

/* Ensure pagination buttons are properly displayed */
.filtered-view .blog-pagination button,
.filtered-view .blog-pagination .pagination-ellipsis,
.filtered-view .blog-pagination .pagination-next {
    display: inline-block !important;
    margin: 0 5px !important;
    float: none !important; /* Prevent floating */
}

/* Fix for the red vertical bar that appears when filtering */
.filtered-view .blog-articles::before,
.filtered-view .blog-articles::after,
.filtered-view .blog-pagination::before,
.filtered-view .blog-pagination::after {
    display: none !important; /* Remove any pseudo-elements that might create the red bar */
    content: none !important; /* Ensure no content is displayed */
    background: none !important; /* Remove any background */
    border: none !important; /* Remove any borders */
}

/* Additional fixes for filtered view */
.filtered-view .blog-articles {
    display: block !important; /* Force block display instead of grid */
    background-color: transparent !important; /* Ensure no background color */
    border: none !important; /* Remove any borders */
    box-shadow: none !important; /* Remove any box shadows */
    padding: 0 !important; /* Remove any padding */
    margin: 0 !important; /* Remove any margin except bottom */
    margin-bottom: 20px !important; /* Keep some space at the bottom */
}

/* Ensure blog articles have proper layout in filtered view */
.filtered-view .blog-article {
    display: flex !important;
    flex-direction: row !important; /* Force horizontal layout */
    align-items: flex-start !important;
    background-color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    width: 100% !important; /* Ensure full width */
    max-width: 100% !important; /* Prevent overflow */
    height: auto !important; /* Natural height */
    min-height: 0 !important; /* Override any min-height */
}

.filtered-view .blog-article .article-image {
    width: 300px !important;
    height: 200px !important;
    flex-shrink: 0 !important;
    min-width: 200px !important; /* Ensure minimum width */
}

.filtered-view .blog-article .article-content {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Responsive fix for blog pagination */
@media (max-width: 992px) {
    /* On smaller screens, the grid becomes a single column */
    .blog-content-wrapper {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        grid-template-rows: auto auto auto; /* Three rows: sidebar, articles, pagination */
    }
    
    /* Sidebar takes the first row */
    .blog-sidebar {
        grid-column: 1;
        grid-row: 1;
    }
    
    /* Articles take the second row */
    .blog-articles {
        grid-column: 1;
        grid-row: 2;
    }
    
    /* Pagination takes the third row */
    .blog-pagination {
        grid-column: 1; /* Full width on smaller screens */
        grid-row: 3;
        justify-content: center; /* Center on smaller screens */
        margin-top: 20px; /* Less space on smaller screens */
    }
    
    /* Ensure pagination is properly positioned in filtered view on smaller screens */
    .filtered-view .blog-pagination {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}