/* Customs 101 Layout Fix - Sidebar beside content */

/* Main layout container */
.customs101-content .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Blog layout with sidebar - flexbox */
.blog-layout-with-sidebar {
    display: flex !important;
    gap: 40px !important;
    align-items: flex-start !important;
    margin-top: 40px;
}

/* Main content area - 70% width */
.blog-main-content {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    width: 70% !important;
}

/* Sidebar - 30% width */
.sidebar,
.widget-area,
.blog-sidebar {
    flex: 0 0 calc(30% - 40px) !important;
    max-width: calc(30% - 40px) !important;
    width: calc(30% - 40px) !important;
    position: sticky;
    top: 100px;
}

/* Ensure proper spacing */
.customs101-header {
    margin-bottom: 30px;
}

.magazine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: start;
}

/* Blog post cards - auto height based on content */
.magazine-post-card {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: unset !important;
}

.magazine-post-card .post-content {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
}

.magazine-post-card .post-header {
    margin-bottom: 15px;
}

.magazine-post-card .post-excerpt {
    flex: 0 0 auto !important;
    margin-bottom: 20px;
    align-self: flex-start !important;
    width: 100%;
}

.magazine-post-card .post-footer {
    margin-top: auto;
    align-self: flex-start;
}

/* Responsive layout */
@media (max-width: 1024px) {
    .blog-layout-with-sidebar {
        flex-direction: column !important;
    }
    
    .blog-main-content,
    .sidebar,
    .widget-area,
    .blog-sidebar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .magazine-grid {
        grid-template-columns: 1fr;
    }
}