/**
 * Odys Layout Fixes
 * CSS fixes for the Odys-inspired blog layout to match the screenshot
 */

/* Main Layout Structure */
.main-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
}

@media (min-width: 992px) {
    .main-content-wrapper {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    
    .left-column {
        flex: 0 0 30% !important;
        position: sticky !important;
        top: 2rem !important;
    }
    
    .right-column {
        flex: 0 0 65% !important;
    }
}

/* Fix for the header layout */
.blog-header-wrapper {
    text-align: center !important;
    padding: 3rem 0 1.5rem !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Fix for the categories */
.blog-categories-wrapper {
    border-bottom: 1px solid var(--fg-border) !important;
    margin-bottom: 2.5rem !important;
    padding-bottom: 1rem !important;
}

.blog-categories {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    overflow-x: auto !important;
    padding-bottom: 0.5rem !important;
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
}

.blog-categories::-webkit-scrollbar {
    display: none !important;
}

/* Fix for category highlights */
.category-highlights-section {
    margin-bottom: 2rem !important;
}

.category-highlights {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.category-highlight-card {
    flex-direction: column !important;
    height: auto !important;
}

.category-highlight-image {
    height: 150px !important;
}

/* Fix for featured post section */
.featured-post-section {
    margin-bottom: 2.5rem !important;
}

.featured-post {
    flex-direction: column !important;
}

@media (min-width: 768px) {
    .featured-post {
        flex-direction: row !important;
    }
}

/* Fix for blog grid */
.blog-grid {
    grid-template-columns: repeat(1, 1fr) !important;
}

@media (min-width: 576px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Fix for blog cards */
.blog-card {
    height: 100% !important;
}

/* Fix for pagination */
.blog-pagination {
    margin-top: 2rem !important;
}

/* Fix for Astra container */
.ast-container,
.site-content .ast-container,
#primary .ast-container,
.content-area .ast-container,
.odys-blog-layout .ast-container {
    max-width: 1200px !important;
    padding: 0 1rem !important;
    display: block !important; /* Override the flex display */
    flex-direction: unset !important; /* Remove flex direction */
    flex-wrap: unset !important; /* Remove flex wrap */
    align-items: unset !important;
    justify-content: unset !important;
}

/* Override Astra's default layout */
.ast-container .ast-primary-content-area,
.ast-container #primary,
.ast-container #content,
.ast-container .content-area,
.ast-container .site-main,
#primary,
.content-area,
.site-main,
.odys-blog-layout {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: unset !important;
}

/* Fix for any flex-related issues in Astra's layout */
.site-content,
.site-main,
.content-area,
#primary {
    display: block !important;
}

/* Force block display on all direct children of .ast-container */
.ast-container > * {
    display: block !important;
    width: 100% !important;
}

/* Ensure our main content wrapper uses the correct display */
.main-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
}

/* Fix for the blog header and categories */
.blog-header-wrapper,
.blog-categories-wrapper {
    width: 100% !important;
    display: block !important;
}

/* Fix for mobile responsiveness */
@media (max-width: 768px) {
    .blog-header-wrapper {
        padding: 2rem 1rem 1rem !important;
    }
    
    .blog-title {
        font-size: 2rem !important;
    }
    
    .blog-subtitle {
        font-size: 1rem !important;
    }
    
    .category-highlight-title {
        font-size: 1rem !important;
    }
}

/* Fix for overlapping elements */
.blog-header {
    margin-bottom: 1rem !important;
}

.blog-categories a {
    white-space: nowrap !important;
}

/* Fix for Featured label */
.featured-label {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    background-color: var(--fg-primary) !important;
    color: white !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}

/* Fix for Latest Articles title */
.blog-grid-title {
    margin-bottom: 1.5rem !important;
}