/* --- Blog List Page --- */
.blog-list-section {
    padding: 4rem 0;
}

.post-listing {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
}

.post-listing:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.post-listing h2 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.post-listing h2 a {
    color: var(--text-color);
    text-decoration: none;
}

.post-listing h2 a:hover {
    color: var(--primary-color);
}

.post-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.post-excerpt {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* --- Single Blog Post Page --- */
.blog-post-container {
    max-width: 800px; /* Optimal reading width */
}

.blog-post {
    padding: 4rem 0;
}

.blog-post h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.blog-post .post-meta {
    margin-bottom: 3rem;
}

.blog-post h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.blog-post p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
}

.blog-post a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.blog-post a:hover {
    text-decoration: underline;
}

.blog-post .code-block-container {
    margin: 2rem 0;
}

/* --- NEW STYLES FOR BLOG MEDIA --- */

/* This styles the container DIV around your GIF */
.blog-media-placeholder {
    margin: 2.5rem 0; /* Adds vertical space to separate it from text */
    background-color: var(--bg-light); /* A subtle background color */
    border: 1px solid var(--border-color); /* A consistent border */
    border-radius: 8px; /* Rounded corners for a modern look */
    padding: 1rem; /* Adds some space inside the container */
    display: flex; /* Use flexbox for easy centering */
    justify-content: center; /* Horizontally centers the content (the GIF) */
    align-items: center; /* Vertically centers the content (if needed) */
    overflow: hidden; /* Ensures the GIF's corners don't poke out */
}

/* This styles the actual IMG tag inside the container */
.blog-media-placeholder img {
    max-width: 100%; /* Ensures the GIF is responsive and never overflows its container */
    height: auto; /* Maintains the GIF's aspect ratio */
    border-radius: 4px; /* Optional: adds a slight rounding to the GIF itself */
}