/* css/layout.css */
.hero {
    text-align: center;
    padding: 50px 20px; /* Inner padding for the content *inside* the hero block */
    
    /* Gradient Background */
    background-image: linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), rgba(var(--card-bg-rgb), 0.55)); 
    
    border: 1px solid var(--glass-card-border);
    box-shadow: var(--glass-card-shadow);
    
    /* Width, Centering, and Bottom Margin for the hero block itself */
    width: 90%; /* Makes the hero block narrower than full screen, creating side spacing */
    max-width: 1100px; /* Maximum width for the hero block, similar to navbar */
    margin-left: auto; /* Centers the hero block horizontally */
    margin-right: auto; /* Centers the hero block horizontally */
    margin-bottom: 30px; /* Space below the hero block */
    border-radius: 30px; /* Rounded corners for the hero block *
    
    /* .glass class (from base.css) will add backdrop-filter and its own border-radius */
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px; /* Increased gap */
}

.page-header { /* For pages like Articles, Category */
    margin-bottom: 30px;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

/* Post Page Layout (Main Content + Sidebar) */
.post-page-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first */
    gap: 30px;
}

.post-sidebar {
    /* .card and .glass classes will style the sidebar container */
    padding: 20px; /* Inner padding for sidebar content */
}

@media (min-width: 992px) {
    .post-page-container {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
    /* Apply max-width adjustment to the container itself for post pages */
    /* This requires the post content div to NOT have the container class */
    /* Assuming the structure is <div class="container post-page-container">...</div> */
     .container.post-page-container {
        max-width: 1200px; /* Wider for post pages with sidebar */
     }
}

@media (max-width: 768px) {
    .hero {
        padding: 30px 15px; /* Adjust inner padding for mobile */
        /* width: 95%; /* Optional: if you want the hero block slightly wider on mobile */
        margin-top: 25px; /* --- ADDED: Pushes hero down from the top on mobile --- */
    }
}