/* BLOG LAYOUT AND ALIGNMENT FIX */

/* Blog container centered with readable width */
article.blog-single {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--al-space-4xl) var(--al-space-lg);
}

/* Keep title and meta centered */
.blog-single .blog-single-header {
    text-align: center;
}

.blog-single .blog-single-title {
    text-align: center;
}

.blog-single .blog-single-meta {
    justify-content: center;
    text-align: center;
}

/* Force left alignment for blog content */
.blog-single .blog-single-content,
.blog-single .blog-single-content p,
.blog-single .blog-single-content h2,
.blog-single .blog-single-content h3,
.blog-single .blog-single-content h4,
.blog-single .blog-single-content h5,
.blog-single .blog-single-content h6,
.blog-single .blog-single-content ul,
.blog-single .blog-single-content ol,
.blog-single .blog-single-content li,
.blog-single .blog-single-content blockquote,
.blog-single .blog-single-content pre,
.blog-single .blog-single-content table,
.blog-single .blog-single-content div {
    text-align: left !important;
}

/* Tags centered */
.blog-single .blog-tags {
    text-align: center;
    margin-top: var(--al-space-3xl);
}

/* Related posts section */
.related-posts {
    width: min(1200px, calc(100vw - 2rem));
    margin: var(--al-space-4xl) auto 0;
}

.related-posts .section-title {
    text-align: center;
}

.related-posts .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--al-space-xl);
    margin-top: 0;
}

.related-posts .blog-card {
    overflow: hidden;
    border: 1px solid rgba(0, 255, 78, 0.18);
    border-radius: var(--al-radius-lg);
    background: linear-gradient(135deg, rgba(0, 255, 78, 0.055), rgba(0, 0, 0, 0.35));
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.related-posts .blog-card:hover {
    border-color: rgba(0, 255, 78, 0.36);
    transform: translateY(-2px);
}

.related-posts .blog-card-image {
    display: block;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 255, 78, 0.12);
    background: rgba(0, 255, 78, 0.04);
}

.related-posts .blog-card-image picture {
    display: block;
}

.related-posts .blog-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    object-position: center;
}

.related-posts .blog-card-image--contain img {
    padding: var(--al-space-lg);
    object-fit: contain;
}

.related-posts .blog-card-content {
    padding: var(--al-space-lg);
}

.related-posts .blog-card-title {
    margin: 0 0 var(--al-space-sm);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.15;
}

.related-posts .blog-card-title a,
.related-posts .blog-card-title a:visited {
    color: var(--al-white);
    text-decoration: none;
}

.related-posts .blog-card-title a:hover {
    color: var(--al-primary);
}

.related-posts time {
    color: var(--al-gray-400);
    font-size: 0.9rem;
}