/* ==========================================================================
   BANNER SECTION
   ========================================================================== */
.section-banner-blog {
    background-image: url('../images/header-blog-article.webp');
}

/* ==========================================================================
   ASIDE INFO
   ========================================================================== */
.article-sidebar-card {
    background-color: var(--navbar-bg-color);
    border: 1px solid var(--separator-color);
    border-radius: 8px;
    padding: 16px 18px;
}
.article-sidebar-title { color: var(--heading-color); }

.article-hero img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

/* ==========================================================================
   ARTICLE BLOG
   ========================================================================== */
.article-meta { gap: .75rem; }
.article-meta i { opacity: .9; }
.article-meta .badge {
    background: transparent;
    border: 1px solid var(--separator-color);
    color: var(--heading-color);
}

.article-header-row {
    margin-bottom: 8px;
}

/* ==========================================================================
   SOCIAL LINKS
   ========================================================================== */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--hover-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--heading-color);
    background-color: var(--navbar-bg-color);
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
    font-family: var(--primary-font), sans-serif;
}

.social-link:hover {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
    transform: translateY(-1px);
}

.social-link i {
    font-size: 1.1rem;
}

/* ==========================================================================
   SPECIAL STYLES
   ========================================================================== */
.code-block {
    background: #0b0c0d08;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: 1rem;
}

.code-block pre {
    overflow: auto;
}

.code-caption {
    display: block;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media (max-width: 991px) {
    .article-hero img { height: 220px; }
}

@media (max-width: 576px) {
    .social-link { flex: 1 1 calc(50% - 8px); justify-content: center; }
}