/* Article Content Styling */
.article-content {
    font-size: 1.1rem;
    line-height: 1.7;
}

.article-main-img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    object-fit: cover;
}

.list-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keyword Badges (Standard) */
.keyword-badge {
    background-color: #f1f3f5;
    color: #495057;
    padding: 0.4em 0.8em;
    text-decoration: none;
    font-size: 0.8rem;
    border: none;
    margin-right: 0.5rem;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.keyword-badge:hover {
    background-color: #e9ecef;
    color: #000;
}

/* Related Article Cards */
.related-article-card {
    border: none;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

.related-article-card:hover {
    transform: translateY(-5px);
}

.related-article-card img {
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 0;
}

.related-article-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Small Keyword Badges (for cards) */
.keyword-badge-sm {
    background-color: #f1f3f5;
    color: #495057;
    padding: 0.2em 0.5em;
    text-decoration: none;
    font-size: 0.7rem;
    border: none;
    margin-right: 0.3rem;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 2;
    /* Ensures clickability over stretched-link */
}

.keyword-badge-sm:hover {
    background-color: #e9ecef;
    color: #000;
}

/* Responsive adjustments for cards */
@media (min-width: 768px) and (max-width: 991.98px) {
    .related-article-card h5 {
        font-size: 1rem;
    }

    .related-article-card p {
        font-size: 0.8rem;
    }
}

/* Blog Specific Components */
.filter-section {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 3rem;
}


/* Pagination */
.pagination .page-link {
    color: #000;
    border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: #000;
    border-color: #000;
    color: #fff;
}