/* --- Styles for Blog Page (blog.html) --- */

.blog-container {
    text-align: center;
    padding: 40px 20px;
}

.blog-container h1 {
    margin-bottom: 10px;
    color: var(--light-primary);
}

.blog-intro {
    max-width: 600px;
    margin: 0 auto 40px auto;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--light-secondary);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.post-card {
    background-color: var(--light-container-bg);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
}

.post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This makes all cards in a row the same height */
}

.post-content h3 {
    color: var(--light-primary);
    margin-top: 0;
    margin-bottom: 15px;
}

.post-content p {
    color: var(--light-text);
    line-height: 1.6;
    flex-grow: 1; /* Pushes the button to the bottom */
    margin-bottom: 25px;
}

.post-content .cta-button {
    align-self: flex-start; /* Aligns button to the left */
}


/* --- Dark Mode Support --- */

body.dark-mode .blog-container h1 {
    color: var(--dark-primary);
}

body.dark-mode .blog-intro {
    color: var(--dark-secondary);
}

body.dark-mode .post-card {
    background-color: var(--dark-container-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}

body.dark-mode .post-card:hover {
    box-shadow: 0 8px 25px rgba(52, 152, 219, .25);
}

body.dark-mode .post-content h3 {
    color: var(--dark-primary);
}

body.dark-mode .post-content p {
    color: var(--dark-text);
}
/* --- Styles for Related Posts Section --- */

.related-posts-container {
    max-width: 1200px; /* Matches the main blog grid for consistency */
    margin: 60px auto 20px auto; /* Adds space above and below the section */
    padding: 0 20px; /* Ensures padding on smaller screens */
    text-align: center;
}

.related-posts-container h2 {
    color: var(--light-primary);
    margin-bottom: 30px;
    border-bottom: 2px solid var(--light-highlight);
    display: inline-block; /* Makes the border only as wide as the text */
    padding-bottom: 10px;
}

/* Dark Mode Support */
body.dark-mode .related-posts-container h2 {
    color: var(--dark-primary);
}